Tutorial Modelo Prototipo

En este tutorial les enseñaremos a como realizar un modelo prototipo de aplicación de web, en donde se debe de arrastrar , clasificar , soltar, y escuchar cada uno de los animales y su respectivo hábitat. Todo programado en p5.js.

En nuestro caso, se hizo uso del editor de código online CodeSandbox (https://codesandbox.io/) para la programación de nuestro modelo prototipo.

Introducción

El proyecto nace y se fundamenta en resolver una problemática, la cual consiste en que muchos niños entre los 2-5 años de edad ubicados en la ciudad de Santiago de Cali , no tienen mucha interacción con la diversidad de animales que existen, si no que se ven mas restringidos a interactuar con los animales domésticos de sus familiares o allegados.

Se realizaron investigaciones de antecedentes , o paginas web similares, pero en su mayoría , presentaban el inconveniente de ser poco o nada realista, con imágenes muy caricaturescas no semejantes a la realidad.

A su vez , también se tuvo en cuenta , que no simplemente importaba que visualmente fuera realista, si no que al igual los sonidos tanto ambiente (el de los hábitats), como de los animales, debían de ser lo mas realista posible, para así , ofrecer una mayor experiencia al usuario.

Step 1: Creación De Cuenta Y Proyecto En CodeSandbox

Para iniciar con el proceso de desarrollo , nos crearemos una cuenta en CodeSandbox (https://codesandbox.io/signin), un editor de código en linea.

Al hacer uso del link anteriormente dado, nos deberá desplegar una ventana como se muestra en este paso, escogeremos la forma de creación de cuenta que queramos (Google Account o GitHub), y procederemos a iniciar sesión.

Una vez iniciemos sesión nos dirigiremos a donde dice "New Sandbox", y buscamos "p5.js" dentro de las plantillas que se nos muestran.

Step 2: Importar Librerías Necesarias

Una vez creado nuestro proyecto empezaremos importando dos librerias, una de ellas la libreria p5.sound(referencias de p5.sound) la cual nos permitirá ejecutar sonido en nuestra aplicación web , y la segunda de ellas es la libreria p5.dom(p5.dom referencesp5.dom references) la cual nos permite la creación de botones , sliders, y muchas otras nuevas funciones.

Para importar dichas librerias , nos debemos desplazar a el panel izquierdo donde se encuentran varios archivos, uno de ellos llamado index.html , en el debemos de copiar las siguientes dos lineas de código dentro del "body" de su estructura (ver imágenes de este paso).

Step 3: Creación De Variables

Una vez las librerías han sido importadas , podemos iniciar a crear nuestras variables , en la imagen asociada a este paso se ven distintas variables , las cuales se procederán a explicar a continuación:

Nota: Explicaremos el proceso con un animal en concreto , en nuestro caso el delfín, pero ustedes pueden escoger el que quieran.

1) Se crea una variable llamada "buttonDelfin", esta variable nos servirá para crear nuestro botón que reproducirá un sonido asociado a nuestro animal escogido.

2) Se crea esta variable booleana "grabbedDelfin" la cual estará inicializada con el valor false ; esta variable nos indicará si tenemos agarrada a la imagen del delfín con nuestro mouse.

3) Estas dos variables "imageDelfin" y "imageHabitat", serán aquellas que almacenarán las imágenes escogidas, pero la variable "imageDelfinH" , será una imagen que pondremos en nuestro lienzo que no será visible una vez la imagen del delfín se encuentre bien ubicada y en donde debería de estar.

4) Estas dos variables "visible_DelfinH" y "visible_Delfin" , serán aquellas que determinarán cual imagen (imageDelfin o imageDelfinH) se pueden visualizar en nuestro lienzo.

5) Las variables "posDelfinX" y "posDelfinY", guardarán la posición de nuestras imagenes.

6) Por ultimo la variable "soundDelfin" almacenará el audio que queremos ejecutar desde nuestro botón.

Step 4: Subiendo Nuestros Archivos

Una vez hemos creado nuestras variables , estamos listos para subir nuestras imagenes y audios a utilizar , para esto podemos crear una carpeta (ver imagenes asociadas a este paso ) desde la esquina superior izquierda de nuestro proyecto, la nombraremos en nuestro caso "archivos", una vez la carpeta está creada , podemos empezar a arrastrar nuestras imagenes y audios desde nuestra computadora a la carpeta , y esperaremos a que sean subidas a nuestro proyecto .

