Author: chris

Final Project- COVID-19 cases in America

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);
	}




}

Project 11- Landscape

sketch
var peakvalue = [];
var noiseParam = 0;
var noiseStep = 0.005;
var x = [];
var y = [];
var dx = [];
var dx1 = 0;
var c = [];
var seacoralshape = 0.002;
var seacoralspeed = 0.005


function preload(){
  cloud = loadImage("https://i.imgur.com/ZtLcxL9.png");
}



function setup() {
  createCanvas(400, 400);
  for (var i = 0; i <=width/5; i++) {
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 300, height);
    peakvalue.push(value);
    noiseParam += noiseStep;
  }

   for (var i=0; i<50; i++){
      x[i]= random(10, width-10);
      y[i] = random(250, 400);
      dx[i] = random(-5,-1);
      c[i] = color(random(255),255,240);
    }
}

function draw() {

  background(251, 164, 153);
  fill(246, 189, 192);
  ellipse(200,200,320,320);
  fill(241, 149, 155);
  ellipse(200,200,290,290);
  fill(240, 116, 112);
  ellipse(200,200, 260);
  fill(234, 76, 70);
  ellipse(200,200,230,230);
  fill(220, 28, 19);
  ellipse(200,200, 200,200);
  seacoral();
  cloud.resize(70,0);
  tint(255,127);
  image(cloud, -250 + dx1, 40);
  image(cloud, -100 +dx1, 100);
  image(cloud, 180 + dx1, 40);
  image(cloud, 20 + dx1, 30);
  image(cloud, 100 + dx1, 100);
  image(cloud, 300 + dx1, 100);
  dx1 += 0.5;
  peakvalue.shift();
  var n2 = noise(noiseParam);
    var value = map(n2, 0, 1, 0, height*1.5);
    peakvalue.push(value);
    noiseParam += noiseStep;

  beginShape();
  vertex(0, height);
  for (var i = 0; i <= width/5; i++) {
    fill(102, 179, 255);
  noStroke();
    vertex(i*5, peakvalue[i]);
    
  }
  vertex(width, height);
   endShape(); 

    for (i = 0; i<50; i++){
      if(x[i] < -30){
        x[i] = 450
      }
      fish(x[i], y[i], dx[i],c[i]);
      x[i] += dx[i]
  }
  frameRate(10);

}


function fish(x,y, dx,c){
  fill(c);
  ellipse(x,y,20,10);
  if(dx >= 0){
    triangle(x - 10, y, x -15, y - 5, x - 15, y + 5);
  }else if(dx < 0){
    triangle(x+10,y, x + 15, y - 5, x + 15, y + 5);
  }
}

function seacoral(){
  noStroke();
  fill(119, 158, 203);
  beginShape();

  for(var i = 0; i < width; i ++){
    var x = (i * seacoralshape) + (millis() * seacoralspeed);
    var y = map(noise(x), 0, 1.2, 200, 250);
    vertex(i, y);
  }

  vertex(width, height);
  vertex(0, height);
  endShape();
  }

For this week’s project, I wanted to create a landscape that shows the ocean drifting and many fish swimming.

Looking Outwards 11

For this week’s blog post, I decided to write about Tina Frank, a graphic designer who focuses mainly on interaction and music within her work. Tina Frank is an Austrian designer, artist and professor at the University of Art and Design. As a designer, she collaborates with musicians to incorporate sound into her work. Within the years, her work has shifted from data visualizations for scientific projects. One work that I will be discussing today is a project called “What if.” This project is an interactive light installation in a building that raises the question of what our world would be like if XYZ was in action. For example, what if the world was inhabited by mosses and ferns? What if feminists ruled the world? The thing I admire the most about this project is how the one lighting installation changed completely the mood of a space. In the video included below, the lighting installation as well as the sound and the music gives the whole project a very surrealistic feeling.

Project-10-Sonic Story

sketch
//Chris Han
//project 10
//section C

// var song;
var groundhog;
var groundhog1;
var groundhog2;
var groundhog3;
var grass;
var cloud;
var dy = 2; 
var y = 270;
var dy1 = 1;
var y1 = 250;
var y2 = 250;
var dy2 = 1;
var y3 = 300;
var dy3 = 2;
var dx = 0; //speed of clouds

