Project-07-Curves

A modified hypotrochoid on top of a modified epitrochoid! I reversed x and y in the second vertex function to create the double layered effect.

sketch
// Zoe Lin (ID: youlin)
// Section B

var nPoints = 80;
var angle;
var x, y, theta;
var r, g, b;

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

function draw() {
  r = map(mouseX, 0, width, 0, 20); //draws bg color based on mouse pos
  g = map(mouseY, 0, height, 0, 20);
  b = map(mouseX, 0, height, 0, 20);
  background(r, g, b);
  noFill();
  stroke(130);
  translate(width/2, height/2);
  moddedeEpitrochoid(); //draws first geometry at center
  rotate(HALF_PI); //draws second at an angle
  moddedeEpitrochoid();
  hypotrochoid(); 
  rotate(PI / 3); //repeat at third angle
  moddedeEpitrochoid();
  hypotrochoid();

function moddedeEpitrochoid() {
    var a = 85; //angle
    var h = constrain(mouseY / 10, 0, 100); //limits geometry size
    var mouse = mouseX / 70;
    
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        theta = map(i, 0, nPoints, 0, TWO_PI);
        //modified formula for epitrochoid
        x = (a+a/2) * sin(theta) - cos(mouse + theta * (a + a/2) / a/2) * h;
        y = (a+a/2) * cos(theta) - sin(mouse + theta * (a + a/2) / a/2) * h;
        vertex(x, y);
        vertex(y, x); //layers vertexes, draws 2d geometry
    }
    endShape();
 }
  strokeWeight(0.25);
}

function hypotrochoid() { 
    var h = constrain(mouseX / 100, 205, height); //contrains geometry size
    var a = map(mouseX, 0, width, 25, 15); //maps mouse pos to desired angle
    var b = map(mouseY, 0, height, 0, 15);
    beginShape();
      for (var i = 0; i < nPoints-15; i ++) {
        var theta2 = map(i, 0, width/2, 0, 50);
        //hypotrochoid formula
        x = (a - b) * cos(theta2) + h * sin((a - b) * theta2);
        y = (a - b) * sin(theta2) - h * cos((a - b) * theta2);
        vertex(x, y);
      }
    endShape();
}

Leave a Reply