Chartjs-Animated Word Web in Javascript

by

0👍

I am crazy but i coded that in Canvas. Was bored haha. Test it by pasting to a new html file 😀 You can play with parametrs, colors, shapes and new bubbles with new texts. Have fun!

    <!DOCTYPE html>
    <html>

    <head>
      <title></title>

    </head>

<body>
    <canvas id="canvas"></canvas>

  <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = 400;
      canvas.height = 400;  
      var r = 0;


      var bubbles = [];

      bubbles.push(new Bubble(canvas.width/2, canvas.height/2, "Apple", "rgb(0,0,120)", 30, 20));
        bubbles.push(new Bubble(canvas.width/2 + 100, canvas.height/2, "Store", "rgb(0,0,200)", 30, 20));
         bubbles.push(new Bubble(canvas.width/2 - 100, canvas.height/2, "Ipad", "rgb(0,0,200)", 30, 20));
          bubbles.push(new Bubble(canvas.width/2, canvas.height/2 + 100, "iMac", "rgb(120,0,0)", 30, 20));



      setInterval(function(){update();}, 20);

      function update()
      {
          ctx.clearRect(0,0,canvas.width, canvas.height);
          for (var i=bubbles.length-1; i>=0; i--)
          {
              bubbles[i].update();

          }
      }

    function Vector(x,y)
    {
        this.x = x;
        this.y = y;

        this.startX = x;
        this.startY = y;

        this.add = function (v)
        {
            this.x += v.x;
            this.y += v.y;
        }

        this.mult = function(p)
        {
            this.x *= p;
            this.y *= p;
        }

         this.rotate = function(ang)
         {
        this.x = (this.startX - bubbles[0].position.x) * Math.cos(ang) 
                        - (this.startY - bubbles[0].position.y) * Math.sin(ang) 
                        + bubbles[0].position.x;

        this.y = (this.startX - bubbles[0].position.x) * Math.sin(ang) 
                        + (this.startY - bubbles[0].position.y) * Math.cos(ang) 
                        + bubbles[0].position.y;
         }

    }


    function Bubble(x,y,text, color, width, height)
    {
        this.position = new Vector(x,y);
        this.velocity = new Vector(0,0);
        this.acceleration = new Vector(0,0);

        this.text = text;
        this.color = color;

        this.width = width;
        this.height = height;

        this.draw = function()
        {   ctx.beginPath();

                if(this.text != "Apple")
                {
                    ctx.lineTo(bubbles[0].position.x, bubbles[0].position.y);
                }
             ctx.font = "bold 13pt Arial";
            ctx.fillStyle = this.color;
            ctx.strokeStyle = this.color;
              ctx.arc(this.position.x,this.position.y, this.width, 0, 2 * Math.PI, false);
               ctx.fill();
                ctx.fillStyle = "black";


              ctx.stroke();
                ctx.fillText(this.text, this.position.x - this.width / 2 - 6, this.position.y + this.height / 4);
        }

        this.update = function()
        {
              if(this.text != "Apple")
             {
                 r--;
                 if (r < -1440)
                 r = 1;

                this.position.rotate( Math.PI / 720 * r);



             }
              this.draw();
        }
    }   







  </script>
</body>

</html>

Leave a comment