top of page

Week7- Improve the project of Week 6- Interactive data visualization

I deleted by error my previous work, even though it was not fully finished.

Here i attach the video of the improvement. Now if the mouse is in the images it will show some information like the genre of the music, the percentage of times hearing the songs and how much I like it. The problem i got is that i could not make the conditions to go back to the beginning.



Here is the link to download the zip: https://www.dropbox.com/s/z3xsnv595jy696u/Bea-week7.zip?dl=0


And here is the code:


//Project Week6 re-done it to week7

PImage lunisolar;

PImage waybackhome;

PImage acrossuniverse;

PImage rainbow;

PImage betterwithyou;

PImage bom;

PImage crazyweather;

PImage note;

PImage heart;


PFont font1;

PFont font2;

int[] lisen = new int[7];

int normal=0;

boolean[]isPressed=new boolean[100];

float[] reset = new float[7];


void setup() {

size(800, 490);


//load images and data

lunisolar=loadImage("lunisolar.jpg");

waybackhome=loadImage("waybackhome.jpg");

acrossuniverse=loadImage("acrossuniverse.png");

rainbow=loadImage("rainbow.jpg");

betterwithyou=loadImage("betterwithyou.jpg");

bom=loadImage("bom.jpg");

crazyweather=loadImage("crazyweather.jpg");

note=loadImage("note.png");

heart=loadImage("heart.png");

font1 = loadFont("CuteCartoon-48.vlw");

font2=loadFont("FunnyKid-48.vlw");



//percentage of times lisening the song during the week/ array info


//lunisolar

lisen[0] = 65;

//waybackhome

lisen[1] = 95;

//acrossuniverse

lisen[2] = 79;

//rainbow

lisen[3] = 45;

//betterwithyou

lisen[4] = 55;

//bom

lisen[5] = 88;

//crazyweather

lisen[6] = 65;

}


