HTML 5 Canvas Particles

Question

http://www.mrspeaker.net/

This guy make his entire background particles but I've been roaming around in Inspect Element to figure out how he did it and can't. I'm not quite sure how it's done does anyone know the code for him to do this?

Answer 1

http://www.mrspeaker.net/wp-content/themes/stuartspeaker/scripts/speaker.js

$( window ).load( function(){
    bubbleController.init();
    setInterval( function(){
        bubbleController.update()
    }, 200 ); 
    $( window ).resize(function(){
        bubbleController.setBoundaries();
    }); 

    if( $( ".leftcolumn" ).length )
    {
        //main page
        var leftColumn = parseInt( $( ".leftcolumn" ).height(), 10 );
        var rightColumn = parseInt( $( ".rightcolumn" ).height(), 10 );
        /* Going to add extra stuff if the columns are uneven */
    }
    else{
        swapTwitterPix();
    }
});

var bubbleController = {
    bubbles : [],
    screenWidth : 0,
    leftEdge : 0,
    rightEdge : 0,
    channelWidths : [],
    minBubbleWidth : 10,
    maxBubbleWidth : 100,

    init : function(){
        this.setBoundaries();
        $("<div></div>").attr("id", "bubbleContainer").appendTo( $("body") );
        for( var i = 0; i < 18; i++ ) {
            var side = ( i % 2 === 0 ) ? 1 : 0;
            var bub = new bubble();
            this.bubbles.push( bub );
            var width = Math.floor( Math.random() * this.maxBubbleWidth ) + this.minBubbleWidth;
            bub.init(
                this.getXPos( side ),
                Math.floor( Math.random() * 800 ),
                side,
        (Math.random()*20/100).toFixed(2),
                width,
                Math.floor( ( ( ( this.maxBubbleWidth + this.minBubbleWidth ) - width ) / 8 ) / 5 ) + 1,
                "#bubbleContainer" );
        }   
    },
    getXPos : function( blnLeftOrRight ) {
        var xpos = ( Math.random() * this.channelWidths[ blnLeftOrRight ] );// + ( this.maxBubbleWidth / 2 );
        return Math.floor(  xpos / ( this.channelWidths[ blnLeftOrRight ] ) * 100 );
    },
    setBoundaries : function() {
        this.screenWidth = $("body").width();
        this.leftEdge = $("#outerWrapper").position().left;
        this.rightEdge = this.leftEdge + 1040;

        this.channelWidths[ 0 ] = this.leftEdge < 150 ? 150 : this.leftEdge;
        this.channelWidths[ 1 ] = this.screenWidth - this.rightEdge;
    },
    update : function() {
        $.each( this.bubbles, function() {
            this.update();
        });
    }
};

function bubble(){
    this.domRef;
    this.diameter;
    this.x;
    this.xPerc;
    this.y;
    this.side;
    this.opacity;
    this.speed;

    this.init = function( x, y, side, opacity, diameter, speed, addToElement ){
        this.side = side;
        this.xPerc = x;
        this.y = y;
        this.speed = speed;
        this.opacity = opacity;
        this.diameter = diameter;
        this.domRef = $("<div></div")
            .addClass( "bubble" )
            .css("top", this.y )
            .css("left", this.getXPos() )
            .css( "opacity", this.opacity )
            .appendTo( $( addToElement ) );
            //.css("z-index", "-1")

        var img = $( "<img></img>" )
                //.attr("src", baseUrl + "/images/circle_" + this.colour + "_des.png" )
                .attr("src", "/images/circleeye.png" )
                .attr("height", this.diameter )
                .appendTo( this.domRef )
                .show()
                /*.load(function(){
                    // Whoa... cpu == 90% for long fades
                    $(this).fadeIn( 20000 );
                });*/
    };

    this.getXPos = function() {
        this.x = ( bubbleController.channelWidths[ this.side ] * ( this.xPerc / 100 ) ) - ( this.diameter / 2 );
        this.x += this.side == 1 ? bubbleController.rightEdge : 0;
        return this.x;
    };

    this.update = function() {
        this.y -= this.speed;
        this.x = this.getXPos();
        if( this.y < -this.diameter ) {
            this.y = 800;
            this.xPerc = bubbleController.getXPos( this.side );
            this.x = this.getXPos();
            this.opacity = (Math.random()*15/100).toFixed(2);
            this.fireFadeIn();
        }
        this.updateDom();
    };

    this.setInit = function(){

    };

    this.updateDom = function() {
        this.domRef
            .css("top", this.y )
            .css("left", this.x );
    };

    this.fireFadeIn = function() {
        this.domRef
            .hide()
            .css( "opacity", this.opacity )
            .fadeIn( 5000 );
    };
}

p.s. there's nothing really HTML5 about this from my quick perusal of the markup and javascript

Answer 2

Check out the speaker.js file. When the page loads, he creates an empty div and adds 18 divs within it that are called "bubbles". Each bubble has an update method that changes its location, slowly creeping up the screen.

Furthermore, he sets a timer on the page to call a page-wide update method every 200 milliseconds. Within the page-wide update method, he calls update on each bubble.

I was going to post the code, but I see qntmfred already has.