xxxxxxxxxx232
//The data portrait tracks the moments when I have a noticable sense of satisfaction and dissatifaction about certain things in my life. I used 5 days out of the 7 days worth of data I collected, for I found it a sufficient amount to illustrate the portrait but also a good amount of content for aesthetic purpose. The number of layers of the amorphous, petal like shape are compilation of momemnts of satisfaction, whereas the brown doodle ball is a compilation of my dissatisfaction. The size of the petal like shape are based on the overall sense of satisfaction I felt at the end of the day.The size of the doodle ball are determined based on the amount of dissatisfaction I had in one day. let bluelet green let orangelet purplelet redlet yellowlet myDatalet clet fontlet x = 0let giffunction preload() { blue = loadImage("blue.png"); green = loadImage("green.png"); orange = loadImage("orange.png"); purple = loadImage("purple.png"); red = loadImage("red.png"); yellow = loadImage("yellow.png"); myData = loadJSON('data.json'); font = loadFont('font.ttf'); gif1 = createImg("doodle.gif","annoyed") gif2 = createImg("doodle1.gif","annoyed") gif3 = createImg("doodle1.gif","annoyed") gif6 = createImg("doodle1.gif","annoyed") gif7 = createImg("doodle1.gif","annoyed")}function setup() { createCanvas(600, 600); background(255,248,231) //Day1 for (let i = 0; i < myData.Day1.length; i++){ if (myData.Day1[i] == 1){ push(); rectMode(CENTER) translate(100,100); rotate(0.2 + i*0.2) imageMode(CENTER); image(yellow,0,0,yellow.width*(15+i)/20, yellow.height*(15+i)/20); pop(); } } // for (let i = 0; i < 2; i++){ // push(); // rectMode(CENTER) // translate(100,100); // rotate(1.5 + i*1.8) // imageMode(CENTER); // noStroke(); // fill(128,0,128,100); // circle(18,-5,25); // pop(); // } gif3.position(80,90) gif3.size(50,50) //Day2 for (let i = 0; i < myData.Day2.length; i++){ if (myData.Day2[i] == 1){ push(); rectMode(CENTER) translate(450,150); rotate(0.2 + i*0.2) imageMode(CENTER); image(blue,0,0,blue.width*(15+i)/20, blue.height*(15+i)/20); pop(); } } // for (let i = 0; i < 4; i++){ // push(); // rectMode(CENTER) // translate(450,150); // rotate(0.5 + i*1.7) // imageMode(CENTER); // noStroke(); // fill(128,0,128,80); // circle(18,-5,25) // pop(); // } gif2.position(430,120) gif2.size(80,80) //Day3 for (let i = 0; i < myData.Day3.length; i++){ if (myData.Day3[i] == 1){ push(); rectMode(CENTER) translate(300,300); rotate(0.2 + i*0.2) imageMode(CENTER); image(orange,0,0,orange.width*(15+i)/18, orange.height*(15+i)/18); pop(); } } // for (let i = 0; i < 1; i++){// push();// rectMode(CENTER)// translate(300,300);// rotate(1 + i*1.5)// imageMode(CENTER);// noStroke();// fill(128,0,128,105);// circle(15,-5,25)// pop();// } gif6.position(300,290) gif6.size(30,30) //Day4 for (let i = 0; i < myData.Day4.length; i++){ if (myData.Day4[i] == 1){ push(); rectMode(CENTER) translate(120,500); rotate(0.7 + i*0.2) imageMode(CENTER); image(purple,0,0,purple.width*(15+i)/13,purple.height*(15+i)/13); pop(); } } // for (let i = 0; i < 3; i++){// push();// rectMode(CENTER)// translate(120,500);// rotate(1 + i*1.5)// imageMode(CENTER);// //strokeWeight(1);// noStroke();// fill(128,0,128,60);// circle(15,-5,25)// pop();// } gif7.position(100,480); gif7.size(60,50); //Day5 for (let i = 0; i < myData.Day5.length; i++){ if (myData.Day5[i] == 1){ push(); rectMode(CENTER) translate(500,500); rotate(0.7 + i*0.2) imageMode(CENTER); image(red,0,0,red.width*(15+i)/20,red.height*(15+i)/20); pop(); } } // for (let i = 0; i < 1; i++){ // push(); // rectMode(CENTER) // translate(500,500); // rotate(1 + i*1.5) // imageMode(CENTER); // noStroke(); // fill(128,0,128,105); // circle(0,0,25); // pop(); // } gif1.position(470,480) gif1.size(50,50) setTimeout(one,2000); setTimeout(two,3000); setTimeout(three,4000); }function one(){ push(); noFill(); stroke(250,211,0); bezier(100,100,150,150,150,200,80,240); fill(0); noStroke(); textFont(font); textSize(18); text('unsatisfied with my work',40,250,100,200); pop();}function two(){ push(); noFill(); stroke(250,211,0); bezier(200,350,190,400,190,420,250,440); fill(0); noStroke(); textFont(font); textSize(18); text('sitting at park, feeling thankful',240,450,150,300); pop();}function three(){ push(); noFill(); stroke(250,211,0); bezier(500,250,520,260,520,270,500,280); fill(0); noStroke(); textFont(font); textSize(18); text('a delicious meal',470,290,150,300); pop();}function draw() { }