Processing curve

2015-09-06 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: curve?
 date: 2015-09-06
 */

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

void draw() {

  fill(44,44,44);
  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 = 1360; // Можно поучить разнообразные формы кривой, варьируя частоту, здесь - параметр period 
  float freq = frameCount;
  float n = 9; // num of petals (x,y)
  float r = 120;
  float k = 3;
  for (float t = 0; t < 10; t+=0.05) {   
    float x =  r * sin(t *n * frameCount/period) * cos(t * frameCount/period);
    float y =  r * sin (t*n * frameCount/period) * sin(t*frameCount/period);
    float x1 =  r * sin(t * (n+k)*frameCount/period) * cos(t*-k*frameCount/period);
    float y1 =  r * sin (t * (n+k)*frameCount/period) * sin(t*-k*frameCount/period);
    fill(#C1F880);
    ellipse(x, y, 7, 7);
      fill(#55C59D);
    ellipse(x1, y1, 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);
  }
}