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;}</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 squares grid
 date: 2016-02-29
 */
ArrayList < Shape > pts;
int sz = 20;
void setup() {
  size(800, 600);
  noStroke();
  pts = new ArrayList < Particle > ();
  for (int x = sz; x < width; x += sz) {
    for (int y = sz; y < height; y += sz) {
      pts.add(new Shape(x, y, sz));
    }
  }
}

void draw() {
  background(44);
  for (int i = 0; i < pts.size() - 1; i++) {
    Particle p = pts.get(i);
    //   p.update(mouseX, mouseY);
    p.update(radians(frameCount % 360 * i / 2));
    p.display();
  }
}

class Shape {
  int x, y;
  int size;
  int col;
  float angle = 0.0;

  Shape(int _x, int _y, int _s) {
    x = _x;
    y = _y;
    size = (_s / 1.5);
    col = random(80, 220);
  }

  void update(int mx, int my) {
    angle = atan2(my - y, mx - x);
  }
  void update(float ang) {
    angle = radians(ang);

  }

  void display() {
    colorMode(HSB, 360, 100, 100);
    pushMatrix();
    translate(x, y);
    fill(col, col / 3, col);
    //     ellipseMode(CENTER);
    rectMode(CENTER);
    //     ellipse(0, 0, size, size);
    rotate(angle);
    //     ellipse(0,0, size/2, size/2);
    rect(0, 0, size, size);
    popMatrix();
  }
}