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;
}

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

/*  Rainbow colors

title: colors particles;
date: 2016-01-06
*/

float cx, cy;
float locx;
int num = 10;
ArrayList < Particle > pts;
void setup() {
  pts = new ArrayList();
//	println(red(base), green(base), blue(base));  
  size(700, 600);
  cx = width / 2;
  cy = width / 2;
  for (int i = 0; i < num; i++) {
    //pts.add(new Particle(cx, cy));    
    
  }
}

void draw() {
  background(44);  
  noStroke();
	locx = (-mouseX);
  
  
  
  
  
  
	pts.add(new Particle(mouseX, mouseY));  
 	pts.add(new Particle(locx, mouseY));
  
  
  
  for (int i = pts.size() - 1; i > 0; i--) {
    Particle p = pts.get(i);
    p.update();
    p.setCol(5*(p.life%55));
    
    p.show();
    
    if (p.dead == true){
           pts.remove(p); 
    }        
  }

}



class Particle {
  int x;
  int y;
  float vx;
  float vy;
  float r;
  
  
  int 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, 80, 80);
	  ellipse(x, y, r, r);  
  }


void setCol(int _col) {
	col = _col;
}
}





void mousePressed() {

  if (dist(mouseX, mouseY, cx, cy) < r) {
    fill(20, 120, 220);
    ellipse(50, cy - 2 * r, r, r);
  }

}