let video;

let bodypose, pose, keypoint, z;

let poses = [];

//let pointsArray = [];

let detector;

let linesOld = [];

let linesNew = [];

let state = "intro";

//let startImage;

let customFont;

//let fluidButton;

let fluidState = false;

let fluid;

let timerInterval;

let t2 = 0;

let bgImage;

let audio;

let audioPlaying = false; 

​

​

let count = 0;

​

function updateCount() {

  count++;

  console.log(count);

}

​

​

function preload() {

  // Load your downloaded font

  customFont = loadFont("RubikGlitch-Regular.ttf");

  customFont1 = loadFont("ReenieBeanie-Regular.ttf");

  bgImage = loadImage("vibes2.png");

  audio = loadSound("piano.mp3"); 

}

async function init() {

  const detectorConfig = {

    modelType: poseDetection.movenet.modelType.MULTIPOSE_LIGHTNING,

  };

  detector = await poseDetection.createDetector(

    poseDetection.SupportedModels.MoveNet,

    detectorConfig

  );

}

​

async function videoReady() {

  console.log("video ready");

  await getPoses();

}

​

async function getPoses() {

  if (detector) {

    poses = await detector.estimatePoses(video.elt, {

      maxPoses: 2,

    });

  }

  requestAnimationFrame(getPoses);

}

​

async function setup() {

  angleMode(RADIANS);

  createCanvas(800, windowHeight); // Initial canvas setup

  canvas = select("canvas"); // Get reference to the canvas element

  windowResized();

  textAlign(CENTER, CENTER);

​

  startTimer();

  fluidButton = createButton("Resonate");

  //fluidButton.position(width / 2 - 50, height / 2 + 120);

  //fluidButton.mousePressed(() => {

  fluidState = !fluidState; // Toggle between flow field and   fluid

  fluidButton.hide();

​

  hgt2 = height / 2;

  cnv = createGraphics(width, hgt2);

  count = 0;

  video = createCapture(VIDEO, videoReady);

  video.size(width, hgt2);

  video.hide();

  await init();

  cnv.stroke(255);

  cnv.strokeWeight(40);

  stroke(255);

  len = width * 0.01;

  rez3 = 0.003;

  linesOld = [];

  z = 1000;

  maxAge = 10;

  for (i = 0; i < 300; i++) {

    x = random(width);

    y = random(height);

    age = floor(random(maxAge));

    col1 = color(random(255), random(255), random(255));

    linesOld.push(x, y, age, col1);

  }

  //tint(255,50);

  show = false;

}

​

function mousePressed() {

  if (state === "intro") {

    state = "main"; 

    console.log("Vibration Started");

​

    if (!audioPlaying) {

      audio.loop(); 

      audioPlaying = true;

    }

  } else if (state === "main") {

    // Reset the game state and stop the audio if it's playing

    startTimer();

    state = "intro";

    console.log("Restarted");

​

    audio.stop(); // Stop the audio when restarting

    audioPlaying = false;

  }

}

​

function draw() {

  if (state === "intro") {

    // Intro screen

    image(bgImage, 0, 0, width, height);

    // startImage.show();

  } else if (state === "main") {

    //startImage.hide();

    //fluidButton.show();

    mainSketch();

  }

}

​

function mainSketch() {

  // Check if the window is in fullscreen

  let offsetY = isFullScreen ? height / 4 : 0; // Move the camera feed down when fullscreen

​

  // Draw the skeleton if count > 5

  if (count > 5) {

    drawSkeleton();

  }

​

  // Render fluid or flow field based on the fluidState

  if (fluidState) {

    renderFluid(); // Fluid simulation

  } else {

    makeLines(); // Flow field

  }

​

  // Flip the skeleton image if it's part of a canvas (or adjust logic as needed)

  if (cnv) {

    let cam = cnv.get(); // Get the canvas image (ensure cnv is defined)

    cnv.translate(cam.width, 0); // Flip canvas horizontally

    cnv.scale(-1, 1);

    cnv.image(cam, 0, 0);

  }

​

  // Increment the count (possibly for skeleton drawing control)

  count++;

​

  // Flip the webcam image (if needed)

  push();

  translate(width, 0);

  scale(-1, 1);

  image(video, 0, hgt2 + offsetY); // Adjusted for fullscreen mode

  pop();

}

​

