Skip to content

Instantly share code, notes, and snippets.

@nick-jonas

nick-jonas/bubbles-canvas.js

Last active October 24, 2016 02:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nick-jonas/9815565 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nick-jonas/9815565 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Nick Jonas revised this gist Mar 27, 2014. 1 changed file with 10 additions and 3 deletions.
    13 changes: 10 additions & 3 deletions bubbles-canvas.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,11 @@
    // called once, to initialize
    createBubbles: function(){
    var self = this,
    el = this.element,
    width = $(window).width(),
    height = $(window).height(),
    canvas = document.createElement('canvas');

    if(this.settings.canvasId) $(canvas).attr('id', this.settings.canvasId);

    el.style.width = canvas.width = width;
    el.style.height = canvas.height = height;

    @@ -15,7 +14,8 @@ createBubbles: function(){
    var bubbles = [];
    var ctx = canvas.getContext('2d');
    for(var i = 0; i < this.settings.bubbleCount; i++){


    // give random diameter, x, y, opacity, speed, amplitude, and outline or fill
    var diam = (Math.random() * (this.settings.maxDiam - this.settings.minDiam)) + this.settings.minDiam,
    x = Math.floor(Math.random() * width),
    y = height + (diam / 2) + Math.random() * 100,
    @@ -24,6 +24,7 @@ createBubbles: function(){
    amplitude = (Math.random() * 50) + 45,
    isOutline = Math.random() > 0.5;

    // store bubble properties in memory
    var bubble = {
    startX: x,
    x: x,
    @@ -41,8 +42,10 @@ createBubbles: function(){


    var count = 0;
    // called on each frame
    function animate(){

    // if not active, place at bottom
    if(!$(el).data('isPlaying')){
    for(var j = 0; j < bubbles.length; j++){
    bubbles[j].y = height + (diam / 2);
    @@ -52,6 +55,7 @@ createBubbles: function(){

    count++;

    // clear canvas
    ctx.clearRect(0, 0, width, height);

    for(var i = 0; i < bubbles.length; i++){
    @@ -62,10 +66,13 @@ createBubbles: function(){
    b.y = window.innerHeight + b.radius;
    }

    // move upwards, with repetitive oscillation on the x-axis
    b.y = b.y - b.speed;
    b.x = b.startX + Math.sin(count / b.amplitude) * 50;

    ctx.beginPath();

    // outline some, fill others
    if(b.isOutline){
    ctx.strokeStyle = 'rgb(94,202,255)';
    ctx.lineWidth = 2;
  2. Nick Jonas created this gist Mar 27, 2014.
    97 changes: 97 additions & 0 deletions bubbles-canvas.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,97 @@
    createBubbles: function(){
    var self = this,
    el = this.element,
    width = $(window).width(),
    height = $(window).height(),
    canvas = document.createElement('canvas');

    if(this.settings.canvasId) $(canvas).attr('id', this.settings.canvasId);

    el.style.width = canvas.width = width;
    el.style.height = canvas.height = height;

    el.appendChild(canvas);

    var bubbles = [];
    var ctx = canvas.getContext('2d');
    for(var i = 0; i < this.settings.bubbleCount; i++){

    var diam = (Math.random() * (this.settings.maxDiam - this.settings.minDiam)) + this.settings.minDiam,
    x = Math.floor(Math.random() * width),
    y = height + (diam / 2) + Math.random() * 100,
    opacity = Math.random(1),
    speed = (Math.random() / 2) + 0.1,
    amplitude = (Math.random() * 50) + 45,
    isOutline = Math.random() > 0.5;

    var bubble = {
    startX: x,
    x: x,
    y: y,
    radius: diam / 2,
    speed: speed,
    opacity: self.map_range(opacity, 0, 1, 0, 0.4),
    amplitude: amplitude,
    isOutline: isOutline
    };

    bubbles.push(bubble);

    }


    var count = 0;
    function animate(){

    if(!$(el).data('isPlaying')){
    for(var j = 0; j < bubbles.length; j++){
    bubbles[j].y = height + (diam / 2);
    }
    return;
    }

    count++;

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

    for(var i = 0; i < bubbles.length; i++){
    var b = bubbles[i];

    // if reached top, send back to bottom
    if(b.y <= b.radius * -2){
    b.y = window.innerHeight + b.radius;
    }

    b.y = b.y - b.speed;
    b.x = b.startX + Math.sin(count / b.amplitude) * 50;

    ctx.beginPath();
    if(b.isOutline){
    ctx.strokeStyle = 'rgb(94,202,255)';
    ctx.lineWidth = 2;
    ctx.arc(b.x, b.y, b.radius, 0, 2 * Math.PI, false);
    ctx.stroke();
    }else{
    ctx.fillStyle = 'rgba(94,202,255, ' + b.opacity + ')';
    ctx.arc(b.x, b.y, b.radius, 0, 2 * Math.PI, false);
    ctx.fill();
    }
    }
    }


    // shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
    };
    })();
    (function animloop(){
    requestAnimFrame(animloop);
    animate();
    })();

    }