title: JS: Flying random objects (images)
body: <p>I have small question about my concept in photoshop:</p>
  
  <p><a href="https://i.stack.imgur.com/3Q2cp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Q2cp.jpg" alt="enter image description here"></a></p>
  
  <p>I need to create html5/css/js adwords banner, where they will levitate background images (red pentagons) but also at the forefront of the entire banner, because in addition to those levitating pictures there will be other objects (texts, buttons).</p>
  
  <p>It is possible to achive this, and also it is possible change path of moving these red pentagons base base on cursor position if user will move his cursor on over that banner?</p>
  
  <p>Edit:
  I found this project: <a href="https://codepen.io/VIRU/pen/FAdkl" rel="nofollow noreferrer">https://codepen.io/VIRU/pen/FAdkl</a>
  Can be edited for flying pictures? </p>
  
  <pre><code>window.onload = function() {
  
      //Create canvas and initialize it's context
      var canvas = document.getElementById("flying-bubbles");
      var ctx = canvas.getContext("2d");
  
      //Set the dimensions of canvas equal to the window's dimensions
      var W = window.innerWidth, H = window.innerHeight;
      canvas.width = W;
      canvas.height = H;
  
      //Create an array of circles
      var circles = []; 
      for(var i = 0; i &lt; 20; i++ ){
          circles.push(new create_circle());
      }
  
      //Function to create circles with different positions and velocities
      function create_circle() {
          //Random Position
          this.x = Math.random()*W;
          this.y = Math.random()*H;
  
          //Random Velocities
          this.vx = 0.1+Math.random()*1;
          this.vy = -this.vx;
  
          //Random Radius
          this.r = 10 + Math.random()*50;
      }
  
      //Function to draw the background
      function draw() {
          //Create the gradient
          var grad = ctx.createLinearGradient(0, 0, W, H);
          grad.addColorStop(0, 'rgb(19, 105, 168)');
          grad.addColorStop(1, 'rgb(0, 0, 0)');
  
          //Fill the canvas with the gradient
          ctx.globalCompositeOperation = "source-over";
          ctx.fillStyle = grad;
          ctx.fillRect(0,0,W,H);
  
          //Fill the canvas with the circles
          for(var j = 0; j &lt; circles.length; j++) {
              var c = circles[j];
  
              //Draw the circle and it with the blur grad
              ctx.beginPath();
              ctx.globalCompositeOperation = "lighter";       
              ctx.fillStyle = grad;
              ctx.arc(c.x, c.y, c.r, Math.PI*2, false);
              ctx.fill();
  
              //Lets use the velocity now
              c.x += c.vx;
              c.y += c.vy;
  
              //To prevent the circles from moving out of the canvas
              if(c.x &lt; -50) c.x = W+50;
              if(c.y &lt; -50) c.y = H+50;
              if(c.x &gt; W+50) c.x = -50;
              if(c.y &gt; H+50) c.y = -50;
          }
      }
  
      setInterval(draw, 25);
  
  } 
  </code></pre>