let sobelShader;

​

let points = [];

const numPoints = 1000;

const pointLifeTime = 100;

​

let flowField, sobelGraphic;

​

function preload() {

  img = loadImage("dog.jpeg");

  sobelShader = loadShader('shader.vert', 'sobel.frag');

}

​

function setup() {

  createCanvas(600, 600);

  flowField = createGraphics(width, height);

  sobelGraphic = createGraphics(img.width, img.height, WEBGL);

  sobelGraphic.shader(sobelShader);

  sobelShader.setUniform("resolution", [img.width, img.height]);

  sobelShader.setUniform("image", img);

  sobelGraphic.rect(0, 0, img.width, img.height);

  flowField.image(sobelGraphic, 0, 0, width, height);

  // strokeWeight(2);

  stroke(0, 10);

  background(220);

  image(img, 0, 0, width, height);

}

​

function draw() {  

  // image(sobelGraphic, 0, 0, width, height);

  while(points.length < numPoints) {

    points.push(createVector(random(width), random(height), pointLifeTime));

  }

  points = points.filter(p => {

    const c = flowField.get(p.x, p.y);

    const vx = map(red(c), 0, 255, -1, 1);

    const vy = map(green(c), 0, 255, -1, 1);

    const vel = createVector(vx, vy);

    vel.normalize();

    p.add(vel);

    point(p.x, p.y);

    p.z -= 1;

    return inScreen(p) && p.z > 0;

  });

}

​

function inScreen(pos) {

  return pos.x >= 0 && pos.x < width &&

    pos.y >= 0 && pos.y < height;

}