//elephant
var LeftEarW = 110;
var LeftEarH = 150;
var RightEarW = 70;
var RightEarH = 100;
//heights of mountains
var mh1 = 150;
var mh2 = 230;
var mh3 = 260;
var mh4 = 300;
var mh5 = 200;
var Y = 300; // y coordinate of snow
var R = 229;
var G = 247;
var B = 224;
function setup() {
createCanvas(640, 480);
angleMode(DEGREES);
}
function draw() {
background(R, G, B);
//skycolor change
if (mouseX > 0 & mouseX < width){
R = 229 - mouseX/20;
G = 247 - mouseX/50;
B = 224 + mouseX/20;
}
//mountains
//mountains decrease
if (mouseX < width/2){
mh1 ++;
mh2 ++;
mh3 ++;
mh4 ++;
mh5 ++;
}
//mountain stop decreasing
if (mh1 > 250){
mh1 = 250;
}
if (mh2 > 330){
mh2 = 330;
}
if (mh3 > 360){
mh3 = 360;
}
if (mh4 > 400){
mh4 = 400;
}
if (mh5 > 300){
mh5 = 300;
}
//mountains increase
if (mouseX > width/2){
mh1 --;
mh2 --;
mh3 --;
mh4 --;
mh5 --;
}
//mountains stop increasing
if (mh1 < 150){
mh1 = 150;
}
if (mh2 < 230){
mh2 = 230;
}
if (mh3 < 260){
mh3 = 260;
}
if (mh4 < 300){
mh4 = 300;
}
if (mh5 < 200){
mh5 = 200;
}
//mountains
noStroke();
fill(185, 230, 191);
triangle(400, height, 700, height, 530, mh1);
fill(164, 201, 169);
triangle(300, height, 700, height, 470, mh2);
fill(97, 147, 147);
triangle(300, height, 400, height, 350, mh3);
triangle(450, height, 580, height, 520, mh4);
fill(62, 109, 92);
triangle(360, height, 500, height, 430, mh5);
//sun turns to moon
fill(255, 255, 238);
ellipse(mouseX, 90, 70, 70);
if (mouseX > width/2){
var offset = map(mouseX, 0, width, 100, 0); //offset of the ellipse to make moon
fill(R, G, B);
ellipse(mouseX - offset, 90, 70, 70);
}
//snow
if (mouseX > width/2){
Y ++;
if (Y > 400){
Y = 400;
}
} else {
Y = 300;
}
fill(255, 255, 238);
ellipse(350, Y, 10, 10);
ellipse(390, Y + 20, 10, 10);
ellipse(450, Y - 30, 10, 10);
ellipse(500, Y + 40, 10, 10);
ellipse(530, Y + 20, 10, 10);
ellipse(600, Y - 50, 10, 10);
//elephant
//body
push();
translate(-150, 130);
noStroke();
fill(210);
beginShape();
curveVertex(200, 250);
curveVertex(220, 260);
curveVertex(175, 330);
curveVertex(165, 400);
curveVertex(300, 400);
curveVertex(330, 240);
curveVertex(350, 240);
endShape();
pop();
push();
translate(-150, 130);
var angle = map(mouseX, 0, width, 0, 5);
rotate(angle);
if (mouseX > 640){
mouseX = 640;
}
//right ear
push();
rotate(10);
noStroke();
fill(210);
ellipse(270, 120, RightEarW, RightEarH);
fill(252, 225, 225);
ellipse(270, 120, RightEarW/1.5, RightEarH/1.5); //inner ear
pop();
//Left ear
noStroke();
fill(210);
ellipse(220, 210, LeftEarW, LeftEarH);
fill(252, 225, 225);
ellipse(220, 210, LeftEarW/1.5, LeftEarH/1.5); //inner ear
//face
noStroke();
fill(210);
ellipse(300, 220, 150, 150);
//eye
fill(50, 32, 32);
ellipse(345, 220, 10, 10);
//cheek
fill(232, 200, 200);
ellipse(330, 250, 35, 20);
//nose
fill(210);
beginShape();
curveVertex(350, 200);
curveVertex(355, 190);
curveVertex(375, 180);
curveVertex(425, 130);
curveVertex(420, 145);
curveVertex(420, 175);
curveVertex(400, 195);
curveVertex(390, 220);
curveVertex(365, 255);
curveVertex(365, 260);
endShape();
fill(255, 255, 238);
ellipse(450, 150, 10, 10);
ellipse(470, 110, 10, 10);
pop();
}
In this project, I try to depict the change from day to night. The background color, the sun and moon, the snow, and the elephant’s head all changes with mouseX. I also use map function to set limit for the change.