Dynamic Snowflakes

For this project I used the rose curves and epicycloid functions to create this composition. The rose curve (white) resembles a snow flake and as the mouse moves the it changes but still looks like a snow flake. When mouse is at zero, the middle of the composition, 480 or off the canvas it creates a circle. The epicycloid changes in complexity and in color as the mouse moves.

sketch
//Nakshatra Menon
//Section C

var nPoints = 240;



function setup() {
    createCanvas(480, 480);
    background(246, 242, 240);
    colorMode(HSB);
}



function draw() {
    background("black");
    translate (width/2, height/2); // origin is middle of canvas 
    noFill();
    epicycloid(0, 0);             // shape 1
    roseCurve(0,0);               // shape 2 
}

function roseCurve(){  // draw rose curve from https://mathworld.wolfram.com/RoseCurve.html
    var g = constrain(mouseY/32, 5, 15);      // g is based on mouse Y
    var n = constrain(int(mouseX), 0, 480);   // n is based on mouse X
    strokeWeight(.5);
    stroke("white");
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var radius = 10 * cos(n * t);    // function 

        // first set of values 
        var x = g*radius * cos(t);       // function 
        var y = g*radius * sin(t);       // function 

        // second set of values 
        var x1 = 2*g*radius * cos(t);    // function 
        var y1 = 2*g*radius * sin(t);    // function 

        vertex(x, y);                    // vertex for shape
        vertex(x1, y1);                  // vertex 2 for shape 
    }
    endShape(CLOSE);
}  

function epicycloid (){    // draw the epicycloid from https://mathworld.wolfram.com/Epicycloid.html
    var f = constrain(int(mouseY/20), 2, 48);        // output of number based on mouse Y
    strokeWeight(1);
    stroke(332,mouseX/5, 20);                        // color changes based on mouse X position 
    for (var a = 10; a <240; a = a+10){              // how many epicycloids are drawn 
        var b = a/f                                  // b is related to mouse Y
        beginShape();
        for (var i = 0; i < nPoints; i++) {
            var t = map(i, 0, nPoints, 0, TWO_PI);  // remaps 

            var x = (a+b)*cos(t) - b*cos(((a+b)/b)*t); // function 
            var y = (a+b)*sin(t) - b*sin(((a+b)/b)*t); // function 

            vertex(x, y);                              // vertex for points 
        }

    endShape(CLOSE); 
    }  
}

Leave a Reply