let video;

let bodypose, pose, keypoint, z;

let poses = [];

//let pointsArray = [];

let detector;

let linesOld = [];

let linesNew = [];

let state = "intro";

let button;

let customFont;

let fluidButton;

let fluidState = false;

let fluid;

let t2 = 0;

let bgImage

​

​

​

function preload() {

  // Load your downloaded font

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

  bgImage = loadImage("vibration.jpg");

}

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,

      // flipHorizontal: true,

    });

  }

  requestAnimationFrame(getPoses);

}

​

async function setup() {

  angleMode(RADIANS);

  createCanvas(640, 480 * 2);

  textAlign(CENTER, CENTER);

// Create and style the button

  button = createButton("Start");

  button.position(width / 2-25, height/2.1); // Adjusted position

  button.style("font-family", "RubikGlitch");

  button.style("font-size", "20px");

  button.style("background-color", '#411607'); // Vibrant yellow

  button.style("border", "none"); // No border

  button.style("border-radius", "10px"); // Rounded corners

  button.style("padding", "10px 20px"); // Space inside the button

  button.style("color", '#F1DDBF'); 

  button.style("cursor", "pointer"); // Pointer cursor on hover

  button.style("box-shadow", "0px 4px 6px rgba(0, 0, 0, 0.3)"); // Subtle shadow

  button.mousePressed(() => (state = "main")); // Transition to main sketch

  button.hide();

  // Create toggle button for fluid state

  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 draw() {

  if (state === "intro") {

    // Intro screen

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

     textFont(customFont);

  fill('#411607');

  textSize(48);

  text("Vibrations of Being", width / 2, height / 14);

     textSize(18);

  fill('#411607');

  text(

    "Welcome to an interactive experience.\n\nMove  to see the vibrations of your being.\nClick Start to begin.",

    width / 2, // Center horizontally

    height / 2 - 100 // Higher placement

  );

    button.show();

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

    button.hide();

    fluidButton.show();

    mainSketch();

  }

}

​

function mainSketch() {

  // 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); // Adjust hgt2 if necessary to match the position of your webcam

  pop();

}

​

function renderFluid() {

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

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

  textSize(16); // Adjust the size as needed

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

  text("We are not mere particles, but whispers of the infinite, drifting through eternity.", width / 2, 10);

  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(16); // Adjust the size as needed

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

  text("We are made of vibrations and waves, resonating through space.", width / 2, 10);

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

      }

    }

  }

}

​

​

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

  resizeCanvas(windowWidth, windowHeight); // Adjust canvas size when window size changes

}

/* 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

*/

​