Danny Cho – Project 3 _ Dynamic Drawing

DannyCho_DyDraw

var orbitX = 0;
var orbitY = 0;
var speed = 10;
var ellipseX = 0;
var ellipseY = 0;
var width = 640;
var height = 480;
var bgColor = 255;
var strkColor = 0;

function setup() {
  createCanvas(640, 480);
  noStroke(); 
}



function draw(){
	background(bgColor);
  stroke(strkColor);
  //the lines from top and bottom follow the mouse
  for (var i = 0; i * 10 <= width; i++) {
    line(10 * i, -100, mouseX + orbitX, mouseY + orbitY);
    line(10 * i, 580, mouseX + orbitY, mouseY + orbitX);
    i++;

  }
  //the ellipses follow the mouse
  push();
  translate(mouseX, mouseY);
  ellipse(0, 0, 3 * orbitX, 3 * orbitY);
  ellipse(0, 0, 3 * orbitY, 3 * orbitX);
  pop();

  orbitX = 20 * sin(-speed);
  orbitY = 20 * cos(speed);
  speed = speed + 0.0002 * mouseX;
  push();
  translate(mouseX, mouseY);
  //mouseX controls the number of the ellipses
  for (var i = 0; i + floor(mouseX/60) <= 10; i++) {
  
  rotate(radians(speed * 10));
  noFill();
  ellipseMode(CENTER);
  //mouseY controls the size of the ellipses
  ellipse(ellipseX + 5 * i, ellipseY + 5 * i, mouseY / 2, mouseY / 2);
  ellipseX = 100 * sin(speed) + mouseX / 10;
  }
  //depending on the mouse position, the color scheme changes
  if (mouseX - mouseY <= 0) {
    bgColor = 0;
    strkColor = 255;
  }
  else {
    bgColor = 255;
    strkColor = 0;
  }

}

I got interested in radians and trigonometry during this course and wanted to explore it with interactiveness that was a requirement for this project. The position of the mouse controls 4 variables: number of circles orbiting, scale of the circles, speed of their movement, and black and white color scheme.