JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<canvas id="world"></canvas>

JavaScript

$(function() {
  var points = [];
  var num = 8;
  var friction = .96;
  var spring = .04;
  var minDist = 100;
  var mouseX = 0;
  var mouseY = 0;
  
  for(var i = 0; i < num; i++) {
    var point = {};
    point.x = $(window).width()/(num-1)*i;
    point.y = $(window).height();
    point.vy = Math.random() * 60 - 30;
    points.push(point);
  }
  
  var canvas = document.getElementById('world');
  canvas.width = $(window).width();
  canvas.height = $(window).height();
  var ctx = canvas.getContext('2d');
  
  $('body').mousemove(function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
  })
  
  setInterval(loop, 33);
  
  function loop() {
    ctx.clearRect(0, 0, 465, 465);
    for(var i = 0; i < num; i++) {
      points[i].vy += ($(window).height()/2 - points[i].y) * spring;
      
      var dx = mouseX - points[i].x;
      var dy = mouseY - $(window).height()/2;
      var dist = Math.sqrt(dx * dx + (dy / 2) * (dy / 2));
      if(dist < minDist) {
        points[i].vy += (mouseY - points[i].y) * spring;
      }
      
      points[i].vy *= friction;
      points[i].y += points[i].vy;
      
      ctx.beginPath();
      ctx.fillStyle = 'rgb(255, 64, 64)';
      
      ctx.moveTo(points[0].x, points[0].y);
      for(var j = 1; j < num - 2; j++) {
        var cx = (points[j].x + points[j + 1].x) * .5;
        var cy = (points[j].y + points[j + 1].y) * .5;
        ctx.quadraticCurveTo(points[j].x, points[j].y, cx, cy);
      }
      ctx.quadraticCurveTo(points[points.length - 2].x, points[points.length - 2].y, points[points.length - 1].x, points[points.length - 1].y);
      ctx.lineTo($(window).width(), $(window).height());
      ctx.lineTo(0, $(window).height());
      ctx.lineTo(0, points[0].y);
      ctx.fill();
    }
  }
});