Preload JSON data and load pictures using p5.js

Preload JSON data and load pictures using p5.js

In p5.js, the preload() function is used to preload resources such as images, fonts, and JSON data before the setup() function. When you need to load JSON data first and then load other resources (such as pictures) based on the information in the JSON data, special attention should be paid to the issue of asynchronous loading. This article will explain how to use the loadJSON() and loadImage() functions correctly to ensure that all resources have been loaded before executing subsequent code.

Asynchronous loading problem

Both loadJSON() and loadImage() functions are asynchronous, meaning they do not block the execution of the program. When these functions are called, they are returned immediately and the resource is loaded in the background. This may cause the program to start executing subsequent code before the resource is loaded, thus throwing an error.

For example, if you try to use an image that has not yet been loaded in the setup() function, you may encounter a null or undefined error.

Use callback functions to solve the problem of asynchronous loading

To solve the problem of asynchronous loading, a callback function can be used. A callback function is a function executed after the asynchronous operation is completed. Both loadJSON() and loadImage() functions accept an optional callback function as the second parameter.

Here is an example of how to use a callback function to load JSON data and images:

 let imgData;
let images = [];
let numImagesLoaded = 0;
let totalImages;

function preload() {
  imgData = loadJSON("images.json", data => {
    imgData = data; // Assign the loaded data
    totalImages = imgData.images.length;
    for (let filename of imgData.images) {
      loadImage(filename, img => {
        images.push(img);
        numImagesLoaded ;
        if (numImagesLoaded === totalImages) {
          // All images are loaded, call a function to start the sketch
          startSketch();
        }
      });
    }
  });
}

function setup() {
  // setup() is now empty, startSketch() will be called when all images are loaded
}

function startSketch() {
  createCanvas(400, 400);
  background(220);
  // Now you can safely use the images array
  for (let i = 0; i <p> <strong>Code explanation:</strong></p><ol>
<li> <strong>imgData</strong> : Used to store data loaded from JSON files.</li>
<li> <strong>images</strong> : Used to store loaded images.</li>
<li> <strong>numImagesLoaded</strong> : Counter, record the number of loaded images.</li>
<li> <strong>totalImages</strong> : Read from a JSON file, indicating the total number of images to be loaded.</li>
<li> <strong>preload()</strong> :<ul>
<li> Use the loadJSON() function to load the "images.json" file.</li>
<li> The second parameter of loadJSON() is a callback function that is executed after the JSON data is loaded.</li>
<li> In the callback function, iterate over the imgData.images array and use the loadImage() function to load each image.</li>
<li> The loadImage() function also accepts a callback function, which is executed after the image is loaded.</li>
<li> In the callback function of loadImage(), add the loaded image to the images array and add the numImagesLoaded counter by 1.</li>
<li> When numImagesLoaded equals totalImages, it means that all images have been loaded and call the startSketch() function to start drawing.</li>
</ul>
</li>
<li> <strong>setup()</strong> : is now empty because all initialization work is done in the startSketch() function.</li>
<li> <strong>startSketch()</strong> :<ul>
<li> Create a canvas and set the background color.</li>
<li> Iterate through the images array and draw the loaded image onto the canvas.</li>
</ul>
</li>
</ol><p> <strong>images.json example:</strong></p><pre class="brush:php;toolbar:false"> {
  "images": ["1.jpg", "2.jpg", "3.jpg"]
}

Make sure that the 1.jpg, 2.jpg, and 3.jpg files exist in the corresponding directory of your sketch.

Things to note

• Make sure that both the JSON files and the image files are in the correct directory so that p5.js can find them.
• The preload() function must be defined before the setup() function.
• Load all necessary resources in the preload() function to ensure that all resources are loaded when the setup() function is executed.
• Correctly handle asynchronous loading, use callback functions or promises to ensure resource loading order.

Summarize

By using the callback functions of the loadJSON() and loadImage() functions, you can ensure that subsequent code is executed after the loading of JSON data and images is completed, avoiding problems caused by asynchronous loading. This method can effectively manage the loading order of resources and improve the stability and reliability of the program. Remember that understanding and handling asynchronous loading correctly is the key to writing high-quality p5.js code.

The above is the detailed content of Preload JSON data and load pictures using p5.js. For more information, please follow other related articles on the PHP Chinese website!