function preload(){
	//images
     groundhog = loadImage("https://i.imgur.com/ghMIFqq.png");
     groundhog1 = loadImage("https://i.imgur.com/ghMIFqq.png");
     groundhog2 = loadImage("https://i.imgur.com/ghMIFqq.png");
     groundhog3 = loadImage("https://i.imgur.com/ghMIFqq.png");
     grass = loadImage("https://i.imgur.com/OQ7giMC.png");
     cloud = loadImage("https://i.imgur.com/ZtLcxL9.png");

     //sound
     song = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clockticksound.wav");
// // }
}

function setup() {
    createCanvas(400,400);
    // useSound();
}

// function soundSetup(){
// 	song.setVolume(0.8);
// }

function draw() {
	noStroke();
	fill(135, 206, 250);
    rect(0,0,400,400);
	fill(210,105,30);
	rect(0,300,400,100);
	groundhog.resize(200,0); //the biggest one
	//movement for the front big groundhog
	if( dy >= 0 & y >= 360){ //the movement for groundhog
		r = random(1, 100);
		if(int(r) == 15){
			dy = -2
		} else {
			dy = 0
		}
	}
	if(dy <= 0 & y <= 270){
		dy = 2
	}
	y += dy;

	//movement for groundhog1 (the middle one)

    if( dy1 >= 0 & y1 >= 300){ //the movement for groundhog1
		r = random(1, 100);
		if(int(r) == 15){
			dy1 = -1
		} else {
			dy1 = 0
		}
	}
	if(dy1 <= 0 & y1 <= 250){
		dy1 = 1
	}
	y1 += dy1;

	//movement for groundhog2 (the back one)
	 if( dy2 >= 0 & y2 >= 300){ //the movement for groundhog1
		r = random(1, 100);
     if(int(r) == 15){
			dy2 = -1
		} else {
			dy2 = 0
		}
	}
	if(dy2 <= 0 & y2 <= 250){
		dy2 = 1
	}
	y2 += dy2;

	//movement for groundhhog3 (the very front one)
     if( dy3 >= 0 & y3 >= 400){ //the movement for groundhog1
		r = random(1, 100);
     if(int(r) == 15){
			dy3 = -1
		} else {
			dy3 = 0
		}
	}
	if(dy3 <= 0 & y3 <= 350){
		dy3 = 1
	}
	y3 += dy3;


    groundhog.resize(200,0); //the biggest one
    image(groundhog2, 160, y2); //furthest back one 
	rect(180,308,90,70);// the rectangle in between back grass and back whacka
	image(grass, 0, 230, 230,100); //furthest back grass

	image(groundhog, 0, y);
	groundhog1.resize(100,0);
    image(groundhog1, 250, y1);//middle groundhog
    rect(260,320,90,50);
    image(grass, 220, 250, 200,100);
	image(grass, -10, 300, 460, 110);
	groundhog2.resize(100,0);
	groundhog3.resize(120,0);
	image(groundhog3, 260, y3); //very front kinda small
	cloud.resize(100,0);

	//clouds moving
	image(cloud, -250 + dx, 40);
	image(cloud, -100 +dx, 100);
	image(cloud, 180 + dx, 40);
	image(cloud, 20 + dx, 30);
	image(cloud, 100 + dx, 100);
	image(cloud, 300 + dx, 100);
	dx += 0.2;

}

My project for this week is a story of different moles popping up and down in a field.

Looking Outwards-10

The project I am discussing this week is called “Weather Thingy–Real Time Climate Sound Controller.” Weather Thingy is created by Adrien Kaeser and is a sound controller that uses real time climate related events to control the settings of musical instruments. The device has two main parts–a weather station connected on a tripod microphone and a controller connected to the weather station. This machine has three climate sensors which includes a rain gauge, wind vane, anemometer. The interface of the machine displays the date from the 4 different sensors. This project is super interesting to me because it took a real life issue at hand and translated it into sound. I liked how the music can change based on the data it collects and it was really nice to see how the creator was able to take a musical approach towards this topic.

Project-09-Portrait

sketch
var friendpic;
var names;

function preload(){
   friendpic = loadImage("https://i.imgur.com/OlsgBPM.jpg");

   names = ["rachel", "noah", "selim", "chris", "erin", "dasol", "george", "jennifer", "sue"];
  print(names)
}

function setup() {
    createCanvas(300, 480);

    noStroke();
    background('black'); //sky blue background

    friendpic.resize(300,480); //fit image to canvas
    imageMode(CENTER); //centering the image on the canvas
    friendpic.loadPixels();// loading the names
    frameRate(100); // speed of names popping in
}

