William Su – Project 03 – Dynamic Drawing

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project-03

x = 100;
y = 100;
angle1 = 0;
segLength = 30;

function setup() {
  createCanvas(640, 480);
  strokeWeight(10);
  stroke(0);
}

function draw() {
  r = 640 - mouseX; // Used for color and shape length
  g = 480 - mouseY; // color
  b = (mouseX + mouseY)/4; // messing with more color

  background(0);

  //Calculating angles for rotation based on mouseX and mouseY
  dx = mouseX - x;
  dy = mouseY - y;
  angle1 = atan2(dy, dx);
  x = mouseX - cos(angle1) * segLength;
  y = mouseY - sin(angle1) * segLength;

  //Line Color and Line Weight
  stroke(r + 100, g + 100, b + 100); // Changes color based on mouse movement.
  strokeWeight(10 + (mouseX / 100)); // Gets thicker as you move mouse right.

// segLength and r changes length of line and also center of rotation.

// Top left
  push();
  translate(width/4, height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Bottom right
  push();
  translate(3 * width/4, 3 * height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Top Right
  push();
  translate(3 * width/4, height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Bottom Left
  push();
  translate(width/4, 3 * height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();
}

In this project, I tried making a isometric, rotating prism. I wasn’t able to work out the faces but I think the gist of it is shown with the 4 segments shown. The segments change size (thickness and length), color, and orientation depending on where your mouse is in the window.