Project 7 – Composition With Curves

Using multiple layers of atomic spirals, I created a composition that emulates either the acquisition & rotation of electrons around a nucleus or planets around a Sun – whichever interpretation is up to the viewer. In order to emphasize the idea of ‘cosmic creation’, I added randomly generated stars that twinkle from last weeks project and a lower opacity epispiral in the background to give an subtle explosion type effect.

Features:
– mouseX controls a (rotation of the circulating bodies)
– mouseY controls n (scale of epispiral + no. of points)

sketch
// Name: Tsz Wing Clover Chau
// Section: E 
// email: ctchau@andrew.cmu.edu
// Project-07

var a = 0;
var atomStart = 360
let stars = [];
var nStars = 60;
var noiseParam = 0;
var noiseStep = 0.08;
var count = 0;
var twinkleRate = 10;



function setup() {
    createCanvas(480, 480);
    background(0);
    for (var i = 0; i<nStars; i++){
        stars.push([random(0, width), random(0, height), noise(noiseParam)]);
        noiseParam += noiseStep;
    }
}

function draw() {
    background(0);

    for (var i = 0; i<nStars; i++){
        curStar = stars[i];
        push();
        noStroke();
        fill(100);
        circle(curStar[0], curStar[1], curStar[2]*5);
        if (count % twinkleRate == 0){
            twinkle(curStar)
        }
        
        pop();
    }



    var h = constrain(mouseY, 0, height);
    var w = constrain(mouseX, 0, width);


    //atomic spiral
    noFill();
    stroke(255);
    
    a = map(h, 0, height, 0, 16);

    
    beginShape();
    for (var i = 60*a; i <= 360*a; i++){
        var theta = radians(i);
        var r = theta/(theta-a)*65;
        var x = r * cos(theta) + width/2;
        var y = r * sin(theta) + height/2;
        vertex(x, y);

        
        if (i == 360*a){
            push();
            fill(190);
            circle(x, y, width/70);
            pop();

        } 
    }
    endShape();


    // SUN / NUCLEUS
    a2 = map(h, 0, height, 0, 10);
    beginShape();
    for (var i = -360*a2; i <= 0; i++){
        var theta = radians(i);
        var r = theta/(theta-a2)*50;
        var x = r * cos(theta) + width/2;
        var y = r * sin(theta) + height/2;
        vertex(x, y);

        if (i == -360*a2){
            push();
            fill(255);
            stroke(2);
            circle(x, y, width/20);
            pop();
        }
    }
    endShape();


    b = map(h, height/3, height, 0, 16);
    beginShape();
    for (var i = 60*b; i <= 360*b; i++){
        var theta = radians(i);
        var r = theta/(theta-b)*100;
        var x = r * cos(theta) + width/2;
        var y = r * sin(theta) + height/2;
        vertex(x, y);
        
        if (i == 360*b){
            push();
            fill(190);
            circle(x, y, width/50);
            pop();

            circle(x, y, width/20);
        } 
    }
    endShape();



    if (mouseY >=  height/2){
        c = map(h, height/2, height, 0, 16);
        beginShape();
        for (var i = 90*c; i <= 360*b; i++){
            var theta = radians(i);
            var r = theta/(theta-c)*150;
            var x = r * cos(theta) + width/2;
            var y = r * sin(theta) + height/2;
            vertex(x, y);

            
            if (i == 360*c){
                push();
                fill(190);
                circle(x, y, width/50);
                pop();
            } 
        }
        endShape();
    }
    
    

    //poinsot's spirals
    var n = map(w, 0, width, 0, 8);
    push();
    stroke(150, 150, 150, 150);

    beginShape();
    for (var i = -360; i <= 360*b; i++){
        var theta = radians(i);
        var r = pow(n, 3)*abs(1/cos(n*theta));
        var x = r * cos(theta) + width/2;
        var y = r * sin(theta) + height/2;
        vertex(x, y);
    }    
    endShape();
    pop();

    count++;

}


function twinkle(star){
    //constraining star size
    if (star[2] >= 1){
        star[2] -= random(0.8, 0.8);
    } else {
        star[2] += random(-0.4, 0.4);
    }
    star[2] = abs(star[2]);
}

Leave a Reply