function renderFluid() {

  background(0, 40); // Dim background for a trailing effect

​

  fill(255, 150); // White color with slight transparency

textSize(32); // Adjust the size to make it larger

textAlign(CENTER, TOP); // Center horizontally, align to the top

textFont(customFont1);

​

// Splitting the text into two lines

let line1 = "We are not mere particles,";

let line2 = "but whispers of the infinite, drifting through eternity.";

​

let yOffset = 10; // Starting Y position

​

// Draw the two lines of text

text(line1, width / 2, yOffset);

text(line2, width / 2, yOffset + 40);

​

  for (j = 0; j < linesOld.length - 1; j += 4) {

    oldX = linesOld[j];

    oldY = linesOld[j + 1];

    age = linesOld[j + 2];

    col1 = linesOld[j + 3];

    stroke(col1); // Set the stroke color

    fill(col1); // Fill the dot with the same color

    age++;

​

    // Add random jitter for vibration

    let jitterX = random(-1, 1); // Small horizontal movement

    let jitterY = random(-1, 1); // Small vertical movement

    newX = oldX + jitterX;

    newY = oldY + jitterY;

​

    // Draw a small dot

    ellipse(newX, newY, 2, 2); // Small dot with width 2, height 2

​

    // Check if the particle is too old

    if (age > maxAge) {

      newPoint(); // Generate a new starting point

    }

​

    // Save the updated position and properties

    linesNew.push(newX, newY, age, col1);

  }

​

  linesOld = linesNew; // Swap arrays

  linesNew = [];

}

​

function makeLines() {

  background(0, 40);

​

  fill(255, 150); // White color with slight transparency

textSize(32); // Adjust the size to make it larger

textAlign(CENTER, TOP); // Center horizontally, align to the top

textFont(customFont1);

​

// Splitting the text into two lines by breaking the string

let line1 = "We are made of vibrations";

let line2 = "and waves, resonating through space.";

​

let yOffset = 10; // Starting Y position

​

// Draw the two lines of text

text(line1, width / 2, yOffset);

text(line2, width / 2, yOffset + 40);

  for (j = 0; j < linesOld.length - 1; j += 4) {

    oldX = linesOld[j];

    oldY = linesOld[j + 1];

    age = linesOld[j + 2];

    col1 = linesOld[j + 3];

    stroke(col1);

    age++;

    n3 = noise(oldX * rez3, oldY * rez3, z * rez3) + 0.033;

    ang = map(n3, 0.3, 0.7, 0, PI * 2);

    //ang = n3*PI*2; // no mapping - flows left

    newX = cos(ang) * len + oldX;

    newY = sin(ang) * len + oldY;

    line(oldX, oldY, newX, newY);

    if (

      ((newX > width || newX < 0) && (newY > height || newY < 0)) ||

      age > maxAge

    ) {

      newPoint();

    }

    linesNew.push(newX, newY, age, col1);

  }

  linesOld = linesNew;

  linesNew = [];

  z += 2;

}

​

function newPoint() {

  openSpace = false;

  age = 0;

  count2 = 0;

  while (openSpace == false && count2 < 100) {

    newX = random(width);

    newY = random(height);

    col = cnv.get(newX, newY);

    col1 = get(newX, newY + hgt2);

    if (col[0] == 255) {

      openSpace = true;

    }

    count2++;

  }

}

​

