// https://www.youtube.com/watch?v=55iwMYv8tGI

​

let currentPage = "main";

​

//make the color and size buttons and array so its easier to use and manege

let sizeButton = [];

let colorButton = [];

​

//navigation buttons switch btwn states

let startButton;

let resetButton;

​

//Save Button

let saveButton;

​

//particle class array

let particles = [];

​

//video

let video;

​

function setup() {

  createCanvas(1200, 800);

  //functions that handle the buttons in each page

  setUpMainButtons();

​

  //for vid

  video = createCapture(VIDEO);

  video.size(80, 60);

​

  //particles

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

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

      // scale for display

      particles.push(new Particle(x*15 , y * 15)); 

    }

  }

}

​

function draw() {

  background(0);

  video.loadPixels();

  if (currentPage === "main") {

    drawMainPage();

  } else if (currentPage === "page1") {

    drawPage1();

    drawParticleSystem();

  }

}

​

//function for main page buttons

function setUpMainButtons() {

  //Start experiance button

  startButton = createButton("Start");

  startButton.position(width / 2 - 40, height / 2);

  startButton.mousePressed(() => {

    currentPage = "page1";

    // call the remove function for main page to remove them

    removeMainButtons();

    //add the page 1 buttons function

    setUpPage1Buttons();

  });

  // color buttons

  colorButtons = [

    createButton("Pinkish"),

    createButton("Blueish"),

    createButton("Greenish"),

  ];

  colorButtons[0].position(20, 10);

  colorButtons[1].position(80, 10);

  colorButtons[2].position(150, 10);

​

  // size buttons

  sizeButtons = [

    createButton("Random"),

    createButton("Large"),

    createButton("Small"),

  ];

  sizeButtons[0].position(290, 10);

  sizeButtons[1].position(360, 10);

  sizeButtons[2].position(410, 10);

}

​

// remove main page buttons

function removeMainButtons() {

  startButton.remove();

  for (let btn of colorButtons) btn.remove();

  for (let btn of sizeButtons) btn.remove();

}

​

//function page 1 buttons

function setUpPage1Buttons() {

  //   save button

  saveButton = createButton("Save Canvas");

  saveButton.position(460, 10);

  saveButton.mousePressed(saveCanvasImage);

​

  // reset button

  resetButton = createButton("Reset");

  resetButton.position(590, 10);

  resetButton.mousePressed(() => {

    currentPage = "main";

    // remove page 1 buttons

    removePage1Buttons();

    // add main page buttons instead

    setUpMainButtons();

  });

}

​

// remove page 1 buttons

function removePage1Buttons() {

  saveButton.remove();

  resetButton.remove();

}

// main page content

function drawMainPage() {

  textSize(32);

  fill(255);

  text("Shadowing Presence", width / 2 - 150, height / 2 - 20);

}

​

// page 1 content

function drawPage1() {

  // flip horizontally so that it feels like a mirror

 translate(width, 0);

  scale(-1, 1); 

}

​

// save image

function saveCanvasImage() {

  saveCanvas("Image", "png");

}

​

// particle system

function drawParticleSystem() {

  video.loadPixels();

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

    const x = i % video.width;

    const y = floor(i / video.width);

    const pixelIndex = (x + y * video.width) * 4;

​

    const r = video.pixels[pixelIndex + 0];

    const g = video.pixels[pixelIndex + 1];

    const b = video.pixels[pixelIndex + 2];

    const brightness = (r + g + b) / 3;

​

    particles[i].update(brightness);

    particles[i].show();

  }

}

​