Migrate examples to 2.0

Author: davepagurek

src/content/examples/en/03_Imported_Media/00_Words/code.js

@@ -2,20 +2,18 @@
 let font;
 let fontsize = 40;
 
-function preload() {
-  // Preload the font's file in the canvas's assets directory.
-  // loadFont() accepts .ttf or .otf files.
-  font = loadFont('/assets/SourceSansPro-Regular.otf');
-}
-
-function setup() {
+async function setup() {
   describe(
     'Three columns of the words “ichi,” “ni,” “san,” and “shi” on a white background. The first column is right aligned, the middle column is center aligned, and the left column is left aligned.'
   );
 
   createCanvas(710, 400);
   background(250);
 
+  // Preload the font's file in the canvas's assets directory.
+  // loadFont() accepts .ttf or .otf files.
+  font = await loadFont('/assets/SourceSansPro-Regular.otf');
+
   // Set the text styling to the predefined font and font size.
   textFont(font);
   textSize(fontsize);

src/content/examples/en/03_Imported_Media/01_Copy_Image_Data/code.js

@@ -1,20 +1,19 @@
 // Define the global variables: bottomImg and topImg.
 let bottomImg, topImg;
 
-function preload() {
-  // Preload the images from the canvas's assets directory.
-  // The bottomImg is the photograph with color,
-  // and the topImg is the black-and-white photograph.
-  bottomImg = loadImage('/assets/parrot-color.png');
-  topImg = loadImage('/assets/parrot-bw.png');
-}
-function setup() {
+async function setup() {
   describe(
     'Black-and-white photograph of a parrot. The cursor, when dragged across the canvas, adds color to the photograph.'
   );
 
   createCanvas(720, 400);
 
+  // Preload the images from the canvas's assets directory.
+  // The bottomImg is the photograph with color,
+  // and the topImg is the black-and-white photograph.
+  bottomImg = await loadImage('/assets/parrot-color.png');
+  topImg = await loadImage('/assets/parrot-bw.png');
+
   // Hide the cursor and replace it with a picture of
   // a paintbrush.
   noCursor();

src/content/examples/en/03_Imported_Media/02_Alpha_Mask/code.js

@@ -1,19 +1,15 @@
-// Preload the image assets from the canvas
-// assets directory.
-function preload() {
-  // Photo by Sergey Shmidt, https://unsplash.com/photos/koy6FlCCy5s
-  img = loadImage('/assets/image.jpg');
-
-  // Photo by Mockup Graphics, https://unsplash.com/photos/_mUVHhvBYZ0
-  imgMask = loadImage('/assets/mask.png');
-}
-
-function setup() {
+async function setup() {
   describe(
     'Two photos, the one on the left labeled with "Masked Image" and the one on the right labeled with "Mask."'
   );
   createCanvas(710, 400);
 
+  // Photo by Sergey Shmidt, https://unsplash.com/photos/koy6FlCCy5s
+  img = await loadImage('/assets/image.jpg');
+
+  // Photo by Mockup Graphics, https://unsplash.com/photos/_mUVHhvBYZ0
+  imgMask = await loadImage('/assets/mask.png');
+
   // Use the mask() method to apply imgMask photo as a
   // mask for img.
   img.mask(imgMask);

src/content/examples/en/03_Imported_Media/03_Image_Transparency/code.js

@@ -5,17 +5,15 @@ let img;
 let offset = 0;
 let easing = 0.05;
 
-function preload() {
-  // Load the bottom image from the canvas's assets directory.
-  img = loadImage('/assets/moonwalk.jpg');
-}
-
-function setup() {
+async function setup() {
   describe(
     "An astronaut on a planet as the background with a slightly transparent version of this image on top that moves with the horizontal direction of the user's mouse."
   );
 
   createCanvas(720, 400);
+
+  // Load the bottom image from the canvas's assets directory.
+  img = await loadImage('/assets/moonwalk.jpg');
 }
 
 function draw() {

src/content/examples/en/10_Games/02_Snake/code.js

@@ -251,8 +251,8 @@ function updateFruitCoordinates() {
 // When an arrow key is pressed, switch the snake's direction of movement,
 // but if the snake is already moving in the opposite direction,
 // do nothing.
-function keyPressed() {
-  switch (keyCode) {
+function keyPressed(event) {
+  switch (event.code) {
     case LEFT_ARROW:
       if (direction !== 'right') {
         direction = 'left';

src/content/examples/en/11_3D/00_Geometries/code.js

@@ -1,12 +1,9 @@
 // Variable to store NASA model
 let astronaut;
 
-function preload() {
-  astronaut = loadModel('/assets/astronaut.obj');
-}
-
-function setup() {
+async function setup() {
   createCanvas(710, 400, WEBGL);
+  astronaut = await loadModel('/assets/astronaut.obj');
 
   angleMode(DEGREES);
 

src/content/examples/en/11_3D/02_Materials/code.js

@@ -14,14 +14,14 @@ let emissivePicker;
 // Selected colors
 let fillSelection, strokeSelection, ambientSelection, specularSelection;
 
-// Load astronaut model and venus image texture
-function preload() {
-  astronaut = loadModel('/assets/astronaut.obj');
-  venus = loadImage('/assets/venus.jpg');
-}
 
-function setup() {
+async function setup() {
   createCanvas(400, 400, WEBGL);
+
+  // Load astronaut model and venus image texture
+  astronaut = await loadModel('/assets/astronaut.obj');
+  venus = await loadImage('/assets/venus.jpg');
+
   angleMode(DEGREES);
   createSelectionArea();
 

src/content/examples/en/14_Loading_And_Saving_Data/02_Table/code.js

@@ -11,11 +11,6 @@ let mousePressY = 0;
 // Remember whether bubble is currently being created
 let creatingBubble = false;
 
-// Put any asynchronous data loading in preload to complete before "setup" is run
-function preload() {
-  table = loadTable('/assets/bubbles.csv', 'header', loadData);
-}
-
 // Convert saved Bubble data into Bubble Objects
 function loadData(table) {
   bubbles = [];
@@ -32,9 +27,11 @@ function loadData(table) {
   }
 }
 
-function setup() {
+async function setup() {
   let p5Canvas = createCanvas(640, 360);
 
+  table = await loadTable('/assets/bubbles.csv', ',', 'header', loadData);
+
   // When canvas is clicked, call saveMousePress()
   p5Canvas.mousePressed(saveMousePress);
 

src/content/examples/en/15_Math_And_Physics/01_Soft_Body/code.js

@@ -66,13 +66,13 @@ function drawShape() {
 
   // Draw the polygon
 
-  curveTightness(organicConstant);
+  splineProperty('tightness', organicConstant);
   let shapeColor = lerpColor(color('red'), color('yellow'), organicConstant);
   fill(shapeColor);
 
   beginShape();
   for (let i = 0; i < nodes; i++) {
-    curveVertex(nodeX[i], nodeY[i]);
+    splineVertex(nodeX[i], nodeY[i]);
   }
   endShape(CLOSE);
 }

src/content/examples/en/15_Math_And_Physics/03_Smoke_Particle_System/code.js

@@ -2,13 +2,10 @@
 let particleTexture;
 let particleSystem;
 
-function preload() {
-  particleTexture = loadImage('/assets/particle_texture.png');
-}
-
-function setup() {
+async function setup() {
   // Set the canvas size
   createCanvas(720, 400);
+  particleTexture = await loadImage('/assets/particle_texture.png');
   colorMode(HSB);
 
   // Initialize the particle system

src/content/examples/en/15_Math_And_Physics/05_Mandelbrot/code.js

@@ -79,7 +79,7 @@ function setup() {
 
       // Copy the RGBA values from the color to the pixel
       for (let i = 0; i < 4; i += 1) {
-        pixels[index + i] = pixelColor.levels[i];
+        pixels[index + i] = pixelColor.array()[i] * 255;
       }
 
       x += dx;