Merge branch 'master' of github.com:processing/p5.js-website

Author: lmccart

src/assets/css/main.css

@@ -455,7 +455,7 @@ div.reference-subgroup {
 
 .paramname {
   display: inline-block;
-  width: 8em;
+  width: 33%;
   font-size: 1.2em;
 }
 
@@ -467,7 +467,7 @@ div.reference-subgroup {
 .paramtype {
   display: inline-block;
   font-size: 1.2em;
-  width: 20em;
+  width: 66%;
   vertical-align: top;
 }
 
@@ -2414,15 +2414,15 @@ iframe {
 
 #get-started-page #asterisk-design-element,
 #community-page #asterisk-design-element {
-  top: -30%;
-  right: -40%;
-  height: 44em;
-  width: 44em;
-  -webkit-transform: rotate(9deg);
-  -moz-transform: rotate(9deg);
-  -ms-transform: rotate(9deg);
-  -o-transform: rotate(9deg);
-  transform: rotate(9deg);
+  top: 10%;
+  right: -20%;
+  height: 30em;
+  width: 30em;
+  -webkit-transform: rotate(2deg);
+  -moz-transform: rotate(2deg);
+  -ms-transform: rotate(2deg);
+  -o-transform: rotate(2deg);
+  transform: rotate(2deg);
 }
 
 #reference-page #asterisk-design-element,

src/assets/js/render.js

@@ -152,13 +152,18 @@ var renderCode = function(exampleName) {
           edit_area.style.display = 'block';
           edit_area.focus();
         } else {
-          $('.example_container').each(function(ind, con) {
-            $(con).css('opacity', 1.0);
-            $(con).removeClass('editing');
-          });
           edit_button.innerHTML = 'edit';
           edit_area.style.display = 'none';
           sketch.textContent = edit_area.value;
+          $('.example_container').each(function (ind, con) {
+            $(con).css('opacity', 1.0);
+            $(con).removeClass('editing');
+            $this = $(this);
+            var pre = $this.find('pre')[0];
+            if (pre) {
+              $this.height(Math.max($(pre).height(), 100) + 20);
+            }
+          });
           runCode(sketch, true, i);
         }
       }

src/data/en.yml

@@ -35,7 +35,7 @@ home:
   p1x1: "p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone."
   p1x2: "Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound."
   p2xh2: "Community"
-  p2x1: "We are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, ability, class, religion, culture, subculture, political opinion, age, skill level, occupation, and background. We acknowledge that not everyone has the time, financial means, or capacity to actively participate, but we recognize and encourage involvement of all kinds. We facilitate and foster access and empowerment. We are all learners."
+  p2x1: "We are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, disability, class, religion, culture, subculture, political opinion, age, skill level, occupation, and background. We acknowledge that not everyone has the time, financial means, or capacity to actively participate, but we recognize and encourage involvement of all kinds. We facilitate and foster access and empowerment. We are all learners."
   p2x2: "p5.js is an interpretation of "
   p2x3: " for today’s web. We hold events and operate with support from the "
   p2x4: "."

src/data/examples/es/08_Math/10_Interpolate.js

@@ -1,11 +1,11 @@
 /*
- * @name Linear Interpolation
+ * @name Interpolación Lineal
  * @frame 720, 400
- * @description Move the mouse across the screen and the symbol will follow.
- * Between drawing each frame of the animation, the ellipse moves part
- * of the distance (0.05) from its current position toward the cursor using
- * the lerp() function.
- * This is the same as the Easing under input only with lerp() instead..
+ * @description Mueve el ratón a través de la pantalla y el símbolo le seguirá.
+ * Entre cada fotograma de la animación, la elipse se mueve parte
+ * de la distancia (0,05) desde su posición actual hacia el cursor
+ * usando la función lerp().
+ * Esto es equivalente al uso de Easing en la sección Input, sólo que con lerp() en su lugar...
  */
 
 let x = 0;
@@ -19,12 +19,12 @@ function setup() {
 function draw() {
   background(51);
 
-  // lerp() calculates a number between two numbers at a specific increment.
-  // The amt parameter is the amount to interpolate between the two values
-  // where 0.0 equal to the first point, 0.1 is very near the first point, 0.5
-  // is half-way in between, etc.
+  // lerp() calcula un número entre dos números en un incremento específico.
+  // El parámetro amt (amount) es la cantidad a interpolar entre los dos valores
+  // donde 0,0 es igual al primer punto, 0,1 está muy cerca del primer punto, 0,5
+  // está a mitad de camino, etc.
 
-  // Here we are moving 5% of the way to the mouse location each frame
+  // Aquí estamos moviendo el 5% del camino hacia la ubicación del ratón en cada fotograma
   x = lerp(x, mouseX, 0.05);
   y = lerp(y, mouseY, 0.05);
 

src/data/examples/es/08_Math/15_Noise2D.js

@@ -1,7 +1,7 @@
 /*
- * @name Noise2D
+ * @name Ruido 2D
  * @frame 710,400 (optional)
- * @description Create a 2D noise with different parameters.
+ * @description Crear un ruido 2D con parámetros diferentes.
  *
  */
 
@@ -14,27 +14,27 @@ function setup() {
 
 function draw() {
   background(0);
-  // Draw the left half of image
+  // Dibujar la mitad izquierda de la imagen
   for (let y = 0; y < height - 30; y++) {
     for (let x = 0; x < width / 2; x++) {
-      // noiceDetail of the pixels octave count and falloff value
+      // noiceDetail (detalle del ruido) del número de octavas  y valor de caída de los píxeles
       noiseDetail(2, 0.2);
       noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
       stroke(noiseVal * 255);
       point(x, y);
     }
   }
-  // Draw the right half of image
+  // Dibujar la mitad derecha de la imagen
   for (let y = 0; y < height - 30; y++) {
     for (let x = width / 2; x < width; x++) {
-      // noiceDetail of the pixels octave count and falloff value
+      // noiceDetail (detalle del ruido) del número de octavas  y valor de caída de los píxeles
       noiseDetail(5, 0.5);
       noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
       stroke(noiseVal * 255);
       point(x, y);
     }
   }
-  //Show the details of two partitions
+  //Mostrar los detalles de las dos particiones
   textSize(18);
   fill(255, 255, 255);
   text('Noice2D with 2 octaves and 0.2 falloff', 10, 350);

src/data/examples/es/08_Math/16_Noise3D.js

@@ -1,41 +1,41 @@
 /*
- * @name Noise3D
+ * @name Ruido 3D
  * @frame 710,400 (optional)
- * @description Using 3D noise to create simple animated texture.
+ * @description Uso de ruido 3D para crear una simple textura animada.
  */
 let noiseVal;
-//Increment x by 0.01
+//Incrementar x en 0,01
 let x_increment = 0.01;
-//Increment z by 0.02 every draw() cycle
+//Incrementar z en 0.02 cada ciclo de draw()
 let z_increment = 0.02;
 
-//Offset values
+//Valores de desviación
 let z_off, y_off, x_off;
 
 function setup() {
-  //Create the Canvas
+  //Crear el Lienzo
   createCanvas(640, 360);
-  //Define frame rate
+  //Definir la velocidad de cuadro
   frameRate(20);
-  //Initial value of z_off
+  //Valor inicial de z_off
   z_off = 0;
 }
 
 function draw() {
   x_off = 0;
   y_off = 0;
-  //Make the background black
+  //Hacer que el fondo sea negro
   background(0);
-  //Adjust the noice detail
+  //Ajustar el detalle del ruido
   noiseDetail(8, 0.65);
 
-  //For each x,y calculate noice value
+  //Para cada x,y calcular el valor del ruido
   for (let y = 0; y < height; y++) {
     x_off += x_increment;
     y_off = 0;
 
     for (let x = 0; x < width; x++) {
-      //Calculate and Draw each pixel
+      //Calcular y dibujar cada píxel
       noiseVal = noise(x_off, y_off, z_off);
       stroke(noiseVal * 255);
       y_off += x_increment;

src/data/examples/es/08_Math/17_Randomchords.js

@@ -1,34 +1,34 @@
 /*
- * @name Random Chords
- * @description Accumulates random chords of a circle. Each chord in translucent
- * so they accumulate to give the illusion of a shaded sphere.
- * Contributed by Aatish Bhatia, inspired by <a href ="http://inconvergent.net/">Anders Hoff</a>
+ * @name Cuerdas Aleatorias
+ * @description Acumula cuerdas al azar de un círculo. Cada cuerda es translúcida,
+ * de modo que se acumulan para dar la ilusión de una esfera sombreada.
+ * Contribución de Aatish Bhatia, inspirado en <a href ="http://inconvergent.net/">Anders Hoff</a>
  */
 function setup() {
   createCanvas(400, 400);
   background(255, 255, 255);
 
-  // translucent stroke using alpha value
+  // trazo translúcido usando el valor alfa
   stroke(0, 0, 0, 15);
 }
 
 function draw() {
-  // draw two random chords each frame
+  // trazar dos cuerdas al azar en cada cuadro
   randomChord();
   randomChord();
 }
 
 function randomChord() {
-  // find a random point on a circle
+  // encontrar un punto aleatorio en un círculo
   let angle1 = random(0, 2 * PI);
   let xpos1 = 200 + 200 * cos(angle1);
   let ypos1 = 200 + 200 * sin(angle1);
 
-  // find another random point on the circle
+  // encontrar otro punto aleatorio en el círculo
   let angle2 = random(0, 2 * PI);
   let xpos2 = 200 + 200 * cos(angle2);
   let ypos2 = 200 + 200 * sin(angle2);
 
-  // draw a line between them
+  // trazar una línea entre ellos
   line(xpos1, ypos1, xpos2, ypos2);
 }

src/data/examples/es/08_Math/18_Map.js

@@ -1,10 +1,10 @@
 /*
- * @name Map
- * @description Use the map() function to take any number and scale it to a
- * new number that is more useful for the project that you are working on.
- * For example, use the numbers from the mouse position to control the size or color of a shape.
- * In this example, the mouse’s x-coordinate (numbers between 0 and 360) are scaled to new numbers
- * to define the color and size of a circle.
+ * @name Mapear
+ * @description Utiliza la función map() para tomar cualquier número y escalarlo a un
+ * nuevo número que sea más útil para el proyecto en el que estés trabajando.
+ * Por ejemplo, usa los números de la posición del ratón para controlar el tamaño o el color de una figura.
+ * En este ejemplo, la coordenada x del ratón (números entre 0 y 360) se escalan a nuevos números
+ * para definir el color y el tamaño de un círculo.
  */
 function setup() {
   createCanvas(640, 400);
@@ -13,9 +13,9 @@ function setup() {
 
 function draw() {
   background(0);
-  // Scale the mouseX value from 0 to 640 to a range between 0 and 175
+  // Escala el valor de mouseX de 0 a 640 a un rango entre 0 y 175
   let c = map(mouseX, 0, width, 0, 175);
-  // Scale the mouseX value from 0 to 640 to a range between 40 and 300
+  // Escala el valor de mouseX de 0 a 640 a un rango entre 40 y 300
   let d = map(mouseX, 0, width, 40, 300);
   fill(255, c, 0);
   ellipse(width/2, height/2, d, d);

src/data/examples/es/08_Math/19_parametricEquation.js

@@ -1,44 +1,45 @@
 /*
- * @name Parametric Equations
- * @description A parametric equation is where x and y
- * coordinates are both written in terms of another letter. This is
- * called a parameter and is usually given in the letter t or θ.
- * The inspiration was taken from the YouTube channel of Alexander Miller.
+ * @name Ecuaciones Paramétricas
+ * @description Una ecuación paramétrica es una en la cual las coordenadas x e y
+ * están escritas en términos de otra variable.
+ * Esto se llama un parámetro y se suele dar en la letra t o θ.
+ * La inspiración se tomó del canal de YouTube de Alexander Miller.
  */
 
 function setup(){
   createCanvas(720,400);
 }
 
-// the parameter at which x and y depends is usually taken as either t or symbol of theta
+// el parámetro del que dependen x e y
+// se suele designar con la letra t o el símbolo de theta
 let t = 0;
 function draw(){
   background('#fff');
   translate(width/2,height/2);
   stroke('#0f0f0f');
   strokeWeight(1.5);
-  //loop for adding 100 lines
+  //bucle para añadir 100 líneas
   for(let i = 0;i<100;i++){
     line(x1(t+i),y1(t+i),x2(t+i)+20,y2(t+i)+20);
   }
   t+=0.15;
 }
-// function to change initial x co-ordinate of the line
+// función para cambiar la coordenada inicial x de la línea
 function x1(t){
   return sin(t/10)*125+sin(t/20)*125+sin(t/30)*125;
 }
 
-// function to change initial y co-ordinate of the line
+// función para cambiar la coordenada y inicial de la línea
 function y1(t){
   return cos(t/10)*125+cos(t/20)*125+cos(t/30)*125;
 }
 
-// function to change final x co-ordinate of the line
+// función para cambiar la coordenada x final de la línea
 function x2(t){
   return sin(t/15)*125+sin(t/25)*125+sin(t/35)*125;
 }
 
-// function to change final y co-ordinate of the line
+// función para cambiar la coordenada final de la línea
 function y2(t){
   return cos(t/15)*125+cos(t/25)*125+cos(t/35)*125;
-}
+}

src/data/examples/es/09_Simulate/09_Springs.js

@@ -1,10 +1,10 @@
 /*
- * @name Springs
+ * @name Resortes
  * @frame 710,400
- * @description Move the mouse over one of the circles and click to re-position.
- * When you release the mouse, it will snap back into position.
- * Each circle has a slightly different behavior.
- * (ported from https://processing.org/examples/springs.html)
+ * @description Mueve el ratón sobre uno de los círculos y haz clic para reposicionarlo.
+ * Cuando sueltes el ratón, se volverá a colocar en su posición.
+ * Cada círculo tiene un comportamiento ligeramente diferente.
+ * (puerto de https://processing.org/examples/springs.html)
  */
 let num = 3;
 let springs = [];
@@ -144,4 +144,4 @@ function Spring (_x, _y, _s, _d, _m, _k_in, _others, _id) {
 		this.rest_posx = this.y_pos;
 		this.rest_posy = this.y_pos;
 	}
-};
+};