let button;

let model;

let video;

let predictions = [];

let isLimpWristsDetected = false;

let kineticTextY; // For the kinetic type animation

​

function preload() {

  // Load Teachable Machine model

  const modelURL = "https://teachablemachine.withgoogle.com/models/YOUR_MODEL_URL/model.json";

  model = ml5.imageClassifier(modelURL);

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  kineticTextY = height / 2; // Initialize kinetic text position

}

​

function draw() {

  background(255);

​

  if (state == "intro") {

    showIntroScreen();

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

    runTeachableMachine();

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

    showResultScreen();

  }

}

​

function showIntroScreen() {

  textAlign(CENTER, CENTER);

  textSize(40);

  fill(0);

  text("magpakatotoo ka", width / 2, height / 2 - 50);

​

  // Create button if not already created

  if (!button) {

    button = createButton("totoo ako");

    button.position(width / 2 - 50, height / 2 + 20);

    button.size(100, 40);

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

    button.mousePressed(() => {

      state = "webcam";

      button.hide(); // Hide the button

      startWebcam();

    });

  }

}

​

function startWebcam() {

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide(); // Hide the raw video feed

}

​

function runTeachableMachine() {

  if (video) {

    image(video, 0, 0, width, height); // Display the webcam feed

​

    // Run the Teachable Machine model

    model.classify(video, (err, results) => {

      if (err) {

        console.error(err);

        return;

      }

      predictions = results;

    });

​

    // Check if "limp wrists" is detected

    if (predictions.length > 0 && predictions[0].label === "limp wrists" && predictions[0].confidence > 0.7) {

      isLimpWristsDetected = true;

    }

​

    if (isLimpWristsDetected) {

      state = "result"; // Move to the result screen

      video.remove(); // Stop the webcam

    }

  }

}

​

function showResultScreen() {

  background(255, 200, 200); // Light pink background

  textAlign(CENTER, CENTER);

  textSize(30);

  fill(0);

  text("You've activated quantum protection from your queercestors.", width / 2, kineticTextY);

​

  // Animate the kinetic type (vertical oscillation)

  kineticTextY += sin(frameCount * 0.05) * 2;

​

  // Create a restart button if not already created

  if (!button) {

    button = createButton("Restart");

    button.position(width / 2 - 50, height - 100);

    button.size(100, 40);

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

    button.mousePressed(() => {

      state = "intro";

      button.hide(); // Hide the button

      isLimpWristsDetected = false;

      setup(); // Reset everything

    });

  }

}

​

​

​

// // Copyright (c) 2019 ml5

// //

// // This software is released under the MIT License.

// // https://opensource.org/licenses/MIT

​

// /* ===

// ml5 Example

// Webcam Image Classification using a pre-trained customized model and p5.js

// This example uses p5 preload function to create the classifier

// === */

​

// // Classifier Variable

// let classifier;

// // Model URL

// let imageModelURL = 'https://teachablemachine.withgoogle.com/models/oigrwyX8Mn/' ;

​

// // Video

// let video;

// let flippedVideo;

// // To store the classification

// let label = "";

​

// // Load the model first

// function preload() {

//   classifier = ml5.imageClassifier(imageModelURL + 'model.json');

// }

​

// function setup() {

//   createCanvas(320, 260);

//   // Create the video

//   video = createCapture(VIDEO);

//   video.size(320, 240);

//   video.hide();

​

//   flippedVideo = ml5.flipImage(video)

//   // Start classifying

//   classifyVideo();

// }

​

// function draw() {

//   background(0);

//   // Draw the video

//   image(flippedVideo, 0, 0);

​

//   // Draw the label

//   fill(255);

//   textSize(16);

//   textAlign(CENTER);

//   text(label, width / 2, height - 4);

// }

​

// // Get a prediction for the current video frame

// function classifyVideo() {

//   flippedVideo = ml5.flipImage(video)

//   classifier.classify(flippedVideo, gotResult);

// }

​

// // When we get a result

// function gotResult(error, results) {

//   // If there is an error

//   if (error) {

//     console.error(error);

//     return;

//   }

//   // The results are in an array ordered by confidence.

//   // console.log(results[0]);

//   label = results[0].label;

//   // Classifiy again!

//   classifyVideo();

// }