BacknForth Box Animation

by mmansion

HTML

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

CSS

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

JavaScript

function sketch(processing) {
    
    var p = processing;
    var xCoord = 0;
    var dir = 'forward';
    
    p.setup = function() {
        
      p.size(873,648);
      p.background(25);
      p.frameRate(24);
      
    };
        
    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';
            
        }
       
    }; //end draw
    
}



//get the canvas element
var canvas = document.getElementById("canvas1");


//attach the sketch function to the canvas
var p = new Processing(canvas, sketch);