Project – Cardioid Visualization

sketch
//Brandon Yi
//btyi@andrew.cmu.edu
//Section A

// Cardioid Function

var points = 200; // number of points on circle
var rate; // coefficient
var r = 180; // radius of big circle
var count = 0;

function setup(){
  createCanvas(400, 400);
  frameRate(200);
  rate = 2;
}

function draw() {
  //basic settings 
  background(0);
  translate(width/2, height/2);

  //  Large White Circle
  stroke(255);
  fill(0);
  ellipse(0, 0 , r * 2, r * 2);

  // drawing lines based on cardioid shape 

  for(var i = 0; i < count; i++){

    var x = r * cos(i * TWO_PI/points);
    var y = r * sin(i * TWO_PI/points);

    var x2 = r * cos(i*rate * TWO_PI/points);
    var y2 = r * sin(i*rate * TWO_PI/points);

    //color gradient based on rate

    if (rate % 3 == 0) {
      stroke(i, 0, 255-i);
    }

    else if (rate%3 == 1) {
      stroke(0, i, 255-i);
    }

    else {
      stroke(i, 255-i, 0);
    }
    // drawing line
    line(x, y, x2, y2);
  }  

  //counter increases until count of 200 lines
  if(count <= points) {
    count += 1;
    frameRate(200);
  }

  //counter hits 200 -- cardioid coefficient increases + counter reset
  else {
    rate++;
    count = 0;
  }

  // coefficient reset
  if (rate >= 12) {
    rate = 2;
  }

  // brief pause 
  if(count == points) {
    frameRate(1);
  }

  
}

I wanted to combine what we did with the line drawings and the new curves that we were trying to draw. Though it took some thinking, I think my project turned out really well.

Leave a Reply