//SunMin Kim
//Section E
//sunmink@andrew.cmu.edu
//project-03
//variables for background elements
var smokecolor = 255;
var angle = 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
//Sky
background(209, 234, 254);
noStroke(0);
//Greens
fill(109, 195, 50);
rect(0, 380, 640, 300);
//Tree trunks
fill(84, 78, 38);
rect(20, 270, 20, 120);
rect(60, 270, 20, 120);
rect(100, 270, 20, 120);
rect(140, 270, 20, 120);
rect(180, 270, 20, 120);
rect(220, 270, 20, 120);
rect(260, 270, 20, 120);
//Tree leaves
fill(135, 140, 30);
ellipse(30, 230, 50, 130);
ellipse(110, 230, 50, 130);
ellipse(190, 230, 50, 130);
ellipse(270, 230, 50, 130);
fill(135, 170, 30);
ellipse(70, 230, 50, 130);
ellipse(150, 230, 50, 130);
ellipse(230, 230, 50, 130);
//Smokes move and change their color depending on position of mouseX
translate ((width) - mouseX * 1.5, 20);
fill (mouseX - smokecolor);
ellipse( 90, 150, 100, 100);
ellipse( 120, 150, 100, 100);
ellipse( 140, 120, 100, 100);
ellipse( 160, 120, 100, 100);
ellipse( 150, 180, 100, 100);
ellipse( 190, 100, 100, 100);
ellipse( 220, 180, 100, 100);
ellipse( 220, 120, 100, 100);
ellipse( 250, 100, 100, 100);
ellipse( 290, 180, 100, 100);
ellipse( 220, 150, 100, 100);
ellipse( 260, 120, 100, 100);
ellipse( 260, 100, 100, 100);
ellipse( 230, 120, 100, 100);
ellipse( 250, 150, 100, 100);
ellipse( 290, 80, 100, 100);
ellipse( 320, 130, 100, 100);
ellipse( 420, 170, 100, 100);
ellipse( 450, 120, 100, 100);
ellipse( 490, 180, 100, 100);
ellipse( 420, 150, 100, 100);
ellipse( 390, 80, 100, 100);
ellipse( 320, 100, 100, 100);
ellipse( 460, 100, 100, 100);
ellipse( 490, 150, 100, 100);
ellipse( 380, 170, 100, 100);
ellipse( 520, 150, 100, 100);
pop();
//sun move depending on position of mouseX
translate ((width) - mouseX * 0.5, 60);
rotate (radians(angle));
fill (236, 188, 0);
//sun changes its size, and constantly rises the angle in following angle + 0.2
ellipse(mouseX - 250, 30, (mouseX + 200)/ 5, (mouseX + 200)/ 5);
angle = angle + 0.2;
}
After creating pong game, I became more interested in coding that can carry a narrative. Thus for the dynamic drawing, I wanted to put in a storyline. I first created a forest and then made smokes that are created before the sun arose.
Throughout this project, I struggled the most when coming up with a story and actualizing it. I feel good with the outcome I came up with and I am excited to create more interactive drawings with more variations.