My final project is an infographic of America with the number of COVID-19 cases in each state. Based on the number of cases in America, and how high the number is, the color of each state varies from a medium pink to a very dark red.
My process and code is very long because I planned out my steps wrong and had the wrong approach. I thought if I separated each state, I would be able to let mouseX and mouseY detect each state. However, because the pngs are the same size, my approach did not work out.
sketch
//Chris Han
//Final Project
//15-104 Section C
var California;
var Alabama;
var Arizona;
var Arkansas;
var Colorado;
var Connecticut;
var Delaware;
var Florida;
var Georgia;
var Idaho;
var Illinois;
var Indiana;
var Iowa;
var Kansas;
var Kentucky;
var Louisiana;
var Maine;
var Maryland;
var Massachussets;
var Michigan;
var Mississippi;
var Minnesota;
var Montana;
var Nebraska;
var Nevada;
var NewJersey;
var NewMexico;
var NewYork;
var NorthCarolina;
var Ohio;
var NorthDakota;
var Oklahoma;
var Oregon;
var Pennsylvania;
var Virginia;
var Washington;
var WestVirginia;
var RhodeIsland;
var SouthCarolina;
var SouthDakota;
var Tennessee;
var Texas;
var Vermont;
var Utah;
var Wisconsin;
var Wyoming;
var Missouri;
var NewHampshire;
function preload(){
California = loadImage("https://i.imgur.com/M90B6i6.png");
Alabama = loadImage("https://i.imgur.com/A0rMfn9.png");
Arizona = loadImage("https://i.imgur.com/FZgFQXG.png");
Arkansas = loadImage("https://i.imgur.com/mady7aS.png");
Colorado = loadImage("https://i.imgur.com/Cm0XtJk.png");
Connecticut = loadImage("https://i.imgur.com/Kgbe7x6.png");
Delaware = loadImage("https://i.imgur.com/gPJn6me.png");
Florida = loadImage("https://i.imgur.com/hH4ByDe.png");
Georgia = loadImage("https://i.imgur.com/QqS08V1.png");
Idaho = loadImage("https://i.imgur.com/IAWMdLX.png");
Illinois = loadImage("https://i.imgur.com/dFEAfM3.png");
Indiana = loadImage("https://i.imgur.com/yINwRlF.png");
Iowa = loadImage("https://i.imgur.com/bDpW2F1.png");
Kansas = loadImage("https://i.imgur.com/viHxihJ.png");
Kentucky = loadImage("https://i.imgur.com/dYri9KS.png");
Louisiana = loadImage("https://i.imgur.com/fmCBz3P.png");
Maine = loadImage("https://i.imgur.com/MLwg0xh.png");
Maryland = loadImage("https://i.imgur.com/GR8e2uJ.png");
Massachussets = loadImage("https://i.imgur.com/llu4pfW.png");
Michigan = loadImage("https://i.imgur.com/Dzu9Anc.png");
Mississippi = loadImage("https://i.imgur.com/HRFksTw.png");
Minnesota = loadImage("https://i.imgur.com/PQ2rbnn.png");
Montana = loadImage("https://i.imgur.com/FFZVEDr.png");
Nebraska = loadImage("https://i.imgur.com/pjSdpc4.png");
Nevada = loadImage("https://i.imgur.com/gKE4OD7.png");
NewJersey = loadImage("https://i.imgur.com/pLxSZQ6.png");
NewMexico = loadImage("https://i.imgur.com/ZxZ5TGy.png");
NewYork = loadImage("https://i.imgur.com/fOMfdss.png");
NorthCarolina = loadImage("https://i.imgur.com/ml7w2CO.png");
Ohio = loadImage("https://i.imgur.com/P6npxwO.png");
NorthDakota = loadImage("https://i.imgur.com/IHceHrO.png");
Oklahoma = loadImage("https://i.imgur.com/YUe8N4U.png");
Oregon = loadImage("https://i.imgur.com/lKD2lzT.png");
Pennsylvania = loadImage("https://i.imgur.com/q8BZJJY.png");
Virginia = loadImage("https://i.imgur.com/xXbl27h.png");
Washington = loadImage("https://i.imgur.com/iYUxkXx.png");
WestVirginia = loadImage("https://i.imgur.com/opvQBQx.png");
RhodeIsland = loadImage("https://i.imgur.com/Eqyjeyw.png");
SouthCarolina = loadImage("https://i.imgur.com/n7mnprl.png");
SouthDakota = loadImage("https://i.imgur.com/0dnuWnc.png");
Tennessee = loadImage("https://i.imgur.com/fA9Ey2X.png");
Texas = loadImage("https://i.imgur.com/N3H2oM5.png");
Vermont = loadImage("https://i.imgur.com/VKAgM5K.png");
Utah = loadImage("https://i.imgur.com/HsGInYv.png");
Wisconsin = loadImage("https://i.imgur.com/1706iC4.png");
Wyoming = loadImage("https://i.imgur.com/P2FMqfi.png");
NewHampshire = loadImage("https://i.imgur.com/JUHRFya.png");
Missouri = loadImage("https://i.imgur.com/KtNPgmC.png");
}
function setup() {
createCanvas(600,400);
//background('white');
background('white');
}
function draw() {
textSize(10);
fill('black');
text('COVID-19 cases in America', 250, 70);
textSize(7);
text('click on any state to start',270, 85);
California.resize( 400,400);
image(California, 0,0);
Alabama.resize( 400,400);
image(Alabama, 0, 0);
Arizona.resize( 400,400);
image(Arizona, 0, 0);
Arkansas.resize( 400, 400);
image(Arkansas, 0 , 0);
Colorado.resize( 400, 400);
image(Colorado, 0, 0);
Connecticut.resize( 400, 400);
image(Connecticut, 0, 0);
Delaware.resize(400, 400);
image(Delaware, 0,0);
Florida.resize(400, 400);
image(Florida, 0, 0);
Georgia.resize(400, 400);
image(Georgia, 0, 0);
Idaho.resize(400, 400);
image(Idaho, 0, 0);
Illinois.resize(400, 400);
image(Illinois, 0, 0);
Indiana.resize(400, 400);
image(Indiana, 0, 0);
Iowa.resize(400, 400);
image(Iowa, 0, 0);
Kansas.resize(400,400);
image(Kansas, 0, 0);
Kentucky.resize(400,400);
image(Kentucky, 0, 0);
Louisiana.resize(400,400);
image(Louisiana, 0, 0);
Maine.resize(400,400);
image(Maine, 0, 0);
Maryland.resize(400,400);
image(Maryland, 0, 0);
Massachussets.resize(400,400);
image(Massachussets, 0, 0);
Michigan.resize(400,400);
image(Michigan, 0, 0);
Mississippi.resize(400,400);
image(Mississippi, 0, 0);
Minnesota.resize(400,400);
image(Minnesota, 0, 0);
Montana.resize(400,400);
image(Montana, 0, 0);
Nebraska.resize(400,400);
image(Nebraska, 0, 0);
Nevada.resize(400,400);
image(Nevada, 0, 0);
NewJersey.resize(400,400);
image(NewJersey, 0, 0);
NewMexico.resize(400,400);
image(NewMexico, 0, 0);
NewYork.resize(400,400);
image(NewYork, 0, 0);
NorthCarolina.resize(400,400);
image(NorthCarolina, 0, 0);
Ohio.resize(400,400);
image(Ohio, 0, 0);
NorthDakota.resize(400,400);
image(NorthDakota, 0, 0);
Oklahoma.resize(400,400);
image(Oklahoma, 0, 0);
Oregon.resize(400,400);
image(Oregon, 0, 0);
Pennsylvania.resize(400,400);
image(Pennsylvania, 0, 0);
Virginia.resize(400,400);
image(Virginia, 0, 0);
Washington.resize(400,400);
image(Washington, 0, 0);
WestVirginia.resize(400,400);
image(WestVirginia, 0, 0);
RhodeIsland.resize(400,400);
image(RhodeIsland, 0, 0);
SouthCarolina.resize(400,400);
image(SouthCarolina, 0, 0);
Tennessee.resize(400,400);
image(Tennessee, 0, 0);
Texas.resize(400,400);
image(Texas, 0, 0);
Vermont.resize(400,400);
image(Vermont, 0, 0);
Utah.resize(400,400);
image(Utah, 0, 0);
Wisconsin.resize(400,400);
image(Wisconsin, 0, 0);
Wyoming.resize(400,400);
image(Wyoming, 0, 0);
SouthDakota.resize(400,400);
image(SouthDakota, 0, 0);
NewHampshire.resize(400,400);
image(NewHampshire, 0, 0);
Missouri.resize(400,400);
image(Missouri, 0, 0);
mouseClicked();
}
function mouseClicked(){
//CALIFORNIA
if (mouseX > 40 & mouseX < 65 && mouseY > 115 && mouseY < 235) {
textSize(5);
fill('white');
text('CA, 1.49M', 45, 170);
}
//nevada
if(mouseX > 59 & mouseX < 102 && mouseY > 126 && mouseY < 211){
textSize(5);
fill('white');
text('NV, 179K', 70, 160);
}
//oregon
if(mouseX > 41 & mouseX < 84 && mouseY < 126 && mouseY > 86){
textSize(5);
fill('white');
text('OR, 89K', 70, 104);
}
//washington
if( mouseY > 49 & mouseY < 94 && mouseX < 95 && mouseX > 62 ){
textSize(5);
fill('white');
text('WA, 201K', 70, 75);
}
//idaho
if (mouseX > 92 & mouseX < 111 && mouseY > 64 && mouseY < 140){
textSize(5);
fill('white');
text('ID, 118K', 95, 123);
}
//utah
if( mouseX > 93 & mouseX < 126 && mouseY > 143 && mouseY < 199){
textSize(5);
fill('white');
text('utah lol', 102, 176);
}
//arizona
if( mouseX > 81 & mouseX < 119 && mouseY > 198 && mouseY < 262){
textSize(5);
fill('white');
text('AZ, 390K', 90, 221);
}
//montana
if ( mouseX > 110 & mouseX < 170 && mouseY > 72 && mouseY < 120){
textSize(5);
fill('white');
text('MT, 71K', 127, 92);
}
//wyoming
if ( mouseX > 121 & mouseX < 165 && mouseY > 119 && mouseY < 164){
textSize(5);
fill('white');
text('WY, 38K', 133, 142);
}
//colorado
if ( mouseX > 129 & mouseX < 173 && mouseY > 166 && mouseY < 209){
textSize(5);
fill('white');
text('CO, 283K ', 136, 187);
}
//new mexico
if (mouseX > 118 & mouseX < 160 && mouseY > 209 && mouseY < 262){
textSize(5);
fill('white');
text('NM, 117K', 127, 235);
}
//north dakota
if (mouseX > 174 & mouseX < 212 && mouseY > 87 && mouseY < 119){
textSize(5);
fill('white');
text('ND, 87K ', 179, 101);
}
//south dakota
if ( mouseX > 168 & mouseX < 212 && mouseY > 120 && mouseY < 152){
textSize(5);
fill('white');
text('SD, 89K', 176, 134);
}
//nebraska
if ( mouseX > 165 & mouseX < 211 && mouseY > 153 && mouseY < 185){
textSize(5);
fill('white');
text('NE, 147K', 173, 159);
}
//kansas
if ( mouseX > 173 & mouseX < 219 && mouseY > 186 && mouseY < 218){
textSize(5);
fill('white');
text('KS, 188K', 179, 198);
}
//oklahoma
if ( mouseX > 182 & mouseX < 220 && mouseY > 217 && mouseY < 254 ){
textSize(5);
fill('white');
text('OK, 229K', 187, 231);
}
//texas
if ( mouseX > 160 & mouseX < 220 && mouseY > 250 && mouseY < 338){
textSize(5);
fill('white');
text('TX, 1.42M', 174, 274);
}
//minnesota
if (mouseX > 212 & mouseX < 237 && mouseY > 92 && mouseY < 150){
textSize(5);
fill('white');
text('MN, 371K', 220, 112);
}
//iowa
if (mouseX > 213 & mouseX < 243 && mouseY > 150 && mouseY < 181){
textSize(5);
fill('white');
text('IA, 254K ', 220, 164);
}
//missouri
if (mouseX > 220 & mouseX < 246 && mouseY > 183 && mouseY < 226){
textSize(5);
fill('white');
text('MO, 355K ', 226, 207);
}
//arkansas
if (mouseX > 219 & mouseX < 246 && mouseY > 227 && mouseY < 264){
textSize(5);
fill('white');
text('AR, 182K', 226, 244);
}
//louisiana
if( mouseX > 226 & mouseX < 240 && mouseY > 265 && mouseY < 302){
textSize(5);
fill('white');
text('LA, 264K ', 229, 277);
}
//wisconin
if(mouseX > 236 & mouseX < 265 && mouseY > 118 && mouseY < 161){
textSize(5);
fill('white');
text('WI, 461K', 243, 133);
}
//illinois
if(mouseX > 242 & mouseX < 266 && mouseY > 162 && mouseY < 218){
textSize(5);
fill('white');
text('IL, 835K', 249, 188);
}
//kentucky
if( mouseX > 256 & mouseX < 302 && mouseY > 207 && mouseY < 222){
textSize(5);
fill('white');
text('KY, 221K', 272, 215);
}
//tennessee
if(mouseX > 254 & mouseX < 296 && mouseY > 222 && mouseY < 241){
textSize(5);
fill('white');
text('TN, 426K', 261, 233);
}
//Mississippi
if(mouseX > 244 & mouseX < 263 && mouseY > 243 && mouseY < 287){
textSize(5);
fill('white');
text('MS, 175K', 244, 263);
}
//michigan
if(mouseX > 274 & mouseX < 296 && mouseY > 127 && mouseY < 166){
textSize(5);
fill('white');
text('MI, 460K ', 276, 145);
}
//indiana
if( mouseX > 267 & mouseX < 285 && mouseY > 168 && mouseY < 203){
textSize(5);
fill('white');
text('IN, 415K', 270, 185);
}
//alabama
if( mouseX > 263 & mouseX < 286 && mouseY > 243 && mouseY < 285){
textSize(5);
fill('white');
text('AL, 289K', 270, 264);
}
//ohio
if( mouseX > 285 & mouseX < 311 && mouseY > 169 && mouseY < 198){
textSize(5);
fill('white');
text('OH, 542K', 289, 184);
}
//georgia
if( mouseX > 286 & mouseX < 313 && mouseY > 242 && mouseY < 288){
textSize(5);
fill('white');
text('GA, 513K', 293, 266);
}
//florida
if( mouseX > 307 & mouseX < 327 && mouseY > 289 && mouseY < 346){
textSize(5);
fill('white');
text('FL, 1.11M', 309, 311);
}
//west virginia
if (mouseX > 299 & mouseX < 322 && mouseY > 186 && mouseY < 216){
textSize(5);
fill('white');
text('WV, 60K', 303, 200);
}
//virginia
if (mouseX > 299 & mouseX < 343 && mouseY > 196 && mouseY < 219){
textSize(5);
fill('white');
text('VA, 274K', 318, 209);
}
//north carolina
if (mouseX > 299 & mouseX < 347 && mouseY > 220 && mouseY < 241){
textSize(5);
fill('white');
text('NC, 425K', 312, 230);
}
//south carolina
if (mouseX > 303 & mouseX < 334 && mouseY > 239 && mouseY < 265){
textSize(5);
fill('white');
text('SC, 245K', 306, 245);
}
//pennylvania
if (mouseX > 311 & mouseX < 345 && mouseY > 158 && mouseY < 182){
textSize(5);
fill('white');
text('PA, 276K', 319, 169);
}
//new jersey
if (mouseX > 347 & mouseX < 356 && mouseY > 164 && mouseY < 190){
textSize(5);
fill('white');
text('NJ, 392K', 350, 173);
}
//maryland
if (mouseX > 329 & mouseX < 342 && mouseY > 184 && mouseY <200){
textSize(5);
fill('white');
text('MA, 280K', 356, 147);
}
//delaware
if( mouseX > 345 & mouseX < 353 && mouseY > 186 && mouseY < 195){
textSize(5);
fill('white');
text('DE, 476K', 347, 189);
}
//newyork
if( mouseX > 317 & mouseX < 355 && mouseY >123 && mouseY < 156){
textSize(5);
fill('white');
text('NY, 760K', 325, 149);
}
//conneticut
if( mouseX > 356 & mouseX < 365 && mouseY > 152 && mouseY < 163){
textSize(5);
fill('white');
text('CT, 147K', 359, 162);
}
//rhode island
if( mouseX > 365 & mouseX < 370 && mouseY > 150 && mouseY < 158){
textSize(5);
fill('white');
text('RI, 70K ', 371, 158);
}
//massachusetts
if(mouseX > 355 & mouseY < 372 && mouseY > 144 && mouseY < 150){
textSize(5);
fill('white');
text('MA, 280K', 368, 142);
}
//vermont
if( mouseX > 351 & mouseX < 360 && mouseY > 121 && mouseY < 145){
textSize(5);
fill('white');
text('VT, 5K', 351, 125);
}
//new hampshire
if(mouseX > 359 & mouseX < 368 && mouseY > 117 && mouseY < 143){
textSize(5);
fill('white');
text('NH, 29K', 362, 136);
}
//maine
if(mouseX > 364 & mouseX < 388 && mouseY > 91 && mouseY < 128){
textSize(5);
fill('white');
text('ME, 15K', 365, 106);
}
}