Dashing flow bubbles (like windows 10 screensaver) in html5 canvas using javascript

Dashing flow floating bubbles (like windows 10 screensaver) in html5 canvas using javascript - Nibunan

Html5 canvas is evolving to give the rich graphics on browser without using flash or other plugins. Html5 canvas is being used in many places like games animations and rich user interfaces on web and so on. This article explains how to create dashing flow (floating) bubbles (like windows 10 screensaver) in html5 canvas using javascript.

Demo

Open with new tab

Source


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Flow Dashing Bubbles using html5 canvas - Nibunan</title>
      </head>
      <body style="margin: 0px">
      <canvas width="700" height="450" id="drawing-surface"></canvas>
      <script type="text/javascript">
      var balls = [];
      function Random(range) {
      return Math.floor((Math.random() * range) + 1);
      }
      var viewport = new Viewport()
      for (var i = 0; i < 3; i++) {
      for (var j = 0; j < 4; j++) {
      var ball = new Bubble();
      ball.location = { x: (j * 120) + 5, y: (i * 120) + 5 };
      ball.direction = { x: Random(1), y: Random(1) };
      ball.speed = Random(2);
      viewport.addObject(ball);
      balls.push(ball);
      }
      }
      viewport.init();
      </script>
      </body>
      </html>
    

Viewport


      function Viewport() {
      var me = this;
      me.objects = [];
      var canvas = document.getElementById("drawing-surface");
      function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      }
      resizeCanvas();
      window.onresize = function () {
      resizeCanvas();
      }
      var drawingSurface = document.getElementById("drawing-surface").getContext("2d");
      me.doPaint = true;
      function drawBackground() {
      drawingSurface.fillStyle = 'black';
      drawingSurface.fillRect(0, 0, canvas.width, canvas.height);
      }
      function drawObjects() {
      for (var i = 0; i < me.objects.length; i++) {
      me.objects[i].paint(drawingSurface);
      }
      }
      me.paintInit = function () {
      me.doPaint = true;
      }
      function paint() {
      me.paintInit();
      if (me.doPaint) {
      drawBackground();
      drawObjects();
      me.doPaint = false;
      }
      }
      var timer;
      me.init = function () {
      timer = setInterval(function () { paint(); }, 1000 / 40);
      };
      me.repaint = function () {
      me.doPaint = true;
      };
      me.addObject = function (obj) {
      me.objects.push(obj);
      }
      }
    

Bubble


      function Bubble() {
      var me = this;
      me.speed = 5;
      me.location = { x: 0, y: 0 };
      me.size = { width: 100, height: 100 };
      var image = new Image();
      image.src = "bubble"+ Random(3)+".png";
      image.onload = function () {
      me.image = image;
      };

      me.distanceBetweenTwoPoints = function (loc1, loc2) {
      var x1 = loc1.x, x2 = loc2.x, y1 = loc1.y, y2 = loc2.y;
      var diffx = x2 - x1, diffy = y2 - y1;
      var squareDiffX = diffx * diffx, squareDiffY = diffy * diffy;
      var dist = Math.sqrt(squareDiffX + squareDiffY);
      return dist;
      }

      me.isTouching = function (ball) {
      var dist = this.distanceBetweenTwoPoints(this.location, ball.location);
      if (dist > 0 && dist <= this.size.width) {
      return true;
      }
      return false;
      }

      me.isTouchingOtherOne = function () {
      for (var i = 0; i < balls.length; i++) {
      if (me.isTouching(balls[i])) {
      return true;
      }
      }
      return false;
      };

      me.move = function () {
      var ball = me;
      if (me.isTouchingOtherOne()) {
      if (ball.direction.x === 0) {
      ball.direction.x = 1;
      } else {
      ball.direction.x = 0;
      }
      if (ball.direction.y === 0) {
      ball.direction.y = 1;
      } else {
      ball.direction.y = 0;
      }
      }
      switch (ball.direction.x) {
      case 0:
      if (ball.location.x <= 0) {
      ball.direction.x = 1;
      ball.location.x += ball.speed;
      }
      else {
      ball.location.x -= ball.speed;
      }
      break;
      case 1:
      if (ball.location.x >= window.innerWidth - ball.size.width) {
      ball.direction.x = 0;
      ball.location.x -= ball.speed;
      }
      else {
      ball.location.x += ball.speed;
      }
      break;
      }
      switch (ball.direction.y) {
      case 0:
      if (ball.location.y <= 0) {
      ball.direction.y = 1;
      ball.location.y += ball.speed;
      }
      else {
      ball.location.y -= ball.speed;
      }
      break;
      case 1:
      if (ball.location.y >= window.innerHeight - ball.size.height) {
      ball.direction.y = 0;
      ball.location.y -= ball.speed;
      }
      else {
      ball.location.y += ball.speed;
      }
      break;
      }
      }
      me.paint = function (context) {
      if (me.image) {
      me.move();
      context.drawImage(me.image, me.location.x, me.location.y, me.size.width, me.size.height);
      }
      }
      }