Rjpark – Project 03 – Dynamic Drawing

rjpark_dynamicdrawing

// create variables for randomizing color of circles
var r1 = 255;
var b1 = 0;
var g1 = 255;
var r2 = 0;
var b2 = 255;
var g2 = 255;
var r3 = 255;
var b3 = 255;
var g3 = 0;
var r4 = 170;
var b4 = 255;
var g4 = 170;
// create variables for direction change
var angle = 0;

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

function draw() {
    background(0);
    // restrict mouseX to 0-640
    var x = max(min(mouseX, 640), 0);
    // create variable for size change of circles
    var size = x * 400 / 640;
    push();
    rotate(radians(angle));
    // pink circle
    fill(r1, b1, g1);
    ellipse(x, 0, size, size);
    // blue circle
    fill(r2, b2, g2);
    ellipse(640, x, size, size);
    // yellow cirlce
    fill(r3, b3, g3);
    ellipse(640 - x, 480, size, size);
    // green circle
    fill(r4, b4, g4);
    ellipse(0, 480 - x, size, size);
    pop();

    if (x < 250) {
        // colors change
        r1 = 0;
        b1 = 255;
        g1 = 255;
        r2 = 255;
        b2 = 255;
        g2 = 0;
        r3 = 170;
        b3 = 255;
        g3 = 170;
        r4 = 255;
        b4 = 0;
        g4 = 255;
        // direction changes
        angle = 0;
    }
    if (x > 250) {
        // colors change
        r1 = 255;
        b1 = 0;
        g1 = 255;
        r2 = 0;
        b2 = 255;
        g2 = 255;
        r3 = 255;
        b3 = 255;
        g3 = 0;
        r4 = 170;
        b4 = 255;
        g4 = 170;
        // direction changes
        angle += 5;
    }
}

The 4 things I changed about the circles according to the movement of the mouse across the screen (not up and down) were color, direction, size, and position. As the mouse moves towards the right, the colors change, the size of the circles increase and the circles start to rotate. In addition, the circle follows the mouse across the screen until rotation.