Ellan Suder Project-03: Dynamic Drawing

I first began with a really simple script that made the circle 50px wide on the right of the screen and 10px otherwise. Then I used the += to gradually add to the width, which made the circle have a more interesting transition as it crossed the x-axis.

dynamic drawing

/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-03
*/

var angle;
var circleWidth;
var circleHeight;

function setup() {
    createCanvas(600, 400);
    var angle = 0;
}

function draw() {
    background(255, 90);
    fill(150);
    noStroke();
  
//if mouse crosses to right side, 
//circle adds value of mouseX to diameter
//gets bigger as it gets further from middle x axis
    if (mouseX > width/2) {
      circleWidth = 50 + (width/2 - mouseX);
    } else {
      circleWidth = 50 + (width/2 - mouseX);
  }
  
//if mouse goes to bottom half, 
//circle becomes black
    if (mouseY > height/2) {
      fill(0);
    } else {
      fill(200);
  }
  
//circle
    ellipse( 
      mouseX, 
      mouseY, 
      circleWidth,
      circleHeight);

// rectangle that changes angle according to mouseX
// rectangle moves further out as mouseY becomes bigger
    push();
    rotate(radians(angle));
    rect(5,mouseY, 50, 50);
    pop();
    angle = mouseX + 5;
}