Simplex Tornado

index.html

<canvas id="main"></canvas>

script.js

 window.addEventListener('mousemove', click, false);

window.requestAnimFrame = (function () {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

var canvas, ctx;
var width, height;
var freq = .06;
var offsetX = 10;
var lastX = 0;
var perlin;
var xstart = Math.random()*10;
var ystart = Math.random()*10;

function setup() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas = document.getElementById("main");
    ctx = canvas.getContext("2d");
    perlin = new SimplexNoise();
    canvas.width = width;
    canvas.height = height;
    lastX = width/2;
    draw();
}


function click(e){
  if(e.clientX>lastX){
        freq+=.0008;
  }
  else{
        freq-=.0008;
  }
  lastX = e.clientX;
}

function draw() {
  requestAnimFrame(draw)
  
  ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
  ctx.fillRect (0, 0, width, height);
  ctx.strokeStyle = "rgba(50, 100, 90, 1.0)";
  
  xstart = 0.02;
  ystart -= 0.005;
  

  ctx.save();
  ctx.translate(width/2, height/2);
  ynoise = ystart;
  for (var x = -(width/2)/offsetX; x < (width/2)/offsetX; x++) {
    ynoise += 0.04;
    xnoise = xstart;
    for (var y = -3; y < 3; y++) {
        xnoise += .4;
        var size = perlin.noise2D(xnoise, ynoise);
        var pointX = perlin.noise2D(x*freq, y*freq)+x;
        var pointY = perlin.noise2D(x*freq, y*freq)+y;
       ctx.fillStyle = "rgba("+  Math.floor(Math.abs(size) * 100) + ", "+  Math.floor(Math.abs(size) * 256) + ", "+  Math.floor(Math.abs(size) * 256) + ", 1.0)";
        ctx.beginPath();
        ctx.arc((pointX*size)*(3*(freq*15)),pointY*30,3,0,2*Math.PI);

        ctx.stroke();
      
        ctx.fill();
    }
}
  ctx.restore();
}
setup();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.3.0/simplex-noise.min.js"></script>

simplex-tornado.markdown

Simplex Tornado

move your mouse to edit frequency.

A Pen by Xanmia on CodePen.

License.

style.css

body{
  margin:0;
  overflow:hidden;
}