In Process P5 Sketch

The gridded circles expand and contract and change from orange to blue while they do so. If you press the mouse or a key, the color in the circles disappears. Additionally, the colored lines in the background change with the placement of the mouse.

p5.js Web Editor | Assignment3 (p5js.org)

let diam=10;

let direction=1;

let x;

let y;

let speed=1;

function setup() {

createCanvas(1280, 720);

ellipseMode(CENTER);

}

function draw() {

background(0,5);

strokeWeight(200);

stroke(102,160,80,80);

line(mouseX,0,mouseX,height);

strokeWeight(100);

stroke(115,160,210,80);

let mx=mouseX/2+280;

line(mx,0,mx,height);

strokeWeight(120);

stroke(250,160,240,60);

line(0,mouseY,width,mouseY);

strokeWeight(40);

stroke(230,150,50,60);

let my=mouseY/2+120;

line(0,my,width,my);

if(diam>=58||diam<=-3){

direction*=-1;}

if(direction==-1){

fill( 30,150,250,50)

}else{

fill(230,150,50,90);

}

if(mouseIsPressed||keyIsPressed){

fill(0,0)

}

for (let y=20; y<=height; y+=40)

{for (let x=20; x<=width; x+=40)

{

if(keyIsPressed){

x+=random(-speed,speed);

}

strokeWeight(5);

stroke(250,160,240);

ellipse(x,y,diam);

}}

for (let x=40; x<=width; x+=40)

{

strokeWeight(4);

stroke(250,160,240,80);

line(x,0,x,height);

}

for (let y=40; y<=height; y+=40)

{

strokeWeight(4);

stroke(250,160,240,80);

line(0,y,width,y);

}

diam+=1*direction;

}