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;
  background: rgb(204, 204,204);
}

canvas{border: 1em solid rgba(204,204,204);
}



</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

/* griddty grid

title: GRID;
date: 2016-01-06
*/

int range;

void setup() {
  size(800, 600);
  background(204);  
  for (int i = 0; i < 800; i++) {
    for (int j = 0; j < 600; j++) {
      range = random(0, 2);
      if (range > 1) {
        noStroke();
        fill(33);
      } else {
        noFill();
      }
      rect(i * 30, j * 30, 30, 30);

    }
  }
}



void draw() {
  noStroke();
}

void mousePressed() {
  setup();

}
void particles() {
    pts.add(new Particle(mouseX, mouseY));
    for (int i = pts.size() - 1; i > 0; i--) {
      Particle p = pts.get(i);
      p.update();
      p.show();
      if (p.dead == true) {
        pts.remove(p);
      }
    }
  }
  /*
  class Particle {
    int x;
    int y;
    float vx;
    float vy;
    float r;
    
    color col;
  	int life;
    boolean dead;
    Particle(int x, int y) {
      this.x = x;
      this.y = y;
      vx = random(-1, 1);
      vy = random(-1, 1);
      col = random(cols[cols.length-1]);
      r = random(5, 15);
      life = 200;    
    }
    void update() {
      x += vx;
      y += vy;
      if (life <= 20){
      	dead = true;
      }
      life--;    
    }

    void show() {
  //    colorMode(HSB, 360, 100, 100);
      noStroke();
      fill(col);
  	  ellipse(x, y, r, r);  
    }

  }

  */