function setup() {
createCanvas(600, 450,);
background(220);
}
function draw() {
var x = mouseX
var y = mouseY
var g = 0
var b = 0
//background
background(0)
push();
translate(mouseX-750,0)
stroke(255,)
strokeWeight(2)
scale(3,1)
line(0,20,50,20)
line(120,40,130,40)
line(60,50,130,50)
line(300,80,350,80)
line(300,90,380,90)
line(100,100,170,100)
line(230,130,280,130)
line(200,160,210,160)
line(40,170,90,170)
line(400,200,420,200)
line(340,220,370,220)
line(220,230,310,230)
line(420,270,440,270)
line(80,280,180,280)
line(160,290,150,290)
line(370,320,420,320)
line(10,330,90,330)
line(140,350,170,350)
line(40,370,60,370)
line(320,390,330,390)
line(80,400,120,400)
line(210,430,260,430)
line(400,440,450,440)
pop();
// spinning arcs
strokeWeight(1+y/50);
noFill();
//transformations
translate(300,225);
rotate(radians(x/2));
cony = max(y,.5);
scale(cony/200);
noStroke();
fill(0);
circle(0,0,270);
g = g + x/3
b = b + x/8
//arcs (smallest to largest)
noFill();
stroke(255,0+g,0+b);
arc(0,0,140,140,-PI/4,4*PI/5);
rotate(radians(x/2));
arc(0,0,180,180,PI/2,4*PI/3);
rotate(radians(x/5));
arc(0,0,200,200,PI,9*PI/4);
rotate(radians(x/7));
arc(0,0,270,270,11*PI/6,5*PI/6);
}
I incorporated two animated ideas into one which creates a different dynamic on motion, one moving horizontally and the other moving within itself while changing size position and color.