The most interesting combination I have seen from the online Video is:

“mousePressed+random+fill+mouseX,mouseY”

I’m gonna try to use this to create the basic background for this artwork.

Here is Final video: https://editor.p5js.org/LunaChen/sketches/ZnvpK4nF1

https://editor.p5js.org/LunaChen/full/ZnvpK4nF1

List Variables

First set the variables, I know it’s a lot. But I literally used everyone of them.

Color picked using COLORS

let myRed = "#ff1b6b";
let myBlue = "#60efff";
let myPurple = "#8364e8";
let myPink = "#f5bfd7";
let myYellow = "#fff95b";
let myGreen = "#aefb2a";
let myOrange = "#ff930f";
let myRose = "#e81cff";
let myCirlce;
let myLine;
let lineWidth;
let squareSize;
let lastStroke;
let newStroke;
let speed = 3;
var r = 0;
var x = 0;
var y = 0;
var z;
var easing = 0.1;
var offset = 10;
let circle1x = 0;
let circle2x = 0;
let circle3y = 0;
let circle4y = 0;

Setup Function

Set the canvas to the size of windowWidth and windowHeight to make the future measurment easier.

function setup() {
createCanvas(windowWidth, windowHeight);
z = width / 2;
background(0);
}

Blink Changing Square on Background

The constantly changing rectangular in the backgrond, here I used variable lineWidth and squareSize

to make the rectangular change in random way.

//background rect blink changing
rectMode(CENTER);
fill("#aefb2a10");
stroke("#ff930f20");
lineWidth = random(3, 20);
squareSize = random(150, width);
square(width / 2, height / 2, squareSize);//green stroke yellow fill with 10/20 transparancy

rectMode(CENTER);
fill("#f5bfd720");
stroke("#e81cff30");
lineWidth = random(10, 100);
squareSize = random(20, width);
square(width / 2, height / 2, squareSize);//pink fill rose strokee with 20/30 transparancy

//mouseXY circle
var targetX = mouseX;
x += (targetX - x) * easing;
var targetY = mouseY;
y += (targetY - y) * easing;
noStroke();
fill(random(100, 255), random(180, 255), random(230, 255));
myCircle = circle;
circle(x, y, 50);