Particles overlay

// By 创意编程Oliver

// Transformed into a transparent overlay above image by noel

​

const MAX_PARTICLE_COUNT = 30;  

​

const colorScheme1 = "#E69F66"; 

const colorScheme2 = "#ff2b2a";  

const colorScheme3 = "#2276bf";  

​

let theShader;

let img;

let particleList = [];

let particleGroup;

​

function preload() {

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

  img = loadImage('imageshader.png');

}

​

function setup() {

  createCanvas(1080, 720, WEBGL);

  noStroke();

​

  // Create particles in three groups based on color schemes

  // Group 1 (Orange)

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

    const c1 = color(colorScheme1);

    particleList.push(new Particle(width / 2, height / 2, 1000, 1000, c1));

  }

​

  // Group 2 (Red)

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

    const c2 = color(colorScheme2);

    particleList.push(new Particle(width / 2, height / 2, 3000, 3000, c2));

  }

​

  // Group 3 (Blue)

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

    const c3 = color(colorScheme3);

    particleList.push(new Particle(width / 2, height / 2, -6000, 6000, c3));

  }

​

  particleGroup = new ParticleGroup();

}

​

function draw() {

  shader(theShader);

​

  // Pass the canvas resolution and image texture to the shader

  theShader.setUniform("u_resolution", [width, height]);

  theShader.setUniform("u_texture", img);

​

  // Move particles and get particle data for the shader

  const data = particleGroup.draw();

​

  // Pass particle data to the shader

  theShader.setUniform("particles", data.particles);

  theShader.setUniform("particleCount", data.particles.length / 3);  // Each particle has 3 values

  theShader.setUniform("particleColors", data.particleColors);

​

  // Draw the full-screen rectangle with the shader applied

  beginShape();

  vertex(0, 0, 0);              

  vertex(width, 0, 0);        

  vertex(width, height, 0);      

  vertex(0, height, 0);         

  endShape(CLOSE);

}

​