Emily Zhou –– Dynamic Drawing

Moving the mouse to the right side of the frame will draw a colour-changing spiral. Move the mouse to the left side of the frame will erase the spiral.

sketch

// spiral variables:
var angle = 0;
// position parameter
var circleX = 25;
// to keep track of circles
var counter = 0;
// color parameter
var R = -100;
var G = 200;
var B = 20;
// calculation: 360 degrees / 5 degree angle change
var CIRCLES_PER_ROUND = 360 / 5;

function setup() {
    createCanvas(640, 480);
    background(0);
}

function draw() {

    // spiraling colored circles

    // to limit circle size of spiral
    if (counter < 25 * CIRCLES_PER_ROUND) {
        push();
        translate(320, 240);
        rotate(radians(angle));
        // stroke overlap creates smaller circles toward center
        // (size parameter)
        stroke(0);
        // RGB used in color parameter
        fill(R + ((counter - CIRCLES_PER_ROUND) / 8), 
             G - ((counter - CIRCLES_PER_ROUND) / 8),
             B + ((counter - CIRCLES_PER_ROUND) / 8));
        // circleX used in position parameter
        ellipse(circleX, 0, 5, 5);
        pop();
        if (mouseX > width / 2) {
            circleX = circleX + 0.1;
            angle = angle + 5;
            // circle is drawn on every count
            counter = counter + 1;
        }
    }
    
    // spiraling black circles 
    // (opposite direction to "erase")

    // to prevent spiral in opposite direction
    if (counter > 0) {
        push();
        translate(320, 240);
        rotate(radians(angle));
        stroke(0);
        fill(0);
        // circleX used in position parameter
        ellipse(circleX, 0, 7, 7);
        pop();
        if (mouseX < width / 2) {
            // circles drawn counterclockwise
            circleX = circleX - 0.1;
            angle = angle - 5;
            // to keep track of last colored circle
            counter = counter - 1;
        }
    }


    // smiley face

    var m = max(min(mouseX, 640), 0);
    // used in angle parameter
    var angleSmile = m * 640 / 360;

    // yellow circle
    fill(255, 230, 0);
    ellipse(width / 2, height / 2, 50, 50);
    // mouth
    strokeWeight(1.5);
    push();
    translate(320, 240);
    rotate(radians(angleSmile));
    arc(0, 0, 35, 35, 0, PI);
    pop();
    angleSmile = angleSmile + 5;
    // L eye
    fill(0);
    push();
    translate(320, 240);
    rotate(radians(angleSmile));
    ellipse(-8, -7, 3.5, 7);
    pop();
    angleSmile = angleSmile + 5;
    // R eye
    fill(0);
    push();
    translate(320, 240);
    rotate(radians(angleSmile));
    ellipse(8, -7, 3.5, 7);
    pop();
    angleSmile = angleSmile + 5;
    
}

I had some trouble with this project. I started with this idea in mind but realized pretty late into the game that the spiral drawing required background() to be under setup() but adding size parameters required it to be under draw(). I eventually found another way using stroke() but it still limited the graphics. Setting color parameters was also difficult since it was hard to predict; I ended up just experimenting with random values.