Simple Processing Animation

by cyclesax

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(36);
        }
        
        p.draw = function() {
            
            p.background(25);
            
            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);
    

})();