dchikows – Section C – Project-03-Dynamic-Drawing

Sketch

// David Chikowski
// Section C
// dchikows@andrew.cmu.edu
// Project-03-Dynamic-Drawing


var angle = 0;

function setup() {
  createCanvas(640,480);
  strokeWeight(30); //line thicknesses
}

function draw() {
   background(155, 244, 66); // bright lime Green
    if (mouseY < (240)) // if Y cordinate of mouse goes bellow 240 background changed to lime green 
        background(175, 60, 201); // Purple


  var m = max(min(mouseY, 480), 0); //sets limits for lines

  stroke(255);
  line(m - 50, m - 80, 0, 480); 
  //white line

  stroke(24,96,200);
  line(m + 380,m + 120,640,480);
  //blue line

  stroke(255,40,30);
  line(m + 278,m + 400,640,0);
  //red line

  stroke(50,100,50);
  line(m + 140,m + 200,640,480);
  //Green line
  
  //Creates a circle that rotates around the 
  //top point of the white line 
  fill(219, 154, 35); //elipse color
  noStroke();
  push();
  translate(m - 50, m - 80); //set to follow the top point of the white line
  rotate(radians(angle));
  ellipse(10, 10, 10, 10);
  pop();
  angle = angle + 10;

  noStroke();
  fill(155, 244, 66); // bright lime Green
    if (mouseY > (240)) // if Y cordinate of mouse goes bellow 240 ellipse changes to lime green
        fill(175, 60, 201); // if Y cordinate of mouse goes above 240 ellipse changes to Purple
  ellipse(56, 46, mouseY - 200, mouseY - 155); 


}

 

 

 

I started to develop my dynamic drawing with the four lines and then worked out from there making adjustments as I went through the process. I decided to strictly use mouseY to control the image so the user could do it faster.

 

 

var angle = 0;

function setup() {
createCanvas(640,480);
strokeWeight(30); //line thicknesses
}

function draw() {
background(155, 244, 66); // bright lime Green
if (mouseY < (240)) // if Y cordinate of mouse goes bellow 240 background changed to lime green
background(175, 60, 201); // Purple

 

var m = max(min(mouseY, 480), 0); //sets limits for lines

stroke(255);
line(m – 50, m – 80, 0, 480);
//white line

stroke(24,96,200);
line(m + 380,m + 120,640,480);
//blue line

stroke(255,40,30);
line(m + 278,m + 400,640,0);
//red line

stroke(50,100,50);
line(m + 140,m + 200,640,480);
//Green line

//Creates a circle that rotates around the
//top point of the white line
fill(219, 154, 35); //elipse color
noStroke();
push();
translate(m – 50, m – 80); //set to follow the top point of the white line
rotate(radians(angle));
ellipse(10, 10, 10, 10);
pop();
angle = angle + 10;

noStroke();
fill(155, 244, 66); // bright lime Green
if (mouseY > (240)) // if Y cordinate of mouse goes bellow 240 ellipse changes to lime green
fill(175, 60, 201); // if Y cordinate of mouse goes above 240 ellipse changes to Purple
ellipse(56, 46, mouseY – 200, mouseY – 155);

 

}