JSFiddle - React, Tailwind, and code Playground

by vbelknap

HTML

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

CSS

#sketch {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

JavaScript

(function(){

    var sketch = function(p) {
    
        var xCoord = 0;
        var dir = 'forward';
        
        p.setup = function() {
           	p.size(800,600);
            p.background(25);
            p.frameRate(24);
        }
     
        p.draw = function() {
            //p.background(25);
            //commenting this out will leave a trail
            
            p.rect(xCoord, p.mouseY, 100, 100);
            
            if(dir === 'forward') {
            	xCoord = xCoord + 10;
            } else {
             	xCoord = xCoord - 10;   
            }
            
            if(xCoord > (p.width - 100)) {
             	dir = '';   
            } 
            if(xCoord < 0) {
             	dir = 'forward';   
            }
        }
    }
     
    var canvas = document.getElementById('sketch');
    
    var processing = new Processing(canvas, sketch);
    
  
})();