[INTRO2ICM] WK4 P5JS COLOR PLAY

img_0036I worked on the function object to make a color block so that I did no have to make all the rectangles. Here is the code. You may see the function colorblock which makes the multiple rectangles. I was inspired by the color picture that I made before.

SKETCH>>
//colorblock
var a = 0;
var b = 0;
var p = -1;
var pp = -1;

// filling
var yy = 0;
function setup() {

}
function colorblock(x,y,a,b){
noStroke();

fill(0,255,0);
rect(x,y+40,a+14,b+100);
fill(0,200,255);
rect(x,y,a+10,b+50);
fill(0,0,255);
rect(x+30,y+25,a+10,b+115);
fill(255,20,20);
rect(x+10,y,a+20,b+40);
fill(0,200,255);
rect(x+30,y,a+5,b+30);
fill(100,0,255);
rect(x+14,y+40,a+10,b+100);
fill(0,0,100);
rect(x+20,y+80,a+15,b+60);
fill(255,255,0);
rect(x+35,y,a+20,b+50);
fill(255,50,0);
rect(x+40,y+50,a+15,b+50);
fill(255,50,255);
rect(x+40,y+100,a+15,b+40);

}

function draw() {

createCanvas(900,600);
background(255,255,255);

for(c=-110;c<900;c=c+110){
yy = 0;
colorblock(c,yy,a,b);
}

for(d=-55;d<900;d=d+110){
yy = -70;
colorblock(d,yy,a,b);
}
for(e=-55;e<900;e=e+110){
yy = 70;
colorblock(e,yy,a,b);
}
for(f=-110;f<900;f=f+110){
yy = 140;
colorblock(f,yy,a,b);
}
for(g=-55;g<900;g=g+110){
yy = 210;
colorblock(g,yy,a,b);
}
for(h=-110;h<900;h=h+110){
yy = 280;
colorblock(h,yy,a,b);
}
for(i=-55;i<900;i=i+110){
yy = 350;
colorblock(i,yy,a,b);
}
for(j=-110;j<900;j=j+110){
yy = 420;
colorblock(j,yy,a,b);
}
for(k=-55;k<900;k=k+110){
yy = 490;
colorblock(k,yy,a,b);
}
for(l=-110;l<900;l=l+110){
yy = 560;
colorblock(l,yy,a,b);
}
a = (p*17*(mouseX/900));
b = (pp*138*(mouseY/600));

}

function mouseReleased(){
if( p == -1){
p = 1;
pp = -1;
}
else {
p = -1;
pp = 1;
}
}

Advertisements

2 thoughts on “[INTRO2ICM] WK4 P5JS COLOR PLAY

  1. Pingback: ICM WEEK4 | doyoki.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s