Nawon Choi— Project-03 Dynamic Drawing

nawon-project-3

// Nawon Choi
// Section C
// nawonc@andrew.cmu.edu
// Project-03 Dynamic Drawing

var angle = 0;

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

function draw() {
    background("#001c2e");

    // revolving objects
    push();
    rotate(radians(angle));
    noStroke();
    fill(250);
    ellipse(150, 150, 20, 20);
    pop();
    angle += 5 * (mouseX * 0.005);

    if (mouseY > 160 & mouseY < 320) {
        push();
        rotateX(radians(angle));
        noStroke();
        fill("purple");
        ellipse(0, 300, 10, 10);
        pop();
        angle += 0.5 * (mouseX * 0.00001);
    } else if (mouseY > 320 & mouseY < 480) {
        push();
        rotateY(radians(angle));
        noStroke();
        fill("green");
        ellipse(200, 0, 15, 15);
        pop();
        angle += 0.5 * (mouseX * 0.00001);
    } else if (mouseY < 160) {
        push();
        rotateY(radians(angle));
        noStroke();
        fill("blue");
        ellipse(200, 0, 20, 20);
        pop();
        angle += 0.5 * (mouseX * 0.00001);
    } else {
        push();
        rotateX(radians(angle));
        noStroke();
        fill("yellow");
        ellipse(0, 300, 10, 10);
        pop();
        angle += 0.5 * (mouseX * 0.00001);
    }

    // from p5.js reference "directionalLight()"
    // https://p5js.org/reference/#/p5/directionalLight
    let dirX = (mouseX / width - 0.5) * 2;
    let dirY = (mouseY / height - 0.5) * 2;

    var colorR = mouseX / 2;
    var colorG = mouseY / 3;

    directionalLight(250, 250, 250, -dirX, -dirY, -1);

    // draw sphere
    noStroke();
    sphere(150, 150);

    rotateX(mouseY * -0.01);
    rotateY(mouseX * -0.01);
    rotateZ(mouseY * 0.01);
    cylinder(200, 10);

    // fill("white");
    // ellipse(5, 5, 10, 10);



}

For this project, I tried to keep it simple and also experiment with elements that I haven’t used before, which are 3D shapes. I originally played around with boxes and light. The directionalLight() function had a really interesting effect, which I thought it would look better on a circular object. I decided to use spheres and cylinders instead, and have the light be controlled by the mouse position. I also added some circles to revolve around the object (speed controlled by mouse) to add to the “planet” look.