Mimi Jiao – Project 6 – Section E

sketch

/*
Mimi Jiao
wjiao@andrew.cmu.edu
Section E
Project-06
*/

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

function draw() {
    var H = hour();
    var M = minute();
    var S = second();
    background(0, 0, 255);
    rotateZ(frameCount * .01);

    //in this for loop, as the seconds increase, 
    //the number of "fan" components within this shape increases
    for (var i = 0; i < S * 100; i++) {
        noStroke();
        fill(i * sin(i), i * cos(i), sin(i) * 200);
        beginShape();
        vertex(sin(i) * 1000, cos(i) * 1000, sin(i) * 1000);
        vertex(sin(i) * 1010, cos(i) * 1010, cos(i) * 1010);
        vertex(cos(i), sin(i), sin(i));
        endShape(CLOSE);
    }

    //size of sphere depends on the minute
    push();
    rotateX(frameCount * .005);
    rotateZ(frameCount * .01);
    for (var a = 0; a < M; a++) {
        noFill();
        strokeWeight(.4);
        //stroke color of sphere
        stroke(sin(radians(M)) * 255, sin(radians(M)) * 255, 
               sin(radians(M)) * 255);
        //Scales the size of the sphere for aesthetic purposes
        var mMap = map(M, 0, 60, 10, width);
        ellipsoid(mMap , mMap , mMap );
    }
    pop();

    push();
    //scales the hour by two for aesthetic purpose
    H *= 2;
    //rotates the shapes
    rotateX(frameCount * .05);
    rotateY(frameCount * .01);
    //loop drawing continuous geometric elements
    for (var p = 0; p < H * 50; p ++) {
        //constantly changes color of stroke based on time/sin
        stroke(200 + 25 * sin(millis() / 1000), 
             200 + 25 * sin(millis() / 1000 + HALF_PI),
             200 + 25 * sin(millis() / 1000 - HALF_PI));
        strokeWeight(.5);
        noFill();
        //changing origin so object moves across page
        translate(sin(H) * 24, sin(H) * 24, H);
        //coordinates for drawn geometric shape
        beginShape();
        vertex(p * cos(p) * .1, H * 10 * cos(p), .1 * (p - 1000));
        vertex(p* .01 * .1, p* 0.1 * .1, p*.01 * .1);
        vertex(p * sin(p) * .1, .1 * p * cos(p), 10 * H);
        vertex(p * cos(p + PI) * .1, H * 10 * cos(p + PI), .1 * (p - 1000));
        vertex(p * sin(p + PI) * .1, .1 * p * cos(p + PI), .1 * H);
        endShape(CLOSE);
    }
    pop();
}

I’ve always wanted to play around with WEBGL and seeing Jenny Hu’s clock project pushed me to use it for this assignment. I started out checking out primitive 3D functions like translate, ellipsoid and box to get a better understanding of how it works. I also wanted to explore how to make optical art, so I checked out different math functions in for loops. I played around with trig functions to see how shapes would be affected and also messed around with incorporating the mouseX function into for loops to alter the shape of the shapes I made. After experimenting, I went back into incorporating the ellipsoid to represent time because it was most fitting for my skill level. I initially wanted to do something more complex but I couldn’t quite figure out how to create it using vertex points.

My approach to the abstract clock isn’t very visually intuitive but I wanted to explore mapping time using different math functions in WEBGL.