Category: Uncategorized

/*
 * Eric Zhao
 * ezhao2@andrew.cmu.edu
 *
 * Interactive composition with epicycloid curves
 * that changes color with a gradient effect. Click
 * to increase the number of "petals" on the curves.
 *
 */
var numPoints = 75;
var thetaCanvas = 0;
var rotateSpeed = 2;
var multiplier = 2;
var totalScale;
var epicycloid = [];
var baseFill;

function setup() {
    createCanvas(480, 480);
    background(220);
    strokeWeight(2);
    fill(0);
    angleMode(DEGREES);
    colorMode(HSB);
}

function draw() {
        for (let i = 0; i < 10; i++){
        //creates series of nested epicycloid curve objects
        epicycloid[i] = new Object();
        epicycloid[i].shapeScale = 1 - i/10;
        epicycloid[i].a = epicycloid[i].shapeScale * 100;
        epicycloid[i].b = epicycloid[i].a / multiplier;
        epicycloid[i].theta = 0;
    }

    totalScale = map(sin(thetaCanvas), -1, 1, 0.33, 1);
    //makes composition zoom in and out smoothly
    background(0);

    push();
    translate(width/2, height/2);
    rotate(thetaCanvas);
    scale(totalScale);
    for (let i = 0; i < epicycloid.length; i++){
        //slightly offsets hue and rotation of each successive curve
        push();
        rotate(i*10);
        baseFill = ((thetaCanvas + i*10)*2) % 360;
        stroke(baseFill, 100, 100);
        epicycloidCurve(epicycloid[i]);
        pop();
    }
    pop();
    thetaCanvas += rotateSpeed;
}
function epicycloidCurve(e){
    //Epicycloid curve equation
    beginShape();
    for(let i = 0; i <= numPoints; i++){
        e.theta = map(i, 0, numPoints, 0, 360);
        e.x = ((e.a + e.b) * cos(e.theta) - e.b * cos(((e.a + e.b)/e.b) *
        e.theta));
        e.y = ((e.a + e.b) * sin(e.theta) - e.b * sin(((e.a + e.b)/e.b) *
        e.theta));
        curveVertex(e.x, e.y);
    }
    endShape(CLOSE);
}

function mousePressed(){
    //changes number of "petals" in the epicycloid
    multiplier++;
    if(multiplier > 5){
        multiplier = 2;
    }
}

// Stefanie Suk
// 15-104 Section D

var nPoints = 100; //number of points for curves
var angle = 10; //angle of rotation

function setup() {
    createCanvas(480,480);
    frameRate(15); //set frame rate to 15
}

function draw() {
    background(33, 63, 99); //background of canvas to dark blue

    //placing Hypocycloid in center
    push();
    translate(width/2, height/2);
    Hypocycloid();
    pop();

    //placing Deltoid in center and rotate by angle
    push();
    translate(width/2, height/2);
    rotate(radians(angle));
    angle += mouseX;
    Deltoid();
    pop();

    //placing Epitrochoid in center
    push();
    translate(width/2, height/2);
    Epitrochoid();
    pop();
}

function Hypocycloid(){
    // variables for Hypocycloid
    var a1 = map(mouseY, 0, 300, 150, 180); //size changes with respect to mouseY
    var b1 = 15;
    var c1 = mouseX / 25;

    //color, stroke of Hypocycloid
    stroke(167, 219, 239);
    strokeWeight(6);
    noFill();

    //create curve, map to full circle radians
    //use math function to find x and y values
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var angle1 = map(i, 0, nPoints, 0, TWO_PI);     
        x1 = (a1 - b1) * cos(angle1) + c1 * cos((a1 - b1) * angle1);
        y1 = (a1 - b1) * sin (angle1) - c1 * sin((a1 - b1) * angle1);
        vertex(x1, y1);
    }
    endShape(CLOSE); 
}

function Deltoid(){
    colorR = map(mouseX, 0, 50, 100, 255);
    colorG = map(mouseX, 0, 50, 100, 255); //set color in specific range
    colorB = map(mouseY, 0, 50, 100, 255); //changes color with respect to mouseX,Y
    
    // variable for Deltoid, change size
    a2 = map(mouseY, 0, height, 10, 40); //size changes with respect to mouseY
    
    //color, stroke, fill of Deltoid
    stroke(255);
    strokeWeight(6);
    fill(colorR, colorG, colorB);

    //create curve, map to full circle radians
    //use math function to find x and y values
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var angle2 = map(i, 0, nPoints, 0, TWO_PI);
        x2 = ((2 *(cos(angle2))) + (cos(2*angle2)))* a2 ;
        y2 = ((2 *(sin(angle2))) - (sin(2*angle2)))* a2 ;
        vertex(x2, y2);
    }
    endShape(CLOSE);
}

function Epitrochoid() {

    colorR = map(mouseX, 0, 50, 100, 255);
    colorG = map(mouseX, 0, 50, 100, 255); //set color in specific range
    colorB = map(mouseY, 0, 50, 100, 255); //changes color with respect to mouseX,Y

    // variables for epitrochoid
    var a3 = map(mouseY, 0, 400, 40, 110); //size changes with respect to mouseY
    var b3 = 50;
    var c3 = (mouseX / 15);

    //color, stroke of epitrochoid
    stroke(colorR, colorG, colorB);
    strokeWeight(1.5);
    noFill();

    //create curve, map to full circle radians
    //use math function to find x and y values
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var angle3 = map(i, 0, nPoints, 0, TWO_PI);
        x3 = (a3 + b3) * cos(angle3) + c3 * cos((a3 + b3) * angle3);
        y3 = (a3 + b3) * sin(angle3) + c3 * sin((a3 + b3) * angle3);
        vertex(x3, y3);
    }
    endShape(CLOSE);
}