My process for this project at first was to just mess around and see what shapes i can get to move, and then I realized I can make a moving pinwheel thats speed and direction is determined by mouse clicks and what side of the canvas the clicks occur. Everything after the pinwheel was design to make the appearance look better, the pinwheel is the main part of this piece.
sketchDownload
//Anthony Prestigiacomo aprestig section:C
var angle=0;
var degree=5;
var x=-300;
var y=0;
var hvel=5;
var cloudx=0;
var cloudxx=0;
cloudyy=0;
var cloudy=-10;
var r=50;
var vcloud=2;
var vcloud2=2.75;
var suncolor=0;
var bcolor=0;
var mooncolor=0;
function setup() {
createCanvas(600, 450);
background(203,234,246);
}
function draw() {
background(203, 234, 246);
noStroke();
fill(bcolor);
rect(0,0,600,450); //night sky
translate(width / 2, height / 3);
push();
if(mouseX>300){ //twinkling stars
scale(2);
};
fill(203, 234, 246);
circle(50,100,1); //stars
circle(-50,100,1);
circle(57,250,1);
circle(82,-58,1);
circle(-200,133,1);
circle(-5,-124,1);
circle(-72,-230,1);
circle(100,10,1);
circle(150,45,1);
circle(-150,-67,1);
circle(50,50,1);
circle(-50,-50,1);
circle(-50,50,1);
circle(-150,125,1);
circle(-75,-30,1);
circle(-45,-75,1);
circle(-75,-75,1);
circle(-200,-125,1);
pop();
push();
noStroke();
fill(suncolor); //sun
circle(-150,-150,250);
fill(203, 234, 246); //moon
circle(150,150,250);
fill(mooncolor);
circle(105,105,25); //moon craters
circle(100,220,20);
circle(175,175,75);
circle(190,90,40);
push();
translate(-300,-height/3);
fill(212,124,47); //bird on the mouse
circle(mouseX,mouseY,50);
fill(48,46,59);
circle(mouseX+25,mouseY-13,25);
fill(105,107,102);
triangle(mouseX-35,mouseY-5,mouseX+5,mouseY-5,mouseX-25,mouseY+25);
fill(255,255,0);
triangle(mouseX+25, mouseY-13, mouseX+30,mouseY-13, mouseX+25, mouseY-8);
pop();
fill(255); //cloud white
circle(cloudx,cloudy,r); //top cloud
circle(cloudx+25,cloudy,r);
circle(cloudx+12.5,cloudy-25,r);
circle(cloudxx-100, cloudy+150,r); //bottom cloud
circle(cloudxx-75,cloudy+150,r);
circle(cloudxx-87.5,cloudy+125,r);
cloudxx+=vcloud2;
cloudx+= vcloud;
if(cloudxx>400){ //makes clouds reappear on left side of screen
cloudxx=-300;
};
if(cloudx>325){
cloudx=-300;
}
pop();
push();
strokeWeight(10);
stroke(0);
line(0,0,0,height); //pinwheel handle
noStroke();
rotate(radians(angle)); //rotate pinwheel
push();
push();
if(mouseX>width/2){ //scale white triangles
scale(.5)
};
fill(255);
triangle(0,0,100,100,60,10);
triangle(0,0,100,-100,10,-60);
triangle(0,0,-100,100,-10,60);
triangle(0,0,-100,-100,-60,-10);
pop();
if(mouseY>height/3){ //scale colored triangles
scale(1.25)
}
fill(255,0,0);
triangle(0,0,0,145,25,50); //red triangle
fill(0,255,0);
triangle(0,0,0,-145,-25,-50); //green triangle
fill(0,0,255);
triangle(0,0,145,0,50,-25); //blue triangle
fill(255,255,0);
triangle(0,0,-145,0,-50,25); //yellow triangle
pop();
pop();
fill(0);
circle(0,0,25); //black middle circle
fill(255);
circle(0,0,12.5); //small white triangle
rect(x,y-105, 100,1); //wind lines
rect(x+50,y-100, 100,1);
rect(x+25,y-95, 100,1);
x +=hvel;
if(x>=300){ //wind starts at left when passing x=300
x=-300
};
angle+=degree;
fill(0,100,0);
rect(-300, 250,600,75); //grass
}
function mousePressed() {
if(mouseX < width / 2) {
degree -= 5
} else {
degree += 5
};
if (mouseX<width/2 & mouseY>height/3){
suncolor=0;
bcolor=0;
mooncolor=color(211,211,211);
} else {
suncolor=color(255,255,0);
bcolor=color(203, 234, 246);
mooncolor=color(203, 234, 246);
}
}