Update some more tutorials for 2.0

src/content/tutorials/en/animating-with-media-objects.mdx.todo → src/content/tutorials/en/animating-with-media-objects.mdx

@@ -32,7 +32,7 @@ p5.js makes it fun and simple to draw, color and animate shapes on an HTML canva
 
 Image and GIF files contain information that can be used to display or modify them in a p5.js project. In this tutorial you will create an [interactive animation](https://editor.p5js.org/joanneamarisa/sketches/PFmWqy0qB) using media and learn to: 
 
-- Upload and display image files in a p5.js sketch using the [`preload()`](/reference/p5/preload) function and [`p5.Image`](/reference/p5/p5.Image) objects
+- Upload and display image files in a p5.js sketch using [`p5.Image`](/reference/p5/p5.Image) objects
 - Adjust the appearance of image files in p5.js using [`p5.Image`](/reference/p5/p5.Image) methods for sizing, positioning, an styling
 - Interact with [`p5.Image`](/reference/p5/p5.Image) objects 
 - Create an extra drawing surface using [`createGraphics()`](/reference/p5/createGraphics)
@@ -92,10 +92,10 @@ JPEGs and PNGs are among the most common types of static images, which are image
 
 ## Step 2 – Load the images into the canvas
 
-- Declare four global variables to represent each image: `let flower1, flower2, flower3, water;`
-- Define the [`preload()`](/reference/p5/preload) function after global variables are declared, and directly before function `setup()`.
 - In the `preload()` function, type in `flower1 = loadImage("flower-1.png");`
-  - This loads the image information into memory using the [`loadImage()`](/reference/p5/loadImage) function.
+- Declare four global variables to represent each image: `let flower1, flower2, flower3, water;`
+- Make [`setup()`](/reference/p5/setup) an `async` function.
+  - This lets us load the image information into memory using the [`loadImage()`](/reference/p5/loadImage) function.
   - The image is assigned to the global variable `flower1`.
   - Repeat this step for all the images.
 
@@ -108,20 +108,15 @@ let flower2;
 let flower3;
 let water;
 
-function preload() {
+async function setup() {
   //Load the image files.
-  flower1 = loadImage("flower-1.png");
-  flower2 = loadImage("flower-2.png");
-  flower3 = loadImage("flower-3.png");
-  water = loadImage("Water.gif");
+  flower1 = await loadImage("flower-1.png");
+  flower2 = await loadImage("flower-2.png");
+  flower3 = await loadImage("flower-3.png");
+  water = await loadImage("Water.gif");
 }
 ```
 
-### [`preload()`](/reference/p5/preload)
-
-`preload()` is a function that is automatically called by the p5.js library. It is used to load external files in a sketch allowing the computer time to complete this process before your sketch runs. The `setup()` and `draw()` functions only run once the `preload()` function has completed.
-
-
 ### [`loadImage()`](/reference/p5/loadImage)
 
 `loadImage()` follows a path to an image in its located folder, and loads it into memory as a [`p5.Image`](/reference/p5/p5.Image) object. `p5.Image` is an *object* that stores image information. There are many data types in p5.js including integers, Booleans and strings. Later in this tutorial, we’ll explore together how p5.js functions can use that image data.
@@ -138,7 +133,7 @@ Alternatively, if you load the image from the web, type in the image URL wrapped
 When using a web-based image, make sure to access it from a secure and trusted server. Be mindful also of any copyright or licensing required to use the image.
 </Callout>
 
-Visit the p5.js Reference to learn more about the [`preload()`](/reference/p5/preload)  [`loadImage()`](/reference/p5/loadImage) functions.
+Visit the p5.js Reference to learn more about the [`loadImage()`](/reference/p5/loadImage) function.
 
 
 ## Step 3 – Draw the images onto the canvas
@@ -170,15 +165,13 @@ let water;
 //y coordinate for all images
 let flowerY = 200;
 
-function preload() {
+async function setup() {
   // Load the image files.
-  flower1 = loadImage("flower-1.png");
-  flower2 = loadImage("flower-2.png");
-  flower3 = loadImage("flower-3.png");
-  water = loadImage("Water.gif");
-}
+  flower1 = await loadImage("flower-1.png");
+  flower2 = await loadImage("flower-2.png");
+  flower3 = await loadImage("flower-3.png");
+  water = await loadImage("Water.gif");
 
-function setup() {
   // Set a 400x400 px canvas.
   createCanvas(400,400);
 
@@ -225,15 +218,13 @@ let water;
 //y coordinate for all images
 let flowerY = 200;
 
-function preload() {
+async function setup() {
   // Load the image files.
-  flower1 = loadImage("flower-1.png");
-  flower2 = loadImage("flower-2.png");
-  flower3 = loadImage("flower-3.png");
-  water = loadImage("Water.gif");
-}
+  flower1 = await loadImage("flower-1.png");
+  flower2 = await loadImage("flower-2.png");
+  flower3 = await loadImage("flower-3.png");
+  water = await loadImage("Water.gif");
 
-function setup() {
   // Set a 400x400 px canvas.
   createCanvas(400,400);
 
@@ -312,15 +303,13 @@ let water;
 let flowerY = 350;
 let flowerSize = 20;
 
-function preload() {
+async function setup() {
   // Load the image files.
-  flower1 = loadImage("flower-1.png");
-  flower2 = loadImage("flower-2.png");
-  flower3 = loadImage("flower-3.png");
-  water = loadImage("Water.gif");
-}
+  flower1 = await loadImage("flower-1.png");
+  flower2 = await loadImage("flower-2.png");
+  flower3 = await loadImage("flower-3.png");
+  water = await loadImage("Water.gif");
 
-function setup() {
   // Set a 400x400 px canvas.
   createCanvas(400,400);
 
@@ -482,15 +471,13 @@ let water;
 let flowerY = 350;
 let flowerSize = 20;
 
-function preload() {
+async function setup() {
   // Load the image files.
-  flower1 = loadImage("flower-1.png");
-  flower2 = loadImage("flower-2.png");
-  flower3 = loadImage("flower-3.png");
-  water = loadImage("Water.gif");
-}
+  flower1 = await loadImage("flower-1.png");
+  flower2 = await loadImage("flower-2.png");
+  flower3 = await loadImage("flower-3.png");
+  water = await loadImage("Water.gif");
 
-function setup() {
   // Set a 400x400 px canvas.
   createCanvas(400,400);
 
@@ -596,15 +583,13 @@ let water;
 let flowerY = 350;
 let flowerSize = 20;
 
-function preload() {
+async function setup() {
   // Load the image files.
-  flower1 = loadImage("flower-1.png");
-  flower2 = loadImage("flower-2.png");
-  flower3 = loadImage("flower-3.png");
-  water = loadImage("Water.gif");
-}
+  flower1 = await loadImage("flower-1.png");
+  flower2 = await loadImage("flower-2.png");
+  flower3 = await loadImage("flower-3.png");
+  water = await loadImage("Water.gif");
 
-function setup() {
   // Set a 400x400 px canvas.
   createCanvas(400,400);
 
@@ -682,15 +667,13 @@ let water;
 let flowerY = 350;
 let flowerSize = 20;
 
-function preload() {
+async function setup() {
   // Load the image files.
-  flower1 = loadImage("flower-1.png");
-  flower2 = loadImage("flower-2.png");
-  flower3 = loadImage("flower-3.png");
-  water = loadImage("Water.gif");
-}
+  flower1 = await loadImage("flower-1.png");
+  flower2 = await loadImage("flower-2.png");
+  flower3 = await loadImage("flower-3.png");
+  water = await loadImage("Water.gif");
 
-function setup() {
   // Set a 400x400 px canvas.
   createCanvas(400,400);
 
@@ -818,9 +801,10 @@ let flower3;
 let water;
 let garden; // variable for the new graphics object.
 
-// ... preload()
+async function setup() {
+
+  // ... loading images
 
-function setup() {
   // Set a 400x400 px canvas.
   createCanvas(400, 400);
 
@@ -904,15 +888,13 @@ let garden;
 
 let flowerY = 200;
 
-function preload() {
+async function setup() {
   // Load the image files.
-  flower1 = loadImage("flower-1.png");
-  flower2 = loadImage("flower-2.png");
-  flower3 = loadImage("flower-3.png");
-  water = loadImage("Water.gif");
-}
+  flower1 = await loadImage("flower-1.png");
+  flower2 = await loadImage("flower-2.png");
+  flower3 = await loadImage("flower-3.png");
+  water = await loadImage("Water.gif");
 
-function setup() {
   // Set a 400x400 px canvas.
   createCanvas(400,400);
 
@@ -1013,15 +995,13 @@ let garden;
 
 let flowerY = 200;
 
-function preload() {
+async function setup() {
   // Load the image files.
-  flower1 = loadImage("flower-1.png");
-  flower2 = loadImage("flower-2.png");
-  flower3 = loadImage("flower-3.png");
-  water = loadImage("Water.gif");
-}
+  flower1 = await loadImage("flower-1.png");
+  flower2 = await loadImage("flower-2.png");
+  flower3 = await loadImage("flower-3.png");
+  water = await loadImage("Water.gif");
 
-function setup() {
   // Set a 400x400 px canvas.
   createCanvas(400,400);
 
@@ -1113,15 +1093,13 @@ let garden;
 
 let flowerY = 200;
 
-function preload() {
+async function setup() {
   // Load the image files.
-  flower1 = loadImage("flower-1.png");
-  flower2 = loadImage("flower-2.png");
-  flower3 = loadImage("flower-3.png");
-  water = loadImage("Water.gif");
-}
+  flower1 = await loadImage("flower-1.png");
+  flower2 = await loadImage("flower-2.png");
+  flower3 = await loadImage("flower-3.png");
+  water = await loadImage("Water.gif");
 
-function setup() {
   // Set a 400x400 px canvas.
   createCanvas(400,400);
 
@@ -1234,7 +1212,7 @@ function keyPressed() {
 
 Congratulations on completing this tutorial! You have now created and [modified a GIF animation](https://editor.p5js.org/joanneamarisa/sketches/PFmWqy0qB) using p5.js. Visit the p5.js Reference pages below to explore other ways to display and manipulate images, pixels, and animated GIFs in p5.js.
 
-Here is [the complete code from this tutorial](https://editor.p5js.org/joanneamarisa/sketches/PFmWqy0qB) for reference.
+{/*Here is [the complete code from this tutorial](https://editor.p5js.org/joanneamarisa/sketches/PFmWqy0qB) for reference.*/}
 
 
 ### Resources & References

src/content/tutorials/en/intro-to-shaders.mdx.todo → src/content/tutorials/en/intro-to-glsl.mdx

@@ -1,6 +1,6 @@
 ---
-title: "Introduction to Shaders"
-description: An introduction to the different ways you can create interesting visual effects with your computer's GPU.
+title: "Introduction to GLSL"
+description: An introduction to the different ways you can create interesting visual effects with your computer's GPU using GLSL.
 category: webgl
 categoryIndex: 3
 featuredImage: ../images/featured/intro-to-shaders.jpg
@@ -101,11 +101,9 @@ Each of these live in separate files and are loaded into p5.js using the `loadSh
 
 ```javascript
 let myShader;
-function preload() {
+async function setup() {
   // load each shader file (don't worry, we will come back to these!)
-  myShader = loadShader('shader.vert', 'shader.frag');
-}
-function setup() {
+  myShader = await loadShader('shader.vert', 'shader.frag');
   // the canvas has to be created with WEBGL mode
   createCanvas(windowWidth, windowHeight, WEBGL);
 }

src/content/tutorials/en/lights-camera-materials.mdx.todo → src/content/tutorials/en/lights-camera-materials.mdx

@@ -258,11 +258,9 @@ More custom materials can be achieved by using the `texture()` function. This al
 
 <EditableSketch base="/images/tutorials/" code={`
 let myTexture;
-function preload() {
-  myTexture = loadImage('simpleTexture.png');
-}
-function setup() {
+async function setup() {
   createCanvas(200, 200, WEBGL);
+  myTexture = await loadImage('simpleTexture.png');
   describe('a rotating box with a texture of a pink scribble mapped onto it');
 }
 function draw() {
@@ -285,11 +283,9 @@ The texture coordinates of a vertex can stay the same while its 3D position chan
 
 <EditableSketch base="/images/tutorials/" code={`
 let img;
-function preload() {
-  img = loadImage('wiggly-guy.png');
-}
-function setup() {
+async function setup() {
   createCanvas(200, 200, WEBGL);
+  img = await loadImage('wiggly-guy.png');
   describe('A cartoon drawing of a person wiggling');
 }
 function draw() {

src/content/tutorials/en/loading-and-selecting-fonts.mdx.todo → src/content/tutorials/en/loading-and-selecting-fonts.mdx

@@ -6,7 +6,6 @@ featuredImage: ../images/featured/FontsA.png
 featuredImageAlt: "Bold typography in contrasting white and black against a deep blue background. It features the words 'FONTSTYLE' in black at the top. 'TYPEFACE' is in white in the middle. 'abc' is in white at the bottom. Each is in a different font size. This creates a bold and striking display of font styles and typefaces."
 relatedContent:
   references:
-    - en/p5/preload
     - en/p5/loadfont
     - en/p5/textfont
     - en/p5/text
@@ -137,19 +136,18 @@ In your web editor, click on the + icon on the top right corner of your screen a
 ![A dynamic GIF illustrating how to create a folder on the p5.js web editor. You open the files window on the top left by clicking the “>” icon, click the plus icon and select the “Create Folder" option.](../images/web-design/create-folder.gif)
 
 
-### Step 5 – Preload your font
+### Step 5 – Load your font
 
-p5.js’ [`preload()`](/reference/p5/preload)  function loads external assets before the rest of your sketch is executed. The `preload()` function is called directly before `setup()`. It is used to handle asynchronous loading of external files in a blocking way. If the `preload()` function is defined, `setup()` will wait until any load calls within have finished.
+p5.js’ [`setup()`](/reference/p5/preload) function can load external assets. If you add the `async` keyword before `function setup`, you can `await` the loading of an asset.
 
 For example: 
 
 <EditableSketch code={`
 let myFont;
-function preload() {
+async function setup() {
   // Load a custom font before the sketch starts
-  myFont = loadFont('Bold.ttf');
-}
-function setup() {
+  myFont = await loadFont('Bold.ttf');
+
   createCanvas(400, 200);
   background(255);
   // Apply the loaded font
@@ -161,18 +159,19 @@ function setup() {
 }
 `} />
 
-Inside the `preload()` function, you can use p5.js's various asset-loading functions such as `loadImage()`, `loadSound()`, and `loadFont()` to load external files. These functions take the path to the asset file as an argument.
+Inside the `async function setup()`, you can use p5.js's various asset-loading functions such as `loadImage()`, `loadSound()`, and `loadFont()` to load external files. These functions take the path to the asset file as an argument.
 
-At the start of your `sketch.js` file, write the following code:
+At the start of your `sketch.js` file, modify your `setup` function to be the following code:
 
 ```js
 let myFont;
-function preload(){
-  myFont = loadFont("assets/PressStart2P-Regular.ttf");
-}
+async function setup() {
+  myFont = await loadFont("assets/PressStart2P-Regular.ttf");
+
+  // ...the rest of setup goes below
 ```
 
-You declare a variable myFont to store your font. The `preload()` function loads your font with the `loadFont()` function, passing your file path as the argument. 
+You declare a variable myFont to store your font. The `setup()` function waits for your font to load with the `loadFont()` function, passing your file path as the argument. 
 
 
 ### Step 6 – Use your fonts in your display messages