Displaying an image web-editor openprocessing.org

I am simply trying to display an image and I’m not getting what I expect.

The 1624 × 1934 image is displayed as a small brown square in the middle of the screen. I have two questions:

Why isn’t the image displayed in the upper-left corner of the screen and how do I get the upper-left corner of the image to display in the upper-left corner of the screen? (I am positioning it at 0,0 and I haven’t changed the default imageMode.)

Why is the image so small and how do I make it bigger???

The sketch is here: Magritte Tribute - OpenProcessing

Thank you!

Did you try the proper setup with setup(), size and function draw()?

https://processing.org/examples/loaddisplayimage.html if you haven’t seen it.

1 Like

I’m doing things a little differently because I’m using p5.js instead of Java-based Processing. As you can see by looking (unless you can spot a mistake!), I’m doing a straight copy of the simple code at the top of reference | p5.js , except for changing the variable name. The code is about as simple as I gets. I am really puzzled!

Hi svan, please see my response to Chrisir. Thanks!

Sorry didn’t realize it was p5; saw no code with your initial post.

img = loadImage('computer.jpg');

Was the image stored on your computer? I can’t even get the web editor to load an image, on my computer or with a web URL.

1 Like

As it turns out the image(s) need to be inside of a folder titled ‘images’ inside of your sketch folder. Then something like this should work and allow you to create a canvas and then position the image wherever you want.

let img;
let c;

function preload() {
  // preload() runs once
  img = loadImage('images/bradley.jpg');

function setup() {
  // setup() waits until preload() is done
  // get color of middle pixel
  c = img.get(img.width / 2, img.height / 2);

function draw() {
  image(img, 40, 40, 720, 720);
1 Like

Thanks, svan! I never would have guessed. I didn’t see anything about a folder in the docs! One more question. How do you create a folder using the openprocessing.org IDE?

Thank you!

1 Like

Just saw this message. Don’t know what’s going on with the web editor when you try to use it. I went to the Files tab in the right sidebar and clicked on “select” and uploaded the image from my computer.

How do you create a folder using the openprocessing.org

I’m new to all this just like you; the following video uses drag and drop from your system to the other web editor (p5.js). My initial demo was using the Processing editor.

I didn’t watch the entire video, but did not see anything about the open processing editor. I clicked on the link that you provided and quickly looked for a place to upload an image but couldn’t find it. They probably have a way to do it, but I just missed it, not being familiar with it. At any rate, my best guess is that you’ll either have to use drag and drop of the image file from your system or pass a URL of a website which stores images.

I appreciate all the help you’ve tried to give me, but I’m still stuck. In the p5.js web editor I am unable to either drag-and-drop or select a folder into the Files tab. I’ve also been googling and searching this forum and I’ve been able to find instructions that tell you to select a file from a folder, but nothing about how to actually create a folder. I’ll leave this question open for now and hope for further help, but I might also start another topic asking how to create a folder. Anyway, thanks again for your help!


C’mon Ken, keep trying! It works in p5 just like the video said. I just did it in about 5 min. and this is my first time:

Keep working with those arrows in the left upper corner of the editor. First create a folder entitled ‘images’ and then upload a file by dragging and dropping your image into it. Easy, peasy - no need to start another thread!

1 Like

while ide is open just click ctrl+k then you can show sketch folder

then add folder data or add what you want

@jafal He’s talking about using web editors not the Processing IDE. Your post looks like a Windows system.

@svan thanks and i did not notice here is much simple than
web editors
this is Processing IDE. p5.js mode example

@jafal The same p5 code may be run either in Processing or the web editor; he is trying to use the web editor. I already posted a demo similar to yours in about the eighth post from the top.

1 Like

yes your post shows that and you have explained later how to create image folder

@jafal and @svan:

OK, thanks for your posts. The screenshots were especially helpful. I now understand the crux of the problem. I thought that @svan and I were talking about the same web-based editor, but we weren’t.
Both of you, @svan and @jafal, are taking about the editor at https://editor.p5js.org, but I’m talking about the web-based editor at https://openprocessing.org. (And yes, I’m using a Mac instead of a Windows machine.)

My sketch is at [Magritte Tribute - OpenProcessing (Magritte Tribute - OpenProcessing). If you look at my code you’ll see that it’s nothing more than an exact copy of the first example at the top of the p5.js image documentation page https://p5js.org/reference/#/p5/image, with the filename of the image changed to ‘computer.jpg’. If you look in the right sidebar of the page with my sketch, under the Files tab, you’ll see that I uploaded a file named ‘computer.jpg’, which is the 1624 × 1934 image file I try to open in my sketch. But, if you see the same thing I see when you look at the sketch, then you see a small image in the center of the screen instead of a large image with it’s upper-left corner in the upper-left corner of the screen, which is what I expect.

So, if I need to put my image in a folder, then I need to know how to either create or upload a folder in the web-editor at openprocessing.org. Do either of you have any idea how to do this?


createCanvas(img.width, img.height);

1 Like