Month: October 2017

Curve Pattern

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-07

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

function draw() {
    background(125);

    var angR = map(mouseX, 0, 6.28318, 0, width);
    // Controls the rotation of the points
    var stem = map(mouseY, 0, 10, 0, height);
    // Determines the amount of stems
    
    push();
    translate(width/2, height/2);
    beginShape();
    for (var ang = 0; ang <= 6.28318; ang += 0.001) {
        var radius = 200 * cos(stem * ang);
        // Sets the radius
        var flowerX = radius * cos(ang);
        var flowerY = radius * sin(ang);
        // I found the equation from Dan Shiffman and decided to crank it up to 11
        // https://www.youtube.com/watch?v=f5QBExMNB1I

        strokeWeight(5);
        rotate(angR);
        point(flowerX, flowerY);
        // This creates points which create a flower pattern I used points instead of vertex because vertex looked unappealing
    }
    endShape(CLOSE);
    pop();
}

I am really glad with how this project turned out. At first I was pretty overwhelmed by the code and equations. However, after I watched Dan Shiffman’s video “Coding Challenge #55: Mathematical Rose Patterns” I had a much better understanding of the assignment. I decided that my two aspects of variability would be the amount of stems in the flower, and the rotation. I started out using vertex, but decided to change it to point since it had a much smoother look. I also wanted to make it so that it could rotate as much as possible, and have a massive amount of stems. I opted out of using color because I thought that it gave the image a more simplistic look.

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);
    }
    
}