# Using Images In Browser with ProcessingJs

**URL:** <https://discourse.processing.org/t/using-images-in-browser-with-processingjs/390>\
**Category:** Beginners\
**Created:** [May 26, 2018, 2:07am UTC](https://discourse.processing.org/t/using-images-in-browser-with-processingjs/390 "2018-05-26T02:07:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![CrispyCabot](https://avatars.discourse-cdn.com/v4/letter/c/8edcca/32.png) [@CrispyCabot](https://discourse.processing.org/u/CrispyCabot)\
**Post date:** [May 26, 2018, 2:07am UTC](https://discourse.processing.org/t/using-images-in-browser-with-processingjs/390/1 "2018-05-26T02:07:51Z")

</div>

So I am struggling a lot with processingjs. Not sure why but I just can’t figure out how to get my processing code properly into an html file. I have two problems right now that I need help with.

1. I don’t know how to load images in with processingjs. I have /\* @pjs preload=“image1.png image2.png image3.png”; crisp=“true”; \*/ but I don’t think that this is right. I’m assuming these images must be in the same folder as the html file or something like that. Not really sure which is why I’m asking.

Secondly, I am confused on how to have multiple pde’s. Previously, I have just copy and pasted the classes directly into the html file, but that’s obviously not the best idea. I have tried looking at processingjs’s reference but it is confusing me more. Here is the html I have so far (I couldn’t figure out how to paste code so [here](https://pastebin.com/raw/GEUuF0Ud) is pastebin):

---

<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:** [May 26, 2018, 3:43am UTC](https://discourse.processing.org/t/using-images-in-browser-with-processingjs/390/2 "2018-05-26T03:43:30Z")

</div>

> **[Can i import my stuff into wallpaper engine?](https://Discourse.Processing.org/t/can-i-import-my-stuff-into-wallpaper-engine/153)**
>
> \*\*Welcome 🙂 \*\* My name is Luc(16) and last week I installed processing. the past week I have been making quite some stuff with processing already. I showed what I made to a couple of friends and asked me if I would be so kind to get the application...

---

<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:** [May 26, 2018, 3:46am UTC](https://discourse.processing.org/t/using-images-in-browser-with-processingjs/390/3 "2018-05-26T03:46:53Z")

</div>

[http://Studio.ProcessingTogether.com/sp/pad/export/ro.9bTfM49wCIJza](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9bTfM49wCIJza)

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [May 26, 2018, 5:31pm UTC](https://discourse.processing.org/t/using-images-in-browser-with-processingjs/390/4 "2018-05-26T17:31:51Z")

</div>

@GoToLoop Can you please provide a brief summary when you post links?

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [May 26, 2018, 5:33pm UTC](https://discourse.processing.org/t/using-images-in-browser-with-processingjs/390/5 "2018-05-26T17:33:05Z")

</div>

@CrispyCabot Can you please post a [MCVE](https://stackoverflow.com/help/mcve) that shows us exactly what you’re stuck on? Just a simple sketch that shows a single image, or a simple sketch that uses two PDE files would be very helpful. What is your directory structure? How are you deploying your files? What errors are you seeing?