diff --git a/src/content/tutorials/es/conditionals-and-interactivity.mdx b/src/content/tutorials/es/conditionals-and-interactivity.mdx new file mode 100644 index 0000000000..599403882e --- /dev/null +++ b/src/content/tutorials/es/conditionals-and-interactivity.mdx @@ -0,0 +1,915 @@ +--- +title: "Condicionales e interactividad" +description: Un tutorial sobre cómo usar sentencias condicionales y crear sketches interactivos. +category: introduction +categoryIndex: 3 +featuredImage: ../images/featured/ConditionalsA.png +featuredImageAlt: Una vista previa de la animación de amanecer creada en el tutorial de Condicionales e interactividad. +relatedContent: + examples: + - en/11_3d/06_framebuffer_blur/description + references: + - en/p5/if + - en/p5/mouseispressed + - en/p5/keycode + - en/p5/circle +authors: + - Greg Benedis-Grab + - Layla Quiñones +--- + +import Callout from "../../../components/Callout/index.astro"; +import { Columns, Column } from "../../../components/Columns"; +import AnnotatedLine from "../../../components/AnnotatedLine/index.astro"; +import Video from "../../../components/Video/index.astro" + +En este tutorial aprenderás nuevas formas de agregar interacción del usuario a tus sketches y de controlar el orden en que se ejecuta el código. + +Aprenderás estos conceptos básicos de programación creando un sketch de [sol interactivo](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m) y una [animación de amanecer](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO): + +- Sentencias condicionales (`if`, `if-else` y `else-if`) +- Variables booleanas, operadores de comparación y expresiones +- Operador de asignación de suma/resta +- Incremento y decremento +- Interactividad con las pulsaciones del botón del mouse y la ubicación del puntero + +Controlar el flujo de tu programa es fundamental para aprovechar el poder de la computación y hace posible crear animaciones y juegos emocionantes en p5.js. Normalmente, las líneas de código se ejecutan en orden. En tutoriales anteriores has visto cómo la función [`draw()`](/reference/p5/draw) ejecuta el código de arriba abajo de forma repetida. Esto permite superponer formas y crear animaciones tipo “libro animado”. + + +### Requisitos previos + +- [Configurar tu entorno](/tutorials/setting-up-your-environment) +- [Tutorial de introducción](/tutorials/get-started) +- [Tutorial de Variables y cambio](/tutorials/variables-and-change/) + +Antes de empezar, deberías ser capaz de: + +- Agregar y personalizar formas y texto en el lienzo usando p5.js + - [`circle()`](/reference/p5/circle) | [`rect()`](/reference/p5/rect) | [`ellipse()`](/reference/p5/ellipse) | [`triangle()`](/reference/p5/triangle) | [`line()`](/reference/p5/line) + - [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), [`text()`](/reference/p5/text), [`textSize()`](/reference/p5/textSize) +- Usar variables integradas como [`mouseX`](/reference/p5/mouseX) y [`mouseY`](/reference/p5/mouseY) +- Declarar, inicializar, usar y actualizar variables personalizadas con `let` y el [operador de asignación](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment) +- Incorporar movimiento lineal y aleatorio usando [`random()`](/reference/p5/random), [`frameRate()`](/reference/p5/frameRate) y [`frameCount`](/reference/p5/frameCount) +- Comentar código y atender los mensajes de error: para saber más sobre mensajes de error y depuración, lee la referencia [Guía de campo para la depuración](/tutorials/field-guide-to-debugging). + + +## Parte 1: Sol interactivo + +Crear un sketch de [sol interactivo](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m) es una excelente manera de aprender a usar *sentencias condicionales* e interacción del usuario. + + +## ![La mitad superior de un círculo amarillo asoma detrás de un rectángulo verde sobre un lienzo negro.](../images/introduction/sunrise.png) + +### La sentencia IF (una sentencia condicional) + +Las [*sentencias condicionales*](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals) controlan cuándo se ejecutan determinadas líneas de código. Por ejemplo, antes del amanecer el cielo está oscuro. Una vez que sale el sol es de día y el cielo tiene un color más claro. Puedes escribir una *sentencia condicional* (también conocida como *sentencia `if`*) para cambiar el color del cielo según la posición del sol. SI el sol está alto, entonces el cielo debería tener un color claro; de lo contrario, el cielo debería estar oscuro. Las sentencias `if` pueden comprobar la posición del sol y controlar el código que se ejecuta según dónde se encuentre en el cielo. + +Antes de poder usar sentencias condicionales que comprueben la posición del sol, podemos agregar variables personalizadas que nos ayuden a actualizar esa posición conforme el puntero se arrastra por el lienzo. + + +#### Paso uno: define e inicializa variables personalizadas + +- Abre un nuevo proyecto de p5.js, nómbralo “Sol interactivo” y guarda el sketch. + +- Declara una variable personalizada para la coordenada y del sol llamada `sunHeight`, y una variable personalizada para la coordenada y del horizonte llamada `horizon`. Inicializa la variable del horizonte con 200. + + - Agrega las siguientes líneas de código a tu sketch antes de [`setup()`](/reference/p5/setup): + + ```js + //variables personalizadas para la coordenada y del sol y del horizonte + let sunHeight; + let horizon = 200; + ``` + +- Actualiza `sunHeight` con la coordenada y del puntero, `mouseY`. + + - Agrega el siguiente código dentro de [`draw()`](/reference/p5/draw): + + ``` + //el sol sigue la coordenada y del puntero + sunHeight = mouseY; + ``` + +Tu código debería verse así: + +```js +//variables personalizadas para la coordenada y del sol y del horizonte +let sunHeight; +let horizon = 200; +function setup() { + createCanvas(400, 400); +} +function draw() { + background(0); + + //el sol sigue la coordenada y del puntero + sunHeight = mouseY; +} +``` + +Como la altura del sol va cambiando, guardamos la coordenada y del puntero, `mouseY`, en la variable `sunHeight`. Hacer esto dentro de `draw()` actualiza `sunHeight` continuamente cada vez que `draw()` se ejecuta. Aunque el horizonte no cambia, se usa una variable personalizada para el horizonte como punto de referencia y para hacer el código más legible. + +Visita la referencia de p5.js para más información sobre [`mouseY`](/reference/p5/mouseY) y [`let`](/reference/p5/let). + + +#### Paso dos: dibuja formas y colorea el lienzo + +- Dibuja un sol que use la variable personalizada `sunHeight` como su coordenada y. + + - Agrega el siguiente código dentro de [`draw()`](/reference/p5/draw): + + ```js + //sol + fill("yellow"); + circle(200, sunHeight, 160); + ``` + +- Dibuja una línea para mostrar el horizonte. + + - Agrega el siguiente código dentro de [`draw()`](/reference/p5/draw): + + ```js + // dibuja la línea del horizonte + stroke("green"); + line(0,horizon,400,horizon); + ``` + +Tu código debería verse así: + +```js +//variables personalizadas para la coordenada y del sol y del horizonte +let sunHeight; +let horizon = 200; +function setup() { + createCanvas(400, 400); +} +function draw() { + background(0); + + //el sol sigue la coordenada y del puntero + sunHeight = mouseY; + + //sol + fill("yellow"); + circle(200, sunHeight, 100); + + + // dibuja la línea del horizonte + stroke('green'); + line(0,horizon,400,horizon); +} +``` + +El sol sigue al puntero mientras este se mueve verticalmente por el lienzo porque `sunHeight` se usa como argumento para la coordenada y del círculo en: `circle(200, sunHeight, 100)`. Se dibuja una línea en el lienzo con `horizon` como argumento para las coordenadas y de cada extremo: `y1, y2`. Esto marca la línea del horizonte en el lienzo, que se usará para cambiar el color del fondo. + +Visita las páginas de referencia de p5.js sobre [formas 2D](/reference#Shape), [color](/reference#Color), [fundamentos](/reference#Foundation) y [eventos del mouse](/reference#Mouse) para aprender más sobre formas y variables. Lee la [Guía de campo para la depuración](/tutorials/field-guide-to-debugging) (Ejemplos 1 y 2) para obtener ayuda con errores comunes. + + +#### Paso tres: usa una sentencia condicional con una expresión booleana para cambiar el color del fondo + +- Establece el color del fondo en azul claro cuando el sol esté por encima del horizonte. + - Agrega las siguientes líneas a tu sketch dentro de [`draw()`](/reference/p5/draw), después de la línea de código `sunHeight = mouseY`: + + ```js + //fondo azul claro si el sol está sobre el horizonte + if(sunHeight < horizon){ + background("lightblue"); + } + ``` + +Tu código debería verse así: + +```js +//variables personalizadas para la coordenada y del sol y del horizonte +let sunHeight; +let horizon = 200; +function setup() { + createCanvas(400, 400); +} +function draw() { + background(0); + + //el sol sigue la coordenada y del puntero + sunHeight = mouseY; + + + //fondo azul claro si el sol está sobre el horizonte + if(sunHeight < horizon){ //comprueba si es de día + background("lightblue"); + } + //sol + fill("yellow"); + circle(200, sunHeight, 100); + + + // dibuja la línea del horizonte + stroke('green'); + line(0,horizon,400,horizon); +} +``` + +¡Ejecuta el código y experimenta moviendo el sol con el puntero! + +En el código anterior, el fondo es negro por defecto porque la primera sentencia que se lee en `draw()` es `background(0)`. Cuando el sol está por debajo de la línea del horizonte, el fondo permanece negro porque la sentencia `if` omite el *bloque de código* dentro de las llaves: `background("lightblue")`. Cuando el sol está por encima de la línea del horizonte, el *bloque de código* dentro de las llaves sí se ejecuta. Esto restablece el color, pasando del negro por defecto a un azul claro. + +Aquí estás controlando cuándo se ejecutan `background(0)` y `background("lightblue")`. Una *sentencia condicional* (o *sentencia `if`*) es una forma de controlar cuándo se ejecutan determinadas líneas de código, lo que cambia lo que ocurre en el sketch. + + +#### Sintaxis de la sentencia IF + +Una sentencia `if` comienza con la palabra clave `if`, seguida de una o más condiciones entre paréntesis, y de un *bloque de código* entre llaves. El bloque de código se ejecuta si la condición es `true`. La sintaxis de una sentencia `if` se define así: + +```js +if (condition) { + // código que se ejecuta si la condición es verdadera +} +``` + + +#### Expresiones y valores booleanos + +El código dentro de los paréntesis después de la palabra clave `if` puede ser un *valor booleano* o una *expresión booleana*. En el ejemplo de abajo se usa una expresión booleana para comprobar si el valor de la variable `sunHeight` es menor que el valor de la variable `horizon`: + + ` +if (${bottom('bool', 'sunHeight < horizon')}) { + ${bottom('block', 'background("lightblue");')} +} +`}> + Expresión booleana + Bloque de código + + +Las *expresiones booleanas* producen un valor *booleano*. Los valores *booleanos* solo pueden ser `true` o `false`*.* A diferencia de los números o las cadenas de texto, solo existen dos valores booleanos. Las *expresiones booleanas* ayudan a comprobar si las condiciones son `true` o `false`; por eso usan símbolos llamados *operadores de comparación*. Los *operadores de comparación* son símbolos especiales que comparan dos valores (ve la tabla de abajo). + +Entre los símbolos de [*operadores de comparación*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) que puedes usar para crear expresiones booleanas están: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +Símbolo + + + +Significado (enlace a la referencia de p5.js) + + + +Ejemplo + +
+ +`<` + + + +[menor que](/reference/p5/lt) + + + +`x < 5` + +
+ +`<=` + + + +[menor o igual que](/reference/p5/lte) + + + +`x <= 5` + +
+ +`>` + + + +[mayor que](/reference/p5/gt) + + + +`x > 5` + +
+ +`>=` + + + +[mayor o igual que](/reference/p5/gte) + + + +`x >= 5` + +
+ +`===` + + + +Igualdad estricta (significa que los valores de tipos distintos se consideran no iguales) + + + +`x === 5` + +
+ +`!==` + + + +distinto de + + + +`x !== 5` + +
+ +Visita la referencia de MDN para aprender más sobre [expresiones y operadores](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators). + +Puedes pensar en las *expresiones booleanas* como si la computadora hiciera una pregunta. En el código agregado en el paso tres, la expresión booleana es `sunHeight < horizon`. Está preguntando si el valor de la variable `sunHeight` es menor que el valor de la variable `horizon`. Si la respuesta a la pregunta es sí, es decir, si `sunHeight < horizon` da como resultado un valor `true`, entonces el bloque de código se ejecuta. Si la respuesta es no, el bloque de código se omite. + +Podemos ver el valor de `sunHeight < horizon` en la consola agregando `console.log(sunHeight < horizon)` en [`draw()`](/reference/p5/draw) después de `sunHeight = mouseY`. Observa cómo el valor impreso en la consola cambia de `true` a `false` mientras mueves el puntero por el lienzo: el valor es `false` cuando el sol está por debajo de la línea del horizonte, y `true` cuando está por encima. Consulta [este sketch](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m) para ver un ejemplo. + +Visita la página de referencia de p5.js sobre [fundamentos](/reference#Foundation) para aprender más sobre las sentencias `if` y los valores booleanos. + + +### La sentencia IF-ELSE + +Otra sentencia condicional importante es la *sentencia `if-else`*, en la que se pueden controlar dos bloques de código. La sintaxis de la sentencia `if-else` se define así: + +```js +if (condition) { + // código que se ejecuta si la condición es verdadera +} else { + // código que se ejecuta si la condición es falsa +} +``` + +Si la condición es `true`, se ejecuta el primer bloque de código. Si es `false`, se ejecuta el bloque de código que sigue a la palabra clave `else`. Si tu código requiere dos cambios a partir de una sola condición, la sentencia `if-else` es una mejor manera de estructurarlo. Ayuda visualizar las sentencias `if` como diagramas de burbujas, como el de abajo, que muestra cómo el primer bloque de código se ejecuta cuando la condición es verdadera, y el segundo bloque de código se ejecuta cuando es falsa. + +![Un diagrama de burbujas con dos flechas que salen de una burbuja que dice “condición”. Una flecha etiquetada “verdadero” apunta a una burbuja que dice “1er bloque de código”. Una segunda flecha etiquetada “else (falso)” apunta a una burbuja que dice “2.º bloque de código”.](../images/introduction/if-else-bubble.png) + +Por ejemplo, puedes modificar la sentencia `if` de tu animación de amanecer quitando la función [`background()`](/reference/p5/background) y agregando la siguiente sentencia `if-else`: + + + +##### Código original: + +```js +//...función draw + +background(0); // cielo nocturno + +//el sol sigue la coordenada y del puntero +sunHeight = mouseY; + +//fondo azul claro si el sol está sobre el horizonte + +if (sunHeight < horizon) { + background("lightblue"); // cielo azul +} +``` + + +##### Código modificado: + +```js +//...función draw + +//el sol sigue la coordenada y del puntero +sunHeight = mouseY; + +//fondo azul claro si el sol está sobre el horizonte + +// con sentencia if-else + +if (sunHeight < horizon) { + background("lightblue"); // cielo azul si está sobre el horizonte +} else { + background(0); // cielo nocturno en caso contrario +} +``` + + + +En el código anterior vemos que, si el sol está por encima del horizonte, `sunHeight < horizon `devuelve `true` y se ejecuta el código `background("lightblue")`. Cuando `sunHeight` NO es menor que el horizonte, se ejecuta el bloque de código que sigue a la palabra clave `else`, `background(0)`. Aunque ambas formas de escribir el código tienen el mismo efecto visual, a veces puede ser más claro y más eficiente usar `if-else`, sobre todo cuando se pueden controlar dos bloques de código distintos. + +Visita las páginas de referencia de p5.js sobre [`if`](/reference/p5/if) y [`Boolean`](/reference/p5/Boolean) para aprender más. + + +#### Paso cuatro: agrega pasto para ocultar el sol + +Agrega un paisaje con pasto a tu sketch para que no se vea el sol por debajo del horizonte. + +- Dibuja un rectángulo verde en el paisaje después del sol, de modo que lo oculte cuando esté por debajo del horizonte. El argumento para la coordenada y de este rectángulo es la ubicación de la línea del horizonte. + - Agrega el siguiente código en [`draw()`](/reference/p5/draw) después de la línea del horizonte: + + ```js + //pasto + fill("green"); + rect(0, horizon, 400, 400); + ``` + +Tu código debería verse así: + +```js +//variables personalizadas para la coordenada y del sol y del horizonte +let sunHeight; +let horizon = 200; +function setup() { + createCanvas(400, 400); +} +function draw() { + + //el sol sigue la coordenada y del puntero + sunHeight = mouseY; + + //fondo azul claro si el sol está sobre el horizonte + + //con sentencia if-else + + if (sunHeight < horizon) { + background("lightblue"); // cielo azul si está sobre el horizonte + } else { + background(0); // cielo nocturno en caso contrario + } + + //sol + fill("yellow"); + circle(200, sunHeight, 100); + + + // dibuja la línea del horizonte + stroke('green'); + line(0,horizon,400,horizon); + + //pasto + + fill("green"); + + rect(0, horizon, 400, 200); + +} +``` + +Ejecuta el sketch y mueve el sol por debajo del horizonte. ¿Ves cómo cambia el cielo conforme el sol desaparece? Enlace al [sketch de ejemplo de la animación de amanecer](https://editor.p5js.org/Msqcoding/sketches/StUo5StZi). + + +- ¡Usa sentencias condicionales para cambiar el color del pasto! Por ejemplo, cuando el sol sale sobre un paisaje con pasto, su color pasa de un verde oscuro a un verde más claro. +- ¡Agrega al paisaje de tu sketch más formas cuyos colores cambien! + +[Ejemplo](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m) + + + +## Parte 2: Animación de amanecer + +A continuación crearás una [animación de amanecer](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO) en la que el sol se mueve por su cuenta y produce un cambio gradual en el color del cielo. + +