​

//https://p5js.org/reference/p5.Element/attribute/

​

// https://p5js.org/examples/input-elements-input-button/

let currentPage = "main";

​

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

let sizeButton = [];

let colorButton = [];

​

// for interactive particles

let selectedColor = "white";

let selectedSize = 5;

​

// interactive particle

let interactiveParticles = [];

// for motion

let previousFrame;

​

//navigation buttons switch btwn states

let startButton;

let resetButton;

​

//Save Button

let saveButton;

​

//image load

let Img1;

​

//particle class array

let particles = [];

​

//video

let video;

​

function preload() {

  Img1 = loadImage("/image1.png");

}

​

function setup() {

  createCanvas(1500, 800);

​

  //functions that handle the buttons in each page

  setUpMainButtons();

​

  //for vid

  video = createCapture(VIDEO);

video.size(80, 60);

​

  //for particles, generate a grid like to correspond to pixcels from webcam for better visualization

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

    }

  }

​

  // for interactive particles. rray of particles random on canvas

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

    interactiveParticles.push(

      new InteractiveParticle(random(width), random(height))

    );

  }

}

​

function draw() {

  background(0);

​

  video.loadPixels();

​

  // update canvas depending on current page

  if (currentPage === "main") {

    drawMainPage();

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

    drawPage1();

    drawParticleSystem();

  }

}

​

//function for main page buttons

function setUpMainButtons() {

  //Start experiance button

  startButton = createButton("Start");

  startButton.size(150, 50);

  startButton.style("font-size", "38px");

  startButton.style("background-color", "rgb(250,100,190)");

  startButton.position(width / 2 - 100, 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")

      .style("background-color", "rgb(255,105,180)")

      .mousePressed(() => (selectedColor = color(255, 105, 180))), 

    createButton("Blueish")

      .style("background-color", "rgb(0,191,255)")

      .mousePressed(() => (selectedColor = color(0, 191, 255))),

    createButton("Greenish")

      .style("background-color", "rgb(0,255,127)")

      .mousePressed(() => (selectedColor = color(0, 255, 127))),

  ];

  colorButtons[0].position(470, 300);

  colorButtons[1].position(540, 300);

  colorButtons[2].position(610, 300);

​

  // size buttons

  sizeButtons = [

    createButton("Random")

      .style("background-color", "rgb(205,165,200)")

      .mousePressed(() => (selectedSize = random(2, 15))),

    createButton("Large")

      .style("background-color", "rgb(150,200,255)")

      .mousePressed(() => (selectedSize = 15)),

    createButton("Small")

      .style("background-color", "rgb(100,150,227)")

      .mousePressed(() => (selectedSize = 2)),

  ];

  sizeButtons[0].position(710, 300);

  sizeButtons[1].position(785, 300);

  sizeButtons[2].position(840, 300);

}

​

// 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.style("background-color", "rgb(100,150,227)").position(460, 10);

  saveButton.mousePressed(saveCanvasImage);

​

  // reset button

  resetButton = createButton("Reset");

  resetButton.style("background-color", "rgb(150,200,255)").position(590, 10);

  resetButton.mousePressed(() => {

    // reset interactive particles to random positions

    for (let particle of interactiveParticles) {

      particle.reset();

      //debug

      console.log("InteractiveParticle reset");

    }

​

    // reset particle system

    for (let particle of particles) {

      particle.reset();

    }

​

    // clear previous frame

    previousFrame = null;

​

    //go to main page

    currentPage = "main";

    // remove page 1 buttons

    removePage1Buttons();

    //  add main page buttons instead

    setUpMainButtons();

​

    //debuggung

    console.log("Reset button pressed");

  });

}

​

// remove page 1 buttons

function removePage1Buttons() {

  saveButton.remove();

  resetButton.remove();

}

// main page content

function drawMainPage() {

  image(Img1, 0, 0, 1500, 1000);

  textFont("Courier New");

  textSize(42);

  fill(200, random(100, 250), 200);

  text("Shadowing Presence", width / 2 - 260, height / 2 - 40);

​

  //   instruction text

  textFont("Courier New");

  textSize(16);

  fill(255);

  text("Welcome!", width / 2 - 50, height / 2 + 100);

  text(

    "Personalize your digital object by picking a color and ",

    width / 2 - 260,

    height / 2 + 120

  );

  text(

    "a size. Enjoy the way these object interacto with your motion.",

    width / 2 - 260,

    height / 2 + 140

  );

  text("Press 'F' to toggle fullscreen", width / 2 - 260, height / 2 + 165);

}

​

// page 1 content

function drawPage1() {

  // flip horizontally so that it feels like a mirror

  translate(width, 0);

  scale(-1, 1);

​

  // process video for motion detection

  video.loadPixels();

  if (video.pixels.length > 0) {

    if (!previousFrame) {

      previousFrame = new Uint8Array(video.pixels);

    }

​

    let motionPixels = detectMotion(

      video.pixels,

      previousFrame,

      video.width,

      video.height

    );

    previousFrame = new Uint8Array(video.pixels);

​

    // draw particles

    for (let particle of interactiveParticles) {

      particle.setColor(selectedColor);

      particle.setSize(selectedSize);

      particle.update(motionPixels, video.width, video.height);

      particle.show();

    }

  }

}

​

// save image

function saveCanvasImage() {

  saveCanvas("Image", "png");

}

​

// particle system

// to control the behavior and appearance of a particle system.

function drawParticleSystem() {

  video.loadPixels();

  //   updating and drawing each particle based on the video feed.

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

    //    cal the x and y of the current particle by taking the modulus (x) and div (y) of the particle index and the video width and height. This way i can map the 1D particle array index to its 2D pixel position

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

  }

}

function keyPressed() {

  //press F for full screen

  if (key === "F" || key === "f") {

    // Check if 'F' is pressed

    let fs = fullscreen();

    fullscreen(!fs); // Toggle fullscreen mode

  }

}

​