Canvas Test RandomBarsTransition

Testing some stuff

by joquery

HTML

<canvas id="myCanvas" width="300" height="200"></canvas>

<div>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="next">Next</button>
    <button id="reset">Reset</button>
</div>

CSS

#myCanvas {
    background: #fafaee;
}

JavaScript

var context;
var canvas;
var drawInterval = 1000.0 / 30.0;
var duration = 1;
var stepping = 1 / (duration * drawInterval);
var intervalId;

var progress = 0.0;

var usedPositions = [];
var firstTime = true;
//var barsPerIteration;
//var stepCount = duration / stepping;
var lastDrawnBar = 0;

var draw = function() {
    
    if (progress + stepping > 1) {
        progress = 1;
    } else {
        progress += stepping;
    }  
    
    var w = canvas.width;
    var h = canvas.height;
    
    context.save();
    context.beginPath();
    
    //////////////////
    
    var canvasMidW = w/2;
    var canvasMidH = h/2;
    
    var barsCount = 100;
    var singleBarHeight = h / 100;
    
    // so many bars per step
    //var stepCountPerDraw = Math.ceil(barsCount / stepCount);
    
    // last bar to draw during this draw()
    var drawUntilThisBarCount = Math.ceil(barsCount * progress);
    
    
    var randomNr;
    if (firstTime) {
        
        // how many steps
        
        
        for (var i = 0; i < barsCount; i++) {
            do {
                randomNr = Math.floor(Math.random() * (barsCount - 0 + 1)) + 0;
            } while (usedPositions.indexOf(randomNr) != -1 && usedPositions.length <= 99)
                
            usedPositions.push(randomNr);
            console.log(usedPositions);
        }
        firstTime = false;
    }
    
    for (var j = lastDrawnBar; j < drawUntilThisBarCount; j++) {
        
        var posY = j * singleBarHeight;
        
        context.moveTo(0, posY);
        context.rect(0, posY, w, singleBarHeight);
        
        
    }
    
    lastDrawnBar = drawUntilThisBarCount;
    

    
    //////////////////

    context.clip();
    
    context.rect(0,0,canvas.width,canvas.height);
       context.fillStyle="red";
    context.fillRect(0,0,canvas.width,canvas.height);
    
    if (progress === 1) {
        clearInterval(intervalId);
    }
    context.restore();
};




var startAnimation = function() {

   ...