function draw() {
    var x = random(friendpic.width);
    var y = random(friendpic.height);
    var c = friendpic.get(x,y); //get the color 

    fill(c);
	textFont("Helvetica");
	textStyle(BOLD);
	
	text(names[Math.floor((Math.random() * names.length))], x, y);

}

So for this project, I wanted to use a picture of my friends as it renders out with the name of each person. It starts off as black but the names pop up in different colors in random places and forms the original picture.

Looking Outwards-09

For this week, I decided to read a blog post written by my peer Dreami. I was particularly struck by her analysis of the project named “Facebook Flowers” by Stamen Design. This cited project is something I would be also intrigued by because it collects real life data and translates it into a piece of art. I thought it was interesting how Stamen Design chose to represent the activity of a Facebook post through flowers. The parallel of a post getting attention and growing is shown through the flowers getting bigger and flourishing. I don’t necessarily disagree with Dreami’s assessment because I agree with her how it’s cool that motion is used in this data visualization.

Looking Outwards 08- The Creative Practice of an Individual

Nadieh Bremer’s website:

https://www.visualcinnamon.com/

The person I will be writing about today is named Nadieh Bremer. She is a graduated astronomer, turned data scientist, and now data visualization designer. She creates unique interactive data visualizations for press releases, data driven reports, and data art. After reading her “about” tab on her website, I learned that she is very passionate about what she does. She left the world of academia to pursue data science and once she learned that she really enjoyed visualizing analysis, she started creating personal projects. She describes her work as the following, “My projects include both web-based interactive visualizations, frequently using a storytelling technique to show insights into complex data and static visualizations that typically allow a bit more freedom in their design.” After looking through her work, I noticed that although her work is based on real information and a collection of facts, the visual aesthetic of her visualizations is art itself. It is something that can be seen hanging off a wall as an art piece itself. Her use of color is captivating in all her data visualizations and she uses many different forms to express information. One thing about her work that I want to reflect in mine is how playful it is. There was a project that had graphics of cats and dogs that I really enjoyed. It really opened up the range of how playful data visualization can be and that really inspired me to take risks with my work and include my personality in it.

Project 07-Curves

sketch
var nPoints = 100;
function setup() {
    createCanvas(400, 400);
    frameRate(60);
}


function draw() {
    background(0);
    
    // draw the frame
    fill(0); 
    noStroke();
    stroke(57,255,20);
    noFill(); 
    rect(0, 0, width-1, height-1); 
    
    // draw the curve
    push();
    translate(width / 2, height / 2);
    for( var count = 1; count <= 9; count += 1){
      if(count <=3){
        drawButterflyCurve(-200 + count*100, 110);
      }else if(count <= 6){
        drawButterflyCurve(-200 + (count-3)*100, 0);
      }else if(count <= 9){
        drawButterflyCurve(-200 + (count - 6)*100, -110);
      
      
        
      }
    }
    pop();
  
}
function drawButterflyCurve(dx, dy){
  var x;
  var y;
  beginShape();
  for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = 20*Math.sin(t) * [(Math.E)**(Math.cos(t)) - 2*Math.cos(mouseX/100 + 4*t) + (Math.sin(t/12))**5] - dx;
        y = -20*Math.cos(t) * [(Math.E)**(Math.cos(t)) - 2*Math.cos(mouseY/100 + 4*t) + (Math.sin(t/12))**5] - dy;
    vertex(x,y);
    
  }
  endShape(CLOSE);
}

Reading the project description, I was very intimidated by this week’s project due to all the complicated formulas and many options. I think I was drawn to the butterfly curve because of the shape and the complexity of it. I wanted to make a pattern out of these curves while it would turn based off the mouse’s position. Based on the mouse position, the curves would change and the lines would make different positions.

LO 07: Information Visualization

This week, I decided to look into the visualization of data on the NASDAQ Stock exchange. The different examples all represent a single minute of trade that occurs, the images on the top using a unique color to represent the trader, and the images on the bottom using unique colors to represent each stock. When there is a big grouping of the same color on the top, it means that the same trader is buying and selling stocks. If this occurs on the bottom, it means that a single stock is going through different transactions. The reason why I chose this project is because I thought it was really interesting to see how a very complicated topic like trading can be simplified and visualized with colors. I am in awe of how the creator broke down the system and found out the most efficient way to represent the concept. Not only does the visualization hold value and meaning, simply put, the project is very visually pleasing and engaging. It holds the viewer’s attention on the screen due to the movement and engagement, which is also useful to begin understanding the extent and depth of this project.