dnam-project-03-dynamic-drawing

dnam-Project-03-Dynamic-Drawing

// Doo Won Nam
// 15-104 :: 1 Section B
// dnam@andrew.cmu.edu
// Project-03-Dynamic-Drawing

//basic start - setting the canvas and setting a frame rate to avoid
//too many flickers
//setting the variables for Height so it can change
var rectHeight = 20;
//setting the variable angle to rotate the rectangle
var angle = 0;

function setup() {
  createCanvas(640, 480);
}
//start with a background that changes color based on the position of the mouse
function draw() {
  background(mouseX - 50, mouseY - 20, mouseX + 100);
//making flowers (left and right) that also change color based on the
//position of the mouse, left changes depending on how the mouse is located
//and right one changes depending on left/right movement of the mouse
//the mouse movement gives the two flowers contrary shades
//I make sure to reset the translate at the end of each 'set'
  push();
  translate(120, 200);
  fill(mouseY, mouseY, mouseY);
  noStroke();
  for (var i = 0; i < 10; i ++) {
    ellipse(0, 30, 40, 100);
    rotate(PI/5);
  }
  pop();
  push();
  translate(500, 200);
  fill(mouseX, mouseX, mouseX);
  noStroke();
  for (var i = 0; i < 10; i ++) {
    ellipse(0, 30, 40, 100);
    rotate(PI/5);
  }
  pop();
//making a rectangle between two flowers that change colors when the
//the mouse is right on top of the rectangle
  if ((mouseX > 210) & (mouseX < 410) &&
        (mouseY > 300) && (mouseY < 300 + rectHeight)) {
        fill(0);
    } else {
        fill(100, 200, 400, 60);
    }

  noStroke();
  rect(210, 300, 200, rectHeight);
//if mouse is on the left, the rectangle increases towards an upward direction
//if mouse is on the right, the rectangle gets bigger in height downwards
//using a boolean and the middle of the canvas (for X), I am able to
//increase the size depending on the position of the mouse
  if (mouseX > 320) {
    rectHeight += 20;  }
  else {
    rectHeight -= 20;
  }
//these two ifs are to ensure the rectangle resets instead of going way below
//or above the canvas size
  if (rectHeight > 480) {
    rectHeight = 0;
  }
  if (rectHeight < -480) {
    rectHeight = 0;
  }
//rectangle that does not fully follow the movement of the mouse, but slowly
//rotate around the mouse. Moving the mouse will affect it's angle, speed, and
//position.
  push();
  translate(mouseX, mouseY);
  rectMode(CENTER);
  rotate(radians(angle));
  rect(mouseX, mouseY, 20, 20);
  pop();
  angle = angle + .1;
//speeds up / changes angle when mouse is over 200 in the x axis.
  if (mouseX > 200) {
    angle = angle + 1;
  }
}

Making an interactive, dynamic drawing was very difficult for me. One of the aspects that I struggled with the most would be making sure the artwork would change as my mouse moves. I was not sure what to draw with the program, so I decided to create something that resembles a face (as we made faces the last two projects, making a face felt natural). By following the guidelines, I used bright colours to decorate the piece.