Ian Kaneko Project – 03 – Dynamic Drawing

For this project I made something resembling a solar system. I think the different rotation rates of the circles is my favorite part about this.

ikaneko dynamic drawing

var canvasWidth = 640;
var canvasHeight = 480;
var angle = 0;
var r = 0;
var g = 0;
var b = 0;
var angle = 0;
var star = 0;


function setup() {
    createCanvas(canvasWidth, canvasHeight);
    
} 

// I used canvasWidth and height / 2 for the coordinates of the center of the canvas.

function draw() {
    background(220);
    noStroke();

    // Background made of blue rectangles

    fill(180, 180, 230);
    rect(0, canvasHeight * 0.75, canvasWidth, canvasHeight / 4);
    fill(160, 160, 200);
    rect(0, canvasHeight / 2, canvasWidth, canvasHeight / 4);
    fill(140, 140, 180);
    rect(0, canvasHeight / 4, canvasWidth, canvasHeight / 4);
    fill(120, 120, 160);
    rect(0, 0, canvasWidth, canvasHeight / 4);

    // Big yellow circle in the middle

    fill(240, 200, 160);
    circle(canvasWidth / 2, canvasHeight / 2, mouseX / 2);
    fill(240, 220, 220);
    circle(canvasWidth / 2, canvasHeight / 2, mouseY / 2);

    // Moving brown rectangles that change with the mouseX

    fill(80, 30, 30);
    rect((canvasWidth / 2) - mouseX, canvasHeight * 0.75, canvasWidth, canvasHeight / 8);
    fill(120, 70, 70);
    rect((canvasWidth / 2) - mouseX, canvasHeight / 4, canvasWidth, canvasHeight / 8);
    fill(140, 90, 90);
    rect(mouseX - (canvasWidth / 2), 0, canvasWidth, canvasHeight / 8);

    // Orbiting ball

    fill(160, 60, 60);
    push();
    translate(canvasWidth / 2, canvasHeight / 2);
    rotate(radians(angle / 2)); // This one should rotate at a slower rate than the other one
    circle(canvasHeight / 4, 0, 100);
    pop();

    fill(240, 150, 150);
    push();
    translate(canvasWidth /2, canvasHeight / 2);
    rotate(radians(angle));
    circle(canvasHeight / 4, 0, 50);
    pop();
    angle = angle + 1;

    // Ball orbits the faster the mouse is to the center of the screen

    var far = (dist(mouseX, mouseY, canvasWidth / 2, canvasHeight / 2));
    
    fill(80, 40, 80);
    push();
    translate(canvasWidth / 2, canvasHeight / 2);
    rotate(radians(star));
    circle(canvasHeight / 4, 0, 70);
    pop();

    star = star + 5 -(far / 100); // It is /100 because the true distance made it spin way too fast.


    // The ball will pass under this bar
   
    fill(100, 50, 50);
    rect(mouseX - (canvasWidth / 2), canvasHeight / 2, canvasWidth, canvasHeight / 8);

    // Slanted bar that changes color (Using arbitrary large numbers to make sure they go off the canvas)

    fill(r, g, b);
    push();
    rotate(radians(35));
    rect(0, 0, 1000, 10);
    rect(0, 200, 1000, 10);
    rect(0, -200, 1000, 10);
    pop();

    r = mouseX
    g = mouseY
    b = mouseX / 2


}