Loading

500 Followers Flow Field

Thank you all! <3Read about how I made this Pen: https://codepen.io/DonKarlssonSan/post/particles-in-simplex-noise-flow-field

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>500 Followers Flow Field</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <canvas id="canvas"></canvas>
  <script src='js/jbwaad.js'></script>
<script src='js/jreejo.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
body, html {
  margin: 0;
}

canvas {
  display: block;
}
/* Downloaded from https://ahoj.co.uk/ */
"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/*
  Johan Karlsson (DonKarlssonSan)
  2017
*/

var Particle = function () {
  function Particle(x, y) {
    _classCallCheck(this, Particle);

    this.pos = new Vector(x, y);
    this.prevPos = new Vector(x, y);
    this.vel = new Vector(Math.random() - 0.5, Math.random() - 0.5);
    this.acc = new Vector(0, 0);
  }

  Particle.prototype.move = function move(acc) {
    this.prevPos.x = this.pos.x;
    this.prevPos.y = this.pos.y;
    if (acc) {
      this.acc.addTo(acc);
    }
    this.vel.addTo(this.acc);
    this.pos.addTo(this.vel);
    if (this.vel.getLength() > config.particleSpeed) {
      this.vel.setLength(config.particleSpeed);
    }
    this.acc.x = 0;
    this.acc.y = 0;
  };

  Particle.prototype.drawLine = function drawLine() {
    ctx.beginPath();
    ctx.moveTo(this.prevPos.x, this.prevPos.y);
    ctx.lineTo(this.pos.x, this.pos.y);
    ctx.stroke();
  };

  Particle.prototype.wrap = function wrap() {
    if (this.pos.x > w) {
      this.prevPos.x = this.pos.x = 0;
    } else if (this.pos.x < 0) {
      this.prevPos.x = this.pos.x = w - 1;
    }
    if (this.pos.y > h) {
      this.prevPos.y = this.pos.y = 0;
    } else if (this.pos.y < 0) {
      this.prevPos.y = this.pos.y = h - 1;
    }
  };

  return Particle;
}();

var canvas = undefined;
var ctx = undefined;
var field = undefined;
var w = undefined,
    h = undefined;
var size = undefined;
var columns = undefined;
var rows = undefined;
var noiseZ = undefined;
var hue = undefined;
var particles = undefined;
var config = undefined;
var colorConfig = undefined;
var buffer32 = undefined;

function setup() {
  size = 3;
  noiseZ = 0;
  canvas = document.querySelector("#canvas");
  ctx = canvas.getContext("2d");
  window.addEventListener("resize", reset);
  config = {
    zoom: 80,
    noiseSpeed: 0.007,
    particleSpeed: 1,
    fieldForce: 20
  };

  colorConfig = {
    particleOpacity: 0.1,
    baseHue: 340,
    hueRange: 20,
    hueSpeed: 0.005,
    colorSaturation: 100
  };
  reset();
}

function reset() {
  hue = colorConfig.baseHue;
  noise.seed(Math.random());
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  columns = Math.floor(w / size) + 1;
  rows = Math.floor(h / size) + 1;
  initParticles();
  initField();
  drawText();
  drawBackground(1);
}

function initParticles() {
  particles = [];
  var numberOfParticles = w * h / 300;
  for (var i = 0; i < numberOfParticles; i++) {
    var particle = new Particle(Math.random() * w, Math.random() * h);
    particles.push(particle);
  }
}

function draw() {
  requestAnimationFrame(draw);
  calculateField();
  noiseZ += config.noiseSpeed;
  drawParticles();
}

function initField() {
  field = new Array(columns);
  for (var x = 0; x < columns; x++) {
    field[x] = new Array(columns);
    for (var y = 0; y < rows; y++) {
      field[x][y] = new Vector(0, 0);
    }
  }
}

function calculateField() {
  var x1 = undefined;
  var y1 = undefined;
  for (var x = 0; x < columns; x++) {
    for (var y = 0; y < rows; y++) {
      var color = buffer32[y * size * w + x * size];
      if (color) {
        x1 = (Math.random() - 0.5) * 3;
        y1 = (Math.random() - 0.5) * 3;
      } else {
        x1 = noise.simplex3(x / config.zoom, y / config.zoom, noiseZ) * config.fieldForce / 20;
        y1 = noise.simplex3(x / config.zoom + 40000, y / config.zoom + 40000, noiseZ) * config.fieldForce / 20;
      }
      field[x][y].x = x1;
      field[x][y].y = y1;
    }
  }
}

function drawBackground(alpha) {
  ctx.fillStyle = "rgba(0, 0, 0, " + alpha + ")";
  ctx.fillRect(0, 0, w, h);
}

function drawText() {
  ctx.save();
  var text = "500";
  var fontSize = 400;
  ctx.font = "bold " + fontSize + "px sans-serif";
  var textWidth = ctx.measureText(text).width;
  var marginLeft = (w - textWidth) * 0.5;
  var marginTop = (h - fontSize) * 0.25;

  ctx.fillStyle = "white";
  ctx.fillText(text, marginLeft, marginTop + fontSize * 0.9);
  ctx.restore();
  var image = ctx.getImageData(0, 0, w, h);
  buffer32 = new Uint32Array(image.data.buffer);
}

function drawParticles() {
  hue += colorConfig.hueSpeed;
  var h = Math.sin(hue) * colorConfig.hueRange + colorConfig.baseHue;
  ctx.strokeStyle = "hsla(" + h + ", " + colorConfig.colorSaturation + "%, 50%, " + colorConfig.particleOpacity + ")";
  var x = undefined;
  var y = undefined;
  particles.forEach(function (p) {
    x = p.pos.x / size;
    y = p.pos.y / size;
    var v = undefined;
    if (x >= 0 && x < columns && y >= 0 && y < rows) {
      v = field[Math.floor(x)][Math.floor(y)];
    }
    p.move(v);
    p.wrap();
    p.drawLine();
  });
}

setup();
draw();

This awesome code is write by Johan Karlsson, you can se more from this user in the personal repository