JSFiddle - React, Tailwind, and code Playground

by intrinsica

HTML

<script src="https://rawgit.com/GoodBoyDigital/pixi.js/dev/bin/pixi.js"></script>
<canvas id="view"></canvas>

JavaScript

init();
function init() {
    var width = 600;
    var height = 600;
    var maxCirc= 200;
    var canvas = document.getElementById("view");
    var stage = new PIXI.Container();
    var renderer = new PIXI.CanvasRenderer(width, height, {view:canvas, background:0});
    
    var colors = [0xFF0000, 0x00FF00, 0x0000FF];
    var colorIndex = 0;
    
    var circle= [];
    
    for (var i= 0; i<maxCirc; i++) {
        circle[i]= new PIXI.Graphics();
        circle[i].beginFill(colors[colorIndex]);
        circle[i].drawRect(30,30, 30,30);
        stage.addChild(circle[i]);
    }
    renderer.render(stage);
    
    setInterval(update, 1000/144);
    
    function update() {
        for (var i= 0; i<maxCirc; i++) {
            colorIndex += 1;
            if (colorIndex >= colors.length) colorIndex = 0;
            circle[i].clear();        
            circle[i].beginFill(colors[colorIndex]);
            circle[i].drawRect(Math.random()*width, Math.random()*height, 30,30);
        }
        renderer.render(stage);
    }
}