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

// :)

​

let img;

let fx;

let NUM_PARTICLES = 100;

let particle_coords = [];

​

function preload() {

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

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

    particle_coords.push([0, height, 0.1+0.1*random(5), random(300)]);

  }

}

​

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;

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

    particle_coords[w] = [

      width * w / NUM_PARTICLES + 100 * sin(frameCount * 0.01 + particle_coords[w][3]),

      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;

    }

  }

  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);

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

}