# \[p5.js\] I don't know how to make it into a p5 file

**URL:** https://discourse.processing.org/t/p5-js-i-dont-know-how-to-make-it-into-a-p5-file/35187
**Category:** Beginners
**Created:** [February 15, 2022, 7:08pm UTC](https://discourse.processing.org/t/p5-js-i-dont-know-how-to-make-it-into-a-p5-file/35187 "2022-02-15T19:08:50Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)
#### Post date: [February 15, 2022, 7:08pm UTC](https://discourse.processing.org/t/p5-js-i-dont-know-how-to-make-it-into-a-p5-file/35187/1 "2022-02-15T19:08:50Z")

</div>

LINK : [Sea life sketch sketch - jagracar](https://jagracar.com/sketches/seaLife.php)

 ![a1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/aa3e28535de48078c2c577794b39d3a38a5193de.jpeg)

Looking at the above,  
You can see that it was made with p5.

Based on the above, I am trying to save it as p5.js using ‘Processing’.

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

File: [WEB\_FISH\_TEST.zip - Google Drive](https://drive.google.com/file/d/106883q3BUHStVajztSpl5XH4Wx1AlmUI/view?usp=sharing)

It does not work in the ‘processing’ program. Why?

---

<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: [February 16, 2022, 3:27am UTC](https://discourse.processing.org/t/p5-js-i-dont-know-how-to-make-it-into-a-p5-file/35187/2 "2022-02-16T03:27:08Z")

</div>

You need to have `<script>` tags within your “index.html” file which loads all your required libraries & local files.

Take a look at my “DatGuiTest” online sketch’s “index.html” file:

> **[DatGuiTest](http://Bl.ocks.org/GoSubRoutine/861b48f0b0118219c6a7cdd28309ee62)**
>
> GoSubRoutine’s Block 861b48f0b0118219c6a7cdd28309ee62

---

<div class="post-metadata">

### Author: ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)
#### Post date: [February 16, 2022, 5:06am UTC](https://discourse.processing.org/t/p5-js-i-dont-know-how-to-make-it-into-a-p5-file/35187/3 "2022-02-16T05:06:13Z")

</div>

@GoToLoop

Thank you very much.

And there were several examples on that site.

Thank you for your consideration.

---

<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: [February 16, 2022, 7:49am UTC](https://discourse.processing.org/t/p5-js-i-dont-know-how-to-make-it-into-a-p5-file/35187/4 "2022-02-16T07:49:44Z")

</div>

For whatever it’s worth I had to use the following to get it to run in p5.js Web Editor. Was unsuccessful in Processing IDE due to another error.

```auto
<script defer src="https://cdn.jsdelivr.net/gh/dataarts/dat.gui/build/dat.gui.min.js"></script> 

```

Note the addition of quotes and ‘https’ instead of ‘http’.

---

<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: [February 16, 2022, 7:55am UTC](https://discourse.processing.org/t/p5-js-i-dont-know-how-to-make-it-into-a-p5-file/35187/5 "2022-02-16T07:55:02Z")

</div>

> [@svan](#):
>
> Note the addition of quotes and ‘https’ instead of ‘http’.

For simplicity I omit quotes for attribute values given it’s a minimalist “index.html” example.

Pretty much everything is ‘https://’ protocol now. That’s a very old sketch after all.

---

<div class="post-metadata">

### Author: ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)
#### Post date: [February 16, 2022, 6:41pm UTC](https://discourse.processing.org/t/p5-js-i-dont-know-how-to-make-it-into-a-p5-file/35187/6 "2022-02-16T18:41:56Z")

</div>

@GoToLoop  
very good!

![fig3](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/593ac33498e97a9f54e57bf3c5b5bd6217fa01ec.jpeg)