dynamic rectangles on canvas

Question

I'm trying to make each rectangle in this fiddle to move up and down so it looks like a music equalizer. I wants the bars to animate up and down, and have absolutely no idea how to do animations. Fiddles would really help :)

http://jsfiddle.net/kiransh/1jqhznt6/

HTML

<canvas id="myCanvas" height="100"> </canvas>

JavaScript

 var width = 8;
    var distance = 3;


    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");
     ctx.canvas.width  = window.innerWidth;
     var total = ctx.canvas.width;
     var max = total/2+52;
     var min = total/2-60;
     ctx.fillStyle = "black";
     ctx.globalAlpha=0.3;

    for(var x = 0; x<total; x+=12)
    {
        if(x<= max && x>=min)
        {
            var height= Math.floor(Math.random()*40)+5;

        }
        else
        {
             var height= Math.floor(Math.random()*100)+5;

         }
        ctx.fillRect(x,100-height,width,height);



    }

Answer 1

You need to use a tick function to update your canvas . You can use requestAnimationFrame() and choose a time interval you'd like to animate on (you can determine this using Date.now() ).

Then, keep a list of your bars and change their height. Then re-render it to your canvas .

Here is some quick hacky code...

var width = 8;
var distance = 3;


var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth;
var total = ctx.canvas.width;
var max = total / 2 + 52;
var min = total / 2 - 60;
ctx.fillStyle = "black";
ctx.globalAlpha = 0.3;

var lastDrawTime = Date.now();
var draw = function () {
    if (Date.now() - lastDrawTime < 60) {
        return webkitRequestAnimationFrame(draw);
    }

    ctx.clearRect(0, 0, c.width, c.height);

    for (var x = 0; x < total; x += 12) {
        if (x <= max && x >= min) {
            var height = Math.floor(Math.random() * 40) + 5;
         } else {
            var height = Math.floor(Math.random() * 100) + 5;
        }
        ctx.fillRect(x, 100 - height, width, height);
    }
    lastDrawTime = Date.now();
    webkitRequestAnimationFrame(draw);
};

draw();

Answer 2

I don't know if this is the effect you need, but it should help you to start.

requestAnimationFrame is used to execute draw() at each frame. Each bar is re-defined after the specified delay, and then goes down.

var width = 8;
var distance = 3;

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");
ctx.canvas.width  = window.innerWidth;
var total = ctx.canvas.width;
var max = total/2+52;
var min = total/2-60;
ctx.fillStyle = "black";
ctx.globalAlpha=0.3;

var bars = [];
var barsCount = Math.floor(total / 12);
var barsLastRefreshTime = null;
var barsRefreshInterval = 500;

setInterval(function() {
    for(var i = 0; i<barsCount; i++) {
        var x = i * 12;
        if(x<= max && x>=min) {
            var height= Math.floor(Math.random()*40)+5;
        } else {
            var height= Math.floor(Math.random()*100)+5;
        }
        bars[i] = height;
    }
    barsLastRefreshTime = (new Date()).getTime();
}, barsRefreshInterval);

function draw() {
    var currentTime = (new Date()).getTime();

    var timePassedRate = (barsRefreshInterval - (currentTime - barsLastRefreshTime)) / barsRefreshInterval;

    ctx.clearRect(0,0,c.width,c.height);
    for(var i = 0; i<bars.length; i++) {
        var x = i * 12;
        var height = bars[i] * timePassedRate;
        ctx.fillRect(x,100-height,width,height);
    }
    requestAnimationFrame(draw);
}
draw();

(I can't find a way to save the fiddle ?!?)

Answer 3

To do animation you have to clear the canvas and redraw the rectangles in their new position at each frame, using either setInterval() or setTimeout() or requestAnimationFrame() .

The best is to use requestAnimationFrame() for adapation of frames per second.