JSFiddle - React, Tailwind, and code Playground

by velthune

HTML

<canvas id="canvas"></canvas>

JavaScript

// Super Simple Particle System
// Eric Ishii Eckhardt for Adapted
// http://adaptedstudio.com
//

$(document).ready(function() {
    init();
    initParticleSystem();
});    


var _r;
var _g;
var _b;
var _a = .5;
var rad = 100;
var particleList;
var system;
var particleColor;
var systemSize = 250;
var lots = true;

var pcMode = false;
var fadeStage = false;
var grayScale = false;
var dx = 2;
var dy = 4;
var lineColor = 'rgba(255,0,100,.2)';
var particleCount = 0;
var particleList = {}; 

function draw() {
    // FOR PARICLES NOT LINES
    //clear();
    
    // UPDATE PARTICLE SYSTEM
    if (system){
        system.update();
    }
        
    // FOR FADING LINES
    if (fadeStage){
        fade();    
    }
}



function ParticleSystem(){
    //this.init(systemSize);
}

ParticleSystem.prototype.init = function(_systemSize){
    this.list = [];
    var i = 0;
    for(i=0; i < _systemSize+1; i++){
        this.createParticle();
    }
}

ParticleSystem.prototype.createParticle = function(){
    var newParticle = new Particle();
    newParticle.init();
    this.list.push(newParticle);
}

ParticleSystem.prototype.update = function(){
    var i = 0;
    for(i = 0; i < systemSize-1; i++){
        this.list[i].draw();
    }
}


function Particle(){
    // Particle
}


Particle.prototype.init = function(){
    setColor(this);
    this.x = Math.random() * WIDTH;
    this.y = Math.random() * HEIGHT;
    this.vel = Math.random() * 5 + 1;
    this.ang = Math.random() * (Math.PI);
    this.diameter = Math.random() * 5 + 1;
    this.oldX = this.x;
    this.oldY = this.y;
    this.speedModX = Math.random() * 20 + 8;
    this.speedModY = Math.random() * 20 + 8;
    this.speedModTargX = Math.random() * 3 + 2;
    this.speedModTargY = Math.random() * 3 + 2;
    this.maxSpeed = Math.random() * 20 + 5;
    this.speedX = 0;
    this.speedY = 0;
}

Particle.prototype.draw = function(){
    ctx.fillStyle = this.color;
    
    var _x = this.x;
    var _y = this.y;
    var _d =...