void draw() {

background(147, 172, 194);


//background loop

pushMatrix();

{

float r= random(5, 20);

for (int i=0; i<100; i++) {

fill(random(189), random(14), random(245));

ellipse (random(width), random(height),

r, r);

noStroke();

delay(4);

}

popMatrix();

}


//lunisolar


{

if (mouseX>15-3 && mouseY>105-3) {

for (int i = 0; i<.5; i++)


pushMatrix();

textFont(font2);

textSize(20);

fill(275, 218, 137);

text("genre: Electronic music", 15, 275);

text("mood: Happy/Optimistic", 15, 325);

text("lisened: 65%", 15, 375);

text("like", 355, 285);


ellipse(100, 100, 4, 4);

translate(390, 390);


stroke(255);

strokeWeight(5);

fill(255, 238, 157);

beginShape();


float angle = mouseX;

for (int i=0; i< angle; i+= 2) {

vertex(cos(radians(i))*lisen[0], sin(radians(i))*lisen[0]);

}

endShape();

popMatrix();

image (heart, 345, 345, 75, 75);

} else {

reset[0]-=7;

}


//way back home

{

if (mouseX>100-3 && mouseY>105) {


pushMatrix();



textFont(font2);

textSize(20);

fill(239, 109, 143);

text("genre: Electronic music", 15, 275);

text("mood: Sentimental", 15, 325);

text("lisened: 95%", 15, 375);

text("like", 355, 285);


ellipse(150, 150, 4, 4);

translate(390, 390);


stroke(255);

strokeWeight(5);

fill(239, 109, 143);

beginShape();


float angle = mouseX;

for (int i=0; i< angle; i+= 2) {

vertex(cos(radians(i))*lisen[1], sin(radians(i))*lisen[1]);

}

endShape();

popMatrix();

image (heart, 335, 335, 95, 95);

} else {

reset[0]-=7;

}


//acrossuniverse

{

if (mouseX>200-3 && mouseY>105) {


pushMatrix();



textFont(font2);

textSize(20);

fill(255, 238, 157);

text("genre: R&B/Soul ", 15, 275);

text("mood: Melancholic ", 15, 325);

text("lisened: 79%", 15, 375);

text("like", 355, 285);


ellipse(120, 120, 4, 4);

translate(390, 390);


stroke(255);

strokeWeight(5);

fill(255, 238, 157);

beginShape();


float angle = mouseX;

for (int i=0; i< angle; i+= 2) {

vertex(cos(radians(i))*lisen[2], sin(radians(i))*lisen[2]);

}

endShape();

popMatrix();

image (heart, 345, 345, 80, 80);

} else {

reset[0]-=7;

}



//Rainbow

{

if (mouseX>300-3 && mouseY>105) {


pushMatrix();



textFont(font2);

textSize(20);

fill(13, 48, 88);

text("genre: Indie/Acustic ", 15, 275);

text("mood: Mellow ", 15, 325);

text("lisened: 45%", 15, 375);

text("like", 355, 285);


ellipse(40, 40, 4, 4);

translate(390, 390);


stroke(255);

strokeWeight(5);

fill(13, 48, 88);

beginShape();


float angle = mouseX;

for (int i=0; i< angle; i+= 2) {

vertex(cos(radians(i))*lisen[3], sin(radians(i))*lisen[3]);

}

endShape();

popMatrix();

image (heart, 370, 370, 40, 40);

} else {

reset[0]-=7;

}



//Better with you

{

if (mouseX>420-3 && mouseY>105) {


pushMatrix();



textFont(font2);

stroke(255);

textSize(20);

fill(147, 162, 144);

text("genre: R&B/Pop ", 15, 275);

text("mood: Delighted ", 15, 325);

text("lisened: 55%", 15, 375);

text("like", 355, 285);


ellipse(50, 50, 4, 4);

translate(390, 390);


stroke(255);

strokeWeight(5);

fill(147, 162, 144);

beginShape();


float angle = mouseX;

for (int i=0; i< angle; i+= 2) {

vertex(cos(radians(i))*lisen[4], sin(radians(i))*lisen[4]);

}

endShape();

popMatrix();

image (heart, 365, 365, 50, 50);

} else {

reset[0]-=7;

}

//Bom

{

if (mouseX>535-3 && mouseY>105) {


pushMatrix();



textFont(font2);

stroke(255);

textSize(20);

fill(259, 149, 193);

text("genre: Indie/Folk", 15, 275);

text("mood: Refreshened ", 15, 325);

text("lisened: 88%", 15, 375);

text("like", 355, 285);


ellipse(90, 90, 4, 4);

translate(390, 390);


stroke(255);

strokeWeight(5);

fill(259, 149, 193);

beginShape();


float angle = mouseX;

for (int i=0; i< angle; i+= 2) {

vertex(cos(radians(i))*lisen[5], sin(radians(i))*lisen[5]);

}

endShape();

popMatrix();

image (heart, 345, 345, 85, 85);

} else {

reset[0]-=7;

}


//Crazy weather

{

if (mouseX>655-3 && mouseY>105) {


pushMatrix();



textFont(font2);

stroke(255);

textSize(20);

fill(255, 238, 157);

text("genre: Indie/Acustic", 15, 275);

text("mood: Refreshened ", 15, 325);

text("lisened: 65%", 15, 375);

text("like", 355, 285);


ellipse(100, 100, 4, 4);

translate(390, 390);


stroke(255);

strokeWeight(5);

fill(255, 238, 157);

beginShape();


float angle = mouseX;

for (int i=0; i< angle; i+= 2) {

vertex(cos(radians(i))*lisen[6], sin(radians(i))*lisen[6]);

}

endShape();

popMatrix();

image (heart, 355, 355, 75, 75);

} else {

reset[0]-=7;

}

image (lunisolar, 10, 105, 100, 100);

image (waybackhome, 100, 105, 100, 100);

image (acrossuniverse, 200, 105, 105, 100);

image (rainbow, 301, 105, 125, 100);

image (betterwithyou, 420, 105, 125, 100);

image (bom, 535, 105, 120, 100);

image (crazyweather, 655, 105, 123, 100);


// textfonts

textFont(font1);


fill(451, 500, 400);

textSize(40);

text("How many times i lisen this song?", 195, 38);


textFont(font2);

textSize(14);

text("Lunisolar", 12, 85);

text("WayBackHome", 100, 70);

text("AcrossUniverse", 200, 85);

text("Rainbow", 321, 70);

text("BetterWithYou", 425, 85);

text("Bom", 575, 70);

text("CrazyWeather", 655, 85);

}

}

}

}

}

}

}

}


14 visualizaciones0 comentarios

Entradas Recientes

Ver todo

Week 14

To be honest i am just confused about how to put this idea in the actual processing program. In this code i posted the text again but divided in different stages. When is clicked it pass from text 1 t

Week 13

Here is the code I have until now. Apart I have been trying to also dived it in to stages like the way we learnt last week in class, but that will still have more work to do because I need to get firs

bottom of page