var offset=50;
var barX=offset
var barY;
var barW;
var barH=30;
var sliderX = offset
var sliderY;
var sliderW=50;
var sliderH=30;
var modify=50;
var colorR=133;
var colorG=209;
var colorB=228;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(colorR,colorG,colorB);
fill(255);
barY=height-50;
barW=width-2*offset;
rect(barX,barY,barW,barH);
//draw slider box
fill(247,176,193);
sliderY=barY
rect(sliderX,sliderY,sliderW,sliderH);
//draw slider
fill(144,217,148);
ellipse(modify,modify,modify/2);
//draw circle in the top left corner
fill(116,100,185);
ellipse(640-modify,480-modify,modify/2);
//draw circle in the bottom right corner
fill(255,204,222);
ellipse(640-modify,modify,modify/2);
//draw circle in bottom left corner
fill(255,107,29);
ellipse(modify,480-modify,modify/2);
//draw circle in top right corner
push();
translate(width/2,height/2);
rotate(millis()/sliderX);
fill(62+sliderX/5,116,44);
rotate(radians(0));
ellipse(50,50,50,100);
rotate(radians(50));
ellipse(100,100,50,100);
rotate(radians(100));
ellipse(150,150,50,100);
rotate(radians(150));
ellipse(200,200,50,100);
pop();
//draw leaves falling down, leaves rotate in different speeds.
//Leaves turn from green to brown as slider moves.
}
function mouseMoved(){
var sliderMax=width-offset-sliderW;
if (mouseY>=barY & mouseY<=barY+barH){
sliderX=max(min(mouseX,sliderMax),barX);
modify=sliderX/0.8+50;
// if statement restrains that mouse can only be moved within the slider bar. The modify changes shapes of the circles.
}
}
The drawing I am presenting is named falling leaves. The user can put their mouse on the slider and move the mouse within the slider bar to see changes of how the tornado turned leaves from green to brown. The leaves spin really fast in the beginning and slows down once the slider is at the right end. The 4 circles represent people as they come and go and disappear. It should leave a sad feeling in the end as the leaves slowly whirls.