JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.js"></script>
<canvas id="bekkuxjam" />

CSS

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: #1f1f1f;
}
canvas {
    display: block;
}

JavaScript

var Master = new Class({
    
    processing : null,
    processingInstance : null,
    canvas : null,

    // Settings
    centerDot : null,
    dots : [],
    
    initialize : function(canvasSel) {
        this.canvas = canvasSel;
        
        this.centerDot = new Dot(50);
        this.centerDot.setColor(241, 241, 241);
    },
    
    start : function() {
        this.procesingInstance = new Processing(
            this.canvas,
            this.setupProcessing.bind(this));
    },
    
    setupProcessing : function(p) {
        this.processing = p;
        
        var methods = new Hash(this).getKeys();
        
        // Override processing functions
        for(var i = 0; i < methods.length; i++) {
            if(!this.hasOwnProperty(methods[i])
               && this[methods[i]] instanceof Function
               && methods[i].indexOf("$") != 0) {
                //console.debug(methods[i]);
                this.processing[methods[i]] = this[methods[i]].bind(this);
            }
        }
    },
    
    setup : function() {
        this.processing.background(0, 0, 0, 0);
    },
    
    draw : function() {
        this.processing.size(window.innerWidth, window.innerHeight);
    
        // determine center
        var centerX = this.processing.width / 2, centerY = this.processing.height / 2;
        
        // Draw other dots
        for(var i = 0; i < this.dots.length; i++) {
            this.dots[i].draw(this.processing);
        }
        
        
        // Center dot
        this.centerDot.setCoords(centerX, centerY);
        this.centerDot.draw(this.processing);
    },
    
    mouseClicked : function() {
        
        var createDots = this.processing.random(0, 5);
        for(var i = 0; i < createDots; i++) {
            this.dots.push(this._createDot());
        }
    },
    
    _createDot : function() {
        var centerX = this.processing.width / 2, centerY = this.processing.height / 2;
        
        var d = new...