How to make words explosion effect in blogger post in 5 minutes

Back>

The blogger post can turn a list of words into colorful words explosion tracking your mouse movement. The good part is the javascript don't need extra library and the css and html is simple too.

Example

<canvas id="canv"></canvas>

<style>
@import url(https://fonts.googleapis.com/css?family=Luckiest+Guy);


canvas {
  display: block;
}
</style>

<script>
window.onload = function() {
  var canvas = document.getElementById("canv");
  var ctx = canvas.getContext("2d");
  // Utilities
  function randomColor() {
    return '#' + Math.random().toString(16).slice(2, 8);
  }

  function randomWord() {
  var word = words[Math.floor(Math.random() * words.length)];
  return word;
}

  function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  //Make the canvas occupy the full page
  var W = window.innerWidth,
    H = window.innerHeight;
  canvas.width = W;
  canvas.height = H;
  var particles = [];
  var mouse = {};
  //Lets create some particles now
  var particle_count = 100;
  for (var i = 0; i < particle_count; i++) {
    particles.push(new particle());
  }
  canvas.addEventListener('mousedown', track_mouse, false);
  canvas.addEventListener('touch', track_mouse, false);

  function track_mouse(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;

    for (var i = 0; i < particle_count; i++) {
      particles.push(new particle());
    }
  }

  function particle() {
    //speed, life, location, life, colors
    //speed range = -2.5 to 2.5
    this.speed = {
      x: -2.5 + Math.random() * 5,
      y: -2.5 + Math.random() * 5
    };
    //location = center of the screen
    if (mouse.x && mouse.y) {
      this.location = {
        x: mouse.x,
        y: mouse.y
      };
    } else {
      this.location = {
        x: W / 2,
        y: H / 2
      };
    }
    this.color = randomColor()

    this.font = {
      size: randomInt(3, 15)
    }
 
    this.word = randomWord()
  }

  function draw() {
    ctx.globalCompositeOperation = "source-over";
    //Painting the canvas black
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, W, H);
    ctx.globalCompositeOperation = "lighter";
    for (var i = 0; i < particles.length; i++) {
      var p = particles[i];
      ctx.beginPath();
      ctx.font = p.font.size + "vh Luckiest Guy";
      ctx.textAlign = "center";
      ctx.transition = "all 2s ease";
      ctx.fillStyle = p.color;
      ctx.fillText(p.word, p.location.x, p.location.y);
      ctx.fill();
      ctx.stroke();

      //lets move the particles
      p.location.x += p.speed.x;
      p.location.y += p.speed.y;
   
      p.speed.x += randomInt(-0.01, 0.01);
      p.speed.y += randomInt(-0.01, 0.01);
   
      // Make 'em big and small
      // Warning: Causes extreme lag
      //p.font.size += randomInt(-0.1, 0.1)
    }
  }
  setInterval(draw, 10);
};

// Big Word Array
words = [ "algorithm", "Euclid's algorithm", "fundamentals", "sorting", "big O", "time complexity", "space complexity", "java", "abstraction", "data structure", "heap", "array", "list", "set", "queue", "deque", "stack", "map", "HashMap", "TreeMap", "concurrency", "Comparable", "Comparator", "abstract", "collections", "performance", "computation", "ArrayList", "insertion sort", "selection sort", "shellsort", "quicksort", "mergesort", "heapsort", "LSD", "priority queue", "selection", "merging", "bubble sort", "searching", "BST", "blanced BST", "red-black tree", "hashing", "graphs", "connections", "edge", "node", "weights", "orientation", "DFS", "BFS", "connectivity", "Kruskal's algorithm", "Prim's algorithm", "MST", "Dijkstra's algorithm", "Bellman-Ford algorithm", "shortest path", "String", "sequence", "characters", "keys", "substring", "substring searh", "regular expression", "pattern matching", "data compression", "elementary", "context", "scientific computing", "operations research", "theory of computing", "event-based simulation", "B-trees", "suffix array", "maximum flow", "reduction", "NP-completeness", "theoretical", "programs", "concise", "elegant", "complete", "rank", "whitelist filtering" ];
</script>