How do I load images?

p5.js Beginners
21

can you send the link to your sketch?

here p5.js Web Editor

22

Iā€™m using Chrome and my OS is Chrome OS because I have a Chromebook :slight_smile:

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/ ?

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.

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.

27

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

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.