Deploying to gh-pages from @ processing/p5.js-website@1eb9a5a 🚀

processing · Nov 28, 2023 · 6bf729a · 6bf729a
1 parent 84ba051
commit 6bf729a
Show file tree

Hide file tree

Showing 79 changed files with 7,345 additions and 6,937 deletions.
diff --git a/assets/js/p5.min.js b/assets/js/p5.min.js
diff --git a/assets/reference/en.json b/assets/reference/en.json
diff --git a/download/version.json b/download/version.json
@@ -1,4 +1,4 @@
 {
-  "version": "1.8.0",
-  "date": "October 25, 2023"
-}
+  "version": "1.9.0",
+  "date": "November 28, 2023"
+}
diff --git a/es/learn/basics.html b/es/learn/basics.html
@@ -100,7 +100,7 @@ <h2>First Sketch</h2>
       When you open p5, your first sketch will look like this. There are two parts: setup and draw. Inside the curly brackets after setup and draw we will add code to create a drawing.
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.8.0">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.9.0">
 function setup() {
 
 }
@@ -116,7 +116,7 @@ <h2>background(red, green, blue)</h2>
       <span class='try'>Try changing the numbers inside the parentheses to see what happens.</span>
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.8.0">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.9.0">
 function setup() {
 
 }
@@ -133,7 +133,7 @@ <h2>createCanvas(width, height)</h2>
       <span class='try'>Try making your canvas different sizes by changing the width and height.</span>
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.8.0">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.9.0">
 function setup() {
   createCanvas(100, 100)
 }
@@ -149,7 +149,7 @@ <h2>line(x1, y1, x2, y2)</h2>
       <img src='../../../assets/learn/basics/line.svg'>
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.8.0">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.9.0">
 function setup() {
   createCanvas(300, 300)
 }
@@ -166,7 +166,7 @@ <h2>rect(x, y, width, height)</h2>
       <img src='../../../assets/learn/basics/rect.svg'>
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.8.0">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.9.0">
 function setup() {
   createCanvas(300, 300)
 }
@@ -186,7 +186,7 @@ <h2>ellipse(x, y, width, height)</h2>
       <img src='../../../assets/learn/basics/ellipse.svg'>
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.8.0">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.9.0">
 function setup() {
   createCanvas(300, 300)
 }
@@ -200,7 +200,7 @@ <h2>ellipse(x, y, width, height)</h2>
       <h2>fill(red, green, blue)</h2>
       <p>You can set the color of your shapes by using fill(). You give it three numbers – the red, green, and blue mixture you want, just like background.
       </p>
-      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.8.0">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.9.0">
 function setup() {
   createCanvas(300, 300)
 }
@@ -215,7 +215,7 @@ <h2>fill(red, green, blue)</h2>
       <h2>stroke(red, green, blue)</h2>
       <p>You can set the outline color of your shapes by using stroke(). You give it three numbers – the red, green, and blue mixture you want, just like fill() and background().
       </p>
-      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.8.0">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.9.0">
 function setup() {
   createCanvas(300, 300)
 }
@@ -231,7 +231,7 @@ <h2>stroke(red, green, blue)</h2>
       <h2>strokeWeight(weight)</h2>
       <p>You can set the thickness of the outline for your shapes by using strokeWeight(). The default stroke weight is 1.
       </p>
-      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.8.0">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.9.0">
 function setup() {
   createCanvas(300, 300)
 }
@@ -247,7 +247,7 @@ <h2>mouseX, mouseY</h2>
       <p>mouseX and mouseY can be used to get the current position of your mouse. They are called <b>variables</b>. You can replace a number in your code with mouseX or mouseY and that number will change as you move your mouse.
       </p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.8.0">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.9.0">
 function setup() {
   createCanvas(300, 300)
 }
@@ -261,7 +261,7 @@ <h2>mouseX, mouseY</h2>
       <h2>random(max)</h2>
       <p>random() will choose a random number for you, anywhere from 0 - max.</p>
 
-      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.8.0">
+      <script type="text/p5" data-height="400" data-preview-width="300" data-p5-version="1.9.0">
 function setup() {
   createCanvas(300, 300)
 }

diff --git a/es/learn/color.html b/es/learn/color.html
@@ -113,7 +113,7 @@ <h1>Color</h1>
 
       <!-- this script only needs to get added once even if there are multiple widget instances -->
       <script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
         function draw() {
   background(150);
   stroke(0);
@@ -145,7 +145,7 @@ <h2>Color RGB</h2>
  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.</p>
 
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function draw() {
   background(255);
   noStroke();
@@ -173,7 +173,7 @@ <h2>Transparencia</h2>
 
       <p>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).</p>
 
-      <script type="text/p5" data-autoplay  data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay  data-p5-version="1.9.0">
   createCanvas(100, 100);
   fill(0,0,255);
   rect(0,0,50,100);

diff --git a/es/learn/coordinate-system-and-shapes.html b/es/learn/coordinate-system-and-shapes.html
@@ -111,7 +111,7 @@ <h2>Formas Primitivas</h2>
       <p>Un <a href="/reference/#/p5/point">point()</a> es la forma más simple y un buen lugar para comenzar. Para dibujar un punto solo necesitamos un par ordenado (x,y).</p>
       <!-- this script only needs to get added once even if there are multiple widget instances -->
       <script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>
-<script type="text/p5" data-autoplay data-p5-version="1.8.0">
+<script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup(){
   createCanvas(100, 100);
 }
@@ -121,7 +121,7 @@ <h2>Formas Primitivas</h2>
 </script>
 
       <p>Una <a href="/reference/#/p5/line">line()</a> tampoco es terriblemente compleja y solo requiere dos puntos: (x1,y1) y (x2,y2):</p>
-<script type="text/p5" data-autoplay data-p5-version="1.8.0">
+<script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup(){
   createCanvas(100, 100);
 }
@@ -131,7 +131,7 @@ <h2>Formas Primitivas</h2>
 </script>
 
       <p>Una vez que llegamos a dibujar un <a href="/reference/#/p5/rect">rect()</a>, las cosas se tornan un poco más complejas. En p5.js un rectángulo se especifica con las coordenadas de su esquina superior izquierda, así como ancho y alto.</p>
-<script type="text/p5" data-autoplay data-p5-version="1.8.0">
+<script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup(){
   createCanvas(100, 100);
 }
@@ -141,7 +141,7 @@ <h2>Formas Primitivas</h2>
 </script>
 
       <p>Una segunda manera de dibujar un rectángulo requiere especificar su punto central junto con su ancho y alto. Si preferimos este método, debemos indicar previamente que queremos utilizar el modo<a href="/reference/#/p5/CENTER">CENTER</a> antes de la instrucción del propio rectángulo. Notemos que p5.js es sensible a cada caso.</p>
-<script type="text/p5" data-autoplay data-p5-version="1.8.0">
+<script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup(){
   createCanvas(100, 100);
   rectMode(CENTER);
@@ -152,7 +152,7 @@ <h2>Formas Primitivas</h2>
 </script>
 
       <p>Finalmente podemos dibujar un rectángulo con dos puntos (la esquina superior izquierda y la esquina superior derecha). El modo en este caso es<a href="/reference/#/p5/CORNERS">CORNERS</a>. Notar que este ejemplo entrega el mismo resultado en pantalla que el ejemplo anterior.</p>
-<script type="text/p5" data-autoplay data-p5-version="1.8.0">
+<script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup(){
   createCanvas(100, 100);
   rectMode(CORNERS);
@@ -163,7 +163,7 @@ <h2>Formas Primitivas</h2>
 </script>
 
       <p>Una vez que nos hemos familiarizado con el concepto de dibujar un rectángulo, una<a href="/reference/#/p5/ellipse">ellipse()</a> es muy sencilla de dibujar. De hecho es idéntica al <a href="/reference/#/p5/rect">rect()</a> 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 <a href="/reference/#/p5/ellipse">ellipse()</a> es <a href="/reference/#/p5/CENTER">CENTER</a>, en vez de <a href="/reference/#/p5/CORNER">CORNER</a>.</p>
-<script type="text/p5" data-autoplay data-p5-version="1.8.0">
+<script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup(){
   createCanvas(100, 100);
   ellipseMode(CENTER);
@@ -173,7 +173,7 @@ <h2>Formas Primitivas</h2>
 }
 </script>
 
-<script type="text/p5" data-autoplay data-p5-version="1.8.0">
+<script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup(){
   createCanvas(100, 100);
   ellipseMode(CORNER);
@@ -183,7 +183,7 @@ <h2>Formas Primitivas</h2>
 }
 </script>
 
-<script type="text/p5" data-autoplay data-p5-version="1.8.0">
+<script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup(){
   createCanvas(100, 100);
   ellipseMode(CORNERS);
@@ -195,7 +195,7 @@ <h2>Formas Primitivas</h2>
 
       <p>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.</p>
 
-<script type="text/p5" data-autoplay data-p5-version="1.8.0">
+<script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup(){
   createCanvas(200, 200);
   rectMode(CENTER);

diff --git a/es/learn/curves.html b/es/learn/curves.html
@@ -110,7 +110,7 @@ <h2> Arcs </h2>
 
       <!-- this script only needs to get added once even if there are multiple widget instances -->
       <script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
         function draw() {
           createCanvas(150,200);
           background(150);
@@ -157,7 +157,7 @@ <h2>Continuous Spline Curves</h2>
       </p>
 
 
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
       let coords = [40, 40, 80, 60, 100, 100, 60, 120, 50, 150];
 
       function setup() {
@@ -215,7 +215,7 @@ <h2> Continuous Bézier Curves</h2>
       Here is a continuous Bézier curve, but it doesn’t join smoothly. In order to make two curves A and B smoothly continuous, the last control point of A, the last point of A, and the first control point of B have to be on a straight line.
       </P>
 
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
       function setup() {
         createCanvas(150,200);
       }

diff --git a/es/learn/getting-started-in-webgl-appearance.html b/es/learn/getting-started-in-webgl-appearance.html
@@ -162,7 +162,7 @@ <h2 id="camera">Camera and View</h2>
   class="code">perspective()</a>
 (with new parameters) or <a class="code">ortho()</a>. <a class="code">camera()</a> can be used to change the position of the active camera and the position that the camera is looking at. Try it out in the sketch below.</p>
 
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup() {
   createCanvas(windowWidth, windowHeight, WEBGL);
   debugMode()
@@ -238,7 +238,7 @@ <h2 id="lighting">Lighting</h2>
 
       <br />
 
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup() {
   createCanvas(windowWidth, windowHeight, WEBGL);
   camera(100,-80, 100);
@@ -296,7 +296,7 @@ <h2 id="materials">Materials and Textures</h2>
 
       <p>Try commenting and uncommenting the different lights in this example:</p>
 
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup() {
   createCanvas(innerWidth, innerHeight, WEBGL);
   describe('a sphere geometry with multiple materials applied to it');
@@ -334,7 +334,7 @@ <h2 id="materials">Materials and Textures</h2>
 
       <p>More custom materials can be achieved through using <a class="code">texture()</a>. In short, these are images that can be mapped onto the surface of a geometry. These textures can be imported from an image and can even be generated within code using shaders. To map a texture to your geometry, use <a class="code">loadImage()</a>  within <a class="code">preload()</a>, then call <a class="code">texture()</a> before drawing your shape.</p>
 
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
 let myTexture;
 
 function preload() {

diff --git a/es/learn/getting-started-in-webgl-coords-and-transform.html b/es/learn/getting-started-in-webgl-coords-and-transform.html
@@ -250,7 +250,7 @@ <h2 id="order">The Order of Transformations Matters!</h2>
 
       <p>In the below example, try changing the order of <a class="code">translate()</a> and <a class="code">rotateY()</a> and see how it affects where the object is drawn.</p>
 
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup() {
   createCanvas(150, 216, WEBGL);
   debugMode();
@@ -307,7 +307,7 @@ <h2 id="order">The Order of Transformations Matters!</h2>
 
       <p>In the below example, try removing <a class="code">push()</a> and <a class="code">pop()</a> to see how the transformations affect the second object that is drawn.</p>
 
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup() {
   createCanvas(150, 216, WEBGL);
   debugMode();

diff --git a/es/learn/getting-started-in-webgl-custom-geometry.html b/es/learn/getting-started-in-webgl-custom-geometry.html
@@ -136,7 +136,7 @@ <h2 id="3dModels">Loading 3D Models from File</h2>
           href="/es/reference/#/p5/loadModel">loadModel()</a> method, which should be used within <a class="code">preload()</a>. Then you can use the <a class="code"
           href="/es/reference/#/p5/model">model()</a> function to draw the model, as demonstrated in the example below.</p>
 
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
 let teapotModel;
 
 function preload() {
@@ -170,7 +170,7 @@ <h2 id="proceduralGeometry">Creating Basic Procedural Geometry</h2>
           href="/es/reference/#/p5/vertex">vertex()</a>, and  <a class="code"
           href="/es/reference/#/p5/endShape">endShape()</a>. This following example shows how these methods can be used to construct a 3D shape mathematically.</p>
 
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
 function setup() {
   createCanvas(windowWidth, windowHeight, WEBGL);
   describe('a red 3d spiral shape created with beginShape and endShape');
@@ -215,7 +215,7 @@ <h2 id="proceduralGeometry">Creating Basic Procedural Geometry</h2>
 
       <p>In the following example, <a class="code">p5.Geometry</a> is used to plot a grid of points for the geometry. Then, <a class="code">computeFaces()</a> is used to give the geometry a solid appearance and <a class="code">computeNormals()</a> allows our geometry to have proper lighting.</p>
 
-      <script type="text/p5" data-autoplay data-p5-version="1.8.0">
+      <script type="text/p5" data-autoplay data-p5-version="1.9.0">
 let myGeometry
 
 function setup() {