# Sprites in the p5 editor

**URL:** <https://discourse.processing.org/t/sprites-in-the-p5-editor/17451>\
**Category:** Beginners\
**Created:** [January 30, 2020, 2:36pm UTC](https://discourse.processing.org/t/sprites-in-the-p5-editor/17451 "2020-01-30T14:36:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![shodai](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@shodai](https://discourse.processing.org/u/shodai)\
**Post date:** [January 30, 2020, 2:36pm UTC](https://discourse.processing.org/t/sprites-in-the-p5-editor/17451/1 "2020-01-30T14:36:09Z")

</div>

I am a teacher and am using p5js to teach basic coding. However, although there is a lot that can done in the editor, I was wondering if there is a way to use sprites? I have been looking at the p5play library and it seems like you need to actually use a webpage to host the java script, but I was wondering if there is another way?

---

<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 30, 2020, 2:44pm UTC](https://discourse.processing.org/t/sprites-in-the-p5-editor/17451/2 "2020-01-30T14:44:12Z")

</div>

> [@shodai](#):
>
> , but I was wondering if there is another way?

> [@Play p5.js not an importable libraries in Processing IDE?](https://discourse.processing.org/t/play-p5-js-not-an-importable-libraries-in-processing-ide/11538/2):
>
> Although there are many there, it doesn’t mean it’s supposed to have it all! anguished You can include p5.play into the “index.html” file like this: file_folder \<script defer src=https://MolleIndustria.GitHub.io/p5.play/lib/p5.play.js\>\</script\> An online p5.play example using instance mode: spider_web

---

<div class="post-metadata">

**Author:** ![shodai](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@shodai](https://discourse.processing.org/u/shodai)\
**Post date:** [January 30, 2020, 4:07pm UTC](https://discourse.processing.org/t/sprites-in-the-p5-editor/17451/3 "2020-01-30T16:07:05Z")

</div>

But how would you add that in just the p5 editor?

---

<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 30, 2020, 4:09pm UTC](https://discourse.processing.org/t/sprites-in-the-p5-editor/17451/4 "2020-01-30T16:09:28Z")

</div>

That online editor got an “index.html” file too that you can edit. 😉

---

<div class="post-metadata">

**Author:** ![shodai](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@shodai](https://discourse.processing.org/u/shodai)\
**Post date:** [January 30, 2020, 5:55pm UTC](https://discourse.processing.org/t/sprites-in-the-p5-editor/17451/5 "2020-01-30T17:55:26Z")

</div>

Yes, it took a little bit of looking to find something really obvious. But how to I upload pictures to an assets folder. It says that you can only upload certain file types, and non of them are picture.

---

<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 30, 2020, 5:58pm UTC](https://discourse.processing.org/t/sprites-in-the-p5-editor/17451/6 "2020-01-30T17:58:46Z")

</div>

> [@shodai](#):
>
> But how do I upload pictures to an assets folder.

I don’t use that particular p5js online editor. So I dunno, sorry. 😧

It’s pretty obvious on [OpenProcessing.org](http://OpenProcessing.org) though. 😀

Here’s a hosted sketch I’ve got w/ images inside subfolder “assets/”: 🕶

> **[Preload Image Masks](https://glitch.com/~preload-image-masks)**
>
> Preload Image + Mask. Then clone the original.

---

<div class="post-metadata">

**Author:** ![codeguppy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codeguppy/32/8322_2.png) [@codeguppy](https://discourse.processing.org/u/codeguppy)\
**Post date:** [April 3, 2020, 12:15am UTC](https://discourse.processing.org/t/sprites-in-the-p5-editor/17451/7 "2020-04-03T00:15:15Z")

</div>

You can also give a try to [codeguppy.com](https://codeguppy.com)

The [codeguppy.com](http://codeguppy.com) environment is based on p5.js and p5.play and it comes with pre-built assets, so that young coders can focus only on coding.

There are different type of programs that can be created on [codeguppy.com](http://codeguppy.com) You can visit the site and see if this is working for you.

P.S. Please visit also the download section for some free PDF books.