let mosaicImage;

let mosaicPixels;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // Create a video capture from the webcam

  video = createCapture(VIDEO, { flipped:true });

  video.size(50, 50); // Set the size of the video

  video.hide(); // Hide the default video element

}

​

function draw() {

  background(255);

  videoToGray()

  // videoToMosaic(20)

  // Draw the mosaic image on the canvas

  // image(mosaicImage, 0, 0, width, height); // Draw the mosaic video at (0, 0)

  // Draw the video on the canvas

  image(video, 0, 0, width, height); // Draw the video at (0, 0)

}

​

function videoToGray() {

  // Load the pixels from the video

  video.loadPixels();

​

  // Check if the video has pixels loaded

  if (video.pixels.length > 0) {

    // Convert to grayscale

    for (let i = 0; i < video.pixels.length; i += 4) {

      let r = video.pixels[i];     // Red

      let g = video.pixels[i + 1]; // Green

      let b = video.pixels[i + 2]; // Blue

​

      // Calculate grayscale value

      let gray = (r + g + b) / 3;

​

      // Set the pixel color to the grayscale value

      video.pixels[i] = gray;       // Red

      video.pixels[i + 1] = gray;   // Green

      video.pixels[i + 2] = gray;   // Blue

      // pixels[i + 3] stays the same (Alpha)

    }

​

    // Update the video pixels

    video.updatePixels();

  }

}

​

function videoToMosaic(mosaicSize) {

  // Load the pixels from the video

  video.loadPixels();

  // Check if the video has pixels loaded

  if (video.pixels.length > 0) {

    // Clear the mosaicPixels array

    mosaicPixels = new Uint8ClampedArray(video.pixels.length);

    // Loop through the canvas in blocks

    for (let y = 0; y < height; y += mosaicSize) {

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

        // Calculate the average color for the block

        let r = 0, g = 0, b = 0;

        let count = 0;

​

        // Loop through the pixels in the block

        for (let j = 0; j < mosaicSize; j++) {

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

            let pixelX = x + i;

            let pixelY = y + j;

​

            // Check if within bounds

            if (pixelX < width && pixelY < height) {

              let index = (pixelX + pixelY * video.width) * 4;

              r += video.pixels[index];       // Red

              g += video.pixels[index + 1];   // Green

              b += video.pixels[index + 2];   // Blue

              count++;

            }

          }

        }

​

        // Calculate average color

        if (count > 0) {

          r = r / count;

          g = g / count;

          b = b / count;

        }

​

        // Set the color for the entire block in the mosaicPixels array

        for (let j = 0; j < mosaicSize; j++) {

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

            let pixelX = x + i;

            let pixelY = y + j;

​

            // Check if within bounds

            if (pixelX < width && pixelY < height) {

              let index = (pixelX + pixelY * video.width) * 4;

              mosaicPixels[index] = r;        // Set Red

              mosaicPixels[index + 1] = g;    // Set Green

              mosaicPixels[index + 2] = b;    // Set Blue

              mosaicPixels[index + 3] = 255;   // Set Alpha to fully opaque

            }

          }

        }

      }

    }

​

    // Create a new image from the mosaicPixels array

    mosaicImage = createImage(width, height);

    mosaicImage.loadPixels();

    for (let i = 0; i < mosaicPixels.length; i++) {

      mosaicImage.pixels[i] = mosaicPixels[i];

    }

    mosaicImage.updatePixels();

  }

}

​

function mouseClicked() {

  console.log(video.pixels.length, video.pixels.length/windowHeight, windowWidth, windowHeight)

}