Processing Cardioid/heart curve

2015-09-05 Cardioid/heart curve

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.13/processing.min.js"></script>
<canvas></canvas>

CSS

</style> <script type="text/javascript"> window.addEventListener('load', function() {
    var scripts=document.body.getElementsByTagName('script');
    var canvases=document.body.getElementsByTagName('canvas');
    new Processing(canvases[0], scripts[0].text);
}
, false);
 // Here prevent javascript in body from throwing error </script> <style>

JavaScript

/*
 title: Cardioid/heart curve.
 date: 2015-09-05
 */

int[] bright = {#d20962, #f47721, #7ac143, #00a78e, #00bce4, #7d3f98, 
  #0079bf, #70b500, #ff9f1a, #eb5a46, #f2d600, #c377e0, #ff78cb, #00c2e0, #51e898, #c4c9cc};
int[] tender = {#25ced1, #ffffff, #fce8de, #ff8a5b, #ea526e};
int[] ocean = {#00A0B0, #6A4A3C, #CC333F, #EB6841, #EDC951};
void setup() {
  size(800, 600);
}

void draw() {

  fill(44, 44, 44, 100);
  rect(0, 0, width, height);
  noStroke();
  translate(width/2, height/2);  
 // rotate(radians(-90));

  heart(130);
}

void heart(float rad) {
  float angle = 0;
  float period = 120; // Можно поучить разнообразные формы кривой, варьируя частоту, здесь - параметр period 
  float freq = frameCount/period;
  float n = TAU;
  float r = 100;
  //pushMatrix();
  //popMatrix();
  for (float t = 0; t < n; t+=0.06) {   
    float x = r * cos(t*freq) * (1 - cos(t));
    float y = r * sin(t*freq) * (1 - cos(t));
    fill(tender[tender.length-1]);
    ellipse(x, y, 7, 7);
  }
}
// Utilities functions
void keyPressed() {
  if (key == 's') {
    println("saving picture");
    String name = String.valueOf(year()) + "-" + String.valueOf(month()) + "-" + String.valueOf(day()) + "-frame-"+ frameCount+".png";
    save(name);
    println("picture saved as " + name);
  }
}