// https://hamoid.com/post/in-the-mood-for-shaders/

// :)

​

let img;

let fx;

let NUM_PARTICLES = 50;

let particle_coords = [];

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

  particle_coords.push([0,0]);

}

​

function setup() {

  createCanvas(300, 300, WEBGL);

  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.0009; // 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();

  let t = millis() / 1000.0;

  particle_coords[frameCount%NUM_PARTICLES] = [mouseX,height-mouseY];

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

    img.pixels[x*4+0] = particle_coords[x%NUM_PARTICLES][0];//floor(256 * noise(x * 0.08 + t)); // R

    img.pixels[x*4+1] = particle_coords[x%NUM_PARTICLES][1];//floor(256 * noise(t - x * 0.07)); // G

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

    img.pixels[x*4+3] = 255; // I don't understand the effect of this. Try 5. // A

  }

  img.updatePixels();

  fx.setUniform('tex', img);

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

}