week 7: a tourist in Seoul
My idea to make the code better was to have the water droplets appear on the man's forehead this time, as that was what i wanted to do originally. Also after seeing the class's work, one stood out to me being the code that allowed the viewer to see the data change from day to day by allowing the data to change when one of the dates is clicked. Below is a mock-up of what I wanted to achieve.
After last week's difficulties I had some help from the tutor with my code. I understood it and the concept of what he was doing, but i still found it difficult to integrate into my code. This meant it took longer than I wanted to achieve this, so I didn't end up completing the face and multiple dates I wanted to.
However I managed to sort out the droplets and changed the visual to a picture I drew out of Homer Simpson panting, as this makes more sense in portraying what I wanted to show. It makes it easier to see the man is out of breath, as it is a recognisable character in a recognisable state (at least in the UK it would be).
This worked better to achieve what I wanted.
Zip file download link:
//Anna Quarrie Week 7 Assignment
String[] fileData; String[] cq; int[] steps; int[] photos; int qty = 13; //int[] data = new int[qty]; //float i = 1; float j = 0; FloatList[] posX; FloatList[] posY; //rect [] repRect = new rect {photos]; PImage photo; PFont chivo; PFont chivosmall; float rx, ry; //# temp vars float rax=50, ray=100; //spread of randomness float otx = -80, oty= -70; //offset for tears float ofx = -20, ofy= -20; //offset for faces
void setup() { size(700, 500); fileData = loadStrings("data for vis.txt"); println("file_length (in lines):" , fileData.length); println("file_entry_example (1st line):" , fileData[0]); steps = new int[fileData.length]; photos = new int[fileData.length];
for (int i=0; i<fileData.length; i++) { println("dat_line:" , i, fileData[i] ); String[] values = splitTokens(fileData[i], " "); //split each line with ' '(space) steps[i] = int(values[0]); // put first value in the line into weight array (same as Integer.parseInt(values[0])) photos[i] = int(values[1]); // put second value in the line into weight array } posX = new FloatList[qty]; posY = new FloatList[qty]; for(int itr=0 ; itr < qty; itr++){ // create basic array posX[itr] = new FloatList(); posY[itr] = new FloatList(); } for( int itr=0; itr< qty; itr++ ){ for( int n =0; n< steps[itr]; n++){ posX[itr].append(random(0,rax)); posY[itr].append(random(0,ray)); } } photo = loadImage("simpson panting.png"); chivo = loadFont("Chivo-Regular-25.vlw"); chivosmall = loadFont("Chivo-Regular-15.vlw"); }
void draw() { background (255,255,255); //title //// pushMatrix(); //rotate(PI/2); //textSize(30); textFont(chivo); text("trying to be a good tourist", 40, 40); //popMatrix(); pushMatrix(); translate(20, 50); //photos for rectangle first row fill(0); stroke(255); for (int itr=0; itr<fileData.length/2+2; itr++ ){ String[] cq = splitTokens(fileData[itr], " "); //set 10 photos per box for (int photos=0; photos < Integer.parseInt(cq[1]); photos = photos + 10){ int photoBox = photos / 10; int Left = -25; int Top = 120; rect((photoBox * 5) + (itr * 80) + Left, (photoBox * 7.5) + Top, 30, 10); } } //photos for rectangle second row for (int itr=7; itr<fileData.length; itr++ ){ String[] cq = splitTokens(fileData[itr], " "); for (int photos=0; photos < Integer.parseInt(cq[1]); photos = photos + 10){ //# this is where I set 10 photos per box int photoBox = photos / 10; int Left = -505; int Top = 300; rect((photoBox * 5) + (itr * 80) + Left, (photoBox * 7.5) + Top, 30, 10); } } //for (int i=0; i<fileData.length; i++ ); { //pushMatrix(); //translate(10,10); //fill(0); //stroke(255); //rect(i*100+100, 300, 50, 20); //popMatrix(); //simpsons faces image(photo, ofx+40 ,ofy + 70); image(photo, ofx+120,ofy + 70); image(photo, ofx+200,ofy + 70); image(photo, ofx+280,ofy + 70); image(photo, ofx+360,ofy + 70); image(photo, ofx+440,ofy + 70); image(photo, ofx+520,ofy + 70); image(photo, ofx+40 ,ofy +250); image(photo, ofx+120,ofy +250); image(photo, ofx+200,ofy +250); image(photo, ofx+280,ofy +250); image(photo, ofx+360,ofy +250); image(photo, ofx+440,ofy +250); /* for( int i=0; i< qty; i++ ){ //fill(255); image(photo, 40,70); for( int n=0; n< data[i]; n++ ){ //fill(255,0,0); //ellipse( i*100, 100+n*10, 10,10); //ellipse( i*100 +random(0,80), 100 +random(0,80), 10,10); //image(photo,i*100 + posX[i].get(n), 100 + posY[i].get(n)); pushMatrix(); translate(i*100 + posX[i].get(n), 100 + posY[i].get(n)); bezier(30, 48, 20, 43, 30, 38, 30, 33); bezier(30, 48, 40, 43, 30, 38, 30, 33); popMatrix(); } } //*/
//sweatdrops on sweaty men first row noFill(); stroke(27,161,226); for (int itr=0; itr<fileData.length/2+2; itr++ ){ String[] cq = splitTokens(fileData[itr], " "); for (int steps=0; steps < Integer.parseInt(cq[1]); steps = steps + 10){ //int stepsSweat = steps / 1000; int Left = -20; int Top = 310; //float r = random(10); // r > rx = otx + posX[itr].get(steps); ry = oty + posY[itr].get(steps); pushMatrix(); translate((steps*0) + (itr*80)+Left+15 + rx, (steps*0) + Top-220 + ry); bezier(30, 48, 20, 43, 30, 38, 30, 33); bezier(30, 48, 40, 43, 30, 38, 30, 33); popMatrix(); ////rx = posX[0].get(0); } } //sweatdrops second row for (int itr=7; itr<fileData.length; itr++ ){ String[] cq = splitTokens(fileData[itr], " "); for (int steps=0; steps < Integer.parseInt(cq[1]); steps = steps + 10){ //int stepsSweat = steps / 1000; int Left = -495; int Top = 490; //float r = random(10); // r > /*pushMatrix(); translate((steps*0.85) + (itr*80)+Left+15, (steps*1.3) + Top-220); bezier(30, 48, 20, 43, 30, 38, 30, 33); bezier(30, 48, 40, 43, 30, 38, 30, 33); popMatrix();*/ rx = otx + posX[itr].get(steps); ry = oty + posY[itr].get(steps); pushMatrix(); translate((steps*0) + (itr*80)+Left+15 + rx, (steps*0) + Top-220 + ry); bezier(30, 48, 20, 43, 30, 38, 30, 33); bezier(30, 48, 40, 43, 30, 38, 30, 33); popMatrix(); } } popMatrix();
//key for data pushMatrix(); translate(0,80); pushMatrix(); translate(550, 300); bezier(30, 48, 20, 43, 30, 38, 30, 33); bezier(30, 48, 40, 43, 30, 38, 30, 33); popMatrix(); textFont(chivosmall); text("1000 steps", 600, 348); fill(0); stroke(225); rect(556, 380, 30,10); text("10 photos", 600, 390); popMatrix(); /// stroke(255,0,0); /// line(70,60, 70, 50); } // */