function drawSkeleton() {

  cnv.background(0);

  // Draw all the tracked landmark points

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

    pose = poses[i];

    // shoulder to wrist

    for (j = 5; j < 9; j++) {

      if (pose.keypoints[j].score > 0.1 && pose.keypoints[j + 2].score > 0.1) {

        partA = pose.keypoints[j];

        partB = pose.keypoints[j + 2];

        cnv.line(partA.x, partA.y, partB.x, partB.y);

        if (show == true) {

          line(partA.x, partA.y + hgt2, partB.x, partB.y + hgt2);

        }

      }

    }

    // hip to foot

    for (j = 11; j < 15; j++) {

      if (pose.keypoints[j].score > 0.1 && pose.keypoints[j + 2].score > 0.1) {

        partA = pose.keypoints[j];

        partB = pose.keypoints[j + 2];

        cnv.line(partA.x, partA.y, partB.x, partB.y);

        if (show == true) {

          line(partA.x, partA.y + hgt2, partB.x, partB.y + hgt2);

        }

      }

    }

    // shoulder to shoulder

    partA = pose.keypoints[5];

    partB = pose.keypoints[6];

    if (partA.score > 0.1 && partB.score > 0.1) {

      cnv.line(partA.x, partA.y, partB.x, partB.y);

      if (show == true) {

        line(partA.x, partA.y + hgt2, partB.x, partB.y + hgt2);

      }

    }

    // hip to hip

    partA = pose.keypoints[11];

    partB = pose.keypoints[12];

    if (partA.score > 0.1 && partB.score > 0.1) {

      cnv.line(partA.x, partA.y, partB.x, partB.y);

      if (show == true) {

        line(partA.x, partA.y + hgt2, partB.x, partB.y + hgt2);

      }

    }

    // shoulders to hips

    partA = pose.keypoints[5];

    partB = pose.keypoints[11];

    if (partA.score > 0.1 && partB.score > 0.1) {

      cnv.line(partA.x, partA.y, partB.x, partB.y);

      if (show == true) {

        line(partA.x, partA.y + hgt2, partB.x, partB.y + hgt2);

      }

    }

    partA = pose.keypoints[6];

    partB = pose.keypoints[12];

    if (partA.score > 0.1 && partB.score > 0.1) {

      cnv.line(partA.x, partA.y, partB.x, partB.y);

      if (show == true) {

        line(partA.x, partA.y + hgt2, partB.x, partB.y + hgt2);

      }

    }

​

    // eyes, ears

    partA = pose.keypoints[1];

    partB = pose.keypoints[2];

    if (partA.score > 0.1 && partB.score > 0.1) {

      cnv.line(partA.x, partA.y, partB.x, partB.y);

      if (show == true) {

        line(partA.x, partA.y + hgt2, partB.x, partB.y + hgt2);

      }

    }

    partA = pose.keypoints[3];

    partB = pose.keypoints[4];

    if (partA.score > 0.1 && partB.score > 0.1) {

      cnv.line(partA.x, partA.y, partB.x, partB.y);

      if (show == true) {

        line(partA.x, partA.y + hgt2, partB.x, partB.y + hgt2);

      }

    }

    //nose to mid shoulders

    partA = pose.keypoints[0];

    partB = pose.keypoints[5];

    partC = pose.keypoints[6];

    if (partA.score > 0.1 && partB.score > 0.1 && partC.score > 0.1) {

      xAvg = (partB.x + partC.x) / 2;

      yAvg = (partB.y + partC.y) / 2;

      cnv.line(partA.x, partA.y, xAvg, yAvg);

      if (show == true) {

        line(partA.x, partA.y + hgt2, xAvg, yAvg + hgt2);

      }

    }

  }

}

​

// Timer function to toggle fluidState every 10 seconds

function startTimer() {

  if (timerInterval) clearInterval(timerInterval); // Clear any existing timer

  timerInterval = setInterval(() => {

    fluidState = !fluidState; // Toggle fluidState

  }, 10000); // 10 seconds in milliseconds

}

​

// Optional: Stop the timer (if needed for any specific condition)

function stopTimer() {

  if (timerInterval) clearInterval(timerInterval);

}

​

function keyPressed() {

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

    // Check if 'F' is pressed

    isFullScreen = !isFullScreen; // Toggle full-screen state

    fullscreen(isFullScreen); // Enter or exit full screen

  }

}

​

function windowResized() {

  // Resize canvas when window size changes

  resizeCanvas(640, windowHeight); // Keep canvas width fixed at 640, height based on window height

​

  // Center the canvas when in full-screen mode

  if (isFullScreen) {

    let xOffset = (windowWidth - width) / 2; // Calculate horizontal offset

    let yOffset = (windowHeight - height) / 2; // Calculate vertical offset

    canvas.position(xOffset, yOffset);

​

    //startImage.position(windowWidth / 2 - startImage.width / 2, windowHeight / 2 - startImage.height / 2);

​

    let videoYOffset = windowHeight / 2 + 100; // Example offset, adjust based on your needs

    video.position(0, videoYOffset);

  } else {

    // Position canvas at default location when not in full-screen mode

    canvas.position(0, 0);

  }

}

/* Points (view on left of screen = left part - when mirrored)

  0 nose

  1 left eye

  2 right eye

  3 left ear

  4 right ear

  5 left shoulder

  6 right shoulder

  7 left elbow

  8 right elbow

  9 left wrist

  10 right wrist

  11 left hip

  12 right hip

  13 left kneee

  14 right knee

  15 left foot

  16 right foot

*/

​