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;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

</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: PLOT POINTS IN A SPIRAL
 date: 2016-02-10
 */

float x, y;
int num = 520;

float theta = radians(25); // angle increment


void setup() {
  size(800, 600);
  fill(0);
  noStroke();
}

void draw() {
  background(255);
  translate(width / 2, height / 2);
  theta = radians((0.015 * frameCount));    
  for (int i = 0; i < num; i++) {
    float ratio = i / (float) num/1.2;    
    float rad = ratio * height / 3; // spiral radius
    x = cos(i * theta) * rad;
    y = sin(i * theta) * rad;
    rotate(radians(0.001 * frameCount));    
    ellipse(x, y, 5, 5);
  }
}