processing
diff --git a/‎src/data/es.yml
Lines changed: 15 additions & 23 deletions b/‎src/data/es.yml
Lines changed: 15 additions & 23 deletions
@@ -438,40 +438,32 @@ color:
   color-p1x1: "En el mundo digital hablar de color requiere precisión. No basta con decir, por ejemplo: ¿Puedes hacer un círculo verde azulado?, ya que el color se define como un arreglo de números. Comencemos con el caso más simple: negro, blanco y escala de grises. 0 significa negro, 255 significa blanco. Entre medio, cualquier otro número -50, 87, 162, 209, etc- es un tono gris que va entre negro y blanco."
   color-p2x1: "Al agregar las funciones "
   color-p2x2: " y "
-  color-p2x3: " antes de dibujar podemos definir el color de cualquier forma deseada.
-  También existe la función "
+  color-p2x3: " antes de dibujar podemos definir el color de cualquier forma deseada. También existe la función "
   color-p2x4: ", que define el color del lienzo en nuestra pantalla. A continuación hay un ejemplo."
-  color-code1: "background(255);    // Define el color del lienzo como blanco
-  stroke(0);          // Define el contorno de la forma (stroke) como negro
-  fill(150);          // Define el interior de la forma (fill) como gris
-  rect(50,50,75,100); // Dibuja un rectángulo"
+  color-code1: "background(255);    // Define el color del lienzo como blanco \n stroke(0);          // Define el contorno de la forma (stroke) como negro \n fill(150);          // Define el interior de la forma (fill) como gris \n rect(50,50,75,100); // Dibuja un rectángulo"
   color-p3x1: "Tanto el contorno como el interior de la forma pueden ser eliminados con las funciones: "
   color-p3x2: " y "
-  color-p3x3: ".
-  Instintivamente podríamos pensar en utilizar "stroke(0)" para eliminar el contorno, sin embargo, es importante recordar que 0 no significa "nada", sino que indica un color negro.
-  Además, recuerda no eliminar ambos, con "
+  color-p3x3: ". Instintivamente podríamos pensar en utilizar \"stroke(0)\" para eliminar el contorno, sin embargo, es importante recordar que 0 no significa \"nada\", sino que indica un color negro. Además, recuerda no eliminar ambos, con "
   color-p3x4: " y "
   color-p3x5: ", porque ¡nada aparecerá!"
   color-p4x1: "Adicionalmente si dibujamos dos figuras, p5.js siempre utilizará la última especificación de contorno y llenado, leyendo el código de arriba a abajo."
   rgb-color-title: "Color RGB"
-  rgb-color-p1x1: "¿Alguna vez pintaste con las manos? Al mezclar los colores "primarios" podías generar cualquier otro color. Mezclar todos los colores resultaba en un color café fango, y mientras más pintura añadías más oscuro era el resultado. En el mundo digital los colores también se construyen mezclando los tres colores primarios, pero funciona un poco diferente. Primero, los tres colores primarios son otros: rojo, verde y azul (en inglés red, green and blue, es decir, "RGB"). Luego, con los colores en tu pantalla estás mezclando luz, no pintura, por lo que las reglas de esta mezcla también son otras."
+  rgb-color-p1x1: "¿Alguna vez pintaste con las manos? Al mezclar los colores \"primarios\" podías generar cualquier otro color. Mezclar todos los colores resultaba en un color café fango, y mientras más pintura añadías más oscuro era el resultado. En el mundo digital los colores también se construyen mezclando los tres colores primarios, pero funciona un poco diferente. Primero, los tres colores primarios son otros: rojo, verde y azul (en inglés red, green and blue, es decir, \"RGB\"). Luego, con los colores en tu pantalla estás mezclando luz, no pintura, por lo que las reglas de esta mezcla también son otras."
   rgb-color-li1: "Rojo + Verde = Amarillo"
   rgb-color-li2: "Rojo + Azul = Púrpura"
   rgb-color-li3: "Verde + Azul = Cian (azul-verde)"
   rgb-color-li4: "Rojo + Verde + Azul = Blanco"
   rgb-color-li5: "Ausencia de colores = Negro"
