Particle Wave


Particle Wave


This is a really awesome Particle Wave effect created using Javascript



*Featured Code Created by Morpheus

            


HTML with CSS and JavaScript


<html>
    <head>
        <title>Particle Wave</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <style>
#a{
height:700px;
width:500px;}
            body {
        margin: 0;
        background: black;
        position: relative;
      }
            canvas {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
       }
      #fps, #waveGap, #angleDiv, #particleRadius{
        color: lime;
        font-size: 18px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;
      }
            #waveGap{
                right:auto;
                left:0;
            }
            #angleDiv{
                top:auto;
                bottom: 0;
            }
            #particleRadius{
                right: auto;
                top: auto;
                bottom:0;
                left:0;
            }

        </style>
    </head>
    <body>
    <span id="fps"></span>
        <input type="range" max="100" min="1" value="50" step="1" id="waveGap">
        <input type="range" max="480" min="1" value="360" step="10" id="angleDiv">
        <input type="range" max="10" min="1" value="2" step="1" id="particleRadius">

        <script>

    var particleWave = (function() {
      'use strict';

      var canvas = document.createElement('canvas');
      document.body.appendChild(canvas);
      var ctx = canvas.getContext('2d');
      var W = window.innerWidth;
      var H = window.innerHeight;
      var durMillis = 1000000;
      canvas.width = W;
      canvas.height = H;

            var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
            var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

      var SIDE = 20;
      var PARTICLE_RADIUS = 2;
      var PI_TWICE = Math.PI * 2;
      var RADIUS = Math.round( (SIDE * Math.sqrt(2)) / 2 );
      var offset = SIDE / 2;

      var start = null;
      var lastTimeCalled = undefined, timeDiff, fps, myFrames;
      var angle = 0;
      var angularVelocity = 0;
      var angleDiv = 360;
            var waveGap = 30;
      var angleOffset = (PI_TWICE / angleDiv) * waveGap;
      var rotateVelocity = PI_TWICE / angleDiv ;

      var particleArray = [];
      ctx.fillStyle = "lime";

      function Particle(posX, posY, angle){
        this.posX = posX;
        this.posY = posY;
        this.angle = angle;
        this.particleX = this.posX + (RADIUS * Math.cos(this.angle));
        this.particleY = this.posY + (RADIUS * Math.sin(this.angle));
      }

      Particle.prototype.draw =  function(){
        ctx.beginPath();
        ctx.arc(this.particleX, this.particleY, PARTICLE_RADIUS, 0, PI_TWICE, false );
        ctx.fill();
      }

      Particle.prototype.update = function(){
        this.angle += rotateVelocity;
        this.particleX = this.posX + (RADIUS * Math.cos(this.angle));
        this.particleY = this.posY + (RADIUS * Math.sin(this.angle));
        this.draw();
      }

      //populate the particleArray
            function populateArray(){
                for (var i = 0; i < W; i += SIDE) {
                    for (var j = 0; j < H; j += SIDE) {

                        angle = ((i +j)/SIDE) * angleOffset;
                        particleArray.push( new Particle(
                            i + offset,
                            j + offset,
                            angle
                        ));
                    }
                }
            }


        // Update the current slider value (each time you drag the slider handle)
        document.getElementById("waveGap").oninput = function() {
                particleArray = [];
                waveGap = this.value;
                angleOffset = (PI_TWICE / angleDiv) * waveGap;
                populateArray();
        }

            // Update the current slider value (each time you drag the slider handle)
        document.getElementById("angleDiv").oninput = function() {
                particleArray = [];
                angleDiv = this.value;
                rotateVelocity = PI_TWICE / angleDiv;
                populateArray();
        }
     
        document.getElementById("particleRadius").oninput = function() {
                particleArray = [];
                PARTICLE_RADIUS  = this.value;
                populateArray();
        }


      function animate(timestamp) {
          if (!start) start = timestamp;
          var progress = timestamp - start;
          //console.log(progress + " , " + durMillis);

          /******FPS CALCULATION START******/
          if (!lastTimeCalled) {
              lastTimeCalled = Date.now();
              fps = 0;
          }
          timeDiff = (Date.now() - lastTimeCalled) / 1000;
          lastTimeCalled = Date.now();
          fps = Math.round(1 / timeDiff);

          document.getElementById('fps').textContent = "FPS : " + fps;
          /******FPS CALCULATION END******/

          /************Animation Logic starts*************/
          ctx.clearRect(0, 0, W, H);
          particleArray.forEach(function(item){
            item.update();
          });

          /************Animation Logic ends*************/



          if (progress < durMillis) {
              myFrames = requestAnimationFrame(animate);
          } else {

                cancelAnimationFrame(myFrames);
          }
      }

      function generateMap(){
        var canvas2 = document.createElement('canvas');
        document.body.appendChild(canvas2);
        var ctx2 = canvas2.getContext('2d');
        canvas2.width = W;
        canvas2.height = H;
        canvas2.style.zIndex = "5";

        var isClicked = false;
        canvas2.addEventListener('click', function(){
          if(!isClicked){
            drawMap();
            isClicked = true;
          } else {
            ctx2.clearRect(0, 0, W, H);
            isClicked = false;
          }
        });

        ctx2.strokeStyle = "pink";
        ctx2.lineWidth = 1.2;
        function drawMap(){
          for (var i = 0; i < W; i += SIDE) {
            for (var j = 0; j < H; j += SIDE) {

              ctx2.beginPath();
              ctx2.arc(i + offset, j + offset, RADIUS, 0, PI_TWICE, false );
              ctx2.stroke();

            }
          }
        }

      }
            populateArray();
      generateMap();
      requestAnimationFrame(animate);
    }());

        </script>
    </body>
</html>


Click here to view this awesome code








Try these Fun Games by Bobbie:


Ocean Treasures Game


Travel Blast Game New York


Play and Learn Russian


Battlestarship Game



Take a look at these Groovy Codes:


Fun IQ Test


Html Svg Starburst


Javascript Particles Fishes



Read the Latest Breaking Programming and Tech News, Great Articles and Tips:


Codenewz Programming and Tech News





Comments

Popular posts from this blog