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 = 0;
float y = 0;

void setup() {
  size(800, 600);
  fill(0);
  x = width / 2;
  y = height / 2;

}

void draw() {
  background(255);
  // translate(width / 2, height / 2);


  float angle = atan2(mouseY - y, mouseX - x);
  pushMatrix();
  translate(x, y);
  rotate(angle);


  triangle(-20, -10, 20, 0, -20, 10);
  popMatrix();


}