Flow Field, Step 1

flow-field-step-1.markdown

Flow Field, Step 1

I'm building a flow field

Inspired by Coding Challenge #24: Perlin Noise Flow Field by Daniel Shiffman: https://www.youtube.com/watch?v=BjoM9oKOAKY

Using noise lib by Seph Gentle: https://github.com/josephg/noisejs (put in another Pen and linked to by this Pen).

A Pen by Paweł Jankiewicz on CodePen.

License.

index.html

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

script.babel

let canvas;
let ctx;
let field;
let w, h;
let size;
let columns;
let rows;
let noiseZ;
let mousePos = {"x": -100, "y": -100};


function setup() {
  size = 20;
  noiseZ = 0;
  canvas = document.querySelector("#canvas");
  ctx = canvas.getContext("2d");
  reset();
  window.addEventListener("resize", reset);  
}

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

function calculateField() {
  for(let x = 0; x < columns; x++) {
    for(let y = 0; y < rows; y++) {
      let angle = noise.simplex3(x/50, y/50, noiseZ) * Math.PI * 2;
      let length = noise.simplex3(x/100 + 40000, y/100 + 40000, noiseZ);
      field[x][y][0] = angle;
      field[x][y][1] = length;
    }
  }
}

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

function draw() {
  requestAnimationFrame(draw);
  calculateField();
  noiseZ += 0.004;
  clear();
  drawField();
}

function clear() {
  ctx.fillStyle = "#3c5daa";
  ctx.fillRect(0, 0, w, h);
}

function drawField() {
  for(let x = 0; x < columns; x++) {
    for(let y = 0; y < rows; y++) {
      // if ((mousePos['x'] >= (x*size-50)) && (mousePos['x'] <= (x*size+50)) && (mousePos['y'] >= (y*size-50)) && (mousePos['y'] <= (y*size+50))) {
        // field[x][y][1] = 0;
      // }
      let angle = field[x][y][0] + 0.01*(((mousePos['x']/2-x*10)**2 + (mousePos['y']/2 - y*10)**2)**0.5);
      // console.log(((mousePos['x']-x*10)**2 + (mousePos['y'] - y*10)**2)^0.5);
      // let length = field[x][y][1] * 0.01*((mousePos['x']-x*10)**2 + (mousePos['y'] - y*10)**2)^0.5;
      let length = 0.001*(((mousePos['x']/2-x*10)**2 + (mousePos['y']/2 - y*10)**2)**0.5);
      
      ctx.save();
      ctx.translate(x*size, y*size);
      ctx.rotate(angle);
      //3c5daa
      //00a79f
      //eea861
      //ed1846
      // console.log(angle);
      if (angle < 2) {
      ctx.strokeStyle = "#eee";
      } else if (angle < 3){
      ctx.strokeStyle = "#00a79f"
      } else if (angle < 4){
      ctx.strokeStyle = "#eea861";     
      } else {
      ctx.strokeStyle = "#ed1846";                
      }
      ctx.lineWidth = 3;
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(0, size * length);
      ctx.stroke();
      ctx.restore();
    }
  }
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

setup();
draw();

canvas.addEventListener('mousemove', function(evt) {
  mousePos = getMousePos(canvas, evt);
}, false);

scripts

<script src="https://codepen.io/DonKarlssonSan/pen/jBWaad"></script>

style.css

body, html {
  margin: 0;
}

canvas {
  display: block;
}