![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
/*Curran Zhang
Section A
curranz@andrew.cmu.edu
project_03/
*/
var R = 0;
var G = 170;
var B = 225;
var leftwall = (75);
var rightwall = (525);
var angle = 0;
function setup() {
createCanvas(600,600);
var r = 1
var spinx = cos(angle)*r
var spiny = sin(angle)*r
var con = constrain(mouseX,leftwall,rightwall);
var skycolor = mouseX/(600/225);
}
function draw()
{
background(R,G,B);
if (mouseX > 0 & mouseX < width)
{ R = 0 - mouseX/20;
G = 150 - mouseX/4;
B = 225 - mouseX/4;
}
//Stars
if (mouseX > width/3){
push();
rotate(radians(angle));
fill('white');
ellipse(50,50,1.5,1.5);
angle = angle + 1;
pop();
push();
rotate(radians(angle));
fill('white');
ellipse(100,100,3,3);
angle = angle + 1;
pop();
push();
rotate(radians(angle));
fill('white');
ellipse(100,200,3,3);
angle = angle + 1;
pop();
push();
rotate(radians(angle));
fill('white');
ellipse(300,30,3,3);
angle = angle;
pop();
fill(255);
push();
translate(250, 75);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0, 2, 2);
pop();
push();
translate(400, 200);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0, 3, 3);
pop();
push();
translate(100, 150);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0, 4, 4);
pop();
push();
translate(175, 225);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0, 5, 5);
pop();
push();
translate(500, 180);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0, 5, 5);
pop();
angle = angle + 2;
}
//Sun and Moon
fill('yellow');
var con = constrain(mouseX,leftwall,rightwall);
ellipse(con, 90, 70, 70);
if(mouseX > width/2)
{var x2 = map(mouseX, 0, width,120, 0, true);
fill(0,150 - mouseX/4,225 - mouseX/4);
strokeWeight(0);
ellipse(mouseX - x2, 90, 70, 70);
}
//Mountain
fill(178,71,154);
beginShape();
vertex(0,254);
vertex(2,252);
vertex(60,262);
vertex(148,246);
vertex(259,254);
vertex(460,195);
vertex(600,244);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);
fill(129,61,151);
beginShape();
vertex(0,327);
vertex(10,324);
vertex(31,310);
vertex(40,310);
vertex(57,308);
vertex(93,315);
vertex(133,327);
vertex(182,318);
vertex(231,314);
vertex(241,316);
vertex(325,354);
vertex(403,341);
vertex(425,337);
vertex(469,337);
vertex(518,318);
vertex(580,304);
vertex(600,296);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);
fill(77,40,119);
beginShape();
vertex(0,445);
vertex(33,435);
vertex(56,425);
vertex(70,413);
vertex(109,413);
vertex(130,420);
vertex(180,433);
vertex(227,439);
vertex(260,445);
vertex(283,436);
vertex(325,429);
vertex(335,420);
vertex(360,409);
vertex(385,396);
vertex(470,400);
vertex(485,403);
vertex(527,401);
vertex(553,396);
vertex(558,394);
vertex(584,396);
vertex(600,400);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);
fill(205,121,178);
beginShape();
vertex(12,268);
vertex(30,271);
vertex(37,277);
vertex(55,277);
vertex(46,285);
vertex(28,285);
vertex(27,280);
vertex(17,277);
endShape(CLOSE);
fill(205,121,178);
beginShape();
vertex(165,271);
vertex(179,257);
vertex(211,253);
vertex(213,261);
vertex(233,263);
vertex(242,276);
vertex(210,274);
vertex(196,268);
endShape(CLOSE);
fill(205,121,178);
beginShape();
vertex(473,209);
vertex(499,224);
vertex(528,228);
vertex(567,244);
vertex(590,251);
vertex(590,278);
vertex(573,281);
vertex(549,268);
vertex(519,267);
vertex(492,256);
vertex(472,237);
vertex(466,219);
endShape(CLOSE);
fill(54,31,86);
rect(0,575,600,50);
//Tree
fill(54,31,86);
rect(30,540,6,35);
if (mouseX > 15 & mouseX < 45) {
fill(54,31,86);
ellipse(33,530,20,40);
} else{
fill(54,31,86);
ellipse(33,540,20,40);}
rect(60,550,6,25);
if (mouseX > 45 & mouseX < 75) {
fill(54,31,86);
ellipse(63,540,20,40);
} else{
fill(54,31,86);
ellipse(63,550,20,40);}
rect(120,545,6,30);
if (mouseX > 105 & mouseX < 135) {
fill(54,31,86);
ellipse(123,535,20,40);
} else{
fill(54,31,86);
ellipse(123,545,20,40);}
rect(150,550,6,25);
if (mouseX > 135 & mouseX < 165) {
fill(54,31,86);
ellipse(153,540,20,40);
} else{
fill(54,31,86);
ellipse(153,550,20,40);}
rect(180,540,6,35);
if (mouseX > 165 & mouseX < 195) {
fill(54,31,86);
ellipse(183,530,20,40);
} else{
fill(54,31,86);
ellipse(183,540,20,40);}
rect(210,550,6,25);
if (mouseX > 195 & mouseX < 225) {
fill(54,31,86);
ellipse(213,540,20,40);
} else{
fill(54,31,86);
ellipse(213,550,20,40);}
rect(240,550,6,25);
if (mouseX > 225 & mouseX < 255) {
fill(54,31,86);
ellipse(243,540,20,40);
} else{
fill(54,31,86);
ellipse(243,550,20,40);}
rect(300,550,6,25);
if (mouseX > 285 & mouseX < 315) {
fill(54,31,86);
ellipse(303,540,20,40);
} else{
fill(54,31,86);
ellipse(303,550,20,40);}
rect(330,550,6,25);
if (mouseX > 315 & mouseX < 345) {
fill(54,31,86);
ellipse(333,540,20,40);
} else{
fill(54,31,86);
ellipse(333,550,20,40);}
rect(360,550,6,25);
if (mouseX > 345 & mouseX < 375) {
fill(54,31,86);
ellipse(363,540,20,40);
} else{
fill(54,31,86);
ellipse(363,550,20,40);}
rect(390,540,6,35);
if (mouseX > 375 & mouseX < 405) {
fill(54,31,86);
ellipse(393,530,20,40);
} else{
fill(54,31,86);
ellipse(393,540,20,40);}
rect(420,550,6,25);
if (mouseX > 405 & mouseX < 435) {
fill(54,31,86);
ellipse(423,540,20,40);
} else{
fill(54,31,86);
ellipse(423,550,20,40);}
rect(450,550,6,25);
if (mouseX > 435 & mouseX < 465) {
fill(54,31,86);
ellipse(453,540,20,40);
} else{
fill(54,31,86);
ellipse(453,550,20,40);}
rect(510,540,6,35);
if (mouseX > 495 & mouseX < 525) {
fill(54,31,86);
ellipse(513,530,20,40);
} else{
fill(54,31,86);
ellipse(513,540,20,40);}
rect(540,550,6,25);
if (mouseX > 525 & mouseX < 555) {
fill(54,31,86);
ellipse(543,540,20,40);
} else{
fill(54,31,86);
ellipse(543,550,20,40);}
rect(570,550,6,25);
if (mouseX > 555 & mouseX < 585) {
fill(54,31,86);
ellipse(573,540,20,40);
} else{
fill(54,31,86);
ellipse(573,550,20,40);
}
}
For this project, I tried to incorporate if statements into the code to create more motion. The most difficult part was getting the trees to move up and down, but the problem was solved with the help of if/else statements.