Month: September 2022

//grid lines vertical
var x1 = 30
var y1 = 30
var x2 = 30
var y2 = 60

//grid lines horizontal
var Ax1 = 60
var Ay1 = 30
var Ax2 = 90
var Ay2 = 30

//orange square
var Sx1 = 60
var Sy1 = 60
var d = 30

//purple square
var PSx1 = 240
var PSy1 = 300
var Pd = 30

//yellow square
var YSx1 = 420
var YSy1 = 210
var Yd = 30


var gap = 30
var scolor = 0
var slant = 0
function setup() {
    createCanvas(600, 450);
    background(0);
    //text("p5.js vers 0.9.0 test.", 10, 15);
}



function draw() {

//orange square
strokeWeight(0)
fill('orange')
square(Sx1,Sy1,d)

//purple square
strokeWeight(0)
fill('purple')
square(PSx1,PSy1,Pd)

//yellow square
strokeWeight(0)
fill('yellow')
square(YSx1,YSy1,Yd)

// scaling square orange
if(dist(mouseX,mouseY,Sx1+d/2,Sy1+d/2)<d){
    //squaresscale
    d+=10
}if(d==width/2-15 || d==height/2-15){
    strokeWeight(0);
    fill(0)
    square(0,0,1000);
    strokeWeight(0);
    fill(random(200,255));
    square(Sx1,Sy1,d);
    d=60;
}

// scaling square purple
if(dist(mouseX,mouseY,PSx1+d/2,PSy1+Pd/2)<Pd){
    //squaresscale
    Pd+=30
}if(Pd==width/4 || Pd==height/4){
    strokeWeight(0);
    fill(0)
    square(0,0,1000);
    strokeWeight(0);
    fill(random(200,255));
    square(PSx1,PSy1,Pd);
    Pd=60;
}

// scaling square yellow
if(dist(mouseX,mouseY,YSx1+d/2,YSy1+Yd/2)<Yd){
    //squaresscale
    Yd+=1
}if(Yd==width/4 || Yd==height/4){
    strokeWeight(0);
    fill(0)
    square(0,0,1000);
    strokeWeight(0);
    fill(random(200,255));
    square(YSx1,YSy1,Yd);
    Yd=60;
}



//grid lines vertical left to right
//color
if(scolor==0){
stroke('red');
strokeWeight(3);
line(x1,y1,x2,y2);
}if(scolor==1){
stroke('green');
strokeWeight(3);
line(x1,y1,x2,y2);
}if(scolor==2){
stroke('blue');
strokeWeight(3);
line(x1,y1,x2,y2);
}if(scolor>2){
    scolor=0;
} 




//grid creation animation
x1+=gap
x2+=gap

//lines hit edge of canvas
if(x1>=width-60){
    //move down a row
    y1+=gap*2;
    y2+=gap*2;
    //reset x values
    x1=gap;
    x2=gap;
//loop lines across screen
}if(y2>=height){
    x1=30;
    x2=30;
    y1=30;
    y2=60;
    scolor +=1
}

//grid lines horizontal color top down
//color
if(scolor==2){
stroke('red');
strokeWeight(3);
line(Ax1,Ay1,Ax2,Ay2);
}if(scolor==1){
stroke('green');
strokeWeight(3);
line(Ax1,Ay1,Ax2,Ay2);
}if(scolor==0){
stroke('blue');
strokeWeight(3);
line(Ax1,Ay1,Ax2,Ay2);
}if(scolor>2){
    scolor=0;
}

//grid creation animation
Ay1+=gap
Ay2+=gap

//lines hit edge of canvas
if(Ay1>=height){
    //move across a row
    Ax1+=gap*2;
    Ax2+=gap*2;
    //reset y values
    Ay1=gap + slant;
    Ay2=gap;
//loop lines across screen
}if(Ax2>width){
    Ax1=60;
    Ax2=90;
    Ay1=30;
    Ay2=30;
    scolor +=1
}



//refresh page
if(mouseIsPressed){
    if(mouseButton == RIGHT){
    
    fill(0)
    rect(0,0,width,height);
    //orange square
    Sx1 = 60
    Sy1 = 60
    d = 30

    //purple square
    PSx1 = 240
    PSy1 = 300
    Pd = 30

    //yellow square
    YSx1 = 420
    YSy1 = 210
    Yd = 30
}
}

//slant
if(mouseX>width/2){
    //slant for vertical
    x1=x1+gap;

}
if(mouseY>height/2){
    //slant for horizontal
    Ay1=Ay1+gap;

}

}