-  rgb-color-p2x1: "Lo anterior presupone que los colores son tan brillantes como sea posible, pero por supuesto, hay un rango de color disponible, por lo que un poco de rojo más un poco de verde y azul genera gris, mientras que un poco de rojo más un poco de azul genera púrpura oscuro.
-  Si bien puede tomar tiempo acostumbrarte a esto, mientras más programes y experimentes con color RGB, más rápido se hará instintivo, como mezclar pintura con los dedos.
-  Y por supuesto no puedes decir "Mezcla un poco de de rojo con un poco de azul", debes proveer una cantidad. Así como en la escala de grises, los elementos de color son expresados en rangos desde 0 (ausencia del color) hasta 255 (presencia máxima del color), y son listados en orden R (rojo), G (verde) y B (azul). Obtendrás el resultado de mezclar color RGB por experimentación, pero en adelante cubriremos mediante ejercicios colores más comunes."
+  rgb-color-p2x1: "Lo anterior presupone que los colores son tan brillantes como sea posible, pero por supuesto, hay un rango de color disponible, por lo que un poco de rojo más un poco de verde y azul genera gris, mientras que un poco de rojo más un poco de azul genera púrpura oscuro. \n Si bien puede tomar tiempo acostumbrarte a esto, mientras más programes y experimentes con color RGB, más rápido se hará instintivo, como mezclar pintura con los dedos. \n Y por supuesto no puedes decir \"Mezcla un poco de de rojo con un poco de azul\", debes proveer una cantidad. Así como en la escala de grises, los elementos de color son expresados en rangos desde 0 (ausencia del color) hasta 255 (presencia máxima del color), y son listados en orden R (rojo), G (verde) y B (azul). Obtendrás el resultado de mezclar color RGB por experimentación, pero en adelante cubriremos mediante ejercicios colores más comunes."
   color-transparency-title: "Transparencia"
-  color-transparency-p1x1: "Además de los componentes rojo, verde y azul de cada color, existe un cuarto componente opcional denominado "alfa" (alpha, en inglés). Alfa significa transparencia y es particularmente útil cuando deseas dibujar figuras que se superponen y a través de las cuales quieres ver. Los valores de alfa de una imagen son llamados también "canal alfa" de una imagen."
-  color-transparency-p2x1: "Es importante notar que los pixeles no son literalmente transparentes, esto es simplemente una ilusión lograda al mezclar colores. Tras bambalinas p5.js toma los valores de cada color y les asigna un porcentaje, creando una percepción óptica de la mezcla (Si estás interesado en programar vidrios "color rosa", aquí es donde debes comenzar)."
+  color-transparency-p1x1: "Además de los componentes rojo, verde y azul de cada color, existe un cuarto componente opcional denominado \"alfa\" (alpha, en inglés). Alfa significa transparencia y es particularmente útil cuando deseas dibujar figuras que se superponen y a través de las cuales quieres ver. Los valores de alfa de una imagen son llamados también \"canal alfa\" de una imagen."
+  color-transparency-p2x1: "Es importante notar que los pixeles no son literalmente transparentes, esto es simplemente una ilusión lograda al mezclar colores. Tras bambalinas p5.js toma los valores de cada color y les asigna un porcentaje, creando una percepción óptica de la mezcla (Si estás interesado en programar vidrios \"color rosa\", aquí es donde debes comenzar)."
   color-transparency-p3x1: "Los valores de alfa también se definen en un rango de 0 a 255, donde 0 es completamente transparente (es decir, 0% de opacidad) y 255 es completamente opaco (es decir, 100% opaco)."
   custom-color-ranges-title: "Rangos de Color Personalizados"
   custom-color-ranges-p1x1: "El modo RGB con rangos de 0 a 255 no es la única forma en que podemos manipular color en p5.js, de hecho p5.js nos permite pensar el color de la manera que deseemos. Por ejemplo, tu podrías preferir pensar el color en rangos de 0 a 100 (como un porcentaje). Esto lo puedes hacer especificando un modo específico de color con la función "
-  custom-color-ranges-p2x1: "La expresión anterior dice: "Ok, queremos pensar el color en términos de rojo, verde y azul, o RGB, en que el rango de cada color pueda estar entre 0  100.""
+  custom-color-ranges-p2x1: "La expresión anterior dice: \"Ok, queremos pensar el color en términos de rojo, verde y azul, o RGB, en que el rango de cada color pueda estar entre 0  100.\""
   custom-color-ranges-p3x1: "Aunque rara vez sea conveniente, tu también puedes definir distintos rangos para cada componente de color:"
-  custom-color-ranges-p4x1: "Con la expresión anterior queremos decir: "Rango valores en color rojo va de 0 a 100, verde de 0 a 500, azul de 0 a 10 y alfa de 0 a 255.""
+  custom-color-ranges-p4x1: "Con la expresión anterior queremos decir: \"Rango valores en color rojo va de 0 a 100, verde de 0 a 500, azul de 0 a 10 y alfa de 0 a 255.\""
   custom-color-ranges-p5x1: "Finalmente, si bien es probable que tu código requiera sólamente el modo de color RGB, también puedes especificar colores en el modo HSB (tono, saturación y brillo). Sin entrar mayormente en detalle, el color HSB funciona como sigue:"
   custom-color-ranges-li1x1: "Tono o Matiz"
   custom-color-ranges-li1x2: "—El tipo de color, valores por definición van de 0 a 255."
@@ -490,10 +482,10 @@ coordinate-system:
   coordinate-system-description5: "."
   coordinate-system-description-title: "Sistema Coordenado y Figuras"
   coordinate-system-description-p1x1: "Antes de comenzar a programar con p5.js debemos primero remontarnos a nuestra infancia, tomar un trozo de papel y dibujar una línea. La distancia más corta entre dos puntos es una línea y ese es nuestro punto de partida, con dos puntos en un gráfico."
-  coordinate-system-description-p2x1: "La figura anterior muestra una línea que une un punto A (1,0) y un punto B (4,5). Si le hubieras pedido a un amigo que dibujara la línea por ti, tendrías que haberle dado las indicaciones "traza una línea desde el punto uno coma cero hasta el punto cuatro coma cinco, por favor". Bueno, por el momento imagina que tu amigo era un computador al que solicitaste dibujar la misma línea en su pantalla. El mismo comando aplica (solo que en esta caso puedes obviar formalidades y deberás utilizar un formato preciso). Aquí la instrucción es como sigue:"
-  coordinate-system-description-p3x1: "Aun sin haber estudiado la sintaxis, la expresión anterior debiera haberte hecho sentido. Estamos entregando a la máquina un comando llamado "línea" (al que nos referiremos como "función") para ser ejecutado. Adicionalmente estamos espcificando argumentos que indican cómo la línea debería ser dibujada, desde un punto A (1,0) hasta un punto B (4,5). Si pensamos una línea de código como una frase, la función es un verbo y los argumentos son los objetos de la frase. La frase de código termina con un punto y coma en vez de un punto final."
-  coordinate-system-description-p4x1: "La clave aquí es darse cuenta que la pantalla del computador es la abstracción de un trozo de papel. Cada pixel de la pantalla es una coordenada -dos números, "x" (horizontal) e "y" (vertical)- que determinan la ubicación de un punto en el espacio. Y es nuestro trabajo especificar qué figuras y colores debieran apareceren en dicha coordenada de pixeles."
-  coordinate-system-description-p5x1: "Sin embargo hay una trampa. El gráfico que nos enseñaron cuando chicos ("Sistema Coordenado Cartesiano") ubicaba el punto (0,0) en el centro con el "eje y" apuntando hacia arriba, y el "eje x" apuntando hacia la derecho (hacia los números positivos, los negativos hacia la izquierda y abajo). El sistema coordenado para pixeles en una pantalla de computador, en cambio, está invertido en el eje y. (0,0) se ubica en la parte superior izquierda con la dirección positiva apuntando horizontalmente hacia la derecha y abajo."
+  coordinate-system-description-p2x1: "La figura anterior muestra una línea que une un punto A (1,0) y un punto B (4,5). Si le hubieras pedido a un amigo que dibujara la línea por ti, tendrías que haberle dado las indicaciones \"traza una línea desde el punto uno coma cero hasta el punto cuatro coma cinco, por favor\". Bueno, por el momento imagina que tu amigo era un computador al que solicitaste dibujar la misma línea en su pantalla. El mismo comando aplica (solo que en esta caso puedes obviar formalidades y deberás utilizar un formato preciso). Aquí la instrucción es como sigue:"
+  coordinate-system-description-p3x1: "Aun sin haber estudiado la sintaxis, la expresión anterior debiera haberte hecho sentido. Estamos entregando a la máquina un comando llamado \"línea\" (al que nos referiremos como \"función\") para ser ejecutado. Adicionalmente estamos espcificando argumentos que indican cómo la línea debería ser dibujada, desde un punto A (1,0) hasta un punto B (4,5). Si pensamos una línea de código como una frase, la función es un verbo y los argumentos son los objetos de la frase. La frase de código termina con un punto y coma en vez de un punto final."
+  coordinate-system-description-p4x1: "La clave aquí es darse cuenta que la pantalla del computador es la abstracción de un trozo de papel. Cada pixel de la pantalla es una coordenada -dos números, \"x\" (horizontal) e \"y\" (vertical)- que determinan la ubicación de un punto en el espacio. Y es nuestro trabajo especificar qué figuras y colores debieran apareceren en dicha coordenada de pixeles."
+  coordinate-system-description-p5x1: "Sin embargo hay una trampa. El gráfico que nos enseñaron cuando chicos (\"Sistema Coordenado Cartesiano\") ubicaba el punto (0,0) en el centro con el \"eje y\" apuntando hacia arriba, y el \"eje x\" apuntando hacia la derecho (hacia los números positivos, los negativos hacia la izquierda y abajo). El sistema coordenado para pixeles en una pantalla de computador, en cambio, está invertido en el eje y. (0,0) se ubica en la parte superior izquierda con la dirección positiva apuntando horizontalmente hacia la derecha y abajo."
   simple-shapes-title: "Formas Primitivas"
   simple-shapes-p1x1: "La mayoría de los ejemplos que verás en p5.js son de naturaleza visual. Ellos implican principalmente dibujar figuras y definir coordenadas de pixeles. Comencemos observando las cuatro formas primitivas."
   simple-shapes-p2x1: "Para cada figura nos debemos preguntar qué información requerimos para especificar su ubicación y tamaño (y luego su color) y entender cómo p5.js espera recibir dicha información. En cada uno de los siguientes diagramas asumiremos una ventana de 10 pixeles de ancho y 10 pixeles de alto. Esto no es necesariamente realista ya que cuando comiences a trabajar probablemente preferirás una ventana mucho más grande (10x10 pixeles no es más que unos pocos milímetros en el espacio). Sin embargo con fines explicativos es preferible trabajar con numeros más pequeños de modo de presentar los pixeles como aparecerían en un gráfico de papel (por ahora) para ilustrar mejor el funcionamiento de cada linea de código."
@@ -507,13 +499,13 @@ coordinate-system:
   simple-shapes-p6x2: " antes de la instrucción del propio rectángulo. Notemos que p5.js es sensible a cada caso."
   simple-shapes-p7x1: "Finalmente podemos dibujar un rectángulo con dos puntos (la esquina superior izquierda y la esquina superior derecha). El modo en este caso es "
   simple-shapes-p7x2: ". Notar que este ejemplo entrega el mismo resultado en pantalla que el ejemplo anterior."
-  simple-shapes-p8x1: "Una vez que nos hemos familiarizado con el concepto de dibujar un rectángulo, una  "
+  simple-shapes-p8x1: "Una vez que nos hemos familiarizado con el concepto de dibujar un rectángulo, una "
   simple-shapes-p8x2: " es muy sencilla de dibujar. De hecho es idéntica al "
   simple-shapes-p8x3: " con la diferencia de que la elipse se dibuja donde la caja que contiene al rectángulo debiera estar. El modo por defecto para la "
   simple-shapes-p8x4: " es "
   simple-shapes-p8x5: ", en vez de "
   simple-shapes-p8x6: "."
-  simple-shapes-p9x1: "Es imporante considerar que esta elipse no se ve perfectamente circular. p5.js ha integrado una metodología para seleccionar qué pixeles deberían ser usados para crear una forma circular. Si nos acercamos a ella vemos un grupo de cuadrados distribuidos en una forma circular, pero si nos alejamos al nivel de una pantalla de computador tenemos una suave y redonda circunferencia. p5.js también nos otorga el poder de desarrollar nuestros propios algoritmos para colorear pixeles individualmente (de hecho, podemos imaginar cómo sería hacer esto utlizando la función "point" una y otra vez), pero por ahora conformémonos con utilizar el comando "ellipse" para hacerlo. (Para más información sobre pixeles, puedes comenzar con: la "
+  simple-shapes-p9x1: "Es imporante considerar que esta elipse no se ve perfectamente circular. p5.js ha integrado una metodología para seleccionar qué pixeles deberían ser usados para crear una forma circular. Si nos acercamos a ella vemos un grupo de cuadrados distribuidos en una forma circular, pero si nos alejamos al nivel de una pantalla de computador tenemos una suave y redonda circunferencia. p5.js también nos otorga el poder de desarrollar nuestros propios algoritmos para colorear pixeles individualmente (de hecho, podemos imaginar cómo sería hacer esto utlizando la función \"point\" una y otra vez), pero por ahora conformémonos con utilizar el comando \"ellipse\" para hacerlo. (Para más información sobre pixeles, puedes comenzar con: la "
   simple-shapes-p9x2: "página de referencia Pixeles"
   simple-shapes-p9x3: ", que es mucho más avanzada y compleja que este tutorial)."
   simple-shapes-p10x1: "Ahora observemos una aplicación un poco más realista, con una pantalla de dimensiones 200 por 200. Notemos el uso de la función createCanvas() para especificar el tamaño de la ventana."