# 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:** 17\
**Page:** 2

<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, 4:37am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/21 "2022-01-12T04:37:51Z")

</div>

We’re having trouble getting on the same page. If I understand correctly you’ve already uploaded a file to [openprocessing.org](http://openprocessing.org). How did you do that (I need to know)? If you already have a file in your system and can display it, then you probably don’t need a folder. That editor may be doing things differently than p5.js. It seems like you just need to have better control of the size and placement of the image; is that correct? I tried to setup an account on open processing but it seems like everything I post there is in the public domain and someone wants 40 dollars a year to keep it private. Not too happy about that.

---

<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, 4:45am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/22 "2022-01-12T04:45:36Z")

</div>

Ken,

You should be able to use the same code that I already posted. Just change the preload() filename so that it’s for your file instead of the one for your Mac. The same code should work in either editor.

---

<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, 4:46am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/23 "2022-01-12T04:46:30Z")

</div>

hi  
here is how to upload image @svan posted it watch it

[![](https://img.youtube.com/vi/rO6M5hj0V-o/maxresdefault.jpg "p5.js Web Editor: Uploading Media Files - p5.js Tutorial") ](https://www.youtube.com/watch?v=rO6M5hj0V-o)

[![](https://img.youtube.com/vi/5nf41qLeagU/maxresdefault.jpg "6.4: p5.js Web Editor: Adding JavaScript Files") ](https://www.youtube.com/watch?v=5nf41qLeagU)

[![](https://img.youtube.com/vi/o4UmGrPst_c/hqdefault.jpg "8.15: Drag and Drop a File - p5.js Tutorial") ](https://www.youtube.com/watch?v=o4UmGrPst_c)

---

<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, 4:47am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/24 "2022-01-12T04:47:48Z")

</div>

@jafal That’s for p5.js and he just told us he wants to use openprocessing.

---

<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, 4:53am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/25 "2022-01-12T04:53:04Z")

</div>

Ken,

Copy/paste this into your open processing editor:

```auto
let img;
let c;

function preload() {
  img = loadImage('computer.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);
}

```

You should see this:

 ![ken](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a00e0a80bf9ebb9f9291ec23c47df50224a53651.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, 6:00am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/26 "2022-01-12T06:00:45Z")

</div>

Ken,

You don’t need to create an image folder with openprocessing. Save your source code file first (button in right upper corner), fill out some form that pops up (fill in filename) and hit ‘submit’, and then you should be able to go under ‘Files’ on the right hand side and drag and drop your image there (see below).

![op](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1044baff332a171bd6f468220d2f3d7feb957d6c.png)

Here’s the output:

 ![bradley](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/97a9a5473fecfdae77f82d0f96d690890ca80b8d.jpeg)

---

<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, 7:06am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/27 "2022-01-12T07:06:17Z")

</div>

> [@svan](#):
>
> You don’t need to create an image folder with openprocessing. Save your source code file first (button in right upper corner), fill out some form that pops up (fill in filename) and hit ‘submit’, and then you

look at this sketch its working because the image link was provided

> **[Images: Image display - Kevin Siwoff - OpenProcessing](https://openprocessing.org/sketch/409645/)**
>
> Simple example of displaying an image in p5

l found what you found

 ![Untitled 235](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/95cc35553574fa975d1248d7643a1c01571e7071.jpeg)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 12, 2022, 10:12am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/28 "2022-01-12T10:12:56Z")

</div>

> [@kenjones](#):
>
> Why is the image so small and how do I make it bigger???
> 
> Hello @kenjones,
> 
> The sketch is here: [Magritte Tribute - OpenProcessing](https://openprocessing.org/sketch/1433650)

I added one line to the code on OpenProcessing link provided and it works:

```auto
let img;
function preload() {
  img = loadImage('computer.jpg');
}
function setup() {
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
	createCanvas(img.width, img.height); //Added this line
  image(img, 0, 0);
}

```

`:)`

---

<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:31pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/29 "2022-01-12T13:31:57Z")

</div>

Could you please explain how you got the image from a website to load? I don’t see a URL in preload(). Thanks.

---

<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, 2:39pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/30 "2022-01-12T14:39:28Z")

</div>

Whew! @svan, @jafal, @GoToLoop, @Chrisir, and @glv, thank you so much for the help! My mistake was thinking that the example at the top of page [https://p5js.org/reference/#/p5/image](https://p5js.org/reference/#/p5/image) was meant to be a full working example. In fact, it is missing a createCanvas() statement. All I needed to do was to add this one statement. In retrospect, it seems pretty stupid not to think of trying to add such a statement, but I had blinders on because I was focused on the fact that the most basic example code from the docs didn’t work. Well, thank you all!

@svan, as for your question about how I loaded the image file into the [openprocessing.org](http://openprocessing.org) editor: See the sidebar on the right? If it’s collapsed, open it. Click on the File tab. There you see two ways to upload a file from your local computer. I clicked on “select” instead of using drag-and-drop. Then I used Finder (on Windows I assume it would be File Explorer) to navigate to the file “computer.jpg” and select it. Once the file was uploaded I could refer to it by name in my program.

---

<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, 3:51pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/31 "2022-01-12T15:51:31Z")

</div>

I have requested a change to the example code by adding the createCanvas() line to prevent confusion in the future. Thanks for the 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 12, 2022, 8:06pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/32 "2022-01-12T20:06:52Z")

</div>

_Response to request to add createCanvas() line:_

```auto
By default p5 makes a canvas that is 100x100 when createCanvas() is absent.
This is outlined in the createCanvas reference. This means that the 
loadImage() example works currently.

```

That’s probably why you saw the little itty bitty image in the center of the screen when you ran the example code as is.

---

<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, 10:22pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/33 "2022-01-12T22:22:20Z")

</div>

Thanks for making the request!

---

<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, 10:35pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/34 "2022-01-12T22:35:18Z")

</div>

OK, now I understand why I saw what I saw.

What an interesting reply to your request. Basically, if you have a comprehensive understanding of the _entire_ document set you shouldn’t have any problem understanding the behavior of any sketch. Not a very helpful attitude, it seems to me. A little bit of redundancy can greatly aid understanding. Is simply adding a createCanvas() statement to the example too difficult a thing to do?

If redundancy wasn’t needed why would the way we use natural languages contain so much of it? (A rhetorical question.)

Oh well, thanks again for asking!

---

<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, 10:39pm UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/35 "2022-01-12T22:39:22Z")

</div>

```auto
Not a very helpful attitude, it seems to me.

```

I agree with you! I just asked to make it better for the unsuspecting user.

---

<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 13, 2022, 5:49am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/36 "2022-01-13T05:49:43Z")

</div>

> [@svan](#):
>
> I have requested a change to the example code by adding the **createCanvas()** line…

> <https://github.com/processing/p5.js/issues/5529>
>
> https://github.com/processing/p5.js/blob/cb3f59740bcb71ba5e2bee820bb1f784004d85e…f/src/image/loading\_displaying.js#L333
> 
> let img;
> function preload() {
> img = loadImage('xxxxxx.jpg');
> }
> function setup() {
> // Top-left corner of the img is at (0, 0)
> // Width and height are the img's original width and height
> \*\*createCanvas(img.width, img.height); //Added this line\*\*
> image(img, 0, 0);
> }
> 
> Please add one line of code to make this a runnable example. Otherwise beginners are perplexed why it doesn't work.

---

<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 13, 2022, 5:58am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563/37 "2022-01-13T05:58:04Z")

</div>

In retrospect I should have said work ‘as expected’. If it had worked as expected by the poster this thread would have never occurred in the first place.

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