![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2020/08/stop-banner.png)
var posx = 20;
var posy = 20;
var posyb = 20;
var posx1 =20;
var posy1 = 20;
var dirX = 1;
var diam = 30;
var falling = 1.1;
var diam1 =30;
function setup() {
createCanvas(600, 600);
}
function draw() {
background (157,156,201);
for (var x = 5; x < width; x = x+50){
for (var y = 5; y < height; y = y+50){
push();
translate(x, y);
fill(255,255,102); //yellow
ellipse(posx1,posy,diam,diam);
pop();
}
}
//
if (mouseX > width/2) {
for (var x = diam; x < width; x = x+50){
for (var y = diam; y < height; y = y+50){
push();
translate(x, y);
fill(204,255,153); //green
ellipse(-posx1,posy1,diam1,diam1);
diam1 += .0001;
pop();
}
}
}
//bluish
if (mouseX < width/2) {
for (var x = diam; x < width; x = x+50){
for (var y = diam; y < height; y = y+50){
push();
posyb += falling*0.01;
posy1+= falling*0.01*-1;
translate(x, y);
fill(153,255,255);
ellipse(posy1,posy1,diam,diam);
pop();
}
}
}
// pink
if (mouseY > height/2) {
for (var x = diam; x < width; x = x+50){
for (var y = diam; y < height; y = y+50){
push();
posyb += falling*0.01;
posy1+= falling*0.01*-1;
translate(x, y);
fill(255,102,255);
ellipse(posx,posyb,diam1,diam1);
pop();
}
}
}
// orange
if (mouseY < height/2) {
for (var x = diam; x < width; x = x+50){
for (var y = diam; y < height; y = y+50){
push();
posyb += falling*0.01*-1;
posx1 += falling*0.01*1;
translate(x, y);
fill(224,96,92);
ellipse(posx,posyb,diam,diam);
pop();
}
}
}
}
I wanted to create a curtain of balls that slide through the canvas in an uncomfortable way depending on the direction of the mouse. Are you able to make them dissapear? What if you wait for a little bit?