Step 5: Cargando Nuestras Imagenes Y Audios

Una vez todos nuestros archivos están en nuestra carpeta, están listos para ser utilizados en nuestro proyecto , por lo que ahora , nos debemos de dirigir a la esquina superior derecha , y veremos un icono de tres (3) puntos, daremos clic ahí ,y después clic en storage management , veremos nuestros archivos subidos; simplemente daremos un clic sobre cada archivo que hemos subido , lo cual nos abrirá una nueva ventana por cada archivo subido, nos interesa el link de esa nueva ventana , por lo que copiaremos el link de cada una de las ventanas y las tendremos ahí , para usarlas en el siguiente paso.

Step 6: Cargando Nuestros Archivos

Ya que tenemos nuestros links, deberemos crear una nueva función llamada preload() , está sera la función que cargará nuestros archivos , antes de que inicie nuestra aplicación , su estructura es la siguiente:

function preload() {

}

Y dentro de ella usaremos nuestras variables creadas anteriormente para almacenar las imágenes y el audio de la siguiente forma:

Imágenes :

imageDelfin = loadImage(" ");

Audio :

soundDelfin = loadSound(" ");

Y dentro de las comillas (" ") de cada linea de código , pondremos el link anteriormente abierto, y se lo asignaremos a cada variable con su respectivo archivo.

Tambien agregaremos la siguiente linea de codigo:

soundFormats(" ");

En donde dentro de las comillas (" "), escribiremos el formato de los audios que vamos a utilizar , en nuestro caso es mp3.

Por lo que al final nos debería de quedar como la imagen que está asociada a este paso.

Step 7: Funcion Setup()

Ahora si iremos a nuestra función setup y definiremos la posición de nuestra imagen de el animal con las variables "posDelfinX" y "posDelfinY".

Por lo que simplemente escribiremos :

posDX = ;
posDY = ;

Despues del igual debemos ingresar la posición inicial donde queremos que nuestra imagen se dibuje.

Recordar que con windowWidth y windowHeight nos podemos ayudar.

En nuestro caso quedó como se ve en la imagen asociada a este paso.

Step 8: Función Draw()

En esta función borraremos lo que viene por defecto , y haremos que nuestras imagenes se pinten en el lienzo , siempre y cuando se cumpla la siguiente condición:

1) Primero pintaremos nuestro habitat con ninguna condición, pues este siempre debe ser vista

2) :

if (visible_Delfin) {
image(imageDelfin, posDelfinX, posDelfinY, 100, 100);

}

La estructura image(imagen,x,y,tamañoX,tamañoY) , nos pide cuatro (4) parametros , por lo que nosotros se los debemos dar , el primer parametro es nuestra imagen , por lo que le pasaremos la imagen de nuestro animal que será arrastrado, despues nos pide una X y una Y , las cuales serán la posición inicial de nuestra imagen, las cuales ya habiamos definido en el paso anterior , por lo que le pasaremos las variables posDelfinX y posDelfinY, y por ultimo nos pide el tamaño en X y en Y de nuestra imagen , que en mi caso será de 100 x 100.

Que signfica esta condición? Bien , recordemos que nuestra variable visible_Delfin, nos ayuda a determinar si pintamos o no nuestra imagen , ademas, recordemos que está inicialazada como true , por esta razón , si se pinta sobre nuestro lienzo la imagen del delfin. Ahora bien , necesitamos que la imagen que rellenará la silueta de nuestro habitat no sea visible , hasta que la "imageDelfin" se encuentre en la posición correcta, por lo tanto se usa la misma estructura de condición:

if (visible_DelfinH) {
image(imageDelfinH,windowWidth / 2 - 800,windowHeight / 2 - 400,800,600);

}

Recordemos que visible_DelfinH está inicializada como false , por lo tanto está no será pintada hasta que su valor sea true, lo cual mas adelante lo veremos.

Y por ultimo encima de este codigo , debemos implementar clear(); , para que no veamos el rastro que dejará nuestra imagen al ser arrastrada.

Step 9: Agarrar Y Arrastrar La Imagen

Ahora que tenemos nuestra condición de que imagen pintar, y nuestro habitat en el lienzo, es hora de definir , cuando cada animal se puede arrastrar, por lo tanto , se debe de calcular la distancia desde la imagen y en donde se haga clic con el mouse para determinar si se puede agarrar o no . Asi que , si la distancia entre un punto de nuestro animal y el mouse es pequeña, me deje arrastrar, de lo contrario que no pasé nada. La logica de esto se hace dentro de la función mousePressed, pues cada vez que presione clic sobre el lienzo , determinará si se puede agarrar o no a la imagen , el codigo es el siguiente es el siguiente:

function mousePressed() {

let d = dist(posDelfinX, posDelfinY, mouseX, mouseY);

if (d < 50) {

grabbedDelfin = true;

} else {

grabbedDelfin = false;

}

}

Ahora que tenemos la condición para saber cuando se puede arrastrar o no , haremos uso de la función mouseDragged, la cual intercambiará la posicion inicial de nuestra imagen(posDelfinX y posDelfinY) , con la actual de nuestro mouse, asi generando el arrastre que necesitamos, el codigo es el siguiente:

function mouseDragged() {
if (grabbedDelfin === true) {

posDelfinX = mouseX; posDelfinY = mouseY;

}

}

Step 10: Soltar Y Ubicar La Imagen

Ahora que podemos arrastrar, debemos indicarle a nuestra aplicación cuando soltar la imagen , y que hacer si no ha sido soltado donde debería de ubicarse , por lo tanto , debemos de hacer de la función mouseReleased, y tener en cuenta:

1) Declarar que grabbedDelfin sea false cuando el clic deje de estar presionado, para que así suelte la imagen.

2) Calcular la distancia entre el punto central de la silueta de la imagen y la posDelfinX y posDelfinY actual de la imagen , si su distancia es pequeña , entonces nuestra imageDelfin , no será visible , y nuestra imageDelfinH si lo será , por lo que la variable visible_Delfin será false , y la variable visible_DelfinH será true, provocando que la imagen que estaba bien situada en la silueta , ahora sea visible y de la ilusión de que relleno , al haber colocado la imagen en la posición correcta

3) Si la distancia no es lo suficientemente corta, lo que haremos es que la imagen del animal , vuelva a su posición original , por lo que declararemos que las variables posDelfinX y posDelfinY , serán las misma que las que le dimos desde un principio.

4) Llamar a redraw(), para que una vez sea soltado el clic , vuelva a llamar a la función draw()

La lógica del código es la siguiente:

function mouseReleased() {
grabbedDelfin = false;

let dD = dist(posDelfinX, posDelfinY, 510, 412);

if (dD < 100) {

visible_DelfinH = true;

visible_Delfin = false;

redraw();

} else {

posDelfinX = windowWidth / 2 - 850;

posDelfinY = windowHeight / 2 + 225;

}

}

Ahora pueden probar el funcionamiento del arrastre, y cuando la imagen se acerque a la coordenada dada deberia de funcionar.

Step 11: Organizar Los Botones Del Sonido

Ahora que tenemos el funcionamiento del arraste y ubicación funcionando , haremos que un botón reproduzca el sonido del animal , por lo tanto , debemos de crear una funcion con el nombre que queramos , en nuestro caso ,usaremos crearButtons()

Asi que :

function crearButtons(){

}

Dentro de ella haremos todas las creaciones de botones necesarios , en este caso , utilizaremos una imagen como botón , por lo que debemos de cargar una nueva imagen y conseguir su link , como se explico en anterior pasos , y crearemos nuestro botón de la siguiente forma:

function crearButtons(){

buttonSonidoDelfin = createImg(" ");
}

Recuerden dentro de las comillas poner el link de su imagen que usarán como botón, ahora le daremos un tamaño, una posición y una función al ser presionado , la cual será reproducir el sonido.

function crearButtons() {
buttonSonidoDelfin = createImg( "" );

buttonSonidoDelfin.position(507, 508);

buttonSonidoDelfin.size(40, 40);

buttonSonidoDelfin.mousePressed(ejecutarAudioDelfin);

}

Ahora debemos programar que hará la funcion "ejecutarAudioDelfin", lo cual será iniciar y detener el sonido , por lo tanto creamos la función:

function ejecutarAudioDelfin() {

if (soundDelfin.isPlaying()) {

soundDelfin.stop();

} else {

soundDelfin.play();

}

}

Y ahora por ultimo , llamaremos la función crearButtons() en la función setup(), y asi tendremos nuestro botón funcionando

agregar la siguiente linea de codigo al setup():

crearButtons();

Y listo deberia de estar funcionando el audio