Merge pull request #7739 from perminder-17/patch-9

Updating all the broken refrence examples.

Author: ksen0

src/accessibility/describe.js

@@ -75,6 +75,11 @@ function describe(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   *  createCanvas(100, 100);
+   * };
+   * 
    * function draw() {
    *   background(200);
    *
@@ -96,6 +101,11 @@ function describe(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   * createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   background(200);
    *

src/accessibility/outputs.js

@@ -81,6 +81,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   *  createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   // Add the text description.
    *   textOutput();
@@ -101,6 +106,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   *  createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   // Add the text description and
    *   // display it for debugging.
@@ -215,6 +225,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup() {
+   *   createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   // Add the grid description.
    *   gridOutput();
@@ -235,6 +250,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   *  createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   // Add the grid description and
    *   // display it for debugging.
@@ -255,6 +275,7 @@ function outputs(p5, fn){
    * </div>
    */
 
+
   fn.gridOutput = function(display) {
     // p5._validateParameters('gridOutput', arguments);
     //if gridOutput is already true

src/color/p5.Color.js

@@ -381,7 +381,7 @@ class Color {
    * }
    * </code>
    * </div>
-   **/
+   */
   setGreen(new_green, max=[0, 1]) {
     if(!Array.isArray(max)){
       max = [0, max];
@@ -492,7 +492,7 @@ class Color {
    * }
    * </code>
    * </div>
-   **/
+   */
   setAlpha(new_alpha, max=[0, 1]) {
     if(!Array.isArray(max)){
       max = [0, max];

src/core/environment.js

@@ -31,17 +31,17 @@ function environment(p5, fn){
    * @method print
    * @param {Any} contents content to print to the console.
    * @example
-   * <div>
-   * <code class="norender">
+   * <div class="norender">
+   * <code>
    * function setup() {
    *   // Prints "hello, world" to the console.
    *   print('hello, world');
    * }
    * </code>
    * </div>
    *
-   * <div>
-   * <code class="norender">
+   * <div class="norender">
+   * <code>
    * function setup() {
    *   let name = 'ada';
    *   // Prints "hello, ada" to the console.

src/core/main.js

@@ -464,10 +464,14 @@ for (const k in constants) {
  * ```
  *
  * Code placed in `setup()` will run once before code placed in
- * <a href="#/p5/draw">draw()</a> begins looping. If the
- * <a href="#/p5/preload">preload()</a> is declared, then `setup()` will
- * run immediately after <a href="#/p5/preload">preload()</a> finishes
- * 
+ * <a href="#/p5/draw">draw()</a> begins looping.
+ * If `setup()` is declared `async` (e.g. `async function setup()`),
+ * execution pauses at each `await` until its promise resolves.
+ * For example, `font = await loadFont(...)` waits for the font asset
+ * to load because `loadFont()` function returns a promise, and the await 
+ * keyword means the program will wait for the promise to resolve.
+ * This ensures that all assets are fully loaded before the sketch continues.
+
  * 
  * loading assets.
  *
@@ -539,7 +543,6 @@ for (const k in constants) {
  * </code>
  * </div>
  */
-
 /**
  * A function that's called repeatedly while the sketch runs.
  *

src/dom/dom.js

@@ -352,7 +352,7 @@ function dom(p5, fn){
    * let slider;
    *
    * function setup() {
-   *   createCanvas(100, 100);
+   *   createCanvas(200, 200);
    *
    *   // Create a paragraph element and place
    *   // it at the top of the canvas.
@@ -593,10 +593,10 @@ function dom(p5, fn){
    *   background(200);
    *
    *   let img = createImg(
-   *     'https://p5js.org/assets/img/asterisk-01.png',
-   *     'The p5.js magenta asterisk.'
+   *     '/assets/cat.jpg',
+   *     'image of a cat'
    *   );
-   *   img.position(0, -10);
+   *   img.position(0, 10);
    *
    *   describe('A gray square with a magenta asterisk in its center.');
    * }
@@ -945,7 +945,7 @@ function dom(p5, fn){
    *
    *   // Create a checkbox and place it beneath the canvas.
    *   checkbox = createCheckbox();
-   *   checkbox.position(0, 100);
+   *   checkbox.position(0, 70);
    *
    *   describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');
    * }
@@ -971,7 +971,7 @@ function dom(p5, fn){
    *   // Create a checkbox and place it beneath the canvas.
    *   // Label the checkbox "white".
    *   checkbox = createCheckbox(' white');
-   *   checkbox.position(0, 100);
+   *   checkbox.position(0, 70);
    *
    *   describe('A black square with a checkbox labeled "white" beneath it. The square turns white when the box is checked.');
    * }
@@ -997,7 +997,7 @@ function dom(p5, fn){
    *   // Create a checkbox and place it beneath the canvas.
    *   // Label the checkbox "white" and set its value to true.
    *   checkbox = createCheckbox(' white', true);
-   *   checkbox.position(0, 100);
+   *   checkbox.position(0, 70);
    *
    *   describe('A white square with a checkbox labeled "white" beneath it. The square turns black when the box is unchecked.');
    * }
@@ -1876,7 +1876,7 @@ function dom(p5, fn){
    * let img;
    *
    * function setup() {
-   *   createCanvas(100, 100);
+   *   createCanvas(200, 200);
    *
    *   // Create a file input and place it beneath
    *   // the canvas.

src/events/acceleration.js

@@ -142,18 +142,18 @@ function acceleration(p5, fn){
    * @example
    * <div>
    * <code>
+   * let rotationX = 0;            // Angle in degrees
+   *
    * function setup() {
-   *   createCanvas(100, 100, WEBGL);
+   *   createCanvas(200, 200, WEBGL);   // Create 3D canvas
    * }
    *
    * function draw() {
-   *   background(200);
-   *   //rotateZ(radians(rotationZ));
-   *   rotateX(radians(rotationX));
-   *   //rotateY(radians(rotationY));
-   *   box(200, 200, 200);
-   *   describe(`red horizontal line right, green vertical line bottom.
-   *     black background.`);
+   *   background(220);                 // Set light gray background
+   *   rotateX(radians(rotationX));     // Rotate around X-axis
+   *   normalMaterial();                // Apply simple shaded material
+   *   box(60);                         // Draw 3D cube (60 units wide)
+   *   rotationX = (rotationX + 2) % 360; // Increment rotation (2° per frame)
    * }
    * </code>
    * </div>
@@ -175,18 +175,18 @@ function acceleration(p5, fn){
    * @example
    * <div>
    * <code>
+   * let rotationY = 0;            // Angle in degrees
+   *
    * function setup() {
-   *   createCanvas(100, 100, WEBGL);
+   *   createCanvas(200, 200, WEBGL);   // Create 3D canvas
    * }
    *
    * function draw() {
-   *   background(200);
-   *   //rotateZ(radians(rotationZ));
-   *   //rotateX(radians(rotationX));
-   *   rotateY(radians(rotationY));
-   *   box(200, 200, 200);
-   *   describe(`red horizontal line right, green vertical line bottom.
-   *     black background.`);
+   *   background(220);                 // Set light gray background
+   *   rotateY(radians(rotationY));     // Rotate around Y-axis (vertical)
+   *   normalMaterial();                // Apply simple shaded material
+   *   box(60);                         // Draw 3D cube (60 units wide)
+   *   rotationY = (rotationY + 2) % 360; // Increment rotation (2° per frame)
    * }
    * </code>
    * </div>
@@ -209,18 +209,18 @@ function acceleration(p5, fn){
    * @example
    * <div>
    * <code>
+   * let rotationZ = 0;          // Angle in degrees
+   *
    * function setup() {
-   *   createCanvas(100, 100, WEBGL);
+   *   createCanvas(200, 200, WEBGL);   // Create 3D canvas
    * }
    *
    * function draw() {
-   *   background(200);
-   *   rotateZ(radians(rotationZ));
-   *   //rotateX(radians(rotationX));
-   *   //rotateY(radians(rotationY));
-   *   box(200, 200, 200);
-   *   describe(`red horizontal line right, green vertical line bottom.
-   *     black background.`);
+   *   background(220);
+   *   rotateZ(radians(rotationZ));     // Rotate around Z-axis
+   *   normalMaterial();                // Apply simple shaded material
+   *   box(60);                         // Draw 3D cube
+   *   rotationZ = (rotationZ + 2) % 360; // Increment rotation angle
    * }
    * </code>
    * </div>

src/image/p5.Image.js

@@ -1637,7 +1637,7 @@ class Image {
    *
    * async function setup() {
    *   // Load the image.
-   *   gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');
+   *   gif = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');
    *
    *   createCanvas(100, 100);
    *
@@ -1677,7 +1677,7 @@ class Image {
    *
    * async function setup() {
    *   // Load the image.
-   *   gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');
+   *   gif = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');
    *
    *   createCanvas(100, 100);
    *
@@ -1733,7 +1733,7 @@ class Image {
    *
    * async function setup() {
    *   // Load the image.
-   *   gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');
+   *   gif = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');
    *
    *   createCanvas(100, 100);
    *

src/image/pixels.js

@@ -41,6 +41,7 @@ function pixels(p5, fn){
    * <code>
    * function setup() {
    *   createCanvas(100, 100);
+   *   background(128);
    *
    *   // Load the pixels array.
    *   loadPixels();

src/io/files.js

@@ -950,7 +950,7 @@ function files(p5, fn){
    * }
    *
    * function mousePressed() {
-   *   httpPost(url, 'json', postData, function(result) {
+   *   httpPost(url, postData, 'json', function(result) {
    *     strokeWeight(2);
    *     text(result.body, mouseX, mouseY);
    *   });
@@ -970,8 +970,8 @@ function files(p5, fn){
    * function mousePressed() {
    *   httpPost(
    *     url,
-   *     'json',
    *     postData,
+   *     'json',
    *     function(result) {
    *       // ... won't be called
    *     },
@@ -1089,20 +1089,29 @@ function files(p5, fn){
    * let eqFeatureIndex = 0;
    *
    * function setup() {
+   *  createCanvas(100,100);
+   * 
    *   let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
+   * 
+   *   const req = new Request(url, {
+   *    method: 'GET',
+   *    headers: {authorization: 'Bearer secretKey'}
+   *  });
+   *  // httpDo(path, method, datatype, success, error) 
+   * 
    *   httpDo(
-   *     url,
-   *     {
-   *       method: 'GET',
-   *       // Other Request options, like special headers for apis
-   *       headers: { authorization: 'Bearer secretKey' }
+   *     req,
+   *     'GET',
+   *    'json',
+   *     res => {
+   *      earthquakes = res;
    *     },
-   *     function(res) {
-   *       earthquakes = res;
-   *     }
-   *   );
+   *    err => {
+   *      console.error('Error loading data:', err);
+   *    }
+   *  );
    * }
-   *
+   * 
    * function draw() {
    *   // wait until the data is loaded
    *   if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {