Project-07

This project is an exploration of connecting two shapes through variables. My main focus was to create points along the outside of the curves, like the examples, and pass those positions to another shape as start/end points. My favorite part of this assignment was taking two existing functions, and implementing them together in one program. Some errors I encountered were duplicate variables, miscommunication of variable between functions, and misaligned positioning of drawn shapes.

sketch

//Ty Van de Zande
//ctv@andrew.cmu.edu
//Project-07
//Section B


//Most of this code was repurposed from the examples provided
//by Professor Dannenberg. Additions were made to explore 
//curves, helper functions, and passing variables.

var friz = [];
var frizy = [];
var frizX = [];
var frizyY = [];

function setup() {
    createCanvas(480, 480);
    frameRate(10);
}

function draw() {
    background(255, 200, 200); //I additionally love this pink
    fill(255, 255, 255, 64);
    var nPoints = mouseX/10;
    var radius = 50;
    var separation = 125;
    drawShape(nPoints, radius, separation);
    drawEpitrochoidCurve(nPoints);
    yoyo(nPoints, separation);

}

function drawShape(nPoints, radius, separation){  // draw the circle normally
    push();
    translate(1*separation, height / 2);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * cos(theta);
        var py = radius * sin(theta);
        vertex(px,py); 
        ellipse(px, py, 3,3);
        friz[i] = px;
        frizy[i] = py;
    }
    endShape(CLOSE);
    pop();  
}

//--------------------------------------------------
function drawEpitrochoidCurve(nPoints) {
    // Epicycloid:
    // http://mathworld.wolfram.com/Epicycloid.html
    
    var x;
    var y;
    
    var a = 80.0;
    var b = a / 2.0;
    var h = constrain(mouseY / 8.0, 0, b);
    var ph = mouseX / 50.0;
    
    fill(255, 200, 200);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(x+height/2, y+width/2);
        frizX[i] = x;
        frizyY[i] = y;
        
        
    }
    endShape(CLOSE);
    
}

function yoyo(nPoints, separation) {
    var w = width/2;
    for(var i = 0; i < nPoints; i++) {
        line(friz[i]+separation, frizy[i]+w, frizX[i]+w, frizyY[i]+w);
    }
    
}