How do I load images?

p5.js Beginners
21

can you send the link to your sketch?

here p5.js Web Editor

1 Like
22

I’m using Chrome and my OS is Chrome OS because I have a Chromebook :slight_smile:

1 Like
23

Well, I didn’t use the web editor, I used a Text editor. Do you want me to copy and paste all my code into the web editor?

Or do you want me to send my code as a file?

24

I am not sure I understand. Can the Text Editor run your code? You mean an IDE? Which one?

Did you try https://editor.p5js.org/ ?

1 Like
25

Make sure the image is there in the correct place among the files in the Web Editor.

EDIT (February 3, 2022):

… that is if you use the code in the original post. Alternatively, you can adapt the code to access an image from a remote location via a web address, as @Chrisir did in a Web Editor example above.

1 Like
26

Here it is, as a screen capture, with the original code and image in the Web Editor, executing as intended:

loading an image
loading an image1950×1546 256 KB

Note the folder and files listed in the upper left.

1 Like
27

p5js.org/reference/#/p5/preload
Glitch.com/~preload-image-masks

1 Like
28

By all means, @tazrXxx, try @GoToLoop’s suggestions.

What happens if, on the Chromebook, you start with the code from your original post, and simply move the statement that loads the image into a preload() function? With that change having been made, the preload() function would be as follows:

function preload() {
  playerImg = loadImage(playerData.img);
}

This would be your setup() function:

function setup(){
  createCanvas(720, 400);
}

@tazrXxx, when the code is open in the text editor, how are you actually running it? You need to activate your HTML file, so that it opens in the browser, but we don’t know how you are doing that.

1 Like