# Displaying an image web-editor openprocessing.org

**URL:** <https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563>\
**Category:** Beginners\
**Created:** [January 10, 2022, 4:50pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563 "2022-01-10T16:50:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kenjones](https://avatars.discourse-cdn.com/v4/letter/k/dfb087/32.png) [@kenjones](https://discourse.processing.org/u/kenjones)\
**Post date:** [January 10, 2022, 4:50pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/1 "2022-01-10T16:50:20Z")

</div>

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](https://openprocessing.org/sketch/1433650)

Thank you!  
–Ken

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 10, 2022, 6:30pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/2 "2022-01-10T18:30:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 10, 2022, 7:09pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/3 "2022-01-10T19:09:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kenjones](https://avatars.discourse-cdn.com/v4/letter/k/dfb087/32.png) [@kenjones](https://discourse.processing.org/u/kenjones)\
**Post date:** [January 11, 2022, 12:10am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/4 "2022-01-11T00:10:57Z")

</div>

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](https://p5js.org/reference/#/p5/image) , except for changing the variable name. The code is about as simple as I gets. I am really puzzled!

---

<div class="post-metadata">

**Author:** ![kenjones](https://avatars.discourse-cdn.com/v4/letter/k/dfb087/32.png) [@kenjones](https://discourse.processing.org/u/kenjones)\
**Post date:** [January 11, 2022, 12:12am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/5 "2022-01-11T00:12:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 11, 2022, 2:58am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/6 "2022-01-11T02:58:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 11, 2022, 6:58pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/7 "2022-01-11T18:58:59Z")

</div>

```auto
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.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 11, 2022, 8:13pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/8 "2022-01-11T20:13:36Z")

</div>

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.

```auto
let img;
let c;

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

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

function draw() {
  background(c);
  image(img, 40, 40, 720, 720);
}

```

---

<div class="post-metadata">

**Author:** ![kenjones](https://avatars.discourse-cdn.com/v4/letter/k/dfb087/32.png) [@kenjones](https://discourse.processing.org/u/kenjones)\
**Post date:** [January 11, 2022, 9:52pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/9 "2022-01-11T21:52:01Z")

</div>

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](http://openprocessing.org) IDE?

Thank you!  
–Ken

---

<div class="post-metadata">

**Author:** ![kenjones](https://avatars.discourse-cdn.com/v4/letter/k/dfb087/32.png) [@kenjones](https://discourse.processing.org/u/kenjones)\
**Post date:** [January 11, 2022, 10:28pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/10 "2022-01-11T22:28:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 11, 2022, 10:34pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/11 "2022-01-11T22:34:55Z")

</div>

```auto
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.  
[https://www.youtube.com/watch?v=rO6M5hj0V-o](https://www.youtube.com/watch?v=rO6M5hj0V-o)

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.

---

<div class="post-metadata">

**Author:** ![kenjones](https://avatars.discourse-cdn.com/v4/letter/k/dfb087/32.png) [@kenjones](https://discourse.processing.org/u/kenjones)\
**Post date:** [January 11, 2022, 11:44pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/12 "2022-01-11T23:44:48Z")

</div>

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!

–Ken

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 12, 2022, 12:09am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/13 "2022-01-12T00:09:22Z")

</div>

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:

 ![p5](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/61b66b0e8927bf3190e2c2b491812b1ff9952888.jpeg)

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!

 ![p5_ed](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/68291bad43e61c19565889d504d78794bafbe161.png)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [January 12, 2022, 1:12am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/14 "2022-01-12T01:12:16Z")

</div>

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

then add folder data or add what you want

 ![Untitled 227](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d80522ff18ff8503db7dd788d76206be7ff0bac6.jpeg)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 12, 2022, 1:15am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/15 "2022-01-12T01:15:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [January 12, 2022, 1:37am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/16 "2022-01-12T01:37:36Z")

</div>

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

 ![Untitled 229](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/47c69c452d1660c158d7ab8238a1876bb95d54b9.jpeg)

 ![Untitled 231](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8d541a36ad36da014949b0fe0a2df295548f172d.jpeg)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 12, 2022, 2:22am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/17 "2022-01-12T02:22:07Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [January 12, 2022, 2:33am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/18 "2022-01-12T02:33:59Z")

</div>

> [@svan](#):
>
> he is trying to use the web editor. I already posted a demo similar to yours in about the eighth post from the top

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

---

<div class="post-metadata">

**Author:** ![kenjones](https://avatars.discourse-cdn.com/v4/letter/k/dfb087/32.png) [@kenjones](https://discourse.processing.org/u/kenjones)\
**Post date:** [January 12, 2022, 4:11am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/19 "2022-01-12T04:11:14Z")

</div>

@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](https://editor.p5js.org), but I’m talking about the web-based editor at [https://openprocessing.org](https://openprocessing.org). (And yes, I’m using a Mac instead of a Windows machine.)

My sketch is at [[Magritte Tribute - OpenProcessing](https://openprocessing.org/sketch/1433650) ([Magritte Tribute - OpenProcessing](https://openprocessing.org/sketch/1433650)). 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](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](http://openprocessing.org). Do either of you have any idea how to do this?

Thanks,  
–Ken

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 12, 2022, 4:37am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/20 "2022-01-12T04:37:12Z")

</div>

> [@kenjones](#):
>
> , then you see a small image in the center of the screen instead of a large image

`createCanvas(img.width, img.height);`

- [reference | p5.js](http://p5js.org/reference/#/p5/createCanvas)
- [reference | p5.js](http://p5js.org/reference/#/p5.Image/width)
- [reference | p5.js](http://p5js.org/reference/#/p5.Image/height)

https://glitch.com/embed/#!/embed/preload-image-masks?path=sketch.js&previewSize=0&sidebarCollapsed=true

[Next page](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563.md?page=2)