Canvas Test RandomDissolveTransition

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 = 2;
var stepping = 1 / (duration * drawInterval);
var intervalId;

var progress = 0.0;

var m_usedPositions = [];

var firstTime = true;
//var barsPerIteration;
//var stepCount = duration / stepping;
var m_lastDrawnPixel = 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 rectSize = 5;
    
    var m_countXRects = Math.ceil(w / rectSize);
    var m_countYRects = Math.ceil(h / rectSize);
    
    if (firstTime) {
        
        for (var x = 0; x < m_countXRects; x++) {
            for (var y = 0; y < m_countYRects; y++) {
                m_usedPositions.push(x+";"+y);    
            }
        }
        
        m_usedPositions = shuffle(m_usedPositions);
        console.log(m_usedPositions);
        firstTime = false;
    }
    
    
    var drawUntilThisPixelCount = Math.floor(m_usedPositions.length * progress);
    
    
    for (var i = m_lastDrawnPixel; i < drawUntilThisPixelCount + 1; i++) {
        
        var usedPosition = m_usedPositions[i];
        
        if (!!usedPosition) {
            var currentPos = usedPosition.split(";");
        
            var posX = parseInt(currentPos[0]) * rectSize;
            var posY = parseInt(currentPos[1]) * rectSize;

            context.moveTo(posX, posY);
            context.rect(posX, posY, rectSize, rectSize);
        }
    }
    
    m_lastDrawnPixel = drawUntilThisPixelCount + 1;

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

    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);
    }
   ...