Shannon Ha – Project 03 – Dynamic Drawing

sketch

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project - 03: Interactive Drawing

var diam1 = 50; //diameter of
var diam1a = 70;//
var speedcircle = 1;//speed of circle
var dir = 1;// direction of pulsing circle
var angle = 0; // angle of rotation
var speedangle = 0.2
var lineAX = 200;
var lineAX2 = 100
var lineAY = 175;
var diam2 = 135;
var diam3 = 200

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

}

//top-right ellipse
function draw() {
  background(0);
  fill(220, mouseX/2, mouseY/2);
  ellipse(70, 70, diam1, diam1);
    diam1 += dir * speedcircle/2;
    if(diam1 > 150){
      dir = -dir;
      diam1 = 150;
    }
    else if(diam1 < 0){
      dir = -dir;
      diam1 = 0;
    }

//mouse ellipse
  fill(0);
  push();
  ellipse(mouseX, mouseY, mouseX+1, mouseX+1);
    fill(246,mouseX,mouseY);

  //middle ellipse
  ellipse(200,240,diam2,diam2);

  diam2 += dir * (speedcircle + 2);

  if(diam2 > 300){
    dir = -dir;
    diam2 = 300;
  }
  else if(diam2 < 0){
    dir = -dir;
    diam2 = 0;
  }

//left-most ellipse
  ellipse(470,190,mouseX/2,mouseY/2);
  noStroke();
  fill(200,0,mouseX/2);
  if (mouseX/2 <= diam3/2){
    mouseX = 30;
  }

  if (mouseY/2 <= diam3/2){
    mouseY = 30;
  }

//spinning lines
  stroke(0,250,mouseY);
  strokeWeight(5);
  push();

  translate(mouseX, mouseY);
  rotate(mouseX/2 || mouseY/2);
  line(lineAX,lineAY,lineAX2,lineAY);
  line(lineAX+40,lineAY+40,lineAX2+40,lineAY+40);
  line(lineAX-50,lineAY-50,lineAX2-50,lineAY-50);
  line(lineAX-20,lineAY-20,lineAX2-20,lineAY-20);

  pop();






}

For this weeks project, I wanted to create a dynamic drawing that resembled fireworks, however, I struggled a lot to make the lines move, so I decided to simplify it to just ellipses instead.