# Uploading interactive app from processing to website / github?

**URL:** <https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351>\
**Category:** Libraries\
**Created:** [October 19, 2022, 2:28am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351 "2022-10-19T02:28:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![YueLin](https://avatars.discourse-cdn.com/v4/letter/y/6f9a4e/32.png) [@YueLin](https://discourse.processing.org/u/YueLin)\
**Post date:** [October 19, 2022, 2:28am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/1 "2022-10-19T02:28:56Z")

</div>

Hi there everyone!

I am super super new to coding and would like some guidance on how to upload apps made with processing onto websites. I have used processing back in 2019 to make a interactive game, and am now looking to upload it on my website as part of my portfolio. I saw that a few have achieved this by uploading to github, like here: [p5.js Showcase](https://showcase.p5js.org/#/2021-All) , and it’s pretty close to what I want (preview on main website and redirect to actual app when pressed, so potential clients can play around with it. ).

The problem is that I have no experience with github and have 0 clue on how to transfer the app from processing to github, or any other platforms. I also noticed that processing have changed somewhat from 2019, and I can’t seem to open the old files. Would I have to make the old files compatible with latest processing model before being able to upload it online?

Any help would be greatly appreciated! Thank you in advance 🙏  
link to said app in case anyone is interested ahaha : [https://www.youtube.com/watch?v=EC8Dd7EguiU](https://www.youtube.com/watch?v=EC8Dd7EguiU)

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [October 19, 2022, 11:16am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/2 "2022-10-19T11:16:37Z")

</div>

Hi @YueLin 🙂 What a cute app!

This answer by @josephh seems relevant to your question:

> [@Upload processing file and be able to run it online](https://discourse.processing.org/t/upload-processing-file-and-be-able-to-run-it-online/31816/2):
>
> Hi @kylu, You tagged your topic with Processing so you must know that Processing is running on the Java programming language and the JVM (Java virtual machine) and therefore can’t be run on a web page. You have several alternatives: The most obvious one is to use [p5.js](https://p5js.org/) which is a port of Processing to JavaScript Host your sketch on OpenProcessing which can either use p5js or ProcessingJS (which translates Java code to JS but is [deprecated](https://intercom.help/openprocessing/en/articles/3250763-processingjs-deprecation-notice)) Use the p5 web editor to interactively edit your ske…

> **[get started | p5.js](https://p5js.org/get-started/)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 19, 2022, 4:03pm UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/3 "2022-10-19T16:03:25Z")

</div>

Hi @YueLin,

You may also want to look at this thread:

> [@Publish p5 project](https://discourse.processing.org/t/publish-p5-project/38841/5):
>
> Hi @Omri, Along with those great answers, I also highly recommend [https://surge.sh/](https://surge.sh/). It allows you to publish your site from the command line with only two commands and no setup (which is awesome) wink I used it for some projects and portfolio so you can upload images and medium sized files. (It’s only for static websites, meaning no backend of any sort, just html, css, JS and other files)

I also recommend [Netlify](https://www.netlify.com/) which is great for hosting static websites for free.

Have fun!

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [October 20, 2022, 9:38pm UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/4 "2022-10-20T21:38:29Z")

</div>

You can host Processing code by pasting it in [www.openprocessing.org](http://www.openprocessing.org) You need to have an account before you can post in openprocessing

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [October 20, 2022, 9:43pm UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/5 "2022-10-20T21:43:07Z")

</div>

A great intro to github:

[![](https://img.youtube.com/vi/BCQHnlnPusY/maxresdefault.jpg "1.1: Introduction - Git and GitHub for Poets") ](https://www.youtube.com/watch?v=BCQHnlnPusY)

---

<div class="post-metadata">

**Author:** ![YueLin](https://avatars.discourse-cdn.com/v4/letter/y/6f9a4e/32.png) [@YueLin](https://discourse.processing.org/u/YueLin)\
**Post date:** [October 21, 2022, 6:58am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/6 "2022-10-21T06:58:59Z")

</div>

Sorry for the late reply, and thank you for linking me to this thread!

😮 Oh no, i had no idea Processing can’t be run on web pages since it uses Java language (I thought Java is the same as Javascript), I’ll look into p5.js and OpenProcessing then. Thank you so much for your help!

---

<div class="post-metadata">

**Author:** ![YueLin](https://avatars.discourse-cdn.com/v4/letter/y/6f9a4e/32.png) [@YueLin](https://discourse.processing.org/u/YueLin)\
**Post date:** [October 21, 2022, 7:09am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/7 "2022-10-21T07:09:12Z")

</div>

Thank you for the suggestions! Wow, free custom domain sounds great. 👀 I’ll give it a try for my portfolio site!

---

<div class="post-metadata">

**Author:** ![YueLin](https://avatars.discourse-cdn.com/v4/letter/y/6f9a4e/32.png) [@YueLin](https://discourse.processing.org/u/YueLin)\
**Post date:** [October 21, 2022, 7:10am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/8 "2022-10-21T07:10:46Z")

</div>

I can’t believe I never found out about it when the word ‘processing’ is even in the website url 😅 Thank you for the link!

---

<div class="post-metadata">

**Author:** ![YueLin](https://avatars.discourse-cdn.com/v4/letter/y/6f9a4e/32.png) [@YueLin](https://discourse.processing.org/u/YueLin)\
**Post date:** [October 21, 2022, 7:17am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/9 "2022-10-21T07:17:44Z")

</div>

That’s really helpful, thank you so much! It’s great that the tutorial focus more on the creative rather than technical side of github so it’s much easier for non-programmers to understand 😄 I’ll go give it a try soon!

---

<div class="post-metadata">

**Author:** ![YueLin](https://avatars.discourse-cdn.com/v4/letter/y/6f9a4e/32.png) [@YueLin](https://discourse.processing.org/u/YueLin)\
**Post date:** [October 21, 2022, 7:32am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/10 "2022-10-21T07:32:43Z")

</div>

Thank you everybody for your help regarding both processing and hosting websites, I really appreciate it! I did do a bit of research on building website beforehand but didn’t get much good results, so I’ve been using wix for my portfolio all this time 😂 I’m happy to find out there are actually free website hosting sites.

I think I’ll go check out p5.js first, hopefully it’s still compatible with the 2019 version! 🙏

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [October 21, 2022, 8:46am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/13 "2022-10-21T08:46:35Z")

</div>

You’re very welcome, in life experience really matters because no matter how simple the solution may be, if you don’t know you don’t know and on your own it will take a very long time, perhaps a vicious circle to figure out the solution. That is one of the main reason why this community was created.

P5.js is for P5.js and JavaScript code, it will take extensive work to transform your code from Java/Processing to P5.js/JavaScript

Your application is a stand alone application, which means it was designed to run on a local computer that is not connected to the internet. Luckily some people have come up with a brilliant way to host and run Processing codes on the internet, one of them is [www.openprocessing.org](http://www.openprocessing.org).

Newer version of Processing has been released hence your code cannot run on them, you have to refactor your code to make them compatible with the latest version of Processing IDE.

Hopefully someone in the community will help you do that because I am not very good with Processing.

---

<div class="post-metadata">

**Author:** ![YueLin](https://avatars.discourse-cdn.com/v4/letter/y/6f9a4e/32.png) [@YueLin](https://discourse.processing.org/u/YueLin)\
**Post date:** [October 21, 2022, 9:02am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/14 "2022-10-21T09:02:54Z")

</div>

hmm, i’m a bit stuck on p5.js 😥 the original file is seperated into 3 pde files for better organisation, but I can’t seem to do that for p5.js. I could just paste it over but I was wondering if there’s a better way around it so I can better credit the person who made the bgm music

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/6/26d644fda56bdc9b9ac74172f0554ac054917d48.png)

It seems that I can’t import processing.sound either, I’ll look into it myself tomorrow when i wake up, but if anyone have answers in the meantime that’ll be great!

edit: I found a tutorial on how to add in assets! Just need help with the other two

---

<div class="post-metadata">

**Author:** ![YueLin](https://avatars.discourse-cdn.com/v4/letter/y/6f9a4e/32.png) [@YueLin](https://discourse.processing.org/u/YueLin)\
**Post date:** [October 21, 2022, 9:30am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/15 "2022-10-21T09:30:40Z")

</div>

original file seperated to 3 parts ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/4/8444c2efe14e51dfe085263200b5c12ec248c1ed.png)

---

<div class="post-metadata">

**Author:** ![YueLin](https://avatars.discourse-cdn.com/v4/letter/y/6f9a4e/32.png) [@YueLin](https://discourse.processing.org/u/YueLin)\
**Post date:** [October 21, 2022, 9:31am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/16 "2022-10-21T09:31:30Z")

</div>

error for imports

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/a/9acc36d38e975f3c47caffa61efd82ca08faa76b.png)

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [October 21, 2022, 1:46pm UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/17 "2022-10-21T13:46:16Z")

</div>

Hi @YueLin.

Despite their similar sounding names, Java and JavaScript are two separate programming languages, and libraries written for Processing Java are not compatible with p5.js. Though p5.js is designed to look and feel like Processing, it really is very different when you look closely.

As @Chigoz mentioned above, porting your app from Processing to p5.js will not be as straightforward as just pasting the code from one to the other. I can only recommend that you spend some time learning p5.js from tutorials to understand the key differences in practice, then go back to your project.

Now to answer your specific question about multiple files, this video by Dan Shiffman deals with that topic:

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

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [October 21, 2022, 2:08pm UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/18 "2022-10-21T14:08:45Z")

</div>

Those tutorials from Daniel deserverd a pinned topic. Almost, what? 90% of questions asked he answered with briliance and friendly. :))  
Head to:

=\>[https://www.youtube.com/c/TheCodingTrain](https://www.youtube.com/c/TheCodingTrain)

and browse the playlists, most likely your question will be there in big leters.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [October 21, 2022, 3:15pm UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/19 "2022-10-21T15:15:00Z")

</div>

Hello @YueLin  
The Happy Coding site may be a good road map to help guide you along. The two links below are just suggested entry points in. There’s a lot of information. It’s written at an introductory level and so is very beginner friendly. Processing, p5.js, html, sharing/presenting work, and a lot more is covered.  
It’s a wonderful site.

> **[Exporting Applications](https://happycoding.io/tutorials/processing/exporting-applications)**
>
> Share your programs with other people.

> **[Examples](https://happycoding.io/examples/)**
>
> One of the best ways to learn how to code is just by playing around. Here are some examples that help you do that.

🤓

---

<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:** [October 21, 2022, 7:49pm UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/20 "2022-10-21T19:49:46Z")

</div>

@YueLin, you can also take a look at my sketches w/ both Java Mode & p5js versions:

> [@Convert p5.js to Processing](https://discourse.processing.org/t/convert-p5-js-to-processing/944/8):
>
> Haven’t you taken a look at my Reddit link from my 1st reply for this topic btW? see_no_evil Anyways, I’ve got quite some more Java + p5js sketches for you to compare both syntax flavors: icecream

---

<div class="post-metadata">

**Author:** ![YueLin](https://avatars.discourse-cdn.com/v4/letter/y/6f9a4e/32.png) [@YueLin](https://discourse.processing.org/u/YueLin)\
**Post date:** [October 22, 2022, 7:10am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/21 "2022-10-22T07:10:26Z")

</div>

Ah, I see! So javascript is the only one of the two that can be directly embed as code onto websites, right? Thank you again for pointing me in the right direction, I’ll go look more into p5.js before porting my project then!

---

<div class="post-metadata">

**Author:** ![YueLin](https://avatars.discourse-cdn.com/v4/letter/y/6f9a4e/32.png) [@YueLin](https://discourse.processing.org/u/YueLin)\
**Post date:** [October 22, 2022, 7:20am UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351/22 "2022-10-22T07:20:58Z")

</div>

Oh yeah! Thank you for reminding me, I remember my teacher recommending him too years ago, but it’s been so long I completely forgot about it 😆 His tutorials are really good, I’ll have to go and revisit them soon.

[Next page](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351.md?page=2)