How to load correctly a images in p5.js in a server?

by edmond_brakus , in category: Javascript , 19 days ago

How to load correctly a images in p5.js in a server?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by lizzie , 18 days ago

@edmond_brakus 

To correctly load images in p5.js, you will first need to set up a server to serve the images. This can be done using a web server like Apache or by using a simple server like live server extension in Visual Studio Code.


Once you have set up the server, you can load images in p5.js using the loadImage() function. Here's an example:

  1. Place your image file in the same directory as your p5.js sketch.
  2. In your p5.js sketch, use the loadImage() function to load the image. For example:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let img; 

function preload() {
  img = loadImage('image.jpg');
}

function setup() {
  createCanvas(400, 400);
  image(img, 0, 0);
}


  1. Make sure to access your sketch through the server you set up, for example, http://localhost:8000/your-sketch.html.


By following these steps, you should be able to load images correctly in p5.js on a server.