JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

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

CSS

body {
  overflow: hidden;
  background: rgb(51, 55, 69);
}

</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: Rotating petals
 date: 2017-01-07
 */
void setup() {
  size(800, 600);
  noStroke();
  fill(34, 146, 233);
}

void draw() {
  background(51, 55, 69);
  translate(width / 2, height / 2);
  // The amount of layers
  for (int j = 20; j < 120; j += 20) {
    float h = j * 2 + 5;
    // The amount of shapes per layer
    for (int q = 0; q < 360; q += 30) {
      float x2 = sin(radians(q + h)) * j;
      float y2 = cos(radians(q + h)) * j;
      float d = map(dist(x2, y2, 0, 0), 0, 120, 0, 360);
      pushMatrix();
      translate(x2, y2);
      scale(map(j, 0, 180, 0.1, 0.4));
      rotate(radians(-q - h));
      beginShape();
      for (int i = 0; i < 180; i += 5) {
        float x = sin(radians(i)) * i / 3;
        float angle = sin(radians(i + frameCount * 3 + d)) * 50;
        vertex(x - angle, i * 2);
      }
      for (int i = 180; i > 0; i -= 5) {
        float x = sin(radians(i)) * i / 3;
        float angle = sin(radians(i + frameCount * 3 + d)) * 50;
        vertex(-x - angle, i * 2);
      }
      endShape(CLOSE);
      popMatrix();
    }
  }
}