// Challenge #1: "Swarm"

// Join the discord: https://discord.gg/Qnc3jWTeEW

​

let initShader;

let updateShader;

​

let particleInfo;

​

function preload() {

  initShader = loadShader("/shaders/shader.vert", "/shaders/init.frag");

  updateShader = loadShader("/shaders/shader.vert", "/shaders/update.frag");

}

​

​

​

function setup() {

  createCanvas(800, 800);

  pixelDensity(1);

  noSmooth();

  particleInfo = createGraphics(400, 400, WEBGL);

  particleInfo.pixelDensity(1);

  particleInfo.noSmooth();

  particleInfoII = createGraphics(particleInfo.width, particleInfo.height);

  particleInfoII.pixelDensity(1);

  particleInfoII.noSmooth();

  particleInfo.noStroke();

  particleInfoII.noStroke();

  particleInfo.shader(initShader);

  initShader.setUniform("screenRes", [width, height]);

  particleInfo.rect(0, 0, width, height);

  particleInfo.shader(updateShader);

  particleInfo.loadPixels();

  // frameRate(1);

}

​

function draw() {

  background(116, 163, 63);

  fill(0);

  // image(particleInfo, 0, 0, width, height);

  // console.log(getPixelFloatValue(particleInfo.pixels, pixelIndex(0, 0)));

  particleInfoII.clear();

  particleInfoII.image(particleInfo, 0, 0);

  particleInfoII.updatePixels();  

  updateShader.setUniform("screenRes", [width, height]);

  updateShader.setUniform("mousePos", [mouseX, mouseY]);

  updateShader.setUniform("millis", millis());

  updateShader.setUniform("particleInfo", particleInfoII);

  particleInfo.clear();

  particleInfo.rect(0, 0, particleInfo.width, particleInfo.height);

  // Displaying Particles

  particleInfo.loadPixels();

  loadPixels();

  for(let i = 0; i < particleInfo.width/2; i ++) {

    for(let j = 0; j < particleInfo.height/2; j ++) {

      let xPos = getPixelFloatValue(particleInfo.pixels, pixelIndex(i, j, particleInfo.width));

      let yPos = getPixelFloatValue(particleInfo.pixels, pixelIndex(i + particleInfo.width/2, j, particleInfo.width));

      const idx = pixelIndex(xPos, yPos, width);

      pixels[idx] = 47;

      pixels[idx + 1] = 20;

      pixels[idx + 2] = 47;

    }

  }  

  updatePixels();

}

​

function pixelIndex(x, y, w) {

  return 4 * (int(y) * w + int(x));

}

​

const buff = new ArrayBuffer(4);

const ints = new Uint8Array(buff);

const floats = new Float32Array(buff);

​

function getPixelFloatValue(pixelsArray, index) {

  const r = pixelsArray[index]

  const g = pixelsArray[index + 1];

  const b = pixelsArray[index + 2];

  const a = pixelsArray[index + 3];

  // let rgba = (r << 24) | (g << 16) | (b << 8) | a;

  ints[0] = a;

  ints[1] = b;

  ints[2] = g;

  ints[3] = r;

//   if(index == 0) {

//     console.log(r, g, b, a);

//   }

​

  return floats[0];

}