top of page

Week 6- Interactive data visualization

Actualizado: 18 abr 2019

I did not get my desired result of this project. Because I still have to study more some of the funcions.

I wanted to made it so when you click on the image of the song, it appears the percentage of time I have lisen that song and at the same time the music notes appears too.



Zip download:https://www.dropbox.com/s/y4tgix5lofa9j8e/week6Bea.zip?dl=0



This is my code at the moment :



//Project Week6

PImage lunisolar;

PImage waybackhome;

PImage acrossuniverse;

PImage rainbow;

PImage betterwithyou;

PImage bom;

PImage crazyweather;

PImage note;


PFont font1;

PFont font2;

int[] lisen = new int[7];

float ypos1 = 15;

float ypos2 = 15;

float ypos3 = 15;

float ypos4 = 15;

float ypos5 = 15;

float ypos6 = 15;

float ypos7 = 15;




void setup(){

size(600,660);

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

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

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

//lunisolar

lisen[0] = 75;

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

// textfonts

textFont(font1);

fill(451, 500, 400);

textSize(40);

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

textFont(font2);

textSize(14);

text("Lunisolar",15,85);

text("WayBackHome",85,70);

text("AcrossUniverse",165,85);

text("Rainbow",265,70);

text("BetterWithYou",325,85);

text("Bom",435,70);

text("CrazyWeather",490,85);

{ //graph

for(int i=0; i<lisen.length; i++) {

noStroke();

fill(200, (lisen[i]-7)*3+20, lisen[i]+190);

rect(i*79+22, 650, 70, -(lisen[i]-2)*5);

}

}


//musical notes that appears in the graph

//lunisolar

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

if(mousePressed== true)

image (note,40 , 629- i*50, 20, 20);

}


//waybackhome

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

if(mousePressed)

image (note,125 , 629- i*50, 20, 20);

}

//acrossuniverse

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

if(mousePressed)

image (note,205 , 629- i*50, 20, 20);

}

//rainbow

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

if(mousePressed)

image (note,285 , 629- i*50, 20, 20);

}

//betterwithyou

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

if(mousePressed)

image (note,365 , 629- i*50, 20, 20);

}

//bom

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

if(mousePressed)

image (note,445 , 629- i*50, 20, 20);

}

//crazyweather

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

if(mousePressed)

image (note,525 , 629- i*50, 20, 20);

}

image (lunisolar, 15, 95, 87, 87);

image (waybackhome, 85, 95, 90.5, 90.5);

image (acrossuniverse, 165, 95, 90, 90);

image (rainbow, 245,95, 90, 90);

image (betterwithyou, 325, 95, 90, 90);

image (bom, 405, 95, 90, 90);

image (crazyweather, 485, 95, 90, 90);


}

27 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