xxxxxxxxxx
264
//👋 ¡Hola! Este es un ejemplo de ml5.js creado y compartido con ❤️.
//Obtén más información sobre el proyecto ml5.js: https://ml5js.org/
//Licencia y código de conducta de ml5.js: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
//Estados: espera, instrucciones, votación, error, respuesta, visualizaciónDeDatos, fin.
//espera = Se mantiene hasta que ml5.js detecte a los cuatro participantes hacer el gesto de "STOP" con la mano.
//instrucciones = Se mantiene hasta que ml5 detecte que los cuatro participantes hicieron el gesto requerido.
//votación = Se mantiene hasta que ml5 detecte que los cuatro participantes votaron.
//error = Ocurre solo si se demoran 30 segundos en votar si se demmoran nuevamente 30 segundos en votar en la misma pregunta vuelve el estado ESPERA
//respuesta = Se mantiene por 90 segundos y elige al azar del 1 al 4 para que los participantes conversen de la respuesta
//visualizaciónDeDatos = Se mantiene por 30 segundos, un gráfico de radar donde se mostraran las respuestas de todos los grupos de usuarios que participaron de la encuesta
//fin = se mantiene por 10 segundos agradeciendo por participar
let estadoActual = "espera";
//variable para las imagenes de los estados
//referencia https://www.youtube.com/watch?v=ZmPz7lWhKxw
let imgEspera = [];
let imgEsperaActual = 0;
let imgInstrucciones = [];
let imgInstruccionesActual = 0;
let imgVotaciones = [];
let imgVotacionesActual = 0;
let imgVotacion1 = [];
let imgVotacionActual = 0;
//Este ejemplo demuestra cómo cargar un modelo previamente entrenado con ml5.neuralNetwork.
let classifier;
let handPose;
let video;
let hands = [];
let classification = "";
let isModelLoaded = false;
// variables para controlar las imagenes de espera
// esperar 3 segundo antes de cambiar la imagen
let tiempoEsperaDelta = 6000;
let tiempoEsperaUltimoCambio = 0;
let colorFondo;
function preload() {
//array de imagenEspera
imgEspera.push(loadImage("imgEspera/esperaPantalla0.png"));
imgEspera.push(loadImage("imgEspera/esperaPantalla1.png"));
imgEspera.push(loadImage("imgEspera/esperaPantalla2.png"));
imgEspera.push(loadImage("imgEspera/esperaPantalla3.png"));
imgEspera.push(loadImage("imgInstrucciones/instruccionesPantalla0.jpg"));
imgEspera.push(loadImage("imgInstrucciones/instruccionesPantalla1.png"));
imgEspera.push(loadImage("imgInstrucciones/instruccionesPantalla2.png"));
imgEspera.push(loadImage("imgInstrucciones/instruccionesPantalla3.png"));
imgEspera.push(loadImage("imgInstrucciones/instruccionesPantalla4.png"));
imgEspera.push(loadImage("imgInstrucciones/instruccionesPantalla5.png"));
imgEspera.push(loadImage("imgVotaciones/votacionPantalla0.png"));
imgEspera.push(loadImage("imgVotaciones/votacionPantalla1.png"));
imgEspera.push(loadImage("imgVotaciones/votacionPantalla2.png"));
imgEspera.push(loadImage("imgVotacion1/votacionPregunta0.png"));
imgEspera.push(loadImage("imgVotacion1/votacionPregunta1.png"));
imgEspera.push(loadImage("imgVotacion1/votacionPregunta2.png"));
// Load the handPose model
handPose = ml5.handPose();
}
function setup() {
createCanvas(1920, 1080);
colorFondo = color(243, 244, 248);
// Create the webcam video and hide it
video = createCapture(VIDEO);
video.size(1920, 1080);
video.hide();
// For this example to work across all browsers
// "webgl" or "cpu" needs to be set as the backend
ml5.setBackend("webgl");
// Set up the neural network
let classifierOptions = {
task: "classification",
};
classifier = ml5.neuralNetwork(classifierOptions);
const modelDetails = {
model: "./modelos/modelo-v1/model.json",
metadata: "./modelos/modelo-v1/model_meta.json",
weights: "./modelos/modelo-v1/model.weights.bin",
};
classifier.load(modelDetails, modelLoaded);
// Start the handPose detection
handPose.detectStart(video, gotHands);
// guardar el momento en que termino el setup
tiempoEsperaUltimoCambio = millis();
}
function draw() {
//ESTADO ESPERA (solo para guiarnos)
if (estadoActual == "espera") {
background(colorFondo);
// mostrar la imagen
image(imgEspera[imgEsperaActual], 0, 0);
// si ya paso el tiempo de espera
// cambiar la imagen
//esto es para crear el gif de imagenes/movimientos
if (millis() - tiempoEsperaUltimoCambio > tiempoEsperaDelta) {
// subir numero de la imagen
imgEsperaActual++;
// si llegamos a la ultima, volver a la cero
imgEsperaActual = imgEsperaActual % imgEspera.length;
// guardar el momento en que se cambio la imagen
tiempoEsperaUltimoCambio = millis();
}
}
//ESTADO INSTRUCCIONES (solo para guiarnos)
// si no esta en estado de espera inicia estado instrucciones
// es fundamental que "algo" haga cambiar los estados, en este caso si detecta gesto con un 90% de seguridad.
// && quiere decir "y también", se deben cumplir AMBAS condiciones
else if (classification === true && estadoActual == "inicio") {
estadoActual = "instrucciones";
// If the model is loaded, make a classification and display the result
if (isModelLoaded && hands[0]) {
let inputData = flattenHandData();
classifier.classify(inputData, gotClassification);
textSize(64);
fill(0, 255, 0);
text(classification, 20, 60);
// Callback function for when classification has finished
storeItem("gestoDetectado", gotClassification);
//variable para que la consola muestre los gestos que se guardan en el almacenamiento local
let recuperaGesto = getItem("gestoDetectado");
if (recuperaGesto !== null) {
console.log(recuperaGesto);
}
//Camara que muestra, solo necesitamos que encienda la camara pero que no se muestre en panatlla
/*image(video, 0, 0, width, height);
// Draw the handPose keypoints
if (hands[0]) {
let hand = hands[0];
// console.log(hand.value());
for (let i = 0; i < hand.keypoints.length; i++) {
let keypoint = hand.keypoints[i];
fill(0, 255, 0);
noStroke();
circle(keypoint.x, keypoint.y, 10);
}
}*/
// If the model is loaded, make a classification and display the result
if (isModelLoaded && hands[0]) {
let inputData = flattenHandData();
classifier.classify(inputData, gotClassification);
textSize(64);
fill(0, 255, 0);
text(classification, 20, 60);
// Callback function for when classification has finished
storeItem("gestoDetectado", classification);
}
}
}
//ESTADO VOTACION 0 (solo para guiarnos)
if (classification === true && estadoActual == "inicio") {
estadoActual = "instrucciones";
background(0, 255, 0);
// mostrar la imagen
// si ya paso el tiempo de espera
// cambiar la imagen
//esto es para crear el gif de imagenes/movimientos
if (millis() - tiempoEsperaUltimoCambio > tiempoEsperaDelta) {
// subir numero de la imagen
imgEsperaActual++;
// si llegamos a la ultima, volver a la cero
imgEsperaActual = imgEsperaActual % imgEspera.length;
// guardar el momento en que se cambio la imagen
tiempoEsperaUltimoCambio = millis();
//votacion 1
// si ya paso el tiempo de espera
// cambiar la imagen
//esto es para crear el gif de imagenes/movimientos
if (millis() - tiempoEsperaUltimoCambio > tiempoEsperaDelta) {
// subir numero de la imagen
imgEsperaActual++;
// si llegamos a la ultima, volver a la cero
imgEsperaActual = imgEsperaActual % imgEspera.length;
// guardar el momento en que se cambio la imagen
tiempoEsperaUltimoCambio = millis();
}
}
}
//ESTADO VOTACION 0 (solo para guiarnos)
if (classification === true && estadoActual == "inicio") {
estadoActual = "instrucciones";
background(0, 255, 0);
// mostrar la imagen
// si ya paso el tiempo de espera
// cambiar la imagen
//esto es para crear el gif de imagenes/movimientos
if (millis() - tiempoEsperaUltimoCambio > tiempoEsperaDelta) {
// subir numero de la imagen
imgEsperaActual++;
// si llegamos a la ultima, volver a la cero
imgEsperaActual = imgEsperaActual % imgEspera.length;
// guardar el momento en que se cambio la imagen
tiempoEsperaUltimoCambio = millis();
//votacion 1
// si ya paso el tiempo de espera
// cambiar la imagen
//esto es para crear el gif de imagenes/movimientos
if (millis() - tiempoEsperaUltimoCambio > tiempoEsperaDelta) {
// subir numero de la imagen
imgEsperaActual++;
// si llegamos a la ultima, volver a la cero
imgEsperaActual = imgEsperaActual % imgEspera.length;
// guardar el momento en que se cambio la imagen
tiempoEsperaUltimoCambio = millis();
}
}
}
//ESTADO MUESTRA DE DATOS
//aqui no se que hacer
}
// convert the handPose data to a 1D array
function flattenHandData() {
let hand = hands[0];
let handData = [];
for (let i = 0; i < hand.keypoints.length; i++) {
let keypoint = hand.keypoints[i];
handData.push(keypoint.x);
handData.push(keypoint.y);
}
return handData;
}
// Callback function for when handPose outputs data
function gotHands(results) {
hands = results;
}
// Callback function for when the classifier makes a classification
function gotClassification(results) {
classification = results[0].label;
}
// Callback function for when the pre-trained model is loaded
function modelLoaded() {
isModelLoaded = true;
}