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.
/*
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;
}