From 41391f22154fad2ab9b0e5a94892330ae5d74afe Mon Sep 17 00:00:00 2001 From: HoracioValdes Date: Tue, 14 Apr 2026 17:58:31 -0400 Subject: [PATCH 1/4] added simple-melody-app spanish translation --- .../tutorials/es/simple-melody-app.mdx | 1547 +++++++++++++++++ 1 file changed, 1547 insertions(+) create mode 100644 src/content/tutorials/es/simple-melody-app.mdx diff --git a/src/content/tutorials/es/simple-melody-app.mdx b/src/content/tutorials/es/simple-melody-app.mdx new file mode 100644 index 0000000000..6a6e74090c --- /dev/null +++ b/src/content/tutorials/es/simple-melody-app.mdx @@ -0,0 +1,1547 @@ +--- +title: "Aplicación simple de melodías" +description: Usa objetos p5.Oscillator para generar notas musicales en una app donde las personas pueden escribir y reproducir las melodías que crean al interactuar con el lienzo. +category: advanced +categoryIndex: 3 +featuredImage: ../images/featured/simple-melody-app.jpg +featuredImageAlt: Teclas de piano +relatedContent: + referencias: + - en/p5sound/p5oscillator + - en/p5/createbutton +authors: + - Portia Morrell + - Kate Maschmeyer + - Layla Quiñones +--- + +import Callout from "../../../components/Callout/index.astro"; + +## Introducción + +La [música](https://www.britannica.com/art/music) es utilizada por culturas de todo el mundo como una forma de comunicar sus historias, emociones y experiencias combinando [sonidos](https://www.britannica.com/science/sound-physics) vocales o instrumentales. Uno de los elementos básicos de la música es la [*melodía:*](https://www.masterclass.com/articles/music-101-what-is-melody) un grupo de notas musicales que forma composiciones de sonidos agradables al oído. En este tutorial explorarás cómo usar objetos [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) para generar notas musicales y desarrollar una aplicación web en la que las personas creen melodías y luego las reproduzcan. + +Este tutorial es la primera parte de una serie de 3 tutoriales que te guían para crear distintas versiones de una app de melodías. + +- Parte 1: En este tutorial desarrollarás una [aplicación simple de melodías](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe) en la que las personas pueden componer melodías a partir de una escala musical y reproducirlas. +- Parte 2: En [Comenzar con Node.js](/tutorials/getting-started-with-nodejs), aprenderás a usar [Node.js](https://nodejs.org/en/about) y [Express.js](https://expressjs.com/) para enrutar solicitudes [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) que recuperan y reproducen melodías guardadas en tu computadora. +- Parte 3: En Aplicación de melodías con Node.js (¡próximamente!), aprenderás a integrar tu [aplicación simple de melodías](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe) con [Node.js](https://nodejs.org/en/about) y [Express.js](https://expressjs.com/). Desarrollarás una aplicación de melodías más compleja en la que las personas puedan guardar melodías en sus computadoras y recuperarlas para reproducirlas después. + + +## Requisitos previos + +Este tutorial requiere: + +- Una computadora con conexión a internet y bocinas o audífonos +- El [Editor Web de p5](https://editor.p5js.org/) (o un IDE y la versión más reciente de la [biblioteca p5.js descargada](https://p5js.org/download/)) +- Comprensión de conceptos básicos de programación de los [tutoriales de introducción a p5.js](/tutorials/#introduction), como: + - variables + - carga de archivos + - condicionales + - arreglos + - for loop + - objetos JSON +- Comprensión de principios básicos de diseño web presentados en los [tutoriales de diseño web](/tutorials/#web-design) + - [objetos DOM de p5.js](/reference/#DOM) + +**Nota:** Las secciones 1.1 a 1.5 presentan conceptos de otras disciplinas, como física y teoría musical. Estas secciones sirven como conocimientos de fondo recomendados para entender cómo los objetos `p5.Oscillator` pueden usarse para crear melodías. Aunque es muy recomendable revisarlas, no es necesario hacerlo para terminar la [aplicación simple de melodías](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe). + +Si ya estás familiarizado con: + +- los [objetos `p5.Oscillator`](#p5-oscillator-objects) +- las [ondas sonoras](#sound-waves) +- las [ondas de presión](#pressure-waves) +- las [ondas periódicas y sus características](#periodic-wave-characteristics) +- las [notas musicales (frecuencia, altura y amplitud)](#musical-notes) + +Puedes ir a [Toca notas musicales con osciladores](#play-musical-notes-with-oscillators) para omitir la parte de conocimientos de fondo. + + +## Información de contexto: osciladores, ciencia y música + +### Objetos p5.Oscillator + +Los objetos [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) contienen información para generar señales eléctricas llamadas [osciladores](https://www.techtarget.com/whatis/definition/oscillator) que pueden reproducir [notas musicales](https://www.simplifyingtheory.com/music-note/). Estas señales cambian entre un valor mínimo y uno máximo siguiendo un patrón que se repite a una velocidad específica. Cuando la señal se reproduce a través de tus bocinas, podemos escuchar que genera un sonido. + +Para entender cómo los osciladores generan notas musicales, podemos profundizar un poco en la ciencia del [sonido](https://www.britannica.com/science/sound-physics). + + +##### Nota + +En la siguiente sección, [Ciencia del sonido y la música](#science-of-sound--music), se presentan los siguientes conceptos: + +- [El sonido como una onda de presión](https://www.physicsclassroom.com/class/sound/u11l1c.cfm) +- [Características de las ondas periódicas](#periodic-wave-characteristics) +- [Ondas sonoras](https://www.open.edu/openlearn/science-maths-technology/engineering-technology/sound-music-technology-an-introduction/content-section-2.3) en relación con las notas musicales + - [Altura y frecuencia](https://www.physicsclassroom.com/class/sound/Lesson-2/Pitch-and-Frequency) +- Conceptos de teoría musical como [melodías](https://www.masterclass.com/articles/music-101-what-is-melody) y [notas musicales y frecuencia](https://www.idrumtune.com/ultimate-guide-to-musical-frequencies/) + + +##### Ir más adelante + +Si ya estás familiarizado con los conceptos de fondo anteriores, pasa directamente a la sección [Construye una aplicación simple de melodías](#build-simple-app) para comenzar tu proyecto. + + +## Ciencia del sonido y la música + +Las [melodías](https://www.masterclass.com/articles/music-101-what-is-melody) son una colección de [notas musicales](https://www.simplifyingtheory.com/music-note/) que forman [sonidos](https://www.britannica.com/science/sound-physics) agradables al oído. Los [sonidos](https://www.britannica.com/science/sound-physics) se describen como **ondas de presión**, y pueden ser generados por **osciladores**. + + +### 1.1 - Sonido y ondas de presión + +¿Alguna vez te has preguntado si se puede escuchar un sonido en el espacio exterior? ¿O por qué los sonidos se oyen más graves cuando estás bajo el agua? + +En ciencias físicas, el sonido es energía creada por la vibración de [moléculas y partículas](https://letstalkscience.ca/educational-resources/backgrounders/introduction-particle-theory-matter) del aire o de cualquier otra forma de [materia](https://letstalkscience.ca/educational-resources/backgrounders/introduction-particle-theory-matter). La materia que transporta el sonido de un lugar a otro se llama **medio**, y puede ser un líquido (como el agua), un gas (como el aire) o un sólido (como una pared o una puerta). Estas partículas vibrantes de materia crean una **onda de presión** que transporta el sonido de un lugar a otro a través del medio. + +Una **onda de presión** es cualquier perturbación que transporta energía cuando las partículas del medio se acercan unas a otras y crean zonas de mayor presión. Observa el siguiente GIF de un diapasón produciendo un sonido: + +![Un diapasón hace vibrar las partículas de materia a su alrededor, creando una onda de presión de energía sonora ilustrada por un patrón repetido de partículas comprimidas y partículas más separadas. Las partículas de materia transportan la onda sonora de izquierda a derecha al chocar unas con otras.](../images/advanced/pressurewave.gif) + +[*Fuente: The Physics Classroom: Sound Waves and Music - Lesson 1 - The Nature of a Sound Wave*](https://www.physicsclassroom.com/class/sound/u11l1c.cfm) + +Podemos ver en el GIF anterior que el diapasón hace vibrar las [partículas de materia](https://letstalkscience.ca/educational-resources/backgrounders/introduction-particle-theory-matter) a su alrededor, creando una onda de presión que transporta energía sonora. Cuando esa onda de presión llega a tu oído, percibes esas vibraciones como sonido. La razón por la que no escucharías ningún sonido en el espacio exterior es que allí no hay un medio que transporte la energía sonora. + +Para tener una mejor idea de cómo viaja el sonido a través de la materia, mira [este video](https://www.youtube.com/watch?v=px3oVGXr4mo), que demuestra ondas de presión formadas por el sonido de una palmada. + +Aprende más sobre la ciencia detrás de las ondas de presión y el sonido visitando estos recursos: [Teoría de partículas de la materia](https://letstalkscience.ca/educational-resources/backgrounders/introduction-particle-theory-matter), [El sonido como onda de presión](https://www.physicsclassroom.com/class/sound/u11l1c.cfm) y [Las ondas y el tímpano](https://www.physicsclassroom.com/mmedia/waves/edl.cfm). + + +### 1.2 - Ondas periódicas y sonido + +Las ondas de presión pueden describirse mediante patrones repetidos de partículas comprimidas en un medio. Las **compresiones** se caracterizan por áreas de alta presión donde las partículas están muy juntas. Las **rarefacciones** se caracterizan por áreas de baja presión donde las partículas están más separadas. La imagen de abajo ilustra las zonas de alta y baja presión del aire causadas por una onda sonora generada por un diapasón. Observa cómo la alta presión del aire corresponde a zonas donde las partículas de aire están juntas, y la baja presión corresponde a zonas donde están más separadas. + +![Un sonido generado por un diapasón produce un patrón periódico de zonas de alta y baja presión en un medio. Las áreas donde las partículas están juntas se etiquetan como “alta presión”, y las áreas donde están más separadas se etiquetan como “baja presión”.](../images/advanced/pressurewave-labels.jpg) + +[*Fuente: Sound for Music Technology - The Open University*](https://www.open.edu/openlearn/science-maths-technology/engineering-technology/sound-music-technology-an-introduction/content-section-2.3) + +Las ondas de presión que crean sonido son simplemente una secuencia de ciclos repetidos de compresiones y rarefacciones en un medio. Un ciclo de la onda, una **oscilación**, incluye una zona de alta presión (compresión) y una de baja presión (rarefacción). Las oscilaciones que se repiten a intervalos fijos de tiempo forman **ondas periódicas** que escuchamos como notas musicales y otros sonidos. + +Por ejemplo, las bocinas producen ondas sonoras moviendo su superficie hacia arriba y hacia abajo con un patrón periódico generado por circuitos eléctricos. El GIF de abajo ilustra cómo las ondas sonoras producidas por una bocina viajan a través de las partículas del aire: + +![Una línea negra del lado izquierdo se mueve con un patrón periódico para imitar la superficie de una bocina mientras produce sonido. Columnas de puntos negros a la derecha de la superficie representan las partículas de aire alrededor de la bocina. Cuando la superficie se mueve hacia la derecha, empuja las partículas de aire cercanas y hace que choquen con otras. Cuando la superficie se mueve hacia la izquierda, crea espacio para que las partículas vuelvan a separarse. Líneas rojas que marcan las zonas donde las partículas chocan parecen desplazarse hacia la derecha a través del aire. Debajo de la onda sonora se dibuja una curva seno periódica que representa la presión del aire, y cada pico se alinea con una línea roja. La curva seno parece desplazarse hacia la derecha a medida que las líneas rojas avanzan entre las partículas de aire.](../images/advanced/pressurewave-animated.gif) + +[*Fuente: Flipping Physics*](https://www.flippingphysics.com/uploads/2/1/1/0/21103672/0327-animated-gif-6_2.gif) + +La línea negra de la izquierda representa la superficie de la bocina, y las columnas de puntos negros representan partículas de aire. + +La bocina produce sonido moviendo su superficie de derecha a izquierda en un patrón periódico. Cuando la superficie de la bocina se mueve hacia la derecha, empuja las partículas de aire hacia la derecha y hace que se acerquen unas a otras (se compriman). Cuando las partículas se comprimen, crean zonas de alta presión del aire y transfieren energía sonora a lo largo del medio. + +En el GIF anterior, las líneas rojas marcan áreas del aire donde las partículas se comprimen y transfieren energía sonora. Una línea azul, con forma de [curva seno periódica](https://www.investopedia.com/terms/s/sinewave.asp#:~:text=A%20sine%20wave%20is%20a,oscillates%20above%20and%20below%20zero.), muestra los cambios de presión a medida que el sonido viaja por el aire. Las zonas donde las partículas de aire se comprimen se alinean con los puntos más altos de la línea azul (alta presión). Las zonas donde las partículas están más separadas se alinean con los puntos más bajos de la línea azul (baja presión). + +¿Notaste cómo las partículas de un medio oscilan de un lado a otro para transportar energía sonora, pero en realidad no viajan a ninguna parte? Las líneas rojas ilustran cómo la energía sonora es transportada por el medio mediante la transferencia de energía entre sus partículas. Observa también cómo el sonido viaja en la misma dirección en la que vibran las partículas. Eso significa que el sonido es una **onda longitudinal**. Visita este recurso para aprender más sobre [ondas longitudinales](https://www.physicsclassroom.com/class/waves/Lesson-1/Categories-of-Waves). + +Las ondas sonoras suelen ilustrarse mediante una [curva seno periódica](https://www.investopedia.com/terms/s/sinewave.asp#:~:text=A%20sine%20wave%20is%20a,oscillates%20above%20and%20below%20zero.) que representa cambios de presión mientras el sonido viaja a través de un medio (como la línea azul del GIF anterior). + + +#### Características de las ondas periódicas + +Las ondas periódicas se describen usando las características ilustradas en el diagrama de abajo: + +![Un diagrama de una curva seno periódica dibujada sobre una línea horizontal en el medio. Flechas etiquetan las características de la onda: “longitud de onda (distancia por ciclo)”, “frecuencia (ciclos por tiempo)”, “amplitud” y “equilibrio”. Flechas horizontales que van de un pico al siguiente muestran que la longitud de onda mide la longitud de un ciclo de la onda, y que la frecuencia mide cuántos ciclos ocurren durante un periodo de tiempo específico. La línea en medio de la onda se etiqueta como “equilibrio”. Flechas verticales que van del punto más alto de la línea al equilibrio, o del punto más bajo al equilibrio, muestran que la amplitud mide la distancia desde el equilibrio.](../images/advanced/wave-diagram.png) + +Descripción de las etiquetas: + +- **Equilibrio**: representa la *posición de reposo* de una oscilación y suele representarse con una línea horizontal plana en medio de una onda. + - Para una onda de presión, el equilibrio describe la presión en un medio cuando no hay sonido. +- **Longitud de onda**: la distancia entre dos puntos idénticos de la onda, o la longitud de una oscilación. + - En una onda sonora, la longitud de onda es la distancia entre dos compresiones consecutivas o dos rarefacciones consecutivas. +- **Amplitud:** la distancia entre la línea de equilibrio y el punto más alto o más bajo de la onda. + - En una onda sonora, la amplitud describe la intensidad o el volumen del sonido. +- **Frecuencia:** el número de oscilaciones que ocurren en un periodo de tiempo específico. + - La frecuencia suele medirse en **Hertz (Hz)**, que mide el número de ciclos por segundo. **1 Hz = ciclo/segundo** + - La frecuencia de una onda de presión, medida en **Hz**, es el número de veces que una compresión o una rarefacción pasa por un punto en un segundo. + + +### 1.3 - Notas musicales y características de las ondas + +Como las [notas musicales](https://www.simplifyingtheory.com/music-note/) son [sonidos](https://www.britannica.com/science/sound-physics) transportados por ondas de presión periódicas, también podemos describirlas usando las características de las ondas. + +La **amplitud** de una onda sonora es una medida de la intensidad del sonido, que percibimos a través de su volumen. Las [notas musicales](https://www.simplifyingtheory.com/music-note/) tocadas a gran volumen tienen amplitudes altas, mientras que las notas tocadas a bajo volumen tienen amplitudes bajas. Para aprender más sobre amplitud y música, [visita este recurso](https://www.howmusicworks.org/103/Sound-and-Music/Amplitude-and-Frequency). + +El **equilibrio** de una onda sonora describe la energía que transfieren las partículas del medio cuando ningún sonido está viajando a través de él. Podemos imaginar que, en equilibrio, el volumen del sonido es 0 y la presión del medio se encuentra en un valor de reposo. + +La **frecuencia** de las ondas sonoras puede percibirse a través de sus tonos o su altura, que van de graves a agudos. Las [notas musicales](https://www.simplifyingtheory.com/music-note/) son ondas sonoras reproducidas a frecuencias específicas durante un periodo corto de tiempo. Las notas tocadas a frecuencias bajas corresponden a tonos graves, como las notas musicales tocadas en un bajo. Las notas tocadas a frecuencias altas corresponden a tonos agudos, como las notas musicales tocadas en una flauta. Para aprender más sobre cómo las notas musicales corresponden a frecuencias específicas de onda, [visita este recurso](https://www.idrumtune.com/ultimate-guide-to-musical-frequencies/). + +Visita el [tutorial de síntesis de sonido de The Coding Train](https://www.youtube.com/watch?app=desktop\&v=Bk8rLzzSink) para una breve introducción a los objetos `p5.Oscillator` y las ondas. + + +## Toca notas musicales con osciladores + +Adentrémonos en el maravilloso mundo del sonido, la música y los osciladores para crear una [aplicación simple de melodías](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe). + + +### Paso 1 – Crea un objeto p5.Oscillator que pueda reproducir una nota musical + +Abre un nuevo proyecto de p5.js, llámalo “Toca una nota” y guarda el proyecto. + +- Asegúrate de tener la [biblioteca de sonido de p5.js](https://p5js.org/libraries/) enlazada en tu archivo `index.html`. + +Identifica una frecuencia que corresponda a una nota musical y almacénala en una variable global llamada `myFreq`. + +- Para la nota [Do central](https://www.sciencedirect.com/topics/mathematics/middle-c), inicializa `myFreq` con `262` añadiendo este código antes de `setup():` + + ```js + // Variable for frequency (middle C). + let myFreq = 262; + ``` + +Visita [este recurso](https://www.idrumtune.com/ultimate-guide-to-musical-frequencies/) para ver una lista de notas musicales y sus frecuencias correspondientes. El [do central](https://www.sciencedirect.com/topics/mathematics/middle-c) tiene una frecuencia de 262 Hz. + +Declara una variable global que almacenará el objeto [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/). + +- Agrega este código arriba de `setup():` + + ```js + // Variable para el oscilador. + let osc; + ``` + +Inicializa `osc` con un objeto [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) usando `myFreq` como argumento. + +- Agrega este código en `setup():` + + ```js + /* Crea un objeto Oscillator con una + frecuencia definida por la variable myFreq */ + osc = new p5.Oscillator(myFreq); + ``` + + + +Asegúrate de que el objeto oscilador se haya inicializado correctamente agregando `console.log(osc)` en la línea siguiente. Deberías ver un objeto parecido a este: + +``` +r {started: false, phaseAmount: undefined, oscillator: OscillatorNode, f: 262, output: GainNode…} +``` + + +Puedes confirmar que creaste un objeto oscilador con la frecuencia correcta revisando la propiedad “`f`” en la consola o imprimiéndola con `console.log(osc.f)`. La frecuencia de `osc.f` debe coincidir con la frecuencia que identificaste para tu nota. + +Visita la referencia de [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) para aprender más sobre las propiedades de los objetos `p5.Oscillator`. [Consulta este recurso](https://mixbutton.com/mixing-articles/music-note-to-frequency-chart/) para ver una tabla con las frecuencias de notas musicales específicas. + +Tu archivo `sketch.js` debería verse así: + +```js +// Variable para la frecuencia (do central). +let myFreq = 262; + +// Variable para el oscilador. +let osc; + +function setup() { + createCanvas(400, 400); + + /* Crea un objeto Oscillator con una + frecuencia definida por la variable myFreq */ + + osc = new p5.Oscillator(myFreq); + console.log(osc.f); +} + +function draw() { + background(220); +} +``` + + +### Paso 2 – Reproduce una nota + +La mayoría de los navegadores requieren permiso de la persona usuaria para reproducir o recuperar sonidos, imágenes y video. Para evitar ese problema, podemos añadir una función que le dé control a la persona sobre cuándo se reproduce un sonido. + +A continuación, permitiremos que la persona usuaria inicie el oscilador al hacer clic en el lienzo definiendo una función `mousePressed()` que llame a `osc.start()`. + +- Agrega las siguientes líneas de código debajo de `draw():` + + ```js + // Inicia el oscilador cuando se presiona el mouse. + function mousePressed() { + osc.start(); + } + ``` + +- Ejecuta tu código. Deberías escuchar el do central después de hacer clic sobre el lienzo. + +Si no escuchas ningún sonido después de hacer clic en el lienzo, revisa que tu código se vea [así](https://editor.p5js.org/Msqcoding/sketches/ObN4r-VJo). Si el sonido no se reproduce, verifica que la configuración de tu navegador permita reproducir contenido multimedia. Puedes usar los siguientes recursos para ayudarte: + +- [Configuración de Chrome](https://support.google.com/chrome/answer/9692215?hl=en) +- [Configuración de Safari](https://testgenius.com/help/safari-enable-auto-play-settings.pdf) +- [Configuración de Edge](https://answers.microsoft.com/en-us/windows/forum/all/no-sound-on-edge/d78ee7a0-ee77-4d16-b406-919579b4397e) + +Ya hemos creado una nota musical que se reproduce para siempre, o hasta que detengas la ejecución del código. + +Ahora permitiremos que la persona usuaria inicie y detenga el sonido al hacer clic en el lienzo. + +- Reemplaza el código de la función `mousePressed()` con esta sentencia condicional: + + ```js + // Alterna la nota que se está reproduciendo. + if (osc.started) { + osc.stop(); + } else { + osc.start(); + } + ``` + +- Ejecuta tu proyecto. Deberías poder escuchar la nota do central cuando haces clic en el lienzo y detenerla cuando vuelves a hacer clic. + +Tu archivo `sketch.js` debería verse parecido a esto: + +```js +// Variable para el oscilador. +let osc; + +// Frecuencia del do central. +let myFreq = 262; +function setup() { + createCanvas(400, 400); + // Crea el objeto Oscillator. + osc = new p5.Oscillator(myFreq); + // console.log(osc.f); +} + +function draw() { + background(220); +} + +function mousePressed() { + // Alterna la nota que se está reproduciendo. + if (osc.started) { + osc.stop(); + } else { + osc.start(); + } +} +``` + +En el código anterior, se inicializa un nuevo objeto `p5.Oscillator` con una frecuencia de 262 Hz y se guarda en la variable `osc`. La persona usuaria puede iniciar y detener el oscilador haciendo clic en el lienzo. Para añadir esta interactividad, agregaste una sentencia condicional en `mousePress()` que usa la propiedad `.started` del oscilador para comprobar si ya comenzó a sonar. `osc.started` es `true` si el oscilador ya inició y `false` en caso contrario. Si el oscilador ya comenzó, la condicional indica al programa que lo detenga usando la función `.stop()`; en caso contrario, lo inicia usando la función `.start()`. + +Visita la referencia de p5.js para [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) para aprender más sobre sus funciones y propiedades. + +[Proyecto de ejemplo](https://editor.p5js.org/KM_Playground/sketches/Ccjew0snE) + + +- Muestra en el lienzo la frecuencia del oscilador en Hz. ([ejemplo](https://editor.p5js.org/KM_Playground/sketches/3Ul83pu93)) +- Reproduce distintas frecuencias consultando esta [tabla](https://mixbutton.com/mixing-articles/music-note-to-frequency-chart/) y cambiando el valor de la variable de frecuencia. Redondea las frecuencias al entero más cercano. ([ejemplo](https://editor.p5js.org/KM_Playground/sketches/2ChPeL9r6)) + + + +En la siguiente sección, Escalas musicales y osciladores, presentaremos la teoría detrás de las escalas musicales y la composición melódica introduciendo [escalas musicales](https://piano-music-theory.com/2016/05/31/major-scales/), [composición de melodías](https://pulse.berklee.edu/?id=4\&lesson=73), [octavas](https://www.masterclass.com/articles/music-101-what-is-an-octave) y [escalas musicales y frecuencias](https://www.swarthmore.edu/NatSci/ceverba1/Class/e5_2006/MusicalScales.html). + + +Si ya estás familiarizado con los conceptos de fondo anteriores, pasa directamente a la sección [Construye una aplicación simple de melodías](#build-simple-app). + + + +## Escalas musicales y osciladores + +Las personas que componen y producen música suelen crear melodías simples eligiendo notas de una ***escala musical*** específica para asegurar que suenen agradables a quienes las escuchan. En la cultura occidental, las **escalas musicales** son una colección de notas organizadas según frecuencias ascendentes o descendentes. Las escalas ascendentes aumentan en frecuencia (de una altura grave a una más aguda), y las descendentes disminuyen en frecuencia (de una altura aguda a una más grave). Una **octava** es una escala ascendente compuesta por ocho notas musicales espaciadas uniformemente, donde la frecuencia de la última nota es el doble de la frecuencia de la primera. + +En el ejemplo de este tutorial elegimos una de las escalas más fundamentales de la música occidental: [Do mayor](https://pulse.berklee.edu/scales/c-major-scale.html). La primera nota de la escala de [Do mayor](https://pulse.berklee.edu/scales/c-major-scale.html) es el [do central](https://www.skoove.com/blog/middle-c-on-piano/#:~:text=Middle%20C%20is%20a%20basic,the%20middle%20of%20the%20piano.), con una frecuencia de 264 Hz. La última nota de la escala tendrá una frecuencia que es el [doble de la frecuencia](https://www.swarthmore.edu/NatSci/ceverba1/Class/e5_2006/MusicalScales.html) del do central. Esto significa que la última nota de la escala es [do sostenido](https://peabody.sapp.org/class/st2/lab/notehz/) con una frecuencia de 524 Hz. Consulta la siguiente tabla para ver una lista de frecuencias y notas musicales correspondientes: + +Notas musicales y frecuencias en Do mayor + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +**Nota** + +(4.ª octava) + + + +**Frecuencia** + +(Hz) + + + +**Expresión** + +(`myFreq` = 242 Hz) + +
+ +C + + + +264 + + + +`myFreq * 1` + +
+ +D + + + +294.75 + + + +`myFreq * 9/8` + +
+ +E + + + +327.5 + + + +`myFreq * 5/4` + +
+ +F + + + +349.33 + + + +`myFreq * 4/3` + +
+ +G + + + +393 + + + +`myFreq * 3/2` + +
+ +A + + + +436 + + + +`myFreq * 5/3` + +
+ +B + + + +491.25 + + + +`myFreq * 15/8` + +
+ +C# + +(5.ª octava) + + + +524 + + + +`myFreq * 2` + +
+ +Visita estos recursos para explorar más sobre [otras escalas musicales](https://piano-music-theory.com/2016/05/31/major-scales/), [octavas](https://www.masterclass.com/articles/music-101-what-is-an-octave), [composición de melodías y escalas](https://pulse.berklee.edu/?id=4\&lesson=73) y [Do mayor](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm). + +Este proyecto usa objetos [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) para generar las notas musicales que sonarán durante una melodía. En el Paso 1 aprendimos a inicializar un nuevo objeto [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) en una variable con una frecuencia específica. Para generar osciladores para una escala musical, podemos inicializar múltiples objetos [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) con distintas frecuencias dentro de un arreglo. + +Para aprender más sobre arreglos, visita el recurso de MDN sobre [arreglos en JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). + + +## Construye una aplicación simple de melodías + +En el proyecto de aplicación simple de melodías, permitiremos que las personas usuarias elijan cualquier nota de [Do mayor](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm) para componer melodías. Las frecuencias y los objetos oscilador se almacenan en arreglos para que estén listos para reproducirse cuando la persona los seleccione. Cada nota de [Do mayor](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm) tiene una frecuencia específica, así que cada nota tendrá un objeto oscilador específico que la reproducirá. + + +### Paso 1 – Crea objetos p5.Oscillator para una escala musical + +Abre un nuevo proyecto en el [Editor Web de p5.js](https://editor.p5js.org/), llámalo “Aplicación simple de melodías” y guárdalo. + +- Asegúrate de tener la [biblioteca de sonido de p5.js](https://p5js.org/libraries/) enlazada en tu archivo `index.html`. + +Elige una escala musical para usar en tu app. + +- Este tutorial usa la escala de [Do mayor](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm) (4.ª octava), donde la primera nota es el [do central](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/x_12.16.jpg), la misma nota cuya frecuencia se guarda en la variable `myFreq`. +- Calcula las 8 frecuencias que representan las notas musicales de una escala, comenzando con la frecuencia de una variable `myFreq`. + +Consulta [esta tabla](#note-frequencies) de la sección anterior para obtener más información sobre cómo calcular las frecuencias de las notas en [Do mayor](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm). + +Declara una variable global `myFreq` e inicialízala con la frecuencia de la primera nota de la escala. Declara también otra variable global llamada `frequencies` e inicialízala con un arreglo de las frecuencias que calculaste y que coinciden con las 8 notas de la escala. + +- Agrega este código antes de `setup():` + + ```js + // Variable para la frecuencia (do central). + let myFreq = 262; + + // Arreglo de frecuencias en Do mayor. + let frequencies = [ + myFreq, + myFreq * 9/8, + myFreq * 5/4, + myFreq * 4/3, + myFreq * 3/2, + myFreq * 5/3, + myFreq * 15/8, + myFreq * 2 + ]; + ``` + +Accede a los elementos del arreglo `frequencies` para inicializar objetos [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) para cada nota de [Do mayor](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm). + +- Crea una variable global llamada `oscillators` e inicialízala con un arreglo vacío. Este arreglo almacenará los objetos [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) para cada nota. + - Agrega este código arriba de `setup():` + + ```js + // Arreglo vacío para objetos oscilador. + let oscillators = []; + ``` + +- Inicializa osciladores para las notas que correspondan al arreglo `frequencies` y agrégalos al arreglo `oscillators` llamando a [`.push()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) con cada nuevo oscilador. + - Agrega este código en `setup():` + + ```js + // Inicializa osciladores y colócalos en el arreglo oscillators. + for (let freq of frequencies) { + osc = new p5.Oscillator(freq); + oscillators.push(osc); + } + ``` + +Aquí usas un bucle `for` para acceder a cada frecuencia del arreglo `frequencies` e inicializar nuevos objetos [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) para cada nota. Cada objeto oscilador se almacena en el arreglo `oscillators`. + + +El índice de frecuencias específicas en el arreglo `frequencies` coincide con el índice de los objetos oscilador en el arreglo `oscillators`. + + +Verifica que los osciladores se hayan creado correctamente imprimiendo en la consola la frecuencia de cada uno. + +- Agrega esta línea de código en `setup():` + + ```js + // verifica que cada oscilador tenga la frecuencia correcta + for (let freq of frequencies) { + console.log(osc.f); + } + ``` + +Tu archivo `sketch.js` debería verse parecido a esto: + +```js +// Frecuencia del do central. +let myFreq = 262; + +// Arreglo de frecuencias en Do mayor. +let frequencies = [ + myFreq, + myFreq * 9/8, + myFreq * 5/4, + myFreq * 4/3, + myFreq * 3/2, + myFreq * 5/3, + myFreq * 15/8, + myFreq * 2 +]; + +// Arreglo vacío para objetos oscilador. +let oscillators = []; + +function setup() { + createCanvas(400, 400); + + // Inicializa osciladores y colócalos en el arreglo oscillators. + for (let freq of frequencies) { + osc = new p5.Oscillator(freq); + oscillators.push(osc); + } + + // verifica que cada oscilador tenga la frecuencia correcta + for (let freq of frequencies) { + console.log(osc.f); + } +} +function draw() { + background(220); +} +``` + +Los objetos [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) tienen métodos como `.start()`, `.stop()` y `.amp()` que ayudan a controlar la intensidad del sonido que producen. También tienen propiedades como `.f` y `.started`, que almacenan, respectivamente, su frecuencia en Hz y un valor booleano que es `true` cuando el oscilador ha iniciado y `false` en caso contrario. Usaremos todo esto para añadir más elementos interactivos al sketch más adelante. + + + +En la siguiente sección, Melodías y tempo, presentaremos cómo el [tempo](https://www.hoffmanacademy.com/blog/what-is-tempo-in-music/) y la [duración de las notas](https://classicalguitarshed.com/theory-note-duration/) intervienen en la creación de [melodías](https://www.masterclass.com/articles/music-101-what-is-melody). + +Si ya estás familiarizado con los conceptos de fondo anteriores, pasa directamente al [Paso 2](#create-melody-object). + + + +## Melodías y tempo + +Las **melodías** se crean cuando se reproducen varias [notas musicales](https://www.simplifyingtheory.com/music-note/) una después de otra. Una melodía simple puede consistir en notas musicales, ritmo y tempo. El **ritmo** describe cuánto tiempo se reproduce cada nota individual y suele medirse en **pulsos**. El **tempo** describe la cantidad de **pulsos por minuto (bpm)** de una melodía. Por ejemplo, la melodía pop promedio se interpreta a 120 pulsos por minuto, lo que significa que cada pulso dura medio segundo. Los **pulsos** describen el pulso de una melodía, mientras que el tempo describe qué tan rápido avanza cada pulso en el tiempo. + +La cantidad de tiempo que se reproduce cada nota, conocida como **duración de la nota**, se mide en pulsos y afecta directamente el ritmo de una melodía. Las notas suelen tocarse con duraciones de 4 pulsos, 2 pulsos, 1 pulso y medio pulso. En una melodía simple, cada nota se toca durante la misma cantidad de tiempo. Una melodía simple tocada a 120 bpm tendrá notas que se reproducen cada medio segundo y duran medio segundo. Para aprender más sobre duración de notas, ritmo y tempo, [visita este recurso](https://classicalguitarshed.com/theory-note-duration/). + +Visita la referencia de MDN para repasar [objetos JSON de JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON): almacenaremos nuestras melodías como objetos JSON que luego podremos reproducir. + + +Usaremos [objetos JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) para almacenar melodías y sus características, como nombre, notas musicales y tempo. Llamaremos a estos objetos ***objetos de melodía***. + + +### Paso 2 – Crea un objeto de melodía + +Podemos crear un objeto de melodía que represente las notas de [Do mayor](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm) agregando este código antes de `setup():` + +``` +// Objeto melody para Do mayor +let melody = { + name: 'Escala de Do mayor', + notesIndex: [0, 1, 2, 3, 4, 5, 6, 7], + tempo: 120 +}; +``` + +Los objetos de melodía tienen las siguientes propiedades: + +- `name`: el nombre de la melodía +- `notesIndex`: un arreglo de números que especifica el índice en el arreglo `oscillators` que corresponde a cada nota. `notesIndex` define el orden en que se reproducirá cada nota. +- `tempo`: la cantidad de pulsos por minuto utilizada para calcular la duración de cada nota en la melodía. + +Visita la referencia de MDN sobre [objetos JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) para aprender más sobre cómo acceder a los valores de sus propiedades. + + +### Paso 3: Reproduce una nota dentro de un objeto de melodía + +Antes de reproducir una melodía completa, primero debemos darle al programa instrucciones sobre cómo reproducir una nota individual. + +Define una función `playNote()` con un parámetro `n`, donde `n` coincida con el índice en `melody.noteIndex`. `n` también coincide con los índices de las notas en el arreglo `oscillators` y con sus frecuencias en el arreglo `frequencies`. + +- Agrega la siguiente declaración de función debajo de `draw():` + + ```js + // Comienza a reproducir la nota. + function playNote(n) { + } + ``` + +Usa una sentencia condicional que reproduzca una nota si esa nota todavía no se está reproduciendo. + +- Agrega el siguiente código dentro de `playNote(n)`: + + ```js + // Inicia el oscilador si es necesario. + if (oscillators[n].started === false) { + oscillators[n].start(); + } + ``` + +Agrega un pequeño fundido de entrada mientras la nota se reproduce usando [`.amp()`](/reference/p5.Oscillator/amp) para una experiencia de escucha más natural. Este método cambia la amplitud del oscilador, aumentando gradualmente el volumen al inicio. + +- Agrega la siguiente línea de código dentro de `playNote(n)`: + + ```js + // Comienza a reproducir la nota aumentando el volumen con un fade-in de 0.01 s. + oscillators[n].amp(1, 0.01); + ``` + +La función `playNote()` debería verse así: + +```js +function playNote(n) { + // Inicia el oscilador si es necesario. + if (oscillators[n].started === false) { + oscillators[n].start(); + + // Comienza a reproducir la nota aumentando el volumen con un fade-in de 0.01 s. + oscillators[n].amp(1, 0.01); + } +} +``` + +La función `playNote()`: + +- Recibe un número `n` que indica el valor del índice de una nota a partir de la propiedad `notesIndex` del objeto `melody`. +- Inicia el oscilador en `oscillators[n]`, siempre que no haya empezado ya. + - Para comprobar si el oscilador se está reproduciendo, usa su propiedad `.started` en una sentencia condicional. + - Usa el método [`.start()`](/reference/p5.Oscillator/start) para iniciar el oscilador si aún no ha comenzado. +- Usando el método [`.amp()`](/reference/p5.Oscillator/amp) del oscilador, establece el volumen en 1 con un fade-in de 0.01 segundos. + +Para detener la nota, podemos añadir un fundido de salida usando [`.amp()`](/reference/p5.Oscillator/amp) para disminuir el volumen a 0, y detener el oscilador usando [`.stop()`](/reference/p5.Oscillator/stop). + +- Define una función llamada `stopNote()` con un parámetro `n` agregando este código debajo de `playNote():` + + ```js + // Deja de reproducir la nota. + function stopNote(n) { + // Baja el volumen del oscilador a 0. + oscillators[n].amp(0, 0.01); + + // Detiene el oscilador. + oscillators[n].stop(); + } + ``` + +La función `stopNote()`: + +- Recibe un número `n` que indica el índice del objeto oscilador que se está reproduciendo. +- Establece el volumen en 0 con un fade-out de 0.01 segundos usando el método [`amp()`](/reference/p5.Oscillator/amp) del oscilador. +- Usa el método [`stop()`](/reference/p5.Oscillator/stop) para detener el oscilador. + +Podemos llamar a `stopNote()` dentro de la función `playNote()` y controlar cuánto tiempo se reproduce cada nota. Primero define una variable global `noteDuration` que use la propiedad `melody.tempo` para calcular la [cantidad de tiempo que debe sonar cada nota](https://classicalguitarshed.com/theory-note-duration/). + +- Agrega el siguiente código antes de `setup():` + + ```js + // Calcula la duración de cada nota en segundos. + let noteDuration = 60 / melody.tempo; + ``` + +En la sección Melodías y tempo aprendimos que la [duración de una nota](https://classicalguitarshed.com/theory-note-duration/) puede calcularse a partir del tempo porque cada nota de nuestra melodía simple se reproduce durante la misma cantidad de tiempo. Como el tempo se mide en pulsos por minuto, podemos dividir 60 segundos por minuto entre el tempo (`60 / melody.tempo`) para determinar cuántos segundos debe sonar cada nota. + +Modifica `playNote()` usando [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) para programar cuándo debe dejar de sonar una nota específica de `melody.notesIndex`. [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) requiere 3 argumentos: la función que se llamará después del tiempo establecido, el tiempo de espera hasta que se llame esa función (en milisegundos) y el argumento que se usará en la función cuando se ejecute. + +- Activa `stopNote()` después de `noteDuration * 1000` milisegundos usando `n` como tercer parámetro con [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout): +- Agrega esta línea de código al final de `playNote():` + + ```js + // Deja de reproducir la nota después del número de segundos almacenado en noteDuration + setTimeout(stopNote, noteDuration * 1000, n); + ``` + +[`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) llama a `stopNote` después de un periodo medido en milisegundos: + +- `noteDuration` puede convertirse de segundos a milisegundos usando la expresión `noteDuration * 1000`. +- El tercer argumento, `n`, indica el valor que se pasará a la función `stopNote()` cuando se ejecute. Ese es el valor del índice en el arreglo `melody.notesIndex` que coincide con el índice del `oscillator` en el arreglo `oscillators` que se está reproduciendo. +- Retrasar `stopNote()` con base en `noteDuration` hace que la nota suene durante 1/2 pulso. + +Para obtener más información sobre la función [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout), visita la referencia de MDN. + +Tus funciones `playNote()` y `stopNote()` deberían verse así: + +```js +// Comienza a reproducir la nota. +function playNote(n) { + // Inicia el oscilador si es necesario. + if (oscillators[n].started === false) { + oscillators[n].start(); + } + + // Comienza a reproducir la nota aumentando el volumen con un fade-in de 0.01 s. + oscillators[n].amp(1, 0.01); + + // Deja de reproducir la nota después del número de segundos almacenado en noteDuration + setTimeout(stopNote, noteDuration * 1000, n); +} + +// Deja de reproducir la nota. +function stopNote(n) { + // Baja el volumen del oscilador a 0. + oscillators[n].amp(0, 0.01); + + // Detiene el oscilador. + oscillators[n].stop(); +} +``` + +- Prueba `playNote()` llamándola al final de `setup()` con una nota específica del objeto de melodía. Por ejemplo, puedes agregar esta línea al final de `setup()` y cambiar el argumento para probar cada una: + + ```js + // prueba playNote + playNote(0); + ``` + + +### Paso 4: Reproduce un objeto de melodía + +Define la función `play()` para programar cuándo se reproduce cada nota del arreglo `oscillators` según el orden en que aparece su índice en el arreglo `melody.notesIndex` y según la `noteDuration` de la melodía. Los elementos de `melody.notesIndex` incluyen todos los índices de las notas de la melodía, en el orden en que deben reproducirse. + +El valor de `melody.notesIndex[0]` es el índice del arreglo `oscillators` que reproduce la primera nota de la melodía. El último elemento de `melody.notesIndex` es el índice del arreglo `oscillators` correspondiente a la última nota. Cada nota puede reproducirse en un momento específico después de que empiece la melodía usando `setTimeout()` para activar `playNote()` dentro de un bucle `for`. + +- Agrega la declaración de la función `play()` al final de `sketch.js`: + + ```js + // Reproduce las notas de una melodía. + function play() { + // Lee cada [índice, nota] de melody.notesIndex + for (let [index, note] of melody.notesIndex.entries()) { + // Reproduce cada nota en el momento programado + setTimeout(playNote, noteDuration * 1000 * index, note); + } + } + ``` + +- Prueba la función `play()` llamándola desde `mousePressed()`. + +Tu código debería verse así: + +```js +// Variable para la frecuencia (do central). +let myFreq = 262; + +// Arreglo de frecuencias en Do mayor. +let frequencies = [ + myFreq, + myFreq * 9/8, + myFreq * 5/4, + myFreq * 4/3, + myFreq * 3/2, + myFreq * 5/3, + myFreq * 15/8, + myFreq * 2 +]; + +// Objeto melody para Do mayor +let melody = { + name: 'Escala de Do mayor', + notesIndex: [0, 1, 2, 3, 4, 5, 6, 7], + tempo: 120 +}; + +// Arreglo vacío para objetos oscilador. +let oscillators = []; + +// Calcula la duración de cada nota en segundos. +let noteDuration = 60 / melody.tempo; + +function setup() { + createCanvas(400, 400); + + // Inicializa osciladores y colócalos en el arreglo oscillators. + for (let freq of frequencies) { + osc = new p5.Oscillator(freq); + oscillators.push(osc); + } + + // establece el modo de color en HSB (mejor para colorear teclas con notas) + colorMode(HSB); +} + +function draw() { + background(220); + drawMelody(); +} + +// Comienza a reproducir la nota. +function playNote(n) { + // Inicia el oscilador si es necesario. + if (oscillators[n].started === false) { + oscillators[n].start(); + + // Comienza a reproducir la nota aumentando el volumen con un fade-in de 0.01 s. + oscillators[n].amp(1, 0.01); + } + + // Deja de reproducir la nota después del número de segundos almacenado en noteDuration * 1000 + setTimeout(stopNote, noteDuration * 1000, n); +} + +// Deja de reproducir la nota. +function stopNote(n) { + // Baja el volumen del oscilador a 0. + oscillators[n].amp(0, 0.01); + + // Detiene el oscilador. + oscillators[n].stop(); +} + +// Reproduce las notas de una melodía. +function play() { + // Lee cada [índice, nota] de melody.notesIndex + for (let [index, note] of melody.notesIndex.entries()) { + // Reproduce cada nota en el momento programado + setTimeout(playNote, noteDuration * 1000 * index, note); + } +} + +// reproduce la melodía con clic del mouse +function mousePressed() { + play(); +} +``` + +La función `play()`: + +- Usa un bucle [for](/reference/p5/for) para iterar por todos los elementos del arreglo `melody.notesIndex`, y guarda el índice del elemento en la variable `index` y su valor en la variable `note`. + - `index` indica el orden en que debe reproducirse la nota. + - `note` indica el índice del arreglo `oscillators` que reproducirá la nota. +- Programa la reproducción de cada nota de `melody.notesIndex` usando `setTimeout()`. + - Llama a `playNote(note)` después de un tiempo, en milisegundos, calculado con `noteDuration * 1000 * index`. + +`setTimeout()` programa cuándo debe reproducirse cada nota y acepta dos o más argumentos: la función que se ejecutará (`playNote`), el retraso antes de ejecutarla (en milisegundos) y cualquier argumento que deba pasarse a esa función. En este caso, queremos pasar una nota a la función `playNote`. El retraso se calcula con `noteDuration * 1000 * index`, donde `index` es el índice de la nota actual dentro del arreglo `melody.noteIndex`, que corresponde al índice del `oscillator` en el arreglo `oscillators`. + +Esa temporización permite el siguiente calendario de reproducción para las notas de una melodía: + +- La primera nota de `melody.noteIndex` se reproduce inmediatamente cuando empieza la melodía (a los 0 milisegundos). +- La segunda nota se reproduce después de `noteDuration * 1000 * 1` milisegundos. Esto ocurre 1/2 pulso después de que empieza a sonar la primera nota. +- La tercera nota se reproduce después de la segunda, con un retraso de `noteDuration * 1000 * 2` milisegundos. +- Este proceso se repite hasta que se usa cada elemento del arreglo `melody.notesIndex`. + +El momento de reproducción de cada nota queda escalonado según la duración y la posición de una sola nota dentro de la melodía. Esto permite una progresión suave de notas a lo largo de la melodía y crea un ritmo en el que cada nota se reproduce a un intervalo constante, alineado con el tempo de la melodía. + +[Código de ejemplo](https://editor.p5js.org/Msqcoding/sketches/hQbNZKWhJ) + + +- Cambia los valores de los elementos en `melody.notesIndex` y observa cómo cambia la melodía. +- Cambia el valor de `melody.tempo` y observa cómo cambia la melodía. +- Crea nuevos objetos de melodía y reprodúcelos. + + + + +En la siguiente sección, Interfaz y experiencia de usuario, presentaremos cómo pensar en la [interfaz de usuario (UI)](https://clearbridgemobile.com/mobile-app-design-fundamentals-user-experience-user-interface/), la [experiencia de usuario (UX)](https://www.interaction-design.org/literature/topics/ux-design) y la importancia de la [retroalimentación visual](https://uxplanet.org/the-details-that-matter-8b962ca58b49) al usar una app. + + +Si ya estás familiarizado con los conceptos de fondo anteriores, pasa directamente al [Paso 7](#user-input). + + + +## Interfaz y experiencia de usuario + +Ya programamos nuestros proyectos para reproducir las notas de un objeto de melodía. Ahora podemos agregar una [interfaz de usuario (UI)](https://clearbridgemobile.com/mobile-app-design-fundamentals-user-experience-user-interface/) que permita a las personas seleccionar notas de la escala de [Do mayor](https://pulse.berklee.edu/scales/c-major-scale.html) y componer sus propias melodías. Una [interfaz de usuario (UI)](https://clearbridgemobile.com/mobile-app-design-fundamentals-user-experience-user-interface/) puede ofrecer todo lo que consideres necesario para que una persona use tu app con éxito y la disfrute. También puede proporcionar una [experiencia de usuario (UX)](https://www.interaction-design.org/literature/topics/ux-design) divertida y agradable. + +La [retroalimentación visual](https://uxplanet.org/the-details-that-matter-8b962ca58b49) durante la experiencia de uso es una parte importante para mantener el interés de las personas en tu app. Dar retroalimentación visual a las personas usuarias cada vez que se reproduce una nota puede hacer que componer y reproducir melodías sea una experiencia más satisfactoria y que invite a seguir creando. + +Visita estos recursos para aprender más sobre [interfaces de usuario (UI)](https://clearbridgemobile.com/mobile-app-design-fundamentals-user-experience-user-interface/), [experiencias de usuario (UX)](https://www.interaction-design.org/literature/topics/ux-design) y [retroalimentación visual](https://uxplanet.org/the-details-that-matter-8b962ca58b49). + + +En este paso puedes diseñar la interfaz de usuario que quieras. Como ejemplo, dibujaremos una fila de botones que se parezcan a las teclas de un piano. Para facilitar una experiencia intuitiva, cada nota de la escala de Do mayor corresponderá a un botón en el lienzo, organizado en orden de frecuencia decreciente. Cuando se reproduzca la nota asociada a una tecla específica, esa tecla se iluminará con un color brillante para añadir una retroalimentación visual agradable durante la reproducción de la melodía. + + +### Paso 5 – Crea una interfaz de usuario + +En este paso definirás una función `drawMelody()` que dibuja botones parecidos a teclas de piano a lo largo del lienzo. Cada botón corresponde a una nota musical específica representada por un objeto [p5.Oscillator](/reference/p5.Oscillator) en el arreglo `oscillators`. Como hay 8 objetos oscilador en el arreglo `oscillators` y 8 frecuencias de notas musicales en el arreglo `frequencies`, se dibujarán 8 botones a lo largo del lienzo. + +- Define variables globales que almacenen la cantidad de notas disponibles para las personas usuarias en `numNotes`, y el ancho del lienzo en `cWidth`. Agrega el siguiente código arriba de `setup():` + + ```js + // número de notas que se pueden reproducir (igual al número de frecuencias/osciladores) + let numNotes = frequencies.length; + + // ancho del lienzo + let cWidth = 400; + ``` + +- Reemplaza la dimensión de ancho en `createCanvas()` por `cWidth` y establece el modo de color en [HSB](https://www.learnui.design/blog/the-hsb-color-system-practicioners-primer.html). + +Tus variables globales y `setup()`: + +```js +// ...otras variables + +// número de notas que se pueden reproducir (igual al número de frecuencias/osciladores) +let numNotes = frequencies.length; + +// ancho del lienzo +let cWidth = 400; + +function setup() { + createCanvas(cWidth, 400); + + // Inicializa osciladores y colócalos en el arreglo oscillators. + for (let freq of frequencies) { + osc = new p5.Oscillator(freq); + oscillators.push(osc); + } + + // establece el modo de color en HSB (mejor para colorear teclas con notas) + colorMode(HSB); +} +``` + +`cWidth` y `numNotes` se usarán para calcular la coordenada `x` de cada botón en el lienzo. Cada botón cambiará de color, usando el [modo de color HSB](https://www.learnui.design/blog/the-hsb-color-system-practicioners-primer.html), mientras una nota se esté reproduciendo, y volverá a un color predeterminado cuando la nota no se esté reproduciendo. + +En este ejemplo, dibujarás una fila de botones rectangulares en el lienzo que se comportan como teclas de piano. Cada tecla corresponde a una nota de la escala de Do mayor. Las teclas cambian de color cuando se reproduce la nota que coincide con una tecla específica. Cada botón (tecla) representa una nota de Do mayor y aparece en el lienzo ordenado por altura ascendente. + +- Define una función llamada `drawMelody()` que dibuje botones para cada nota en una fila sobre el lienzo. +- Define una variable local llamada `keyWidth` e inicialízala con `cWidth/numNotes`, que representa el ancho de cada tecla. +- Define variables locales para las coordenadas `x` y `y` de cada botón usando un bucle `for`: + - `y` es un valor fijo + - `x` depende de la variable de índice `i` y de `keyWidth` + - Usa `x`, `y` y `keyWidth` para dibujar teclas rectangulares redondeadas a lo largo del lienzo. + +Tu función `drawMelody()` debería verse así: + +```js +// Interfaz de usuario +function drawMelody() { + // ancho de cada tecla + let keyWidth = cWidth/numNotes; + + // Bucle para la cantidad de notas disponibles + for (let i = 0; i < numNotes; i++) { + // establece x para cada elemento + let x = i * keyWidth; + let y = keyWidth * 3; // y = 3 veces el ancho + + // Dibuja una tecla redondeada. + rect(x, y, keyWidth, keyWidth * 2, 10); + } +} +``` + +- Agrega `drawMelody()` a la función `draw()` y haz clic con el mouse en el lienzo. Observa que los colores todavía no cambian. + +### Paso 6: Agrega retroalimentación visual + +`drawMelody()` genera un color para cada botón que representa una nota. Cada vez que se reproduce una nota, la tecla correspondiente cambiará de color. Esto añade un elemento visual agradable a la experiencia. La función [`map()`](/reference/p5/map) puede usarse para definir el color de cada botón en [modo de color HSB](https://www.learnui.design/blog/the-hsb-color-system-practicioners-primer.html) mientras se está reproduciendo, usando el índice de cada nota dentro del arreglo `oscillators`. + +- Agrega el siguiente código a `drawMelody()` antes de `rect():` + + ```js + // Comprueba si oscillator[i] ya comenzó a reproducirse + if (oscillators[i].started) { + // true: define una variable local h usando map(), numNotes e i + // Establece el color de la tecla usando map() + let h = map(i, 0, numNotes, 0, 360); + + // usa h en fill + fill(h, 100, 100); + } else { + fill("white"); + } + ``` + +Tu función `drawMelody()` debería verse así: + +```js +// Interfaz de usuario +function drawMelody() { + // dibuja botones rectangulares + let keyWidth = cWidth/numNotes; + + // Bucle para la cantidad de notas disponibles + for (let i = 0; i < numNotes; i++) { + // establece x para cada elemento + let x = i * keyWidth; + let y = keyWidth * 3; // altura = 3 veces el ancho + + // Comprueba si oscillator[i] ya comenzó a reproducirse + if (oscillators[i].started) { + // true: define una variable local h usando map() y numNotes + // Establece el color de la tecla usando map() + let h = map(i, 0, numNotes, 0, 360); + + // usa h en fill + fill(h, 100, 100); + } else { + fill("white"); + } + + // Dibuja una tecla redondeada con altura doble del ancho. + rect(x, y, keyWidth, keyWidth * 2, 10); + } +} +``` + +- Prueba tu código haciendo clic en el lienzo. Deberías ver una fila de teclas que se vuelven coloridas mientras suenan las notas. + +Tu código debería verse [así](https://editor.p5js.org/Msqcoding/sketches/Qo-_4zCyE) + + +Cambia el rango en la función `map()`. Puedes modificar el rango de `0, 360` a otro distinto en la línea `map(n, 0, numNotes, 0, 360)` dentro de `drawMelody()`. Esto cambiará el espectro de tonos al que se asignan las notas. + +Por ejemplo, mapear a `50, 250` en lugar de `0, 360` usará un segmento diferente del espectro de color. + + + +Para prepararte para el siguiente paso, considera repasar [p5.Element](/reference/p5/p5.Element/) como [createP()](/reference/p5/createP), [createSelect()](/reference/p5/createSelect), [createInput()](/reference/p5/createInput) y [createButton()](/reference/p5/createButton). También conviene revisar la referencia de MDN sobre [elementos del DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) y [elementos HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). + +También puedes repasar cómo usar y modificar [objetos DOM](/reference/#DOM) visitando el tutorial [Crear y dar estilo a HTML](/tutorials/creating-styling-html). + + +### Paso 7 – Agrega entradas de usuario para personalizar melodías + +Ahora que tenemos un sketch que reproducirá una melodía y mostrará elementos visuales mientras suenan los sonidos, podemos agregar [elementos DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) e interactividad en el lienzo para ayudar a las personas usuarias a personalizar sus objetos de melodía. Los [elementos DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) son [elementos HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) que podemos incluir en aplicaciones web hechas con p5.js. + +Los objetos de melodía tienen 3 propiedades que pueden personalizarse: `name`, `notesIndex` y `tempo`. Las personas usuarias también pueden interactuar con un botón para reproducir la melodía. Empecemos añadiendo un botón de reproducción. + + +#### Paso 7.1 - Agrega un botón de reproducción + +Elimina la función `mousePressed()` de tu código y llama a `createButton()` para crear un botón que reproduzca la melodía. Podemos agregar [objetos DOM](/reference/#DOM), como botones, a nuestro proyecto dentro de `setup():` + +- Llama a `.position(x, y)` para colocar el botón en tu app. +- Llama a `.mouseClicked(play)` para llamar a la función `play()` cuando la persona haga clic en el botón. +- Agrega este código a `setup():` + + ```js + // Botón de reproducción. + let playButton = createButton('🎵 ¡Reproduce tu canción cuando termines! 🎶'); + playButton.position(cWidth * 0.2, 540); + playButton.mouseClicked(play); + ``` + +Tu función `setup()` podría verse así: + +```js +function setup() { + createCanvas(cWidth, 400); + + // Inicializa osciladores y colócalos en el arreglo oscillators. + for (let freq of frequencies) { + osc = new p5.Oscillator(freq); + oscillators.push(osc); + } + + // establece el modo de color en HSB (mejor para colorear teclas con notas) + colorMode(HSB); + + // Botón de reproducción. + let playButton = createButton('🎵 ¡Reproduce tu canción cuando termines! 🎶'); + playButton.position(cWidth * 0.2, 540); + playButton.mouseClicked(play); +} +``` + +- Prueba tu botón para ver si funciona. + +[Ejemplo](https://editor.p5js.org/Msqcoding/sketches/Hym5KUSH8) + + +#### Paso 7.2 - Personaliza el tempo + +Agreguemos un menú desplegable con una lista de tempos para que la persona usuaria pueda elegir. El valor que seleccione actualizará el objeto `melody` que está reproduciendo. Comencemos colocando instrucciones en la app para explicar qué hacer con el menú desplegable. + +- Usa `createP()` para crear un párrafo que invite a las personas usuarias a establecer su tempo. Usa `.style()` y `.position()` para dar estilo y colocar el párrafo. + - Agrega este código en `setup():` + + ```js + // Texto para pedir a las personas usuarias que establezcan el tempo + let p = createP('Paso 1: ¡Selecciona el tempo!'); + p.style("color", "magenta"); + p.position(10, 415); + ``` + +Para agregar un menú desplegable con opciones de tempo, necesitaremos un arreglo `tempoList` con los valores entre los que podrán elegir (medidos en bpm). También necesitaremos una variable que almacene el elemento DOM del menú desplegable. + +- Agrega este código antes de `setup():` + + ```js + // Lista de selección de tempo (en pulsos por minuto). + let tempoList = [ + "100","110","120", + "130", "140", "150", + "160","170","180", + "190", "200", "210", + "220","230", "240", + "250", "260","270", + "280", "290", "300" + ]; + + // Variable para el menú desplegable de tempo. + let tempoSelect; + ``` + +Podemos agregar [objetos DOM](/reference#DOM), como menús desplegables, a nuestro proyecto en `setup():` + +- Usa `createSelect()` para crear un menú desplegable y guardarlo en una variable llamada `tempoSelect`. Establece su posición con `.position()`. Establece la primera opción con el índice `0` usando `.option()`. + - Agrega este código en `setup():` + + ```js + // Menú desplegable de tempo. + tempoSelect = createSelect(); + tempoSelect.position(10, 455); + tempoSelect.option(0); + ``` + +- Usa un bucle `for` para llenar las opciones del menú agregando este código en `setup():` + + ```js + // Agrega tempos a las opciones del menú. + for (let tempo of tempoList) { + tempoSelect.option(tempo); + } + ``` + +- Prueba el menú desplegable para asegurarte de que la lista de tempos se haya cargado correctamente. +- Declara una función personalizada `setTempo()` que establezca `melody.tempo` y `noteDuration` de un objeto de melodía según la elección de la persona usuaria en el menú desplegable. + - Primero, comprueba que el tempo seleccionado no sea 0 (el valor predeterminado). + - Si no es 0, entonces actualiza `melody.tempo` y `noteDuration`. + - Hazlo agregando este código fuera de `setup():` + + ```js + // Establece el tempo del objeto melody + function setTempo() { + // Comprueba que la opción de tempo no sea 0 + if (tempoSelect.selected() !== 0) { + melody.tempo = tempoSelect.selected(); + noteDuration = 60 / melody.tempo; + } + } + ``` + +- Usa `.changed()` para llamar a `setTempo()` cuando la persona seleccione un tempo agregando este código en `setup():` + + ```js + // Llama a setTempo() cuando haya una selección. + tempoSelect.changed(setTempo); + ``` + +- Muestra el tempo de la melodía en el lienzo. + - Agrega este código en `draw():` + + ```js + // Muestra el tempo de la melodía + fill("magenta") + textSize(20) + text(`Tempo: ${melody.tempo}`, 300, 50); + ``` + +- Confirma que `setTempo()` funcione cambiando el tempo con el menú desplegable y luego presionando el botón de reproducción. + +Tu código podría verse como [este ejemplo](https://editor.p5js.org/Msqcoding/sketches/wRg-W6WZI). + + +#### Paso 7.3 - Personaliza los nombres + +Agregaremos instrucciones para que las personas usuarias nombren sus melodías, junto con un cuadro de texto para escribir ese nombre y un botón para actualizar la propiedad `name` del objeto `melody`. + +- Usa `createP()` para crear un párrafo que invite a las personas usuarias a definir el nombre de su melodía, luego usa `.style()` y `.position()` para darle estilo y colocarlo. +- Agrega el siguiente código en `setup():` + + ```js + // Instrucciones para introducir texto. + let p2 = createP('Paso 2: Escribe un nombre para tu melodía y haz clic en "Asignar nombre"'); + p2.style("color", "magenta"); + p2.position(10, 455); + ``` + +- Usa `createInput()` para crear una caja de texto donde las personas puedan escribir un nombre para la melodía, luego usa `.position()` y `.size()` para ubicarla y cambiar su tamaño. + - Agrega el siguiente código en `setup():` + + ```js + // Entrada para el nombre de la canción + nameInput = createInput("Escribe un nombre y asígnalo"); + nameInput.position(10, 490); + nameInput.size(200); + ``` + +- Usa `createButton()` para crear un botón que permita establecer el nombre de la melodía. Usa `.position()` para colocarlo en la app. Usa `.mouseClicked()` para llamar a `setName()` cuando se haga clic en el botón. + - Agrega el siguiente código en `setup():` + + ```js + // Botón para el nombre. + let nameButton = createButton('Asignar nombre'); + nameButton.position(250, 490); + nameButton.mouseClicked(setName); + ``` + +- Define una función llamada `setName()` para actualizar la propiedad `melody.name` con el valor del campo de texto. + - Agrega este código fuera de `setup():` + + ```js + // Establece el nombre de la melodía + function setName() { + melody.name = nameInput.value(); + } + ``` + +- Muestra el nombre de la melodía en el lienzo. + - Agrega este código en `draw():` + + ```js + // Muestra el nombre de la melodía + fill("magenta") + textSize(20) + text(`Nombre de la melodía: ${melody.name}`, 50, 50); + ``` + +Tu proyecto debería verse parecido a [este ejemplo](https://editor.p5js.org/Msqcoding/sketches/JoLAcmGcb). + + +#### Paso 7.4 - Agrega un botón de reinicio + +Crea un botón que reinicie el objeto `melody` para que la persona usuaria pueda llenar un nuevo objeto de melodía. Reiniciar el objeto de melodía permite comenzar a componer una nueva melodía limpiando todas sus propiedades. Como resultado, las personas pueden iniciar su melodía con un objeto vacío. Un objeto de melodía vacío se ve así: + +```js +// Objeto de melodía vacío +let melody = { + name: "", + notesIndex: [], + tempo: 0, + duration: 0 +}; +``` + +- Declara una función que reinicie el objeto de melodía llamada `resetMelody()` agregando el siguiente código fuera de todas las demás funciones: + +```js +// Reinicia el objeto de melodía +function resetMelody() { + // Reinicia las propiedades del objeto de melodía + melody.name = ""; + melody.notesIndex = []; + melody.tempo = 0; + + // Reinicia el menú desplegable de tempo + tempoSelect.selected(0); +} +``` + +- Usa `createButton()` para crear un botón que permita reiniciar el objeto de melodía. Usa `.position()` para colocarlo en la app. Usa `.mouseClicked()` para llamar a `setName()` cuando se haga clic en el botón. + - Agrega el siguiente código en `setup():` + + ```js + // Botón de reinicio + let resetButton = createButton('Reiniciar melodía'); + resetButton.position(150, 580); + resetButton.mouseClicked(resetMelody); + ``` + +Tu proyecto debería verse parecido a [este ejemplo](https://editor.p5js.org/Msqcoding/sketches/JoLAcmGcb). + + +### Paso 8: Agrega teclas interactivas + +Agrega interacciones de clic del mouse a cada tecla del lienzo declarando una función llamada `updateMelody()`. Esta función reproduce las notas que corresponden a la tecla presionada en el lienzo y las agrega a `melody.notesIndex`. En `updateMelody()`: + +- Define una variable local `keyWidth` para las coordenadas `x` y `y` de cada botón usando un bucle `for`. Usaremos el mismo código que utilizamos para generar cada tecla en la interfaz de usuario durante el Paso 5. + - `updateMelody()` debería verse así: + + ```js + // guarda notas según los rectángulos en la pantalla + function updateMelody() { + // ancho de las teclas + let keyWidth = width / numNotes; + + // Recorre cada tecla + for (let i = 0; i < numNotes; i++) { + // establece x y y para cada elemento + let x = i * keyWidth; + let y = keyWidth * 3; + } + } + ``` + +- Agrega una sentencia condicional que compruebe si el mouse está sobre los límites de cada tecla, guarde la nota específica en la variable local `notes`, use el método de arreglo `.push()` para agregar la nota a `melody.notesIndex` y reproduzca la nota. + - Agrega el siguiente código dentro de `updateMelody():` + + ```js + // Comprueba si el mouse está sobre la tecla + if (mouseX > x && + mouseX < x + keyWidth && + mouseY > y && + mouseY < y + keyWidth * 2) { + + // guarda el arreglo de índices de notas + let notes = melody.notesIndex; + + // agrega el índice de la nueva nota al arreglo + notes.push(i); + + // reasigna al objeto melody + melody.notesIndex = notes; + + // reproduce la nota en ese índice + playNote(i); + } + ``` + +- Reemplaza la llamada de función en `mousePressed()` por una llamada a la función `updateMelody()`. + +`updateMelody()` y `mousePressed()` deberían verse así: + +```js +// actualiza el objeto melody cuando se hace clic en el lienzo +function mousePressed() { + updateMelody(); +} + +// guarda notas según los rectángulos en la pantalla +function updateMelody() { + // ancho de las teclas + let keyWidth = width / numNotes; + + // Bucle para la cantidad de notas disponibles + for (let i = 0; i < numNotes; i++) { + // establece x y y para cada elemento + let x = i * keyWidth; + let y = keyWidth * 3; + + // Comprueba si el mouse está sobre la tecla + if (mouseX > x && + mouseX < x + keyWidth && + mouseY > y && + mouseY < y + keyWidth * 2) { + + // guarda el arreglo de índices de notas + let notes = melody.notesIndex; + + // agrega el índice de la nueva nota al arreglo + notes.push(i); + + // reasigna al objeto melody + melody.notesIndex = notes; + + // reproduce la nota en ese índice + playNote(i); + } + } +} +``` + +Para una experiencia de usuario más fluida, reemplaza el objeto de melodía de la escala de Do mayor por un objeto de melodía vacío. Así, tu Aplicación simple de melodías comenzará con un objeto `melody` vacío y las personas usuarias podrán empezar a componer sus propias melodías desde cero. + +[Ejemplo final de Aplicación simple de melodías](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe) + + +## Siguientes pasos + +- Sigue [Comenzar con Node.js](/tutorials/getting-started-with-nodejs) para permitir que las personas usuarias guarden y vuelvan a reproducir melodías desde sus computadoras. + + +## Recursos + +Coding Train: [Tutorial de síntesis de sonido con p5.js](https://www.youtube.com/watch?app=desktop\&v=Bk8rLzzSink) + +Recursos de ciencia + +- [Sonido - definición](https://www.britannica.com/science/sound-physics) +- [Teoría de partículas de la materia](https://letstalkscience.ca/educational-resources/backgrounders/introduction-particle-theory-matter) +- [¿Cómo se ve el sonido?](https://www.youtube.com/watch?v=px3oVGXr4mo) - video +- [El sonido es una onda de presión](https://www.physicsclassroom.com/class/sound/u11l1c.cfm) +- [Ondas de presión y ciclos](https://www.open.edu/openlearn/science-maths-technology/engineering-technology/sound-music-technology-an-introduction/content-section-2.3) +- [Ondas sonoras y el tímpano](https://www.physicsclassroom.com/mmedia/waves/edl.cfm) +- [Ondas sinusoidales](https://www.investopedia.com/terms/s/sinewave.asp#:~:text=A%20sine%20wave%20is%20a,oscillates%20above%20and%20below%20zero.) +- [Categorías de ondas](https://www.physicsclassroom.com/class/waves/Lesson-1/Categories-of-Waves) +- [Altura y frecuencia](https://www.physicsclassroom.com/class/sound/Lesson-2/Pitch-and-Frequency) + +Recursos de música + +- [Música - definición](https://www.britannica.com/art/music) +- [¿Qué es una melodía?](https://www.masterclass.com/articles/music-101-what-is-melody) +- [Nota musical](https://www.simplifyingtheory.com/music-note/) +- [¿Qué es un oscilador?](https://www.techtarget.com/whatis/definition/oscillator) +- [Amplitud y frecuencia](https://www.howmusicworks.org/103/Sound-and-Music/Amplitude-and-Frequency) +- [Comprender las frecuencias de las notas](https://producelikeapro.com/blog/note-frequency-chart/) +- [¿Qué son la síntesis y el diseño sonoro?](https://www.youtube.com/watch?v=qV10Gb-Dvao) - video +- [¿Qué son las frecuencias musicales?](https://www.idrumtune.com/ultimate-guide-to-musical-frequencies/) +- [Tabla de frecuencias de notas musicales](https://mixbutton.com/mixing-articles/music-note-to-frequency-chart/) +- [Do central](https://www.sciencedirect.com/topics/mathematics/middle-c) +- [Do mayor](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm) +- [Duración de la nota](https://classicalguitarshed.com/theory-note-duration/) +- [¿Qué es el tempo?](https://www.hoffmanacademy.com/blog/what-is-tempo-in-music/) +- [Lista de escalas musicales](https://piano-music-theory.com/2016/05/31/major-scales/) +- [Escalas musicales y frecuencias](https://www.swarthmore.edu/NatSci/ceverba1/Class/e5_2006/MusicalScales.html) +- [¿Qué es una octava?](https://www.masterclass.com/articles/music-101-what-is-an-octave) +- [Comprender el ritmo](https://www.masterclass.com/articles/understanding-rhythm-in-music#RmoSLdJ8MF39r27j2PKur) + +Recursos de programación + +- [Node.js](https://nodejs.org/en/about) +- [Express.js](https://expressjs.com/) +- [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) +- [Arreglos de JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) + - [.push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) +- [Objetos JSON de JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) +- [setTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) +- [Experiencia de usuario (UX) vs interfaz de usuario (UI)](https://clearbridgemobile.com/mobile-app-design-fundamentals-user-experience-user-interface/) +- [El sistema de color HSB](https://www.learnui.design/blog/the-hsb-color-system-practicioners-primer.html) From a9cf0132127ed5327f961606ad5155425a2fa180 Mon Sep 17 00:00:00 2001 From: HoracioValdes Date: Mon, 20 Apr 2026 14:59:50 -0400 Subject: [PATCH 2/4] getting-started-with-nodejs spanish translation --- .../es/getting-started-with-nodejs.mdx | 244 ++++++++++++++++++ 1 file changed, 244 insertions(+) create mode 100644 src/content/tutorials/es/getting-started-with-nodejs.mdx diff --git a/src/content/tutorials/es/getting-started-with-nodejs.mdx b/src/content/tutorials/es/getting-started-with-nodejs.mdx new file mode 100644 index 0000000000..8b69ab86b4 --- /dev/null +++ b/src/content/tutorials/es/getting-started-with-nodejs.mdx @@ -0,0 +1,244 @@ +--- +title: "Primeros pasos con Node.js" +description: Aprende sobre las solicitudes HTTP y cómo usar Node.js en tus proyectos de p5.js para crear proyectos dinámicos que guarden y recuperen archivos. +category: advanced +categoryIndex: 4 +featuredImage: ../images/featured/node.png +featuredImageAlt: Un logotipo de p5.js con notas musicales encima tiene flechas etiquetadas con métodos HTTP que apuntan a una nube con la palabra “Internet”. Sobre la nube hay un ícono que dice “http\://”. Las flechas apuntan desde la nube hacia un cubo rosa etiquetado “Servidor web”, con el logotipo de Node.js encima. +relatedContent: + references: + - en/p5/preload + - en/p5/loadjson +authors: + - Layla Quiñones + - Nick McIntyre +--- + +En esta guía, exploraremos la combinación de p5.js y [Node.js](http://node.js) para crear aplicaciones dinámicas que guarden y recuperen dibujos, animaciones y proyectos sonoros generados por las personas usuarias. Por ejemplo, puedes crear una [aplicación simple de melodías](/tutorials/simple-melody-app/) en la que guardes archivos con melodías creadas al interactuar con el lienzo. Node.js te permite guardar, reproducir de nuevo y editar estos archivos fácilmente desde el navegador. + + +![Un logotipo de p5.js con notas musicales encima tiene flechas etiquetadas con métodos HTTP que apuntan a una nube con la palabra “Internet”. Sobre la nube hay un ícono que dice “http://”. Las flechas apuntan desde la nube hacia un cubo rosa etiquetado “Servidor web”, con el logotipo de Node.js encima.](../images/advanced/node.png) + +Este tutorial es la parte 2 de una serie de 3 tutoriales que te guían en la creación de distintas versiones de una aplicación de melodías. + +- Parte 1: Desarrollarás una [aplicación simple de melodías](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe) donde las personas usuarias pueden componer melodías a partir de una escala musical y reproducirlas. +- Parte 2: En este tutorial, aprenderás a usar [Node.js](https://nodejs.org/en/about) y [Express.js](https://expressjs.com/) para enrutar solicitudes [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) que recuperan y reproducen melodías guardadas en tu computadora. +- Parte 3: En Aplicación de melodías con Node.js (¡próximamente!), aprenderás a integrar tu [aplicación simple de melodías](https://editor.p5js.org/Msqcoding/sketches/w_4t5bFYe) con [Node.js](https://nodejs.org/en/about) y [Express.js](https://expressjs.com/). Desarrollarás una aplicación de melodías más compleja en la que las personas usuarias podrán guardar melodías en sus computadoras y recuperarlas para reproducirlas más tarde. + + +## Requisitos previos + +- Esta guía asume que ya conoces los conceptos básicos de JavaScript presentados en los [tutoriales de introducción a p5.js](/tutorials/get-started) y los conceptos básicos de desarrollo web explicados en los tutoriales de [Diseño web](/tutorials/creating-styling-html). +- Esta guía requiere que uses un entorno de desarrollo integrado (IDE) instalado en tu computadora. Asegúrate de entender cómo cargar y guardar archivos en el IDE que elijas. Visita el tutorial [Configurar tu entorno](/tutorials/setting-up-your-environment) para aprender a crear y editar proyectos de p5.js en el IDE [Visual Studio Code.](https://code.visualstudio.com/download) + + +## Introducción al Protocolo de Transferencia de Hipertexto (HTTP) + +¿Alguna vez te has preguntado por qué muchas URL de sitios web comienzan con `https://...`? A las computadoras conectadas a internet se les llama [clientes y servidores](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works). Un cliente es la computadora que usas para acceder a internet, y los servidores son computadoras que almacenan información como páginas web y aplicaciones. Cuando usas un navegador web para acceder a [internet](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work), el navegador utiliza [HTTP (Hypertext Transfer Protocol)](https://developer.mozilla.org/en-US/docs/Web/HTTP) para comunicarse con los servidores donde viven recursos como documentos HTML, imágenes, hojas de estilo, scripts, etc. Cada vez que ves una página en el navegador, este necesita comunicarse con servidores web para recuperar el contenido que estás viendo. + +Cuando usas el [Editor Web de p5.js](https://editor.p5js.org/), tu código se ejecuta dentro de un navegador web; por eso, los [métodos HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) se utilizan para recuperar, almacenar, modificar y eliminar tus proyectos. Cuando construyes aplicaciones y proyectos en los que las personas usuarias leen o escriben archivos al interactuar con ellos, los [métodos HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) también se usan para que este proceso sea seguro y sencillo. + +![Un diagrama que ilustra cómo el Editor Web de p5.js usa el método HTTP GET para recuperar los archivos index.html, sketch.js y style.css desde un servidor web y renderizar un sketch. Las flechas comienzan en el editor dentro de un navegador web, pasan por una nube etiquetada “Internet” y apuntan a un recuadro rosa etiquetado “Servidor web”.](../images/advanced/client-server-diagram.svg) + +Los siguientes [métodos HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) son comunes al integrar solicitudes HTTP en un proyecto de p5.js: + +- [GET](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET): Cuando desarrollas proyectos que requieren recuperar archivos desde un servidor específico, se utiliza el método GET. GET envía una solicitud al servidor para obtener el recurso solicitado, normalmente identificado por una URL. +- [POST](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST): Al guardar archivos nuevos en un servidor, el método POST envía una solicitud para enviar cambios al servidor. +- [PUT](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/PUT): Al actualizar o reemplazar archivos existentes en un servidor, el método PUT solicita que el servidor actualice o sustituya un recurso que ya existe. +- [DELETE](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/DELETE): Al eliminar archivos existentes en un servidor, el método DELETE solicita que el servidor borre un recurso que ya existe. + + +### Paso 1: Configurar el código en un editor externo + +Descarga y abre [esta carpeta de proyecto](https://github.com/MsQCompSci/melody_app_starter) en tu editor. Si nunca has usado GitHub, aquí tienes cómo hacerlo: presiona el botón “<> Code” y selecciona “Download Zip”. El archivo `.zip` que se descarga automáticamente a tu computadora contiene una carpeta llamada `public` con todos los archivos de p5.js necesarios para ejecutar un programa de p5.js, un archivo `server.js` que habilita Node.js y una carpeta llamada `songs` con los archivos que leerás en tu proyecto. + +![Una captura de la ventana desplegable que aparece al presionar el botón verde etiquetado “<> Code” en la página web de un repositorio de GitHub. Un círculo rojo resalta el botón verde de código y la opción “Download Zip” en el menú desplegable.](../images/advanced/download-zip-github.png) + + +### Paso 2: Instalar Node.js y Express.js + +[Node.js](https://nodejs.org/) proporciona un entorno de ejecución rápido y eficiente para ejecutar código JavaScript fuera del navegador web. [Express.js](https://expressjs.com/) es un framework que simplifica rutinas y métodos de [Node.js](https://nodejs.org/) para que sea más fácil crear aplicaciones web potentes. Como [Express.js](https://expressjs.com/) depende de módulos y funcionalidades de [Node.js](https://nodejs.org/), primero instalarás [Node.js](https://nodejs.org/). + +Aprende más sobre [Node.js](https://nodejs.org/) y [Express.js](https://expressjs.com/) visitando estos recursos: + +- [Introduction to Node](https://www.youtube.com/watch?v=bjULmG8fqc8) - videotutorial +- [What is Node.js?](https://www.youtube.com/watch?v=yEHCfRWz-EI) - video +- [Node.js vs Express.js](https://www.youtube.com/watch?v=HFF4NQEGG-Y) - video +- [Documentación de Node.js](https://nodejs.org/docs/latest/api/) +- [Referencia de Express.js](https://expressjs.com/en/4x/api.html) + + +#### Instalar Node.js + +Para Windows y macOS: + +- Descarga el instalador: Ve al [sitio web de Node.js](https://nodejs.org/) y descarga el instalador para tu sistema operativo. Se recomienda descargar la versión LTS (Long Term Support) para tener mayor estabilidad. +- Ejecuta el instalador: Cuando termine la descarga, ejecuta el instalador y sigue las instrucciones. Esto instalará tanto [Node.js](https://nodejs.org/) como [npm](https://nodejs.org/en/learn/getting-started/an-introduction-to-the-npm-package-manager) (Node Package Manager), que se usa para gestionar paquetes de JavaScript. +- Verifica la instalación: Para asegurarte de que [Node.js](https://nodejs.org/) y [npm](https://nodejs.org/en/learn/getting-started/an-introduction-to-the-npm-package-manager) estén instalados correctamente, abre tu terminal (Símbolo del sistema en Windows o Terminal en macOS) y escribe: + +```sh +node -v + +npm -v +``` + +Visita estos recursos para obtener más información sobre cómo usar la terminal en tu computadora: + +- [Símbolo del sistema](https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/windows-commands) - Windows +- [Terminal de Mac](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac#:~:text=Click%20the%20Launchpad%20icon%20in,%2C%20then%20double%2Dclick%20Terminal) - Apple + +Estos comandos deberían mostrar las versiones de Node.js y npm instaladas en tu computadora. Por ejemplo, podrías ver `v20.11.1` en la terminal después de escribir `node -v` y presionar la tecla Enter (o Return). Esto significa que instalaste correctamente la versión `20.11.1` de Node.js. Si Node.js no está instalado, es posible que en su lugar aparezca un mensaje de error indicando que `node` no se reconoce como un comando. Del mismo modo, podrías ver `10.2.4` después de escribir `npm -v` y presionar Enter. Si npm no está instalado en tu computadora, también podrías recibir un mensaje de error. En algunos casos, conviene verificar la instalación después de reiniciar la computadora para asegurarte de que el software recién instalado aparezca correctamente en la terminal. + + +#### Instalar Express.js + +Usa [`npm`](https://nodejs.org/en/learn/getting-started/an-introduction-to-the-npm-package-manager) para instalar Express.js: cambia el directorio en la terminal para que apunte a la carpeta del proyecto del paso 1. Por ejemplo, si la carpeta se llama `melody-app-starter-main` y se descargó en la carpeta `downloads` de tu computadora, puedes cambiar el directorio desde la terminal usando el siguiente comando y presionando Enter: + +```sh +cd downloads/melody_app_starter-main +``` + +- **Crea un archivo [`package.json`](https://docs.npmjs.com/cli/v10/configuring-npm/package-json):** Escribe el siguiente comando en la terminal y presiona Enter: + + ```sh + npm init -y + ``` + + La terminal debería mostrar el contenido del nuevo archivo [`package.json`](https://docs.npmjs.com/cli/v10/configuring-npm/package-json) que acabas de crear en el directorio de tu proyecto. Este comando inicializa un proyecto nuevo de Node.js con valores predeterminados. El mensaje puede incluir algo como esto: + + ```json + { +   "name": "melody_app_starter", +   "version": "1.0.0", +   "description": "p5.Oscillator and Express.js", +   "main": "server.js", +   "scripts": { +     "test": "echo \"Error: no test specified\" && exit 1", +     "start": "node server.js" +   }, +   "keywords": [], +   "author": "", +   "license": "ISC" + } + ``` + + Consulta la documentación de [`package.json`](https://docs.npmjs.com/cli/v10/configuring-npm/package-json) en la [referencia de npm](https://docs.npmjs.com/about-npm) para aprender más. + +- **Instala Express.js:** Escribe el siguiente comando en la terminal y presiona Enter: + + ```sh + npm install express + ``` + + Observa cómo se usa `npm` para acceder a Express.js. + +- **Verifica la instalación:** Puedes comprobar que Express.js está instalado en tu computadora escribiendo el siguiente comando en la terminal y presionando Enter: + + ```sh + npm list + ``` + + Tu terminal debería mostrar una estructura en árbol con todos los paquetes de npm instalados en tu computadora. Si Express.js está instalado, deberías ver algo similar a esto: + + ``` + melody_app_starter-main@1.0.0 /Users/..filepath + + └── express@4.19.1 + ``` + + Esto indica que en tu computadora está instalada la versión 4.19.1 de Express.js. También puedes revisar la carpeta `node_modules` en el directorio de tu proyecto (por ejemplo, en la carpeta `melody-app-starter-main`) para ver si Express.js aparece allí. + +- **Ejecuta el servidor:** En tu terminal, escribe el siguiente comando y presiona Enter: + + ```sh + node server.js + ``` + + Si todo está instalado correctamente y el servidor de Node.js funciona, debería aparecer un mensaje en la terminal como este: + + ``` + Server running at http://localhost:3000 + ``` + +- **Prueba el servidor:** Abre un navegador web y ve a [**http://localhost:3000**](http://localhost:3000). Deberías ver un elemento `canvas` vacío en el navegador. + + +### Paso 3: Leer nombres de archivos desde una carpeta en el servidor + +- Abre VSCode, o el editor de código que prefieras, y abre el archivo `melody_app_starter-main`. +- Revisa el árbol de archivos para ubicar las carpetas y archivos del proyecto. +- Para permitir leer archivos JSON desde el servidor, agregaremos instrucciones en el archivo `server.js` usando una solicitud HTTP [GET](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET). En `server.js`, agrega el siguiente código debajo de `let app = express()`: + +```js +//initialize file system module +let fs = require('fs'); + +// API endpoint to get list of songs +app.get('/songs', (req, res) => { +  fs.readdir('songs', (err, files) => { +    if (err) { +      res.status(500).send('Error reading song files'); +    } else { +      res.json({ files }); +    } +  }); +}); +``` + +El código anterior inicializa el [módulo del sistema de archivos (`fs`)](https://nodejs.org/api/fs.html), que proporciona APIs para interactuar con los sistemas de archivos de una computadora. También usa el método `app.get()`, que maneja solicitudes HTTP GET dirigidas a la URL `/songs`. Aquí usarás el módulo del sistema de archivos para leer los nombres de archivos de la carpeta, convertirlos en un objeto JSON y enviarlos como respuesta a la solicitud GET. + +Ahora que ya indicaste a la solicitud GET cómo leer los nombres de archivo de la carpeta `songs`, podemos cargar esos nombres como un objeto JSON en `sketch.js`. + +- Usa `preload()` y `loadJSON()` para cargar los archivos de la carpeta `songs` en una variable global llamada `songs`. Visita la [referencia de p5.js](/reference) para aprender más sobre [`preload()`](/reference/p5/preload) y [`loadJSON()`](/reference/p5/loadJSON). +- Usa `console.log(songs)` en `setup()` para imprimir el contenido del arreglo JSON. + +Tu archivo `sketch.js` debería verse así: + +```js +//variable for JSON object with file names +let songs; + +function preload() { +  //load and save the songs folder as JSON +  songs = loadJSON("/songs"); +} + +function setup() { +  createCanvas(400, 400); +  console.log(songs) +} + +function draw() { +  background(220); +} +``` + +Mira la consola del navegador para asegurarte de que la salida de la variable `songs` se vea más o menos así: + +``` +Object i +  files: Array(3) +    0: "C Major Scale.json" +    1: "Frere Jacques.json" +    2: "Mary's Lamb.json" +    length: 3 +// ...prototype +``` + +Ahora estás listo para crear la [aplicación de melodías](./simple-melody-app). Puedes acceder al código completo de esta guía en [este repositorio de GitHub](https://github.com/MsQCompSci/melodyAppNodeStarter/tree/main). + + +## Próximos pasos + +- Lee sobre la biblioteca [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) y experimenta con [este ejemplo](https://editor.p5js.org/Msqcoding/sketches/wSFTn9G9E). +- Aprende a usar [`app.post()`](https://expressjs.com/en/5x/api.html#app.post.method) y [`fs.writeFile()`](https://nodejs.org/en/learn/manipulating-files/writing-files-with-nodejs) para guardar archivos creados por las personas usuarias con tu aplicación de p5.js, visitando los enlaces de referencia. + + +## Recursos + +- [Cómo funciona la web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works) +- [Métodos HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) + - [GET](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) + - [POST](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) + - [PUT](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/PUT) + - [DELETE](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/DELETE) From adf9d86b9ef43a0a94f2c7ecec3eef8fad2a34a7 Mon Sep 17 00:00:00 2001 From: HoracioValdes Date: Mon, 20 Apr 2026 15:05:01 -0400 Subject: [PATCH 3/4] Started translation for setting-up-your-environment --- .../es/setting-up-your-environment.mdx | 482 ++++++++++++++++++ 1 file changed, 482 insertions(+) create mode 100644 src/content/tutorials/es/setting-up-your-environment.mdx diff --git a/src/content/tutorials/es/setting-up-your-environment.mdx b/src/content/tutorials/es/setting-up-your-environment.mdx new file mode 100644 index 0000000000..c1c1a96b1b --- /dev/null +++ b/src/content/tutorials/es/setting-up-your-environment.mdx @@ -0,0 +1,482 @@ +--- +title: "Configuración del entorno de desarrollo" +description: Un breve tutorial para configurar el editor web p5.js y VS Code para escribir y guardar proyectos p5.js. +category: introduction +categoryIndex: 0 +featuredImage: ../images/featured/SetupA.jpg +featuredImageAlt: An interactive sketch in the p5.js Editor draws circles on the canvas as the mouse pointer moves. +relatedContent: + references: + - en/p5/setup + - en/p5/draw + - en/p5/background +authors: + - Layla Quiñones + - Jaleesa Trapp +--- + +import EditableSketch from "../../../components/EditableSketch/index.astro"; +import Callout from "../../../components/Callout/index.astro"; + +![Logos for p5.js and Visual Code Studio.](../images/introduction/p5VScode.png) + + +## Introduction + +To begin writing code using [p5.js](/reference/), you need to set up the coding environment you will use to write and save your programs. In this guide, you will: + +1. Set up your coding environment on the web using the [p5.js Web Editor](https://editor.p5js.org/), or on your computer using [Visual Studio Code (VS Code).](https://code.visualstudio.com/) +2. Use the [p5.js reference](/reference/) to help you write your first simple program using shapes and color. +3. Save and share your code. + + +## What you will need + +1. Access to the internet and a desktop browser such as: + - [Chrome](https://www.google.com/chrome/dr/download/?brand=SJWC\&geo=US\&gclid=Cj0KCQjw-pyqBhDmARIsAKd9XIM88u9RUlUagd7fpeqWx3AL_8VbhoIFULSME9tiz87t00L64-wLAlMaAm_QEALw_wcB\&gclsrc=aw.ds) + - [Firefox](https://www.mozilla.org/en-US/firefox/) + - [Safari](https://www.apple.com/safari/) + - [Edge](https://www.microsoft.com/en-us/edge?ep=193\&form=MA13L2\&es=40) +2. A desktop computer, laptop, or chromebook + + +## Step 0: Choose the type of coding environment  + +You can begin your coding journey with [p5.js](/reference/) using the [p5.js Web Editor](https://editor.p5js.org/) or [VS Code](https://code.visualstudio.com/).  + +The [p5.js Web Editor](https://editor.p5js.org/) is a website where programmers can write, test, share, or remix p5.js programs without needing to download or configure a *code editor* on a computer. A *code editor* makes writing and reading code easier by organizing and coloring text in a way that helps programmers see different parts of the code. + +[VS Code](https://code.visualstudio.com/) is a popular code editor you install on your computer that provides a more advanced coding experience. Depending on your needs, choose the coding environment that is best for you. + +- [Link to p5.js Web Editor how-to](#web-editor) +- [Link to VS Code how-to](#vscode) + +If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.org/)! + + +## Using the p5.js Web Editor + +### Step 1: Open the [p5.js Web Editor](https://editor.p5js.org/) sign-up page + +- Open a desktop browser on your computer and go to [https://editor.p5js.org/](https://editor.p5js.org/). +- Click the [“Sign up”](https://editor.p5js.org/signup) link on the top-right of the web page. + +![An arrow to the “Sign Up” link.](../images/introduction/p5_editor_sign_up.png) + + +### Step 2: Create an account with [p5.js Web Editor](https://editor.p5js.org/) + +- Once on the [sign-up page](https://editor.p5js.org/signup), create an account on the [p5.js Web Editor](https://editor.p5js.org/) using one of the following options: +- Manual sign-up + - Create a username. + - Enter your email address. + - Create and confirm a password.  + - Click the “Sign Up” button. + +![An arrow pointing to the highlighted fields on the Sign Up page, as described above.](../images/introduction/p5_editor_sign_up_page.png) + +- Using a Google account + - Click on the button on the bottom of the page that says “Login with Google.”  + +![A Google login button displaying “Login with Google”](../images/introduction/login-with-google.png) + +- Follow the prompts to enter your email and password for your Google account (if necessary).  +- Using a Github account + - Click on the button on the bottom of the page that says “Login with GitHub.”  + +![A Github login button displaying “Login with Github”](../images/introduction/login-with-github.png) + +- Follow the prompts to enter your username and password for GitHub. +- Authorize the [p5.js Web Editor](https://editor.p5js.org/) to access your GitHub details by clicking the “Authorize processing” button. + +![A GitHub third party authorization window informing users that p5.js Web Editor wants to access their GitHub account and read email addresses from their personal user data. Users can cancel the request by clicking the “Cancel” button, or approve the request by clicking the “Authorize processing” button.](../images/introduction/github-auth.png) + + +### Step 3: Explore the [p5.js Web Editor](https://editor.p5js.org/) + +The [p5.js Web Editor](https://editor.p5js.org/) is an online environment where programmers can write and test their p5.js code. Explore the different elements of the [p5.js Web Editor](https://editor.p5js.org/) and their functions.  + +The following diagram labels and describes each element of the editor’s interface: + +![A labeled diagram of the p5.js Web Editor’s user interface.](../images/introduction/p5_editor_interface_breakdown.png) + +{/* ![Play and Stop buttons.](../images/introduction/p5_editor_play_start.png) +![Settings button with a gear icon in the center.](../images/introduction/p5_editor_settings.png) */} + + +### Step 4: Name, save, and run your first sketch + +- Name your projects by clicking on the pencil icon above the text editor and typing in a name for your project. + +![An arrow points to a pencil icon to rename a sketch.](../images/introduction/p5_editor_naming_a_sketch.png) + +- Save projects by clicking on *File* in the top toolbar, and selecting *Save*.  + - Make sure you are logged in to your account or you will not be able to save the sketch. + - Saving projects frequently helps to ensure that code isn’t lost if something happens to your computer, browser, or internet connection while you are coding. + +![A user on the p5.js Web Editor names a new project and saves it.”](../images/introduction/p5_editor_saving_a_sketch.png) + +![An arrow pointing to a notification box with the text “Sketch saved.”](../images/introduction/p5_editor_saved_sketch_notification.png) + +To view the output of your code, click the *Play* button in the top left corner:  + +![A blank canvas appears in the preview window of the p5.js Web Editor when a user clicks on the “Play” button in the top right corner.](../images/introduction/p5_editor_running_a_sketch.png) + +A *p5.js sketch* is a text file with code written in the *JavaScript* programming language. *JavaScript* is a programming language used to make web pages interactive. p5.js is a library written in *JavaScript* – which is why it ends in “*.js*” for *JavaScript*. With p5.js, you can create programs that are colorful and animated, with features that users can interact with! To learn more about some of the things you can do with p5.js, watch the [p5.js Welcome Video!](https://hello.p5js.org/) To learn more about JavaScript, you can visit [this resource.](https://developer.mozilla.org/en-US/docs/Web/JavaScript) + +The editor begins with the following code in the *sketch.js* file: + +```js +function setup() { +  createCanvas(400, 400); +} +function draw() { +  background(220); +} +``` + +The code above creates a canvas element in the preview that is 400 pixels wide and 400 pixels high. It also sets the background to a shade of gray.  + + +#### `createCanvas()` + +Computer screens are made up of tiny lights called *pixels*, which are the smallest elements that make up any image. The line of code that creates a canvas in the preview window is [`createCanvas(400, 400)`](/reference/p5/createCanvas). Without this line of code, there will be no canvas to draw on! The numbers 400, 400 correspond to the width and the height of the canvas in pixels. These numbers are also known as *arguments* for the [`createCanvas()`](/reference/p5/createCanvas) function.  + +Any values that you place within parentheses of a function are called *arguments*: any value used to customize functions. [`createCanvas()`](/reference/p5/createCanvas) appears within the [`setup()`](/reference/p5/setup) function to create an HTML canvas element that you can draw on.  + +To learn more, visit the [p5.js reference](/reference) pages for [`setup()`](/reference/p5/setup) and [`createCanvas()`](/reference/p5/createCanvas). + + +### Step 5: Change the color of the canvas + +- You can type commands for any sketch in the text editor, and view the output of your code in the preview window by clicking *Play*.  +- Change the background color of your canvas by changing the *argument* for the [`background()`](/reference/p5/background) function.  + - Change `background(220);` to `background("aqua");` and press *Play*. + +```js +function setup() { +  createCanvas(400, 400); +} +function draw() { +  background("aqua"); +} +``` + + +#### `background()` + +The `background()` function colors the background a specific color. You can use words inside quotations or numbers to color the background of the canvas. To learn more, visit the [p5.js reference](/reference) pages for [`background()`](/reference/p5/background) & [color](/reference/p5/color). + + +### Step 6: Draw shapes on the canvas + +- Draw a circle on the canvas. + - Add the following text under the [`background()`](/reference/p5/background) function: + + ```js + //circle in the center with a width of 100 + circle(200,200,100); + ``` + +- Click the *Play* button. + +Your code should look like this: + +```js +function setup() { +  createCanvas(400, 400); +} +function draw() { +  background(220); + +  // Draw a circle in the center with +  // a width of 100. +  circle(200, 200, 100); +} +``` + +#### `draw()` + +You can draw shapes on the canvas by typing specific commands for shapes within the curly brackets `{}` after [`function draw()`](/reference/p5/draw).  + +The sketch above draws a circle on the canvas by calling the [`circle()`](/reference/p5/circle) function within [`draw()`](/reference/p5/draw). The first two *arguments –* `200, 200` – place the circle in the center of the canvas, and the last *argument* – `100` – indicates that the circle is 100 pixels wide. The comments embedded in the sketch in the lines above the [`circle()`](/reference/p5/circle)` `function describe what the code does. To learn more, visit the [p5.js reference](/reference/) pages for [`draw()`](/reference/p5/draw) and [`circle()`](/reference/p5/circle). + + +### Step 7: Create! + +p5.js has many functions you can use to incorporate both static and interactive elements in your canvas.  + +- Replace the background and circle commands with the following text: + + ```js + //when mouse button is pressed, circles turn black + if (mouseIsPressed === true) { +   fill(0); + } else { +   fill(255); + } + + //white circles drawn at mouse position + circle(mouseX, mouseY, 100); + ``` + +Your code should look like this: + + + + +Press and hold the mouse button as you drag the mouse pointer over the canvas. + + + +The code above draws white circles in the same position as the mouse pointer. When a mouse button is pressed, the circle’s color changes to black.  + +Visit the [p5.js reference](/reference/) for more p5.js functions like [2D Primitive shapes](/reference/#Shape/).  + + +### Errors + +It is easy to spell function names wrong or forget a comma. Syntax rules help the computer interpret code. When a “rule” is broken, an error message will appear in the console (for example, if [`circle()`](/reference/p5/circle) is spelled wrong). These errors are commonly referred to as “bugs.” The console displays messages from the editor with details about any mistakes you might have made. When your code does not execute correctly, there might be a bug in your code! + +Visit the [Field Guide to Debugging](/tutorials/field-guide-to-debugging) for more information on how to fix errors in your code. + + +#### Accessibility Note: + +If you are using a screen reader, you must turn on the accessible outputs in the [p5.js Web Editor](https://editor.p5js.org/) and add the accessibility library in your html. To learn more, visit our guide to [using the p5.js Web Editor with a screen reader.](/tutorials/p5js-with-screen-reader/) + +### Step 8: Share Your Project + +Once your project is saved, you can share it! + +- Share projects by clicking *File* in the upper toolbar, selecting *Share*, and copying one of the links provided. You can share your projects in three different ways: + - Embed: Add your p5.js sketch to a website or blog that uses html (does not show code). + - Fullscreen: Share your project with a link (does not show code). + - Edit: Share your project code in the p5.js editor with a link. + + +## Next steps:  + +- Next Tutorial: [Get Started](/tutorials/get-started) +- Explore some [p5.js examples](/examples/) + + +## Resources: + +- [p5.js Welcome Video](https://hello.p5js.org/) +- The Coding Train: [1.2: p5.js Web Editor - p5.js Tutorial](https://www.youtube.com/watch?v=MXs1cOlidWs) +- [p5.js reference page](/reference/) +- [Javascript - MDN reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) +- [Field Guide to Debugging](/tutorials/field-guide-to-debugging) +- [How to Use the p5.js Web Editor with a Screen Reader](/tutorials/p5js-with-screen-reader/) + +--- + + +## Using VS Code + +[VS Code](https://code.visualstudio.com/) offers a more advanced code editing experience compared to the Web Editor. We recommend this option if you’re already familiar with VS Code. + + +### Step 1: Download VS Code + +- Download VS Code onto your device using [this link](https://code.visualstudio.com/download). +- Explore the features of VS Code and various setup options using [these resources](https://code.visualstudio.com/docs/getstarted/introvideos). + + +### Step 2: Install the p5.js library extension + +- Open VS Code and navigate to the extensions manager on the left toolbar. +- Type [*p5.js 2.x Project Generator*](https://marketplace.visualstudio.com/items?itemName=Irti.p5js-project-generator) in the search bar, select the extension, and click the install button. +- Familiarize yourself with details for this extension [here](https://github.com/IrtizaNasar/p5-2.vscode/blob/main/README.md). + + +### Step 3: Create a p5.js project + +- Click on *View* on the top toolbar and select Command Palette. +- Type *Create a new p5.js 2.x Project* in the search bar and select the command. +- Follow the prompts to configure your project. +- Select the folder on your machine where you would like to save your project. + + +### Step 4: View your first sketch + +To view the preview for your code: + +- Right click on the *index.html* file in the *VSCODE* tab on the left Explorer panel. +- Select *Open Live Server*.  +- A window will open in your default browser with the output of your project. + +A *p5.js sketch* is a text file with code written in the *JavaScript* programming language. *JavaScript* is a programming language used to make web pages interactive. p5.js is a library written in *JavaScript* – which is why it ends in “*.js*” for *JavaScript*. With p5.js, you can create programs that are colorful and animated, with features that users can interact with! To learn more about some of the things you can do with p5.js, watch the [p5.js Welcome Video!](https://hello.p5js.org/) To learn more about JavaScript, you can visit [this resource.](https://developer.mozilla.org/en-US/docs/Web/JavaScript) + +The editor begins with the following code in the *sketch.js* file and preview: + + + +The code above creates a canvas element in the preview that is 400 pixels wide and 400 pixels high. It also sets the background to a shade of gray.  + + +#### `createCanvas()` + +Computer screens are made up of tiny lights called *pixels*, which are the smallest elements that make up any image. The line of code that creates a canvas in the preview window is [`createCanvas(400, 400)`](/reference/p5/createCanvas). Without this line of code, there will be no canvas to draw on! The numbers 400, 400 correspond to the width and the height of the canvas in pixels. These numbers are also known as *arguments* for the [`createCanvas()`](/reference/p5/createCanvas) function.  + +Any values that you place within parentheses of a function are called *arguments*: any value used to customize functions. [`createCanvas()`](/reference/p5/createCanvas) appears within the [`setup()`](/reference/p5/setup) function to create an HTML canvas element that you can draw on.  + +To learn more, visit the [p5.js reference](/reference/) pages for [`setup()`](/reference/p5/setup) & [`createCanvas()`](/reference/p5/createCanvas). + + +### Step 5: Change the color of the canvas + +- Change the background color of your canvas by changing the *argument* for the [`background()`](/reference/p5/background) function.  + - Change `background(220);` to `background("aqua");` and press *Play*. + +Your code should look like this: + + + + + +#### `background()` + +The `background()` function colors the background a specific color. You can use words inside quotations or numbers to color the background of the canvas. To learn more, visit the [p5.js reference](/reference/) pages for [`background()`](/reference/p5/background) & [color](/reference/#Color). + + +### Step 6: Draw shapes on the canvas + +- Draw a circle on the canvas. + - Add the following text under the [`background()`](/reference/p5/background) function: + + ```js + //circle in the center with a width of 100 + circle(200,200,100); + ``` + +- Don’t forget to save your changes to update the preview window. + +Your code should look like this: + + + + +#### `draw()` + +You can draw shapes on the canvas by typing specific commands for shapes within the curly brackets `{}` after [`function draw()`](/reference/p5/draw).  + +The sketch above draws a circle on the canvas by calling the [`circle()`](/reference/p5/circle) function within [`draw()`](/reference/p5/draw). The first two *arguments* – `200, 200` – place the circle in the center of the canvas, and the last *argument* – `100` – indicates that the circle is 100 pixels wide. The comments embedded in the sketch in the lines above the [`circle()`](/reference/p5/circle)` `function describe what the code does. To learn more, visit the [p5.js reference](/reference/) pages for [`draw()`](/reference/p5/draw) and [`circle()`](/reference/p5/circle). + + +### Step 7: Create! + +p5.js has many functions you can use to incorporate both static and interactive elements in your canvas.  + +- Replace the circle command with the following text: + + ```js + //when mouse button is pressed, circles turn black + if (mouseIsPressed === true) { +   fill(0); + } else { +   fill(255); + } + + //white circles drawn at mouse position + circle(mouseX, mouseY, 100); + ``` + +Your code should look like this: + + + + +Press and hold the mouse button as you drag the mouse pointer over the canvas. + + +The code above draws white circles in the same position as the mouse pointer. When a mouse button is pressed, the circle’s color changes to black.  + +Visit the [p5.js reference](/reference/) for more p5.js functions, such as other shapes you can draw.  + + +### Errors + +It is easy to spell function names wrong or forget a comma. Syntax rules help the computer interpret code. When a “rule” is broken (for example, if [`circle()`](/reference/p5/circle) is spelled wrong), a message will appear in the browser’s console. These errors are commonly referred to as bugs; when your code does not execute correctly, there might be a bug in your code!  + +- Visit these resources for instructions on how to view the console in specific browsers: [Chrome](https://developer.chrome.com/docs/devtools/console/reference/) | [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/web_console/) | [Safari](https://support.apple.com/guide/safari-developer/safari-developer-tools-overview-dev073038698/11.0/mac/10.13) | [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/) +- Visit the [Field Guide to Debugging](/tutorials/field-guide-to-debugging) for more information on how to fix errors in your code. + + +### Accessibility note + +If you are using a screen reader, use the [p5.js Web Editor](https://editor.p5js.org/) instead! To learn more, visit the “[How to Use the p5.js Web Editor with a Screen Reader](https://docs.google.com/document/u/0/d/1Q_leNn8lkeSUfAyq1jLQeLYq1h8pU9134QHNvMu4Tcw/edit)” resource. + + +## Next steps:  + +- Next Tutorial: [Get Started](/tutorials/get-started) +- Explore some [p5.js examples](/examples/) + + +## Resources: + +- [p5.js Welcome Video](https://hello.p5js.org/) +- The Coding Train: [1.2: p5.js Web Editor - p5.js Tutorial](https://www.youtube.com/watch?v=MXs1cOlidWs) +- [p5.js reference page](/reference/) +- [Javascript - MDN reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) +- [Field Guide to Debugging](/tutorials/field-guide-to-debugging) +- [p5.js with VSCode](https://www.youtube.com/watch?v=zMAnM9ly0a8) (video tutorial) +- [VSCode Overview](https://code.visualstudio.com/docs/getstarted/introvideos) +- [p5.vscode reference](https://github.com/antiboredom/p5.vscode/blob/master/README.md) +- Browser consoles in [Chrome](https://developer.chrome.com/docs/devtools/console/reference/) | [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/web_console/) | [Safari](https://support.apple.com/guide/safari-developer/safari-developer-tools-overview-dev073038698/11.0/mac/10.13) | [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/) From a3c619c6d894d195235982d9b7f65164b67a6aa8 Mon Sep 17 00:00:00 2001 From: HoracioValdes Date: Mon, 27 Apr 2026 12:46:42 -0400 Subject: [PATCH 4/4] Setting up environment spanish translation --- .../es/setting-up-your-environment.mdx | 352 +++++++++--------- 1 file changed, 176 insertions(+), 176 deletions(-) diff --git a/src/content/tutorials/es/setting-up-your-environment.mdx b/src/content/tutorials/es/setting-up-your-environment.mdx index c1c1a96b1b..e50ea34d18 100644 --- a/src/content/tutorials/es/setting-up-your-environment.mdx +++ b/src/content/tutorials/es/setting-up-your-environment.mdx @@ -4,7 +4,7 @@ description: Un breve tutorial para configurar el editor web p5.js y VS Code par category: introduction categoryIndex: 0 featuredImage: ../images/featured/SetupA.jpg -featuredImageAlt: An interactive sketch in the p5.js Editor draws circles on the canvas as the mouse pointer moves. +featuredImageAlt: Un sketch interactivo en el Editor Web de p5.js dibuja círculos en el lienzo mientras se mueve el puntero del mouse. relatedContent: references: - en/p5/setup @@ -18,113 +18,113 @@ authors: import EditableSketch from "../../../components/EditableSketch/index.astro"; import Callout from "../../../components/Callout/index.astro"; -![Logos for p5.js and Visual Code Studio.](../images/introduction/p5VScode.png) +![Logotipos de p5.js y Visual Studio Code.](../images/introduction/p5VScode.png) -## Introduction +## Introducción -To begin writing code using [p5.js](/reference/), you need to set up the coding environment you will use to write and save your programs. In this guide, you will: +Para comenzar a escribir código usando [p5.js](/reference/), necesitas configurar el entorno de programación que usarás para escribir y guardar tus programas. En esta guía: -1. Set up your coding environment on the web using the [p5.js Web Editor](https://editor.p5js.org/), or on your computer using [Visual Studio Code (VS Code).](https://code.visualstudio.com/) -2. Use the [p5.js reference](/reference/) to help you write your first simple program using shapes and color. -3. Save and share your code. +1. Configurarás tu entorno de programación en la web usando el [Editor Web de p5.js](https://editor.p5js.org/) o en tu computadora usando [Visual Studio Code (VS Code).](https://code.visualstudio.com/) +2. Usarás la [referencia de p5.js](/reference/) para escribir tu primer programa sencillo con formas y color. +3. Guardarás y compartirás tu código. -## What you will need +## Lo que necesitarás -1. Access to the internet and a desktop browser such as: +1. Acceso a internet y un navegador de escritorio como: - [Chrome](https://www.google.com/chrome/dr/download/?brand=SJWC\&geo=US\&gclid=Cj0KCQjw-pyqBhDmARIsAKd9XIM88u9RUlUagd7fpeqWx3AL_8VbhoIFULSME9tiz87t00L64-wLAlMaAm_QEALw_wcB\&gclsrc=aw.ds) - [Firefox](https://www.mozilla.org/en-US/firefox/) - [Safari](https://www.apple.com/safari/) - [Edge](https://www.microsoft.com/en-us/edge?ep=193\&form=MA13L2\&es=40) -2. A desktop computer, laptop, or chromebook +2. Una computadora de escritorio, laptop o chromebook -## Step 0: Choose the type of coding environment  +## Paso 0: Elige el tipo de entorno de programación -You can begin your coding journey with [p5.js](/reference/) using the [p5.js Web Editor](https://editor.p5js.org/) or [VS Code](https://code.visualstudio.com/).  +Puedes comenzar tu recorrido de programación con [p5.js](/reference/) usando el [Editor Web de p5.js](https://editor.p5js.org/) o [VS Code](https://code.visualstudio.com/). -The [p5.js Web Editor](https://editor.p5js.org/) is a website where programmers can write, test, share, or remix p5.js programs without needing to download or configure a *code editor* on a computer. A *code editor* makes writing and reading code easier by organizing and coloring text in a way that helps programmers see different parts of the code. +El [Editor Web de p5.js](https://editor.p5js.org/) es un sitio web donde las personas que programan pueden escribir, probar, compartir o remezclar programas de p5.js sin tener que descargar ni configurar un *editor de código* en una computadora. Un *editor de código* facilita escribir y leer código al organizar y colorear el texto de una manera que ayuda a distinguir las distintas partes del código. -[VS Code](https://code.visualstudio.com/) is a popular code editor you install on your computer that provides a more advanced coding experience. Depending on your needs, choose the coding environment that is best for you. +[VS Code](https://code.visualstudio.com/) es un editor de código popular que instalas en tu computadora y que ofrece una experiencia de programación más avanzada. Según tus necesidades, elige el entorno de programación que sea mejor para ti. -- [Link to p5.js Web Editor how-to](#web-editor) -- [Link to VS Code how-to](#vscode) +- [Enlace a la guía del Editor Web de p5.js](#web-editor) +- [Enlace a la guía de VS Code](#vscode) -If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.org/)! +Si eres principiante en p5.js, comienza con el [Editor Web de p5.js](https://editor.p5js.org/). -## Using the p5.js Web Editor +## Uso del Editor Web de p5.js -### Step 1: Open the [p5.js Web Editor](https://editor.p5js.org/) sign-up page +### Paso 1: Abre la página de registro del [Editor Web de p5.js](https://editor.p5js.org/) -- Open a desktop browser on your computer and go to [https://editor.p5js.org/](https://editor.p5js.org/). -- Click the [“Sign up”](https://editor.p5js.org/signup) link on the top-right of the web page. +- Abre un navegador de escritorio en tu computadora y ve a [https://editor.p5js.org/](https://editor.p5js.org/). +- Haz clic en el enlace [“Sign up”](https://editor.p5js.org/signup), en la parte superior derecha de la página web. -![An arrow to the “Sign Up” link.](../images/introduction/p5_editor_sign_up.png) +![Una flecha señala el enlace “Sign Up”.](../images/introduction/p5_editor_sign_up.png) -### Step 2: Create an account with [p5.js Web Editor](https://editor.p5js.org/) +### Paso 2: Crea una cuenta en el [Editor Web de p5.js](https://editor.p5js.org/) -- Once on the [sign-up page](https://editor.p5js.org/signup), create an account on the [p5.js Web Editor](https://editor.p5js.org/) using one of the following options: -- Manual sign-up - - Create a username. - - Enter your email address. - - Create and confirm a password.  - - Click the “Sign Up” button. +- Una vez en la [página de registro](https://editor.p5js.org/signup), crea una cuenta en el [Editor Web de p5.js](https://editor.p5js.org/) usando una de las siguientes opciones: +- Registro manual + - Crea un nombre de usuario. + - Ingresa tu dirección de correo electrónico. + - Crea y confirma una contraseña. + - Haz clic en el botón “Sign Up”. -![An arrow pointing to the highlighted fields on the Sign Up page, as described above.](../images/introduction/p5_editor_sign_up_page.png) +![Una flecha apunta a los campos resaltados en la página de registro, como se describe arriba.](../images/introduction/p5_editor_sign_up_page.png) -- Using a Google account - - Click on the button on the bottom of the page that says “Login with Google.”  +- Usar una cuenta de Google + - Haz clic en el botón de la parte inferior de la página que dice “Login with Google”. -![A Google login button displaying “Login with Google”](../images/introduction/login-with-google.png) +![Un botón de inicio de sesión de Google que muestra “Login with Google”.](../images/introduction/login-with-google.png) -- Follow the prompts to enter your email and password for your Google account (if necessary).  -- Using a Github account - - Click on the button on the bottom of the page that says “Login with GitHub.”  +- Sigue las indicaciones para ingresar el correo electrónico y la contraseña de tu cuenta de Google (si es necesario). +- Usar una cuenta de GitHub + - Haz clic en el botón de la parte inferior de la página que dice “Login with GitHub”. -![A Github login button displaying “Login with Github”](../images/introduction/login-with-github.png) +![Un botón de inicio de sesión de GitHub que muestra “Login with Github”.](../images/introduction/login-with-github.png) -- Follow the prompts to enter your username and password for GitHub. -- Authorize the [p5.js Web Editor](https://editor.p5js.org/) to access your GitHub details by clicking the “Authorize processing” button. +- Sigue las indicaciones para ingresar tu nombre de usuario y contraseña de GitHub. +- Autoriza al [Editor Web de p5.js](https://editor.p5js.org/) a acceder a tus datos de GitHub haciendo clic en el botón “Authorize processing”. -![A GitHub third party authorization window informing users that p5.js Web Editor wants to access their GitHub account and read email addresses from their personal user data. Users can cancel the request by clicking the “Cancel” button, or approve the request by clicking the “Authorize processing” button.](../images/introduction/github-auth.png) +![Una ventana de autorización de terceros de GitHub informa a las personas usuarias que el Editor Web de p5.js quiere acceder a su cuenta de GitHub y leer direcciones de correo electrónico de sus datos personales. Las personas usuarias pueden cancelar la solicitud haciendo clic en el botón “Cancel” o aprobarla haciendo clic en el botón “Authorize processing”.](../images/introduction/github-auth.png) -### Step 3: Explore the [p5.js Web Editor](https://editor.p5js.org/) +### Paso 3: Explora el [Editor Web de p5.js](https://editor.p5js.org/) -The [p5.js Web Editor](https://editor.p5js.org/) is an online environment where programmers can write and test their p5.js code. Explore the different elements of the [p5.js Web Editor](https://editor.p5js.org/) and their functions.  +El [Editor Web de p5.js](https://editor.p5js.org/) es un entorno en línea donde las personas que programan pueden escribir y probar su código de p5.js. Explora los distintos elementos del [Editor Web de p5.js](https://editor.p5js.org/) y sus funciones. -The following diagram labels and describes each element of the editor’s interface: +El siguiente diagrama etiqueta y describe cada elemento de la interfaz del editor: -![A labeled diagram of the p5.js Web Editor’s user interface.](../images/introduction/p5_editor_interface_breakdown.png) +![Un diagrama etiquetado de la interfaz de usuario del Editor Web de p5.js.](../images/introduction/p5_editor_interface_breakdown.png) -{/* ![Play and Stop buttons.](../images/introduction/p5_editor_play_start.png) -![Settings button with a gear icon in the center.](../images/introduction/p5_editor_settings.png) */} +{/* ![Botones de reproducir y detener.](../images/introduction/p5_editor_play_start.png) +![Botón de configuración con un ícono de engranaje en el centro.](../images/introduction/p5_editor_settings.png) */} -### Step 4: Name, save, and run your first sketch +### Paso 4: Nombra, guarda y ejecuta tu primer sketch -- Name your projects by clicking on the pencil icon above the text editor and typing in a name for your project. +- Nombra tus proyectos haciendo clic en el ícono de lápiz sobre el editor de texto y escribiendo un nombre para tu proyecto. -![An arrow points to a pencil icon to rename a sketch.](../images/introduction/p5_editor_naming_a_sketch.png) +![Una flecha apunta a un ícono de lápiz para cambiar el nombre de un sketch.](../images/introduction/p5_editor_naming_a_sketch.png) -- Save projects by clicking on *File* in the top toolbar, and selecting *Save*.  - - Make sure you are logged in to your account or you will not be able to save the sketch. - - Saving projects frequently helps to ensure that code isn’t lost if something happens to your computer, browser, or internet connection while you are coding. +- Guarda proyectos haciendo clic en *File* en la barra de herramientas superior y seleccionando *Save*. + - Asegúrate de haber iniciado sesión en tu cuenta; de lo contrario, no podrás guardar el sketch. + - Guardar los proyectos con frecuencia ayuda a evitar que se pierda código si algo le sucede a tu computadora, navegador o conexión a internet mientras programas. -![A user on the p5.js Web Editor names a new project and saves it.”](../images/introduction/p5_editor_saving_a_sketch.png) +![Una persona usuaria en el Editor Web de p5.js nombra un proyecto nuevo y lo guarda.](../images/introduction/p5_editor_saving_a_sketch.png) -![An arrow pointing to a notification box with the text “Sketch saved.”](../images/introduction/p5_editor_saved_sketch_notification.png) +![Una flecha apunta a un cuadro de notificación con el texto “Sketch saved.”](../images/introduction/p5_editor_saved_sketch_notification.png) -To view the output of your code, click the *Play* button in the top left corner:  +Para ver la salida de tu código, haz clic en el botón *Play* en la esquina superior izquierda: -![A blank canvas appears in the preview window of the p5.js Web Editor when a user clicks on the “Play” button in the top right corner.](../images/introduction/p5_editor_running_a_sketch.png) +![Un lienzo vacío aparece en la ventana de vista previa del Editor Web de p5.js cuando una persona usuaria hace clic en el botón “Play” en la esquina superior derecha.](../images/introduction/p5_editor_running_a_sketch.png) -A *p5.js sketch* is a text file with code written in the *JavaScript* programming language. *JavaScript* is a programming language used to make web pages interactive. p5.js is a library written in *JavaScript* – which is why it ends in “*.js*” for *JavaScript*. With p5.js, you can create programs that are colorful and animated, with features that users can interact with! To learn more about some of the things you can do with p5.js, watch the [p5.js Welcome Video!](https://hello.p5js.org/) To learn more about JavaScript, you can visit [this resource.](https://developer.mozilla.org/en-US/docs/Web/JavaScript) +Un *sketch de p5.js* es un archivo de texto con código escrito en el lenguaje de programación *JavaScript*. *JavaScript* es un lenguaje de programación que se usa para hacer que las páginas web sean interactivas. p5.js es una biblioteca escrita en *JavaScript*, por eso termina en “*.js*”, de *JavaScript*. Con p5.js, puedes crear programas coloridos y animados, con funciones con las que las personas usuarias pueden interactuar. Para aprender más sobre algunas de las cosas que puedes hacer con p5.js, mira el [video de bienvenida de p5.js](https://hello.p5js.org/). Para aprender más sobre JavaScript, puedes visitar [este recurso.](https://developer.mozilla.org/en-US/docs/Web/JavaScript) -The editor begins with the following code in the *sketch.js* file: +El editor comienza con el siguiente código en el archivo *sketch.js*: ```js function setup() { @@ -135,23 +135,23 @@ function draw() { } ``` -The code above creates a canvas element in the preview that is 400 pixels wide and 400 pixels high. It also sets the background to a shade of gray.  +El código anterior crea en la vista previa un elemento de lienzo de 400 píxeles de ancho y 400 píxeles de alto. También establece el fondo en un tono de gris. #### `createCanvas()` -Computer screens are made up of tiny lights called *pixels*, which are the smallest elements that make up any image. The line of code that creates a canvas in the preview window is [`createCanvas(400, 400)`](/reference/p5/createCanvas). Without this line of code, there will be no canvas to draw on! The numbers 400, 400 correspond to the width and the height of the canvas in pixels. These numbers are also known as *arguments* for the [`createCanvas()`](/reference/p5/createCanvas) function.  +Las pantallas de computadora están formadas por luces diminutas llamadas *píxeles*, que son los elementos más pequeños que componen cualquier imagen. La línea de código que crea un lienzo en la ventana de vista previa es [`createCanvas(400, 400)`](/reference/p5/createCanvas). Sin esta línea de código, no habrá un lienzo donde dibujar. Los números 400, 400 corresponden al ancho y la altura del lienzo en píxeles. Estos números también se conocen como *argumentos* de la función [`createCanvas()`](/reference/p5/createCanvas). -Any values that you place within parentheses of a function are called *arguments*: any value used to customize functions. [`createCanvas()`](/reference/p5/createCanvas) appears within the [`setup()`](/reference/p5/setup) function to create an HTML canvas element that you can draw on.  +Los valores que colocas dentro de los paréntesis de una función se llaman *argumentos*: valores que se usan para personalizar funciones. [`createCanvas()`](/reference/p5/createCanvas) aparece dentro de la función [`setup()`](/reference/p5/setup) para crear un elemento de lienzo HTML en el que puedes dibujar. -To learn more, visit the [p5.js reference](/reference) pages for [`setup()`](/reference/p5/setup) and [`createCanvas()`](/reference/p5/createCanvas). +Para aprender más, visita las páginas de la [referencia de p5.js](/reference) sobre [`setup()`](/reference/p5/setup) y [`createCanvas()`](/reference/p5/createCanvas). -### Step 5: Change the color of the canvas +### Paso 5: Cambia el color del lienzo -- You can type commands for any sketch in the text editor, and view the output of your code in the preview window by clicking *Play*.  -- Change the background color of your canvas by changing the *argument* for the [`background()`](/reference/p5/background) function.  - - Change `background(220);` to `background("aqua");` and press *Play*. +- Puedes escribir comandos para cualquier sketch en el editor de texto y ver la salida de tu código en la ventana de vista previa haciendo clic en *Play*. +- Cambia el color de fondo de tu lienzo modificando el *argumento* de la función [`background()`](/reference/p5/background). + - Cambia `background(220);` por `background("aqua");` y presiona *Play*. ```js function setup() { @@ -165,22 +165,22 @@ function draw() { #### `background()` -The `background()` function colors the background a specific color. You can use words inside quotations or numbers to color the background of the canvas. To learn more, visit the [p5.js reference](/reference) pages for [`background()`](/reference/p5/background) & [color](/reference/p5/color). +La función `background()` colorea el fondo con un color específico. Puedes usar palabras entre comillas o números para colorear el fondo del lienzo. Para aprender más, visita las páginas de la [referencia de p5.js](/reference) sobre [`background()`](/reference/p5/background) y [color](/reference/p5/color). -### Step 6: Draw shapes on the canvas +### Paso 6: Dibuja formas en el lienzo -- Draw a circle on the canvas. - - Add the following text under the [`background()`](/reference/p5/background) function: +- Dibuja un círculo en el lienzo. + - Agrega el siguiente texto debajo de la función [`background()`](/reference/p5/background): ```js - //circle in the center with a width of 100 + //círculo en el centro con un ancho de 100 circle(200,200,100); ``` -- Click the *Play* button. +- Haz clic en el botón *Play*. -Your code should look like this: +Tu código debería verse así: ```js function setup() { @@ -189,142 +189,142 @@ function setup() { function draw() {   background(220); -  // Draw a circle in the center with -  // a width of 100. +  // Dibuja un círculo en el centro con +  // un ancho de 100.   circle(200, 200, 100); } ``` #### `draw()` -You can draw shapes on the canvas by typing specific commands for shapes within the curly brackets `{}` after [`function draw()`](/reference/p5/draw).  +Puedes dibujar formas en el lienzo escribiendo comandos específicos para formas dentro de las llaves `{}` después de [`function draw()`](/reference/p5/draw). -The sketch above draws a circle on the canvas by calling the [`circle()`](/reference/p5/circle) function within [`draw()`](/reference/p5/draw). The first two *arguments –* `200, 200` – place the circle in the center of the canvas, and the last *argument* – `100` – indicates that the circle is 100 pixels wide. The comments embedded in the sketch in the lines above the [`circle()`](/reference/p5/circle)` `function describe what the code does. To learn more, visit the [p5.js reference](/reference/) pages for [`draw()`](/reference/p5/draw) and [`circle()`](/reference/p5/circle). +El sketch anterior dibuja un círculo en el lienzo al llamar a la función [`circle()`](/reference/p5/circle) dentro de [`draw()`](/reference/p5/draw). Los dos primeros *argumentos*, `200, 200`, colocan el círculo en el centro del lienzo, y el último *argumento*, `100`, indica que el círculo tiene 100 píxeles de ancho. Los comentarios incluidos en el sketch, en las líneas sobre la función [`circle()`](/reference/p5/circle), describen lo que hace el código. Para aprender más, visita las páginas de la [referencia de p5.js](/reference/) sobre [`draw()`](/reference/p5/draw) y [`circle()`](/reference/p5/circle). -### Step 7: Create! +### Paso 7: ¡Crea! -p5.js has many functions you can use to incorporate both static and interactive elements in your canvas.  +p5.js tiene muchas funciones que puedes usar para incorporar elementos estáticos e interactivos en tu lienzo. -- Replace the background and circle commands with the following text: +- Reemplaza los comandos de fondo y círculo con el siguiente texto: ```js - //when mouse button is pressed, circles turn black + //cuando se presiona el botón del mouse, los círculos se vuelven negros if (mouseIsPressed === true) {   fill(0); } else {   fill(255); } - //white circles drawn at mouse position + //círculos blancos dibujados en la posición del mouse circle(mouseX, mouseY, 100); ``` -Your code should look like this: +Tu código debería verse así: -Press and hold the mouse button as you drag the mouse pointer over the canvas. +Mantén presionado el botón del mouse mientras arrastras el puntero sobre el lienzo. -The code above draws white circles in the same position as the mouse pointer. When a mouse button is pressed, the circle’s color changes to black.  +El código anterior dibuja círculos blancos en la misma posición que el puntero del mouse. Cuando se presiona un botón del mouse, el color del círculo cambia a negro. -Visit the [p5.js reference](/reference/) for more p5.js functions like [2D Primitive shapes](/reference/#Shape/).  +Visita la [referencia de p5.js](/reference/) para conocer más funciones de p5.js, como [formas primitivas 2D](/reference/#Shape/). -### Errors +### Errores -It is easy to spell function names wrong or forget a comma. Syntax rules help the computer interpret code. When a “rule” is broken, an error message will appear in the console (for example, if [`circle()`](/reference/p5/circle) is spelled wrong). These errors are commonly referred to as “bugs.” The console displays messages from the editor with details about any mistakes you might have made. When your code does not execute correctly, there might be a bug in your code! +Es fácil escribir mal los nombres de las funciones u olvidar una coma. Las reglas de sintaxis ayudan a la computadora a interpretar el código. Cuando se rompe una “regla”, aparece un mensaje de error en la consola (por ejemplo, si [`circle()`](/reference/p5/circle) está escrito incorrectamente). Estos errores se conocen comúnmente como “bugs”. La consola muestra mensajes del editor con detalles sobre cualquier error que hayas cometido. Si tu código no se ejecuta correctamente, podría haber un bug en tu código. -Visit the [Field Guide to Debugging](/tutorials/field-guide-to-debugging) for more information on how to fix errors in your code. +Visita la [Guía de campo para depurar](/tutorials/field-guide-to-debugging) para obtener más información sobre cómo corregir errores en tu código. -#### Accessibility Note: +#### Nota de accesibilidad: -If you are using a screen reader, you must turn on the accessible outputs in the [p5.js Web Editor](https://editor.p5js.org/) and add the accessibility library in your html. To learn more, visit our guide to [using the p5.js Web Editor with a screen reader.](/tutorials/p5js-with-screen-reader/) +Si usas un lector de pantalla, debes activar las salidas accesibles en el [Editor Web de p5.js](https://editor.p5js.org/) y agregar la biblioteca de accesibilidad en tu HTML. Para aprender más, visita nuestra guía sobre [cómo usar el Editor Web de p5.js con un lector de pantalla.](/tutorials/p5js-with-screen-reader/) -### Step 8: Share Your Project +### Paso 8: Comparte tu proyecto -Once your project is saved, you can share it! +Una vez que tu proyecto esté guardado, puedes compartirlo. -- Share projects by clicking *File* in the upper toolbar, selecting *Share*, and copying one of the links provided. You can share your projects in three different ways: - - Embed: Add your p5.js sketch to a website or blog that uses html (does not show code). - - Fullscreen: Share your project with a link (does not show code). - - Edit: Share your project code in the p5.js editor with a link. +- Comparte proyectos haciendo clic en *File* en la barra de herramientas superior, seleccionando *Share* y copiando uno de los enlaces proporcionados. Puedes compartir tus proyectos de tres maneras diferentes: + - Embed: Agrega tu sketch de p5.js a un sitio web o blog que use HTML (no muestra el código). + - Fullscreen: Comparte tu proyecto con un enlace (no muestra el código). + - Edit: Comparte el código de tu proyecto en el editor de p5.js con un enlace. -## Next steps:  +## Próximos pasos: -- Next Tutorial: [Get Started](/tutorials/get-started) -- Explore some [p5.js examples](/examples/) +- Siguiente tutorial: [Primeros pasos](/tutorials/get-started) +- Explora algunos [ejemplos de p5.js](/examples/) -## Resources: +## Recursos: -- [p5.js Welcome Video](https://hello.p5js.org/) +- [Video de bienvenida de p5.js](https://hello.p5js.org/) - The Coding Train: [1.2: p5.js Web Editor - p5.js Tutorial](https://www.youtube.com/watch?v=MXs1cOlidWs) -- [p5.js reference page](/reference/) -- [Javascript - MDN reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) -- [Field Guide to Debugging](/tutorials/field-guide-to-debugging) -- [How to Use the p5.js Web Editor with a Screen Reader](/tutorials/p5js-with-screen-reader/) +- [Página de referencia de p5.js](/reference/) +- [JavaScript - referencia de MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) +- [Guía de campo para depurar](/tutorials/field-guide-to-debugging) +- [Cómo usar el Editor Web de p5.js con un lector de pantalla](/tutorials/p5js-with-screen-reader/) --- -## Using VS Code +## Uso de VS Code -[VS Code](https://code.visualstudio.com/) offers a more advanced code editing experience compared to the Web Editor. We recommend this option if you’re already familiar with VS Code. +[VS Code](https://code.visualstudio.com/) ofrece una experiencia de edición de código más avanzada en comparación con el Editor Web. Recomendamos esta opción si ya estás familiarizado con VS Code. -### Step 1: Download VS Code +### Paso 1: Descarga VS Code -- Download VS Code onto your device using [this link](https://code.visualstudio.com/download). -- Explore the features of VS Code and various setup options using [these resources](https://code.visualstudio.com/docs/getstarted/introvideos). +- Descarga VS Code en tu dispositivo usando [este enlace](https://code.visualstudio.com/download). +- Explora las funciones de VS Code y sus distintas opciones de configuración usando [estos recursos](https://code.visualstudio.com/docs/getstarted/introvideos). -### Step 2: Install the p5.js library extension +### Paso 2: Instala la extensión de la biblioteca p5.js -- Open VS Code and navigate to the extensions manager on the left toolbar. -- Type [*p5.js 2.x Project Generator*](https://marketplace.visualstudio.com/items?itemName=Irti.p5js-project-generator) in the search bar, select the extension, and click the install button. -- Familiarize yourself with details for this extension [here](https://github.com/IrtizaNasar/p5-2.vscode/blob/main/README.md). +- Abre VS Code y ve al administrador de extensiones en la barra de herramientas izquierda. +- Escribe [*p5.js 2.x Project Generator*](https://marketplace.visualstudio.com/items?itemName=Irti.p5js-project-generator) en la barra de búsqueda, selecciona la extensión y haz clic en el botón de instalación. +- Familiarízate con los detalles de esta extensión [aquí](https://github.com/IrtizaNasar/p5-2.vscode/blob/main/README.md). -### Step 3: Create a p5.js project +### Paso 3: Crea un proyecto de p5.js -- Click on *View* on the top toolbar and select Command Palette. -- Type *Create a new p5.js 2.x Project* in the search bar and select the command. -- Follow the prompts to configure your project. -- Select the folder on your machine where you would like to save your project. +- Haz clic en *View* en la barra de herramientas superior y selecciona Command Palette. +- Escribe *Create a new p5.js 2.x Project* en la barra de búsqueda y selecciona el comando. +- Sigue las indicaciones para configurar tu proyecto. +- Selecciona la carpeta de tu computadora donde quieres guardar tu proyecto. -### Step 4: View your first sketch +### Paso 4: Mira tu primer sketch -To view the preview for your code: +Para ver la vista previa de tu código: -- Right click on the *index.html* file in the *VSCODE* tab on the left Explorer panel. -- Select *Open Live Server*.  -- A window will open in your default browser with the output of your project. +- Haz clic derecho en el archivo *index.html* en la pestaña *VSCODE* del panel Explorer de la izquierda. +- Selecciona *Open Live Server*. +- Se abrirá una ventana en tu navegador predeterminado con la salida de tu proyecto. -A *p5.js sketch* is a text file with code written in the *JavaScript* programming language. *JavaScript* is a programming language used to make web pages interactive. p5.js is a library written in *JavaScript* – which is why it ends in “*.js*” for *JavaScript*. With p5.js, you can create programs that are colorful and animated, with features that users can interact with! To learn more about some of the things you can do with p5.js, watch the [p5.js Welcome Video!](https://hello.p5js.org/) To learn more about JavaScript, you can visit [this resource.](https://developer.mozilla.org/en-US/docs/Web/JavaScript) +Un *sketch de p5.js* es un archivo de texto con código escrito en el lenguaje de programación *JavaScript*. *JavaScript* es un lenguaje de programación que se usa para hacer que las páginas web sean interactivas. p5.js es una biblioteca escrita en *JavaScript*, por eso termina en “*.js*”, de *JavaScript*. Con p5.js, puedes crear programas coloridos y animados, con funciones con las que las personas usuarias pueden interactuar. Para aprender más sobre algunas de las cosas que puedes hacer con p5.js, mira el [video de bienvenida de p5.js](https://hello.p5js.org/). Para aprender más sobre JavaScript, puedes visitar [este recurso.](https://developer.mozilla.org/en-US/docs/Web/JavaScript) -The editor begins with the following code in the *sketch.js* file and preview: +El editor comienza con el siguiente código en el archivo *sketch.js* y la vista previa: -The code above creates a canvas element in the preview that is 400 pixels wide and 400 pixels high. It also sets the background to a shade of gray.  +El código anterior crea en la vista previa un elemento de lienzo de 400 píxeles de ancho y 400 píxeles de alto. También establece el fondo en un tono de gris. #### `createCanvas()` -Computer screens are made up of tiny lights called *pixels*, which are the smallest elements that make up any image. The line of code that creates a canvas in the preview window is [`createCanvas(400, 400)`](/reference/p5/createCanvas). Without this line of code, there will be no canvas to draw on! The numbers 400, 400 correspond to the width and the height of the canvas in pixels. These numbers are also known as *arguments* for the [`createCanvas()`](/reference/p5/createCanvas) function.  +Las pantallas de computadora están formadas por luces diminutas llamadas *píxeles*, que son los elementos más pequeños que componen cualquier imagen. La línea de código que crea un lienzo en la ventana de vista previa es [`createCanvas(400, 400)`](/reference/p5/createCanvas). Sin esta línea de código, no habrá un lienzo donde dibujar. Los números 400, 400 corresponden al ancho y la altura del lienzo en píxeles. Estos números también se conocen como *argumentos* de la función [`createCanvas()`](/reference/p5/createCanvas). -Any values that you place within parentheses of a function are called *arguments*: any value used to customize functions. [`createCanvas()`](/reference/p5/createCanvas) appears within the [`setup()`](/reference/p5/setup) function to create an HTML canvas element that you can draw on.  +Los valores que colocas dentro de los paréntesis de una función se llaman *argumentos*: valores que se usan para personalizar funciones. [`createCanvas()`](/reference/p5/createCanvas) aparece dentro de la función [`setup()`](/reference/p5/setup) para crear un elemento de lienzo HTML en el que puedes dibujar. -To learn more, visit the [p5.js reference](/reference/) pages for [`setup()`](/reference/p5/setup) & [`createCanvas()`](/reference/p5/createCanvas). +Para aprender más, visita las páginas de la [referencia de p5.js](/reference/) sobre [`setup()`](/reference/p5/setup) y [`createCanvas()`](/reference/p5/createCanvas). -### Step 5: Change the color of the canvas +### Paso 5: Cambia el color del lienzo -- Change the background color of your canvas by changing the *argument* for the [`background()`](/reference/p5/background) function.  - - Change `background(220);` to `background("aqua");` and press *Play*. +- Cambia el color de fondo de tu lienzo modificando el *argumento* de la función [`background()`](/reference/p5/background). + - Cambia `background(220);` por `background("aqua");` y presiona *Play*. -Your code should look like this: +Tu código debería verse así: @@ -398,30 +398,30 @@ function draw() { #### `draw()` -You can draw shapes on the canvas by typing specific commands for shapes within the curly brackets `{}` after [`function draw()`](/reference/p5/draw).  +Puedes dibujar formas en el lienzo escribiendo comandos específicos para formas dentro de las llaves `{}` después de [`function draw()`](/reference/p5/draw). -The sketch above draws a circle on the canvas by calling the [`circle()`](/reference/p5/circle) function within [`draw()`](/reference/p5/draw). The first two *arguments* – `200, 200` – place the circle in the center of the canvas, and the last *argument* – `100` – indicates that the circle is 100 pixels wide. The comments embedded in the sketch in the lines above the [`circle()`](/reference/p5/circle)` `function describe what the code does. To learn more, visit the [p5.js reference](/reference/) pages for [`draw()`](/reference/p5/draw) and [`circle()`](/reference/p5/circle). +El sketch anterior dibuja un círculo en el lienzo al llamar a la función [`circle()`](/reference/p5/circle) dentro de [`draw()`](/reference/p5/draw). Los dos primeros *argumentos*, `200, 200`, colocan el círculo en el centro del lienzo, y el último *argumento*, `100`, indica que el círculo tiene 100 píxeles de ancho. Los comentarios incluidos en el sketch, en las líneas sobre la función [`circle()`](/reference/p5/circle), describen lo que hace el código. Para aprender más, visita las páginas de la [referencia de p5.js](/reference/) sobre [`draw()`](/reference/p5/draw) y [`circle()`](/reference/p5/circle). -### Step 7: Create! +### Paso 7: ¡Crea! -p5.js has many functions you can use to incorporate both static and interactive elements in your canvas.  +p5.js tiene muchas funciones que puedes usar para incorporar elementos estáticos e interactivos en tu lienzo. -- Replace the circle command with the following text: +- Reemplaza el comando del círculo con el siguiente texto: ```js - //when mouse button is pressed, circles turn black + //cuando se presiona el botón del mouse, los círculos se vuelven negros if (mouseIsPressed === true) {   fill(0); } else {   fill(255); } - //white circles drawn at mouse position + //círculos blancos dibujados en la posición del mouse circle(mouseX, mouseY, 100); ``` -Your code should look like this: +Tu código debería verse así: -Press and hold the mouse button as you drag the mouse pointer over the canvas. +Mantén presionado el botón del mouse mientras arrastras el puntero sobre el lienzo. -The code above draws white circles in the same position as the mouse pointer. When a mouse button is pressed, the circle’s color changes to black.  +El código anterior dibuja círculos blancos en la misma posición que el puntero del mouse. Cuando se presiona un botón del mouse, el color del círculo cambia a negro. -Visit the [p5.js reference](/reference/) for more p5.js functions, such as other shapes you can draw.  +Visita la [referencia de p5.js](/reference/) para conocer más funciones de p5.js, como otras formas que puedes dibujar. -### Errors +### Errores -It is easy to spell function names wrong or forget a comma. Syntax rules help the computer interpret code. When a “rule” is broken (for example, if [`circle()`](/reference/p5/circle) is spelled wrong), a message will appear in the browser’s console. These errors are commonly referred to as bugs; when your code does not execute correctly, there might be a bug in your code!  +Es fácil escribir mal los nombres de las funciones u olvidar una coma. Las reglas de sintaxis ayudan a la computadora a interpretar el código. Cuando se rompe una “regla” (por ejemplo, si [`circle()`](/reference/p5/circle) está escrito incorrectamente), aparecerá un mensaje en la consola del navegador. Estos errores se conocen comúnmente como bugs; si tu código no se ejecuta correctamente, podría haber un bug en tu código. -- Visit these resources for instructions on how to view the console in specific browsers: [Chrome](https://developer.chrome.com/docs/devtools/console/reference/) | [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/web_console/) | [Safari](https://support.apple.com/guide/safari-developer/safari-developer-tools-overview-dev073038698/11.0/mac/10.13) | [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/) -- Visit the [Field Guide to Debugging](/tutorials/field-guide-to-debugging) for more information on how to fix errors in your code. +- Visita estos recursos para obtener instrucciones sobre cómo ver la consola en navegadores específicos: [Chrome](https://developer.chrome.com/docs/devtools/console/reference/) | [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/web_console/) | [Safari](https://support.apple.com/guide/safari-developer/safari-developer-tools-overview-dev073038698/11.0/mac/10.13) | [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/) +- Visita la [Guía de campo para depurar](/tutorials/field-guide-to-debugging) para obtener más información sobre cómo corregir errores en tu código. -### Accessibility note +### Nota de accesibilidad -If you are using a screen reader, use the [p5.js Web Editor](https://editor.p5js.org/) instead! To learn more, visit the “[How to Use the p5.js Web Editor with a Screen Reader](https://docs.google.com/document/u/0/d/1Q_leNn8lkeSUfAyq1jLQeLYq1h8pU9134QHNvMu4Tcw/edit)” resource. +Si usas un lector de pantalla, usa el [Editor Web de p5.js](https://editor.p5js.org/). Para aprender más, visita el recurso “[Cómo usar el Editor Web de p5.js con un lector de pantalla](https://docs.google.com/document/u/0/d/1Q_leNn8lkeSUfAyq1jLQeLYq1h8pU9134QHNvMu4Tcw/edit)”. -## Next steps:  +## Próximos pasos: -- Next Tutorial: [Get Started](/tutorials/get-started) -- Explore some [p5.js examples](/examples/) +- Siguiente tutorial: [Primeros pasos](/tutorials/get-started) +- Explora algunos [ejemplos de p5.js](/examples/) -## Resources: +## Recursos: -- [p5.js Welcome Video](https://hello.p5js.org/) +- [Video de bienvenida de p5.js](https://hello.p5js.org/) - The Coding Train: [1.2: p5.js Web Editor - p5.js Tutorial](https://www.youtube.com/watch?v=MXs1cOlidWs) -- [p5.js reference page](/reference/) -- [Javascript - MDN reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) -- [Field Guide to Debugging](/tutorials/field-guide-to-debugging) -- [p5.js with VSCode](https://www.youtube.com/watch?v=zMAnM9ly0a8) (video tutorial) -- [VSCode Overview](https://code.visualstudio.com/docs/getstarted/introvideos) -- [p5.vscode reference](https://github.com/antiboredom/p5.vscode/blob/master/README.md) -- Browser consoles in [Chrome](https://developer.chrome.com/docs/devtools/console/reference/) | [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/web_console/) | [Safari](https://support.apple.com/guide/safari-developer/safari-developer-tools-overview-dev073038698/11.0/mac/10.13) | [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/) +- [Página de referencia de p5.js](/reference/) +- [JavaScript - referencia de MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) +- [Guía de campo para depurar](/tutorials/field-guide-to-debugging) +- [p5.js con VSCode](https://www.youtube.com/watch?v=zMAnM9ly0a8) (videotutorial) +- [Resumen de VSCode](https://code.visualstudio.com/docs/getstarted/introvideos) +- [Referencia de p5.vscode](https://github.com/antiboredom/p5.vscode/blob/master/README.md) +- Consolas del navegador en [Chrome](https://developer.chrome.com/docs/devtools/console/reference/) | [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/web_console/) | [Safari](https://support.apple.com/guide/safari-developer/safari-developer-tools-overview-dev073038698/11.0/mac/10.13) | [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/)