manuelr – project03 – curtains

sketch

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?