Flowfields V6

const noiseScale = 0.001;

const noiseSpeed = 0.01;

let walkers;

let walker;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(100);

  noStroke()

  // noLoop()

  walker = {

    pos: createVector(300, 300),

    size: 10,

    colour: 'magenta'

  }

}

​

function draw() {

  background(0)

  const cellSize = 50;

  for (let y = 0; y < height; y += cellSize) {

    for (let x = 0; x < height; x += cellSize) {

      let angle = calculateAngle(x, y)

      drawArrow(x, y, angle)

    }

  }

  drawWalker(walker)

  moveWalker(walker)

}

​

function drawWalker(w) {

  fill(w.colour)

  circle(w.pos.x, w.pos.y, w.size)

}

​

function moveWalker(w) {

  // Calc noise angle at walker's x and y

  const angle = calculateAngle(w.pos.x, w.pos.y)

  // move walker some distance in that angle

  const vel = p5.Vector.fromAngle(angle, 5)

​

  w.pos.x += vel.x

  w.pos.y += vel.y

​

}

​

function drawArrow(x, y, angle) {

  push()

  translate(x, y)

  rotate(angle)

  stroke(255)

  line(-10, 0, 10, 0)

  fill(255)

  circle(10, 0, 5)

  pop()

}

​

function calculateAngle(x, y) {

  return noise(x * noiseScale, y * noiseScale, frameCount * noiseSpeed) * TWO_PI * 3

}