diff --git a/parametric-fhp-de.jpg b/parametric-fhp-de.jpg deleted file mode 100644 index e65b410c1a..0000000000 Binary files a/parametric-fhp-de.jpg and /dev/null differ diff --git a/parametric-fhp-en.jpg b/parametric-fhp-en.jpg deleted file mode 100644 index 21b0382bf2..0000000000 Binary files a/parametric-fhp-en.jpg and /dev/null differ diff --git a/src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives/description.mdx b/src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives/description.mdx index 26f7e156d5..428f348709 100644 --- a/src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives/description.mdx +++ b/src/content/examples/en/01_Shapes_And_Color/00_Shape_Primitives/description.mdx @@ -10,11 +10,11 @@ relatedReference: This program demonstrates the use of the basic shape primitive functions -square(), -rect(), -ellipse(), -circle(), -arc(), -line(), -triangle(), -and quad(). \ No newline at end of file +square(), +rect(), +ellipse(), +circle(), +arc(), +line(), +triangle(), +and quad(). \ No newline at end of file diff --git a/src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx b/src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx index 389a8892c1..b39219983a 100644 --- a/src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx +++ b/src/content/examples/en/01_Shapes_And_Color/01_Color/description.mdx @@ -7,14 +7,14 @@ oneLineDescription: Add color to your sketch. This expands on the Shape Primitives example by adding color. -background() +background() fills the canvas with one color, -stroke() +stroke() sets the color for drawing lines, and -fill() +fill() sets the color for the inside of shapes. -noStroke() and -noFill() +noStroke() and +noFill() turn off line color and inner color, respectively. Colors can be represented in many different ways. This example demonstrates several options. \ No newline at end of file diff --git a/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx b/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx index d9f45cfa9f..f0daf5f661 100644 --- a/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx +++ b/src/content/examples/en/02_Animation_And_Variables/00_Drawing_Lines/description.mdx @@ -9,15 +9,15 @@ Click and drag the mouse to draw a line. This example demonstrates the use of several built-in variables. -mouseX +mouseX and -mouseY +mouseY store the current mouse position, while the previous mouse position is represented by -pmouseX +pmouseX and -pmouseY. +pmouseY. * This example also shows the use of -colorMode with HSB +colorMode with HSB (hue-saturation-brightness), so that the first variable sets the hue. \ No newline at end of file diff --git a/src/content/examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx b/src/content/examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx index 44c2c73b77..8d3c017894 100644 --- a/src/content/examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx +++ b/src/content/examples/en/02_Animation_And_Variables/01_Animation_With_Events/description.mdx @@ -6,9 +6,9 @@ oneLineDescription: Pause and resume animation. --- This example demonstrates the use of -loop() +loop() and -noLoop() +noLoop() to pause and resume the animation. Clicking the mouse toggles the animation loop. If the animation @@ -17,5 +17,5 @@ Note: the user must click to set the focus on the canvas for key presses to be registered. Advancing a single frame is accomplished by calling the -redraw() +redraw() function, which results in a single call to the draw() function. \ No newline at end of file diff --git a/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx b/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx index 2a3a9002cd..8ea19ec820 100644 --- a/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx +++ b/src/content/examples/en/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx @@ -6,11 +6,11 @@ oneLineDescription: Animate based on device motion. featured: true --- -The deviceMoved() +The deviceMoved() function runs when the mobile device displaying the sketch moves. In this example, the -accelerationX, -accelerationY, -and accelerationZ +accelerationX, +accelerationY, +and accelerationZ values set the position and size of a circle. This only works for mobile devices. \ No newline at end of file diff --git a/src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx b/src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx index 562575919d..297fb5a6bc 100644 --- a/src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx +++ b/src/content/examples/en/02_Animation_And_Variables/03_Conditions/description.mdx @@ -10,7 +10,7 @@ If and else statements allow a to run only when a certain condition is true. This example only animates when the mouse is held down. This is because of the if statement on line 59. You can read more about if and else statements -in the p5 reference +in the p5 reference or on MDN. Comparison operators help to form conditions by comparing two diff --git a/src/content/examples/en/03_Imported_Media/00_Words/description.mdx b/src/content/examples/en/03_Imported_Media/00_Words/description.mdx index a984574588..090c1dda4a 100644 --- a/src/content/examples/en/03_Imported_Media/00_Words/description.mdx +++ b/src/content/examples/en/03_Imported_Media/00_Words/description.mdx @@ -5,8 +5,8 @@ title: Words oneLineDescription: Load fonts and draw text. --- -The text() function is used for inserting text into the canvas. -You can change the font and text size using the loadFont() -and fontSize() functions. -The text can be aligned left, center, or right with the textAlign() -function, and, like shapes, text can be colored with fill(). \ No newline at end of file +The text() function is used for inserting text into the canvas. +You can change the font and text size using the loadFont() +and fontSize() functions. +The text can be aligned left, center, or right with the textAlign() +function, and, like shapes, text can be colored with fill(). \ No newline at end of file diff --git a/src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx b/src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx index 87d7e0782f..e4c390873e 100644 --- a/src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx +++ b/src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/description.mdx @@ -5,6 +5,6 @@ title: Copy Image Data oneLineDescription: Paint from an image file onto the canvas. --- -Using the copy() +Using the copy() method, you can simulate coloring an image in by copying an image of the colored image on top of the black-and-white image wherever the cursor is dragged. \ No newline at end of file diff --git a/src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx b/src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx index 62ac45448d..7604d191fb 100644 --- a/src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx +++ b/src/content/examples/en/03_Imported_Media/02_Alpha_Mask/description.mdx @@ -6,7 +6,7 @@ oneLineDescription: Use one image to cut out a section of another image. --- Using the -mask() +mask() method, you can create a mask for an image to specify the transparency in different parts of the image. To run this example locally, you will need two image files and a running diff --git a/src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx b/src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx index 7cb1119c9d..721c4a6df6 100644 --- a/src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx +++ b/src/content/examples/en/03_Imported_Media/03_Image_Transparency/description.mdx @@ -7,7 +7,7 @@ oneLineDescription: Make an image translucent on the canvas. This program overlays one image over another by modifying the alpha value of the image with the -tint() +tint() function. Move the cursor left and right across the canvas to change the image's position. To run this example locally, you will need an image file and a running diff --git a/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx b/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx index 3fee5151c8..838e9c70b5 100644 --- a/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx +++ b/src/content/examples/en/03_Imported_Media/04_Create_Audio/description.mdx @@ -5,12 +5,12 @@ title: Audio Player oneLineDescription: Create a player for an audio file. --- -createAudio() +createAudio() creates an audio player. This example displays the player's controls and adjusts its speed. The playback speed is normal when the mouse is on the left edge of the window, and it gets faster as the mouse moves to the right. More information on using media elements such as audio players is on the -p5.MediaElement +p5.MediaElement reference page. The audio file is a public domain piano loop by Josef Pres. \ No newline at end of file diff --git a/src/content/examples/en/03_Imported_Media/05_Video/description.mdx b/src/content/examples/en/03_Imported_Media/05_Video/description.mdx index a06dbbbd99..d1eafc970e 100644 --- a/src/content/examples/en/03_Imported_Media/05_Video/description.mdx +++ b/src/content/examples/en/03_Imported_Media/05_Video/description.mdx @@ -5,8 +5,8 @@ title: Video Player oneLineDescription: Create a player for a video file. --- -Using the noCanvas() -and createVideo() +Using the noCanvas() +and createVideo() functions, you can upload a video into the DOM without embedding the video within a canvas. For building a video embedded within the canvas element, diff --git a/src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx b/src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx index 5f3d6757e8..f66cc75923 100644 --- a/src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx +++ b/src/content/examples/en/03_Imported_Media/06_Video_Canvas/description.mdx @@ -6,13 +6,13 @@ oneLineDescription: Display and stylize a video on the canvas. --- Using the -createVideo() -and image() +createVideo() +and image() functions, you can upload a video into the canvas. Since the video capture is passed through the -image() +image() constructor, you can add filters to the video capture using the -filter() +filter() method. To run this example locally, you will need a running local server. To build a video without embedding it within the canvas, visit the diff --git a/src/content/examples/en/03_Imported_Media/07_Video_Capture/description.mdx b/src/content/examples/en/03_Imported_Media/07_Video_Capture/description.mdx index 679eb4e19a..ddcab26cff 100644 --- a/src/content/examples/en/03_Imported_Media/07_Video_Capture/description.mdx +++ b/src/content/examples/en/03_Imported_Media/07_Video_Capture/description.mdx @@ -6,13 +6,13 @@ oneLineDescription: Display a live video feed from a camera. --- Using the -createCapture() -and image() +createCapture() +and image() functions, you can take a device's video capture and draw it in the canvas. Since the video capture is passed through the -image() +image() constructor, you can add filters to the video capture with the -filter() +filter() method. For different strategies for uploading, presenting, or styling videos, visit the Video and diff --git a/src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx b/src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx index 62d0bccad0..c6ae66cc35 100644 --- a/src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx +++ b/src/content/examples/en/04_Input_Elements/00_Image_Drop/description.mdx @@ -5,11 +5,11 @@ title: Image Drop oneLineDescription: Display an image that the page visitor dragged and dropped. --- -drop() +drop() is a p5.js element method that registers a callback every time a file is loaded into the element. The uploaded file is created into a -p5.File +p5.File class. You can use the -drop() +drop() callback to check the file type, then write conditional statements responding to the file type. \ No newline at end of file diff --git a/src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx b/src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx index 651d661134..7d7ead2113 100644 --- a/src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx +++ b/src/content/examples/en/04_Input_Elements/01_Input_Button/description.mdx @@ -6,8 +6,8 @@ oneLineDescription: Use text input from the page visitor. --- Using the -createElement(), -createInput(), -and createButton() +createElement(), +createInput(), +and createButton() functions, you can take a string of text submitted via text input and display it on your canvas. \ No newline at end of file diff --git a/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx b/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx index 43cfb8fb27..aa49815b6c 100644 --- a/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx +++ b/src/content/examples/en/04_Input_Elements/02_DOM_Form_Elements/description.mdx @@ -7,9 +7,9 @@ oneLineDescription: Create a form and respond to the results. The Document Object Model, or DOM, represents the resulting structure of the web page. Using p5.js's form elements, -such as createInput(), -createSelect(), -and createRadio(), you can build different ways to take information submitted through +such as createInput(), +createSelect(), +and createRadio(), you can build different ways to take information submitted through a select, input, or radio button and update the DOM based on the information. diff --git a/src/content/examples/en/05_Transformation/00_Translate/description.mdx b/src/content/examples/en/05_Transformation/00_Translate/description.mdx index 676d4cc3e0..304361dd9c 100644 --- a/src/content/examples/en/05_Transformation/00_Translate/description.mdx +++ b/src/content/examples/en/05_Transformation/00_Translate/description.mdx @@ -6,14 +6,14 @@ oneLineDescription: Move the coordinate system origin. --- The -translate() +translate() function moves the origin of the coordinate system to the specified location. The -push() +push() and -pop() +pop() functions save and restore the coordinate system and various other drawing settings, such as the fill color. diff --git a/src/content/examples/en/05_Transformation/01_Rotate/description.mdx b/src/content/examples/en/05_Transformation/01_Rotate/description.mdx index 95dbd81ced..1f91b03b41 100644 --- a/src/content/examples/en/05_Transformation/01_Rotate/description.mdx +++ b/src/content/examples/en/05_Transformation/01_Rotate/description.mdx @@ -6,7 +6,7 @@ oneLineDescription: Rotate the coordinate system. --- The -rotate() +rotate() function rotates the current coordinate system around the current origin. @@ -15,7 +15,7 @@ In order to rotate around the center of the canvas, we must first translate the coordinate system, and then rotate around the new origin. The -push() +push() and -pop() +pop() functions save and restore the coordinate system, respectively. \ No newline at end of file diff --git a/src/content/examples/en/05_Transformation/02_Scale/description.mdx b/src/content/examples/en/05_Transformation/02_Scale/description.mdx index 0b0b5a7953..da58a33f62 100644 --- a/src/content/examples/en/05_Transformation/02_Scale/description.mdx +++ b/src/content/examples/en/05_Transformation/02_Scale/description.mdx @@ -6,14 +6,14 @@ oneLineDescription: Modify the coordinate system scale. --- The -scale() +scale() function scales the current coordinate system by the specified factor. The -push() +push() and -pop() +pop() functions save and restore the coordinate system, respectively. In this example, a square size 200 is drawn at the origin, with diff --git a/src/content/examples/en/06_Calculating_Values/00_Interpolate/description.mdx b/src/content/examples/en/06_Calculating_Values/00_Interpolate/description.mdx index db661346d3..fc92218833 100644 --- a/src/content/examples/en/06_Calculating_Values/00_Interpolate/description.mdx +++ b/src/content/examples/en/06_Calculating_Values/00_Interpolate/description.mdx @@ -10,7 +10,7 @@ calculates a value between two other values. For example, the number 5 is halfway between 0 and 10. Different types of interpolation use different rates of change between values. Linear interpolation, abbreviated as lerp, uses a constant rate of change. The -lerp() +lerp() function linearly interpolates between two numbers. Move the mouse across the screen and the symbol will follow. diff --git a/src/content/examples/en/06_Calculating_Values/01_Map/description.mdx b/src/content/examples/en/06_Calculating_Values/01_Map/description.mdx index bcb557e8f6..c327c3d72a 100644 --- a/src/content/examples/en/06_Calculating_Values/01_Map/description.mdx +++ b/src/content/examples/en/06_Calculating_Values/01_Map/description.mdx @@ -6,7 +6,7 @@ oneLineDescription: Convert a number from one range to another range. --- The -map() +map() function converts a value from one range to another. In this example, map converts the cursor's horizontal position from a range of 0-720 to 0-360. The resulting value become the circle's hue. Map also converts the cursor's diff --git a/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx b/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx index c04340d1dd..365d892ea2 100644 --- a/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx +++ b/src/content/examples/en/06_Calculating_Values/02_Random/description.mdx @@ -6,7 +6,7 @@ oneLineDescription: Get random numbers. --- This example demonstrates the use of the -random() +random() function. When the user presses the mouse button, the position and color diff --git a/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx b/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx index a27e91616e..0070e64ac0 100644 --- a/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx +++ b/src/content/examples/en/06_Calculating_Values/03_Constrain/description.mdx @@ -8,5 +8,5 @@ oneLineDescription: Keep a number within a range. This example draws a circle as the cursor's position but keeps the circle within a rectangle. It does so by passing the mouse's coordinates into the -constrain() +constrain() function. \ No newline at end of file diff --git a/src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx b/src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx index e75d9c55e0..ac025db0f0 100644 --- a/src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx +++ b/src/content/examples/en/06_Calculating_Values/04_Clock/description.mdx @@ -6,11 +6,11 @@ oneLineDescription: Get the current time. --- The current time can be read with the -second(), -minute(), -and hour() +second(), +minute(), +and hour() functions. This example uses -map() +map() to calculate the angle of the hands. It then uses -transformations +transformations to set their position. \ No newline at end of file diff --git a/src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx b/src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx index d8db14082e..3869f44e00 100644 --- a/src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx +++ b/src/content/examples/en/07_Repetition/00_Color_Interpolation/description.mdx @@ -10,9 +10,9 @@ calculates a value between two other values. For example, the number 5 is halfway between 0 and 10. Different types of interpolation use different rates of change between values. Linear interpolation, abbreviated as lerp, uses a constant rate of change. The -lerp() +lerp() function linearly interpolates between two numbers. The -lerpColor() +lerpColor() function, demonstrated here, linearly interpolates between two colors. In this example, the stripeCount variable adjusts how many horizontal stripes appear. Setting the value to a higher number will look less diff --git a/src/content/examples/en/07_Repetition/01_Color_Wheel/description.mdx b/src/content/examples/en/07_Repetition/01_Color_Wheel/description.mdx index fa9612ef95..3694fc9147 100644 --- a/src/content/examples/en/07_Repetition/01_Color_Wheel/description.mdx +++ b/src/content/examples/en/07_Repetition/01_Color_Wheel/description.mdx @@ -7,11 +7,11 @@ oneLineDescription: Create a visualization of the color spectrum. This example illustrates the appearance of different hues. It uses a -for loop +for loop to repeat transformations. The loop initializes a variable called angle, which changes the rotation of a circle as well as its hue. Each time the loop repeats, a circle is drawn relative to the center of the canvas. The -push() -and pop() +push() +and pop() functions make these transformations affect only the individual circle. \ No newline at end of file diff --git a/src/content/examples/en/07_Repetition/02_Bezier/description.mdx b/src/content/examples/en/07_Repetition/02_Bezier/description.mdx index e68cb19df2..e35ad36fb9 100644 --- a/src/content/examples/en/07_Repetition/02_Bezier/description.mdx +++ b/src/content/examples/en/07_Repetition/02_Bezier/description.mdx @@ -5,10 +5,10 @@ title: Bezier oneLineDescription: Draw a set of curves. --- -bezier() +bezier() curves are created using control and anchor points. The first two parameters for the -bezier() +bezier() function specify the first point in the curve and the last two parameters specify the last point. The middle parameters set the control points that define the shape of the curve. \ No newline at end of file diff --git a/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx b/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx index f90d3e2415..a80556e62c 100644 --- a/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx +++ b/src/content/examples/en/07_Repetition/03_Kaleidoscope/description.mdx @@ -7,7 +7,7 @@ oneLineDescription: Draw mirrored designs with the mouse. A kaleidoscope is an optical instrument with two or more reflecting surfaces tilted to each other at an angle. Using the -translate(), -rotate(), -and scale() functions, you can replicate the resulting visual +translate(), +rotate(), +and scale() functions, you can replicate the resulting visual of a kaleidoscope in a canvas. \ No newline at end of file diff --git a/src/content/examples/en/07_Repetition/04_Noise/description.mdx b/src/content/examples/en/07_Repetition/04_Noise/description.mdx index ad7ab956b8..c2c61eeb65 100644 --- a/src/content/examples/en/07_Repetition/04_Noise/description.mdx +++ b/src/content/examples/en/07_Repetition/04_Noise/description.mdx @@ -8,7 +8,7 @@ oneLineDescription: Generate naturalistic textures using Perlin noise. Perlin noise is an algorithm written by Ken Perlin to produce sequences that appear both random and organic. The -noise() +noise() function in p5 produces Perlin noise. The dots in this example are sized based on noise values. The slider on the diff --git a/src/content/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx b/src/content/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx index be822ccadb..3973b01018 100644 --- a/src/content/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx +++ b/src/content/examples/en/08_Listing_Data_with_Arrays/00_Random_Poetry/description.mdx @@ -6,8 +6,8 @@ oneLineDescription: Generate a poem with words randomly selected from a bank. --- Using the -floor() +floor() and -random() +random() functions, you can randomly select a series of items from an array and draw them at different sizes and positions on the canvas. \ No newline at end of file diff --git a/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx b/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx index 6aa569a6fd..3d95a8acf7 100644 --- a/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx +++ b/src/content/examples/en/09_Angles_And_Motion/01_Aim/description.mdx @@ -6,7 +6,7 @@ oneLineDescription: Rotate toward a point. --- The -atan2() +atan2() function calculates the angle between two positions. The angle it calculates can be used to rotate a shape toward something. In this example, the eyes rotate to look at the cursor. \ No newline at end of file diff --git a/src/content/examples/en/09_Angles_And_Motion/02_Triangle_Strip/description.mdx b/src/content/examples/en/09_Angles_And_Motion/02_Triangle_Strip/description.mdx index 0ddd359576..346ad00be3 100644 --- a/src/content/examples/en/09_Angles_And_Motion/02_Triangle_Strip/description.mdx +++ b/src/content/examples/en/09_Angles_And_Motion/02_Triangle_Strip/description.mdx @@ -7,8 +7,8 @@ oneLineDescription: Split a ring into triangles. This example demonstrates how to create a shape by specifying its vertices in TRIANGLE_STRIP mode, using the -beginShape(), -endShape(), +beginShape(), +endShape(), and -vertex() +vertex() functions. \ No newline at end of file diff --git a/src/content/examples/en/10_Games/02_Snake/description.mdx b/src/content/examples/en/10_Games/02_Snake/description.mdx index 94c7f6c07d..401311e49d 100644 --- a/src/content/examples/en/10_Games/02_Snake/description.mdx +++ b/src/content/examples/en/10_Games/02_Snake/description.mdx @@ -17,6 +17,6 @@ as possible without colliding the snake into itself or into the edges of the play area. This example uses an array of -vectors +vectors to store the positions of each of the segments of the snake. The arrow keys control the snake's movement. \ No newline at end of file diff --git a/src/content/examples/en/11_3D/00_Geometries/description.mdx b/src/content/examples/en/11_3D/00_Geometries/description.mdx index 4139847b28..c4606f799c 100644 --- a/src/content/examples/en/11_3D/00_Geometries/description.mdx +++ b/src/content/examples/en/11_3D/00_Geometries/description.mdx @@ -6,11 +6,11 @@ oneLineDescription: Draw 3D shapes, including a custom model. --- p5's -WEBGL +WEBGL mode includes 7 primitive shapes. Those shapes are plane, box, cylinder, cone, torus, sphere, and ellipsoid. Additionally, -model() +model() displays a custom geometry loaded via -loadModel(). +loadModel(). This example includes each of the primitive shapes. It also includes a model from NASA's collection. \ No newline at end of file diff --git a/src/content/examples/en/11_3D/01_Custom_Geometry/description.mdx b/src/content/examples/en/11_3D/01_Custom_Geometry/description.mdx index b733af1471..8110aa89cf 100644 --- a/src/content/examples/en/11_3D/01_Custom_Geometry/description.mdx +++ b/src/content/examples/en/11_3D/01_Custom_Geometry/description.mdx @@ -6,6 +6,6 @@ oneLineDescription: Generate a 3D shape programmatically. --- The -buildGeometry() +buildGeometry() function stores shapes into a 3D model that can be efficiently used and reused. \ No newline at end of file diff --git a/src/content/examples/en/11_3D/02_Materials/description.mdx b/src/content/examples/en/11_3D/02_Materials/description.mdx index 76cfd67bed..955b3c4927 100644 --- a/src/content/examples/en/11_3D/02_Materials/description.mdx +++ b/src/content/examples/en/11_3D/02_Materials/description.mdx @@ -7,12 +7,12 @@ oneLineDescription: Change 3D objects' color, texture, and how they respond to l In 3D rendering, a material determines how a surface responds to light. p5's -WEBGL +WEBGL mode supports -ambient, -emissive, -normal, and -specular +ambient, +emissive, +normal, and +specular materials. An ambient material responds to ambient light only. A specular @@ -28,6 +28,6 @@ color for the surface, and stroke sets the color for the object's vertices. Additionally, -texture() +texture() wraps an object with an image. The model and image texture in this example are from NASA's collection. \ No newline at end of file diff --git a/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx b/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx index 9a0e26120a..d50a32aad6 100644 --- a/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx +++ b/src/content/examples/en/11_3D/03_Orbit_Control/description.mdx @@ -6,7 +6,7 @@ oneLineDescription: Control the camera with the mouse. featured: true --- -Orbit control +Orbit control uses mouse or touch input to adjust camera orientation in a 3D sketch. To rotate the camera, left click and drag a mouse or swipe on a touch screen. To pan the camera, right click and drag a mouse diff --git a/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx b/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx index b036e33545..2ef014217f 100644 --- a/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx +++ b/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx @@ -8,7 +8,7 @@ oneLineDescription: Simulate a camera's depth of field. The shader in this example uses depth information from a -p5.Framebuffer +p5.Framebuffer to apply a blur. On a real camera, objects appear blurred if they are closer or farther than the lens's focus. This simulates that effect. First, the sketch renders five spheres to the framebuffer. diff --git a/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx b/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx index ce858f12d7..c550237b4b 100644 --- a/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx +++ b/src/content/examples/en/12_Advanced_Canvas_Rendering/00_Create_Graphics/description.mdx @@ -6,7 +6,7 @@ oneLineDescription: Draw imagery off-screen. --- The -createGraphics() +createGraphics() function can be used to create a new p5.Graphics object, which can serve as an off-screen graphics buffer within the canvas. Off-screen buffers can have different dimensions and properties than their current display surface, even diff --git a/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx b/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx index c4aa6c2af0..fb09587507 100644 --- a/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx +++ b/src/content/examples/en/13_Classes_And_Objects/00_Snowflakes/description.mdx @@ -8,5 +8,5 @@ oneLineDescription: Animate snowfall. This example demonstrates the use of a particle system to simulate the motion of falling snowflakes. This program defines a snowflake -class +class and uses an array to hold the snowflake objects. \ No newline at end of file diff --git a/src/content/examples/en/13_Classes_And_Objects/01_Shake_Ball_Bounce/description.mdx b/src/content/examples/en/13_Classes_And_Objects/01_Shake_Ball_Bounce/description.mdx index dd43660c11..4f3a0c0e22 100644 --- a/src/content/examples/en/13_Classes_And_Objects/01_Shake_Ball_Bounce/description.mdx +++ b/src/content/examples/en/13_Classes_And_Objects/01_Shake_Ball_Bounce/description.mdx @@ -6,7 +6,7 @@ oneLineDescription: Animate ball movement based on mobile device motion. --- Using a -class, +class, you can create a collection of circles that move within the canvas in response to the tilt of a mobile device. You must open this page on a mobile device to display the sketch. \ No newline at end of file diff --git a/src/content/examples/en/13_Classes_And_Objects/02_Connected_Particles/description.mdx b/src/content/examples/en/13_Classes_And_Objects/02_Connected_Particles/description.mdx index 458cd1712a..f0d7a68dac 100644 --- a/src/content/examples/en/13_Classes_And_Objects/02_Connected_Particles/description.mdx +++ b/src/content/examples/en/13_Classes_And_Objects/02_Connected_Particles/description.mdx @@ -6,7 +6,7 @@ oneLineDescription: Draw circles and connecting lines using the mouse. --- This example uses two custom -classes. +classes. The Particle class stores a position, velocity, and hue. It renders a circle using the current position and hue, and it updates the position using the current velocity. The Path class stores an array diff --git a/src/content/examples/en/14_Loading_And_Saving_Data/00_Local_Storage/description.mdx b/src/content/examples/en/14_Loading_And_Saving_Data/00_Local_Storage/description.mdx index f3177351e9..115b634546 100644 --- a/src/content/examples/en/14_Loading_And_Saving_Data/00_Local_Storage/description.mdx +++ b/src/content/examples/en/14_Loading_And_Saving_Data/00_Local_Storage/description.mdx @@ -8,15 +8,15 @@ oneLineDescription: Save data from the browser on the device. Browsers allow websites to store data on the visitor's device. This is called local storage. -The getItem(), -storeItem(), -clearStorage(), -and removeItem() +The getItem(), +storeItem(), +clearStorage(), +and removeItem() functions control it. This example is inspired by Daniel Shiffman's Loading JSON Data and Loading Tabular Data examples for Processing written in Java. It uses a -class +class to organize data for a bubble. The visitor can add new bubbles, and their data will be saved in local storage. If the visitor revisits the sketch, it will reload the same bubbles. \ No newline at end of file diff --git a/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx b/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx index d1e7be171e..10626c5f3e 100644 --- a/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx +++ b/src/content/examples/en/14_Loading_And_Saving_Data/01_JSON/description.mdx @@ -10,7 +10,7 @@ is a format for writing data in a file. While the syntax comes from JavaScript, JSON is used in many other contexts. This example is based on Daniel Shiffman's Loading JSON Data Example for Processing written in Java. It uses a -class +class to organize data for a bubble. When the sketch starts, it loads the data for two bubbles from a JSON file. The visitor can add new bubbles, download an updated JSON file, and load in a JSON file. \ No newline at end of file diff --git a/src/content/examples/en/14_Loading_And_Saving_Data/02_Table/description.mdx b/src/content/examples/en/14_Loading_And_Saving_Data/02_Table/description.mdx index 75decd10f5..13374ed204 100644 --- a/src/content/examples/en/14_Loading_And_Saving_Data/02_Table/description.mdx +++ b/src/content/examples/en/14_Loading_And_Saving_Data/02_Table/description.mdx @@ -7,7 +7,7 @@ oneLineDescription: Store data as comma-separated values. Comma-Separated Values, or CSV, is a format for writing data in a file. p5 can work with this format using a -p5.Table. +p5.Table. This example is based on Daniel Shiffman's Loading Tabular Data example for Processing. It uses a class to organize data representing diff --git a/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx b/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx index 0ed5c6b354..842434c9c9 100644 --- a/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/00_Non_Orthogonal_Reflection/description.mdx @@ -9,11 +9,11 @@ This example demonstrates a ball bouncing on a slanted surface, implemented using vector calculations for reflection. The code makes extensive use of the -p5.Vector +p5.Vector class, including the -createVector() function to create new vectors, +createVector() function to create new vectors, and the vector methods -add() +add() and -dot() +dot() for the vector calculations. \ No newline at end of file diff --git a/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx b/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx index 85f33c2406..00e4cf95ff 100644 --- a/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/01_Soft_Body/description.mdx @@ -8,6 +8,6 @@ oneLineDescription: Simulate the physics of a soft body accelerating toward the Physics simulation of a soft body experiencing acceleration toward the mouse position. The shape is created with curves using -curveVertex() +curveVertex() and -curveTightness(). \ No newline at end of file +curveTightness(). \ No newline at end of file diff --git a/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx b/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx index 82c28a8ed6..7fb736efae 100644 --- a/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/02_Forces/description.mdx @@ -11,7 +11,7 @@ resistance when in "water". (natureofcode.com) The force calculations are performed using the -p5.Vector +p5.Vector class, including the -createVector() +createVector() function to create vectors. \ No newline at end of file diff --git a/src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/description.mdx b/src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/description.mdx index 6717757baf..c4b0700807 100644 --- a/src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/description.mdx +++ b/src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/description.mdx @@ -13,12 +13,12 @@ Dan Shiffman's original for Processing. The code makes use of the -p5.Vector +p5.Vector class, including the -createVector() +createVector() function. The various calculations for updating particles' positions and velocities are performed with p5.Vector methods. The particle system is implemented as a -class, which contains an array of +class, which contains an array of objects (of class Particle). \ No newline at end of file diff --git a/src/content/tutorials/en/color-gradients.mdx b/src/content/tutorials/en/color-gradients.mdx index 8bb1731a96..26b9caf26d 100644 --- a/src/content/tutorials/en/color-gradients.mdx +++ b/src/content/tutorials/en/color-gradients.mdx @@ -58,7 +58,7 @@ This tutorial uses the [p5.js Web Editor](https://editor.p5js.org/) and is desig - See this [example sketch](https://editor.p5js.org/Msqcoding/sketches/mLfhMChZW) that sets up your webcam to display on the canvas.  - Visit the p5.reference pages for [`.position()`](/reference/p5.Element/position) and [`p5.Element`](/reference/p5/p5.Element) to learn more. - Create a function to take a snapshot with your webcam. - - Declare a global [Boolean](/reference/p5/boolean) variable called `snapped` and assign it a value of `false`. + - Declare a global [Boolean](/reference/p5/Boolean) variable called `snapped` and assign it a value of `false`. - This variable will keep track of when a snapshot is taken and is known as a [state](https://developer.mozilla.org/en-US/docs/Glossary/State_machine) variable. - Visit the MDN glossary for [state machine](https://developer.mozilla.org/en-US/docs/Glossary/State_machine) for more information about states. - Define a function called `takeSnap()` below your `setup()` function. diff --git a/src/content/tutorials/en/conditionals-and-interactivity.mdx b/src/content/tutorials/en/conditionals-and-interactivity.mdx index db8208c36f..73766e6078 100644 --- a/src/content/tutorials/en/conditionals-and-interactivity.mdx +++ b/src/content/tutorials/en/conditionals-and-interactivity.mdx @@ -471,7 +471,7 @@ if (sunHeight < horizon) { In the code above, we see that if the sun is above the horizon, `sunHeight < horizon `returns `true`, and the code `background("lightblue")` runs. When `sunHeight` is NOT less than the horizon the code block after the `else` keyword, `background(0)`, runs. Although both ways of writing the code have the same visual effect, sometimes it can be clearer and more efficient to use if-else, especially when two different code blocks can be controlled.  -Visit the p5.js reference page for [`if`](/reference/p5/if-else) and [`Boolean`](/reference/p5/boolean) to learn more. +Visit the p5.js reference page for [`if`](/reference/p5/if) and [`Boolean`](/reference/p5/Boolean) to learn more. #### Step Four: Add grass to hide the sun   diff --git a/src/content/tutorials/en/coordinates-and-transformations.mdx b/src/content/tutorials/en/coordinates-and-transformations.mdx index f8bb01ea43..7fd0ee5a3a 100644 --- a/src/content/tutorials/en/coordinates-and-transformations.mdx +++ b/src/content/tutorials/en/coordinates-and-transformations.mdx @@ -49,7 +49,7 @@ function draw() { ![An illustration showing a 2D coordinate system on the left, showing an origin of (0,0) at its top left, and a 3D coordinate system on the right, showing an origin of (0,0,0) in its center](../images/webgl/2d3d_coordinates.png) -You can call [`debugMode()`](https://p5js.org/reference/#/p5/debugMode) in your `setup()` function to add a grid on the x- and z-axes and the red-green-blue x, y, and z arrows to your sketch, similar to the illustration above. +You can call [`debugMode()`](https://p5js.org/reference/p5/debugMode) in your `setup()` function to add a grid on the x- and z-axes and the red-green-blue x, y, and z arrows to your sketch, similar to the illustration above. ## Transformations: Position and Size of 3D Shapes diff --git a/src/content/tutorials/en/field-guide-to-debugging.mdx b/src/content/tutorials/en/field-guide-to-debugging.mdx index 1743c9e567..3adebc78f3 100644 --- a/src/content/tutorials/en/field-guide-to-debugging.mdx +++ b/src/content/tutorials/en/field-guide-to-debugging.mdx @@ -244,7 +244,7 @@ function draw() { #### Solution: -The programmer solved the problem by adding a parenthesis between the last argument and a semicolon. They discovered this by visiting the p5.js reference page for [`rect()`](https://p5js.org/reference/#/p5/rect) and comparing code. +The programmer solved the problem by adding a parenthesis between the last argument and a semicolon. They discovered this by visiting the p5.js reference page for [`rect()`](https://p5js.org/reference/p5/rect) and comparing code. #### Pro Tips: @@ -283,7 +283,7 @@ p5.js says: [sketch.js, line 9] circle() was expecting at least 3 arguments but #### Bug: -According to the message in the console, [`circle()`](https://p5js.org/reference/#/p5/circle) only received 2 inputs when it expected 3. The message also specifies that the error is on line 9 of the sketch.  +According to the message in the console, [`circle()`](https://p5js.org/reference/p5/circle) only received 2 inputs when it expected 3. The message also specifies that the error is on line 9 of the sketch.  @@ -306,9 +306,9 @@ function draw() { #### Solution: -The programmer solved the problem by adding a third argument in [`circle()`](https://p5js.org/reference/#/p5/circle). +The programmer solved the problem by adding a third argument in [`circle()`](https://p5js.org/reference/p5/circle). -They discovered this by visiting the p5.js reference page for [`circle()`](https://p5js.org/reference/#/p5/circle) and comparing code. +They discovered this by visiting the p5.js reference page for [`circle()`](https://p5js.org/reference/p5/circle) and comparing code. #### Pro Tips: @@ -376,9 +376,9 @@ function draw() { #### Solution: -The programmer solved the problem by adding a *closing curly bracket* (`}`) on line 11 to close the [`draw()`](https://p5js.org/reference/#/p5/draw) function. +The programmer solved the problem by adding a *closing curly bracket* (`}`) on line 11 to close the [`draw()`](https://p5js.org/reference/p5/draw) function. -They discovered this by visiting the p5.js reference page for [`draw()`](https://p5js.org/reference/#/p5/draw) and comparing code. +They discovered this by visiting the p5.js reference page for [`draw()`](https://p5js.org/reference/p5/draw) and comparing code. #### Pro Tips: @@ -489,7 +489,7 @@ p5.js says: [sketch.js, line 10] circle() was expecting Number for the first par #### Bug: -According to the message in the console, the programmer made an error on line 10 - the [circle()](https://p5js.org/reference/#/p5/circle) function needs a [number](https://p5js.org/reference/#/p5/number) as the first parameter, but it was given a [string](https://p5js.org/reference/#/p5/string). +According to the message in the console, the programmer made an error on line 10 - the [circle()](https://p5js.org/reference/p5/circle) function needs a [number](https://p5js.org/reference/p5/number) as the first parameter, but it was given a [string](https://p5js.org/reference/p5/string). @@ -516,7 +516,7 @@ function draw() { #### Solution: -The programmer solved the problem by noticing that the variable `myX` was initialized with `"forty-five"`, which cannot be recognized as a [number](https://p5js.org/reference/#/p5/number). p5.js thinks it’s just a word with a [string](https://p5js.org/reference/#/p5/string) data type. +The programmer solved the problem by noticing that the variable `myX` was initialized with `"forty-five"`, which cannot be recognized as a [number](https://p5js.org/reference/p5/number). p5.js thinks it’s just a word with a [string](https://p5js.org/reference/p5/string) data type. #### Pro Tip: @@ -589,7 +589,7 @@ function draw() { #### Solution: -The programmer solved the problem by declaring `localVariable` outside of [`setup()`](https://p5js.org/reference/#/p5/setup) and [`draw()`](https://p5js.org/reference/#/p5/draw) and initializing it in [`setup()`](https://p5js.org/reference/#/p5/setup). +The programmer solved the problem by declaring `localVariable` outside of [`setup()`](https://p5js.org/reference/p5/setup) and [`draw()`](https://p5js.org/reference/p5/draw) and initializing it in [`setup()`](https://p5js.org/reference/p5/setup). #### Pro Tip: diff --git a/src/content/tutorials/en/intro-to-shaders.mdx b/src/content/tutorials/en/intro-to-shaders.mdx index f94e459886..3bf26118da 100644 --- a/src/content/tutorials/en/intro-to-shaders.mdx +++ b/src/content/tutorials/en/intro-to-shaders.mdx @@ -95,7 +95,7 @@ A shader program consists of two parts, a **vertex shader** and a **fragment sha -{ /* Note for contributors: Images/gifs generated from https://editor.p5js.org/davepagurek/sketches/gs-DbLzqV */} +{/* Note for contributors: Images/gifs generated from https://editor.p5js.org/davepagurek/sketches/gs-DbLzqV */} Each of these live in separate files and are loaded into p5.js using the `loadShader()` function. Once a shader is loaded, it can be used within `setup()` or `draw()`. The following example will show how to set up a basic shader within p5.js: @@ -671,7 +671,7 @@ In p5.js, a filter is something that looks at all the pixels on the canvas and t Filter shaders only need a fragment shader. Vertex shaders are primarily responsible for positioning shapes, and filters always apply to the whole canvas, so p5.js provides a default vertex shader for you. Rather than using `loadShader`, you use `createFilterShader(src)`, passing in a string with your shader source code. -There are a number of `uniform`s that will be available to you in a filter shader, and you can read about all of them [in the `createFilterShader` documentation.](https://p5js.org/reference/#/p5/createFilterShader) There are two main ones to know about to get started: +There are a number of `uniform`s that will be available to you in a filter shader, and you can read about all of them [in the `createFilterShader` documentation.](https://p5js.org/reference/p5/createFilterShader) There are two main ones to know about to get started: - `uniform sampler2D tex0` is a texture containing the contents of the canvas. - `varying vec2 vTexCoord` contains the coordinates on the canvas of the current pixel, ranging from 0 to 1. diff --git a/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx b/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx index 1ea52b4be9..604a787311 100644 --- a/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx +++ b/src/content/tutorials/en/layered-rendering-with-framebuffers.mdx @@ -73,7 +73,7 @@ Final image with focal blur using color + depth -{ /*Note for contributors: Image generated from https://editor.p5js.org/davepagurek/sketches/OUBu-yXuk*/} +{/*Note for contributors: Image generated from https://editor.p5js.org/davepagurek/sketches/OUBu-yXuk*/} ## Using a `p5.Framebuffer` @@ -366,7 +366,7 @@ function draw() { `} /> -Lots of music player software uses feedback to create audio visualizations. Try using feedback in a sketch that [reacts to music!](https://p5js.org/reference/#/p5.Amplitude) +Lots of music player software uses feedback to create audio visualizations. Try using feedback in a sketch that [reacts to music!](https://p5js.org/reference/p5.sound/p5.Amplitude) Here are some tips that will help as you create more advanced feedback effects. @@ -541,7 +541,7 @@ function draw() { } `} /> -If you want to customize how close to or far from the camera an object needs to be to get depth values of 0 or 1, specify near and far values in [`perspective()`](https://p5js.org/reference/#/p5/perspective). +If you want to customize how close to or far from the camera an object needs to be to get depth values of 0 or 1, specify near and far values in [`perspective()`](https://p5js.org/reference/p5/perspective). *Depth-based blur shaders are more advanced and are beyond the scope of this tutorial.* diff --git a/src/content/tutorials/en/repeating-with-loops.mdx b/src/content/tutorials/en/repeating-with-loops.mdx index 0c6811ff45..412d65e9be 100644 --- a/src/content/tutorials/en/repeating-with-loops.mdx +++ b/src/content/tutorials/en/repeating-with-loops.mdx @@ -36,8 +36,8 @@ In this tutorial, you will: - Draw and update repetitive tasks and shapes using *for loops* - Use custom functions to update variables and program states and make changes in the program as the sketch runs. -- Use [conditional statements](/reference/p5/if-else) and `random()` to generate different outcomes -- Run and stop your sketch using mouse triggers and [Boolean variables](/reference/p5/boolean) +- Use [conditional statements](/reference/p5/if) and `random()` to generate different outcomes +- Run and stop your sketch using mouse triggers and [Boolean variables](/reference/p5/Boolean) - Store the positions of the caterpillars in an array ### What you’ll need @@ -162,7 +162,7 @@ function draw() { } `} /> -### [If-statements](/reference/p5/if-else) +### [If-statements](/reference/p5/if) If-statements, like the one applied above, refer to blocks of code that are executed only when a given condition is true. It is normally written: @@ -174,7 +174,7 @@ if () { The condition is specified inside the parentheses of the if-statement. The curly brackets `{ }` mark the start and end of the block of code. In Step 2, the condition `circX > finishLine` stops `draw()` from running again when the x-coordinate of the circle is greater than the value of `finishLine` by calling `noLoop()`. -Visit the p5.js reference for [if](/reference/p5/if-else) to learn more. +Visit the p5.js reference for [if](/reference/p5/if) to learn more. ## Step 3 – Draw one caterpillar diff --git a/src/content/tutorials/en/responding-to-inputs.mdx b/src/content/tutorials/en/responding-to-inputs.mdx index d7ac9a1e8a..9df8c2ead3 100644 --- a/src/content/tutorials/en/responding-to-inputs.mdx +++ b/src/content/tutorials/en/responding-to-inputs.mdx @@ -381,7 +381,7 @@ function checkSelf() { - It sets the initial direction to the right  with `snake.xSpeed = 1` and `snake.ySpeed = 0`,  - It creates an empty array to manage the snake’s body, creates a head segment with the current position, and adds it to the body array. -The `checkEdges()` function uses [if-statements](/reference/p5/if-else) to check if the snake has reached the right edge (`cols`), if the snake has reached the left edge (`-1`), if the snake has reached the top edge (`-1`), and if the snake has reached the bottom edge (`rows`). Whenever any of the conditions are met, it sets `gameOver` to `true`. This creates the rule in the game where if the snake reaches any edge, the game is over. The `moveSnake()` function updates the snake’s position based on its current speed. It updates the x and y positions by adding its `xSpeed` and `ySpeed`, respectively. Refer to the [Conditions and Interactivity](/tutorials/conditionals-and-interactivity/) tutorial to review the syntax for if-statements and updating variables. +The `checkEdges()` function uses [if-statements](/reference/p5/if) to check if the snake has reached the right edge (`cols`), if the snake has reached the left edge (`-1`), if the snake has reached the top edge (`-1`), and if the snake has reached the bottom edge (`rows`). Whenever any of the conditions are met, it sets `gameOver` to `true`. This creates the rule in the game where if the snake reaches any edge, the game is over. The `moveSnake()` function updates the snake’s position based on its current speed. It updates the x and y positions by adding its `xSpeed` and `ySpeed`, respectively. Refer to the [Conditions and Interactivity](/tutorials/conditionals-and-interactivity/) tutorial to review the syntax for if-statements and updating variables. - The `updateBody()` function updates the positions of the snake’s body segments. It does this by iterating through the snake `body` array starting from the end, updating each body segment’s position to match the position of the segment in front of it. Then it updates the head’s position to the snake’s current position. Refer to the [Repeating with Loops](/tutorials/repeating-with-loops) tutorial to review the syntax for loops and iteration. - The `drawSnake()` function renders the snake on the canvas. It sets the color to green, iterates through each body segment, and draws a square on the canvas at its position.