Variables y tipos de datos
Puedes encontrar toda la documentación de P5.js aquí: P5 Reference
Javascript define 6 tipos de datos primitivos:
-
boolean - booleano.
trueyfalse - null. Palabra clave especial que denota un valor null
- undefined - indefinido. Valor no definido
- number - número. 29 o 1.5
- string - cadena de texto. “hola mundo”
- symbol
Y uno complejo:
- object - objeto
Según cómo los lenguajes de programación manejan los distintos tipos de datos se pueden dividir en:
- Dinámica o estáticamente tipados
- Fuerte o débilmente tipados
Javascript es un lenguaje dinámica y débilmente tipado. Esto significa que no tienes que especificar el tipo de dato de una variable cuando la declaras, y los tipos de datos son convertidos automáticamente de acuerdo a lo que se necesite en la ejecución del script.
Una variable almacena un dato en la memoria para poder usarlo más tarde.
Javascript tiene palabras reservadas que no se pueden usar para nombrar variables porque ya tienen una función asignada, como if, new, case, class, return, ... (Es fácil darse cuenta porque la IDE le da un color distinto a esas palabras)
Cuando declaras una variable fuera de una función, esta es llamada variable global, porque esta disponible para cualquier otro código en el documento actual. Cuando declaras una variable dentro de una función, esta es llamada variable local, porque está disponible solo dentro de esa función.
Declara algunas variables e imprímelas en consola. Prueba a declarar variables globales y variables locales.
Ejemplo
Código
Crea variables para almacenar colores y úsalas para colorear figuras.
Ejemplo
Código
mouseX es una variable que viene definida por P5 que almacena la posición horizontal del ratón en cada momento.
mouseY es una variable que almacena la posición vertical del ratón en cada momento.
Juega con mouseX y mouseY para dibujar cosas interactivas usando la función draw(). Prueba a cambiar background() de setup() a draw() para ver qué efecto tiene en cada caso.
Prueba a complejizar la práctica anterior añadiendo Mouse Events como mousePressed() o mouseDragged()
Ejemplo
Código
Usando la práctica anterior, prueba a usar mouseX y mouseY para alterar el tamaño y el color, y aprende nuevos eventos como mouseOut() o keyPressed()
Usa una variable para mover un círculo horizontalmente en el lienzo.
Ejemplo
Código
