​

// Inspired from https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/13

​

let img;

let fx;

let NUM_PARTICLES;

let particle_coords = [];

​

let points;

let bonds;

​

function preload() {

​

  //font = loadFont('assets/BLionTale-Regular.otf');

  font = loadFont('assets/inconsolata.otf');

}

​

function setup() {

  createCanvas(300, 300, WEBGL);

​

  points = font.textToPoints('GAME', width/10, height/2, 70, {

    sampleFactor: 0.1,

    simplifyThreshold: 0

  });

  points = points.concat(font.textToPoints('OVER', width/5, height/2+70, 70, {

    sampleFactor: 0.1,

    simplifyThreshold: 0

  }));

  NUM_PARTICLES = points.length;

  print(NUM_PARTICLES);

​

  for (let i = 0; i < NUM_PARTICLES; i++) {

    // x,y,yspeed,random intial offset for use in x and/or ylocate *

    particle_coords.push([points[i].x, height-points[i].y, 3, random(300)]);

  }

​

  fx = createShader(`

    precision highp float; 

    attribute vec3 aPosition;

    void main() { 

      gl_Position = vec4(aPosition, 1.0); 

    }`, `

    precision highp float;

    uniform sampler2D tex;

    void main() {

      float bri = 0.0;

      float maxBri = 0.0008; // adjust depending on the number of particles

      vec2 pos = gl_FragCoord.xy / 300.0;

      for(float x=0.0; x<1.0; x+=1.0/${NUM_PARTICLES}.) {

        vec4 data = texture2D(tex, vec2(x, 0.0));

        bri += maxBri / distance(pos, data.xy);

      }

      gl_FragColor = vec4(vec3(bri), 1.0);

    }`);

  noStroke();

  shader(fx);

​

  img = createImage(NUM_PARTICLES, 1);

}

​

function draw() {

  img.loadPixels();

  // update particles positions

  for (w = 0; w < NUM_PARTICLES; w++) {

    particle_coords[w] = [

      particle_coords[w][0],

      particle_coords[w][1] - particle_coords[w][2],

      particle_coords[w][2], //untouched

      particle_coords[w][3] //untouched

    ];

​

    if (particle_coords[w][1] < 0) {

      particle_coords[w][1] = height;

    }

  }

  // prepare 1D pixels map to be read by shader, and to store particle spatial coordinates data

  for (let x = 0; x < img.width; x++) {

    img.pixels[x * 4 + 0] = particle_coords[x % NUM_PARTICLES][0]; // Particle X

    img.pixels[x * 4 + 1] = particle_coords[x % NUM_PARTICLES][1]; // Particle Y

    //img.pixels[x*4+2] = floor(random(256)); // Particle radius

    img.pixels[x * 4 + 3] = 255; // Color index

  }

  img.updatePixels();

  fx.setUniform('tex', img);

  rotateZ(frameCount*0.01);

  quad(-1, -1, 1, -1, 1, 1, -1, 1);

}