JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.20/p5.min.js"></script>

JavaScript

/* p5.js
 title: CurveVertices
 date: 2015-12-19
 */
var Ry = 120;
var Rx = 120;
var kx = 3;
var ky = 4;
var petals = 7;
var col;

function setup() {
  createCanvas(640, 360);
  background(44);
  colorMode(HSB, 360, 1, 1, 1);
  col = color(random(220, 330), 0.9, 0.9, 0.3);
  blendMode(SCREEN);
  cx = width / 2;
  cy = height / 2;
  translate(width / 2, height / 2);

}

function draw() {
  noFill();
  stroke(col);
  strokeWeight(1.25);

  var t = frameCount / 200;
  var rx = Rx * cos(t) + 50;
  var ry = Ry * sin(t) + 50;

  var x = rx * sin(kx * t + HALF_PI);
  var y = ry * sin(ky * t + HALF_PI);

  var x1 = rx * sin(kx * t + PI);
  var y1 = ry * sin(ky * t + PI);

  var x2 = rx * sin(kx * t);
  var y2 = ry * sin(ky * t);

  for (var i = 0; i < petals; i++) {
    rotate(TWO_PI / petals);
    beginShape();
    vertex(x, y);
    quadraticVertex(x1, y1, x2, y2);
    endShape();
  }
}




// Utilities functions
function keyPressed() {
  if (key == 's' || key == 'S') {
    saveFrame("out/pic-##.png");
    println("Picture saved as " + "pic-" + frameCount + ".png");
  }
}