Skeleton - Distance Field

/**

 * BMWalker.js : https://github.com/tetunori/BMWalker.js

 */

let bmw = new BMWalker();

let azimuth = 0;

let elevation = 0;

​

let url = 'https://coolors.co/0b132b-1c2541-3a506b-5bc0be-6fffe9';

let palette = url.split('/')[3].split('-').map(c => '#' + c);

let vmin, vmax;

let gl, glsl;

​

function preload() {

  glsl = loadShader('shader.vert', 'shader.frag');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  noStroke();

  gl = drawingContext;

  vmin = min(width, height);

  vmax = max(width, height);

}

​

function draw() {

  let sec = millis() / 1000;

  background(0);

  bmw.setCameraParam(-sec * PI * 0.1, 0, 0);

  let walkerHeight = vmin * 0.8;

  let markers = bmw.getMarkers(walkerHeight);

  push();

  {

    shader(glsl);

    glsl.setUniform('uResolution', [vmax, vmax]);

    glsl.setUniform('uTime', sec);

    markers.forEach((m, i) => {

      glsl.setUniform(`uPos${ i.toString().padStart(2, '0') }`, [

        m.x / vmax + 1,

        m.y / vmax + 0.5

      ]);

    });

    plane(vmax);

  }

  pop();

}