xxxxxxxxxx
//practice about variable
//use translate/random/sin/cos/mousepressed
//A.random circle with random color
//BC.rotating ellipses & circles
//D. 3 circles around mouse
//A. declare random circle/color
let r,g,b,cx,cy,cx1,cy1,cx2,cy2;
//BC. declare planet
let x,y,x1,y1,x2,y2,x3,y3,X,Y;
let counter=0;
//D. rotate circle around mouse
let q=10;
function setup() {
createCanvas(400, 400);
background(255);
}
function draw() {
//A. initialize-random circle &c olor
// can I set the ramdom cirlce&color as a background(it still in loop,but it doesn't affect the upper patterns, just like the layers in Photoshop)
r=random(100,200);
g=0;
b=random(100,200);
cx=random(0,400);
cy=random(0,400);
cx1=random(50,350);
cy1=random(50,350);
cx2=random(100,300);
cy2=random(100,300);
// A. 3 sizes of circles
noStroke();
fill(r,g,b,5);
circle(cx,cy,50);
noStroke();
fill(g,r,b,5);
circle(cx1,cy1,30);
noStroke();
fill(g,g,b,5);
circle(cx2,cy2,20);
push();
background(0,0,0,0);
//B. Saturn
let Y= (sin(counter)*80)+height/2;
let X=(cos(counter)*80)+width/2;
fill(150,50,0,4)
ellipse(X,Y,6,6);
counter+=0.01
// rings
let y1= (sin(counter)*50)+height/2;
let x1=(cos(counter)*160)+width/2;
fill(g,g,g,4);
ellipse(x1,y1,6,3);
counter+=0.01
let y2= (sin(counter)*50)+height/2-20;
let x2=(cos(counter)*160)+width/2;
fill(g,g,r,4);
ellipse(x2,y2,6,3);
counter+=0.01
//C. small circle on top
let y3= (sin(counter)*20)+height/2-110;
let x3=(cos(counter)*20)+width/2;
fill(r,g,g,1)
ellipse(x3,y3,3,3);
counter+=0.01
//D. around mouse
translate(mouseX,mouseY);
fill(255,255,255,10);
noStroke();
rotate(q);
circle(-10,-10,5);
circle(-15,-15,5)
circle(-20,-20,5)
q+=0.1;
pop();
}
// Now the picture will clean up and restart when mouse is pressed. Can I just start a new "around mouse" pattern when i pressed? the rest parts are not restart.
function mousePressed(){
// background(220);
}