sunmink-Project03-Dynamic-Drawing

sketch

//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.