[INTRO2ICM] WK2 P5JS MOUSE X,Y

SKETCH : http://www.doyoki.com/project/icm/icm_week2/

I wanted to explore random() function.
After testing with a single variable, I found one random value limits the variety.
For example, the var a =  random(0,10);  will limit all the variables that I want to randomize.
Color varies from 0 to 255, the size variation is from 0 to 10, and quadrant (x , y) that I want to is can vas size from 0 to 600.
So, I separate random variables into size, color, location.

Later, I added t as a counter(time).

1. I modified click color-change function to random function.
2. I added mouseX and mouseY to the start of the line,

Code that I used are here:

//color
var m = 0;
var n = 255;
var o = 0;

var t = 900;

function setup() {
createCanvas(900,600);
background(0,0,0);
}

function draw() {
t = t – 1;

fill(255);
noStroke();
rect(t,0,t,600);

var a = random(0,255);
var b = random(0,255);
var c = random(0,255);
//location
var d = random(0,900);
var e = random(0,900);
var f = random(0,900);
//size
var g = random(0,100);
//time

//rect
noStroke();
fill(0,70,a,a);
rect(d,e,g,g);
fill(0,70,b,b);
rect(e,f,g,g);
fill(0,70,c,c);
rect(f,d,g,g);

//lineleft
strokeWeight(1);
stroke(m,n,o);
line(350-(mouseX/900*400),500-(mouseY/600*400),mouseX-450,mouseY-350);
line(350-(mouseX/900*400),500-(mouseY/600*400),mouseX-150,mouseY-350);
line(350-(mouseX/900*400),500-(mouseY/600*400),mouseX-450,mouseY+350);
line(350-(mouseX/900*400),500-(mouseY/600*400),mouseX-150,mouseY+350);
//line center
line(650-(mouseX/900*400),500-(mouseY/600*400),mouseX-150,mouseY-350);
line(650-(mouseX/900*400),500-(mouseY/600*400),mouseX+150,mouseY-350);
line(650-(mouseX/900*400),500-(mouseY/600*400),mouseX-150,mouseY+350);
line(650-(mouseX/900*400),500-(mouseY/600*400),mouseX+150,mouseY+350);
//lineright
line(950-(mouseX/900*400),500-(mouseY/600*400),mouseX+150,mouseY-350);
line(950-(mouseX/900*400),500-(mouseY/600*400),mouseX+450,mouseY-350);
line(950-(mouseX/900*400),500-(mouseY/600*400),mouseX+150,mouseY+350);
line(950-(mouseX/900*400),500-(mouseY/600*400),mouseX+450,mouseY+350);

}

function mousePressed() {
m = random(0,255);
n = random(0,255);
o = random(0,255);
}

Advertisements

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