Uploading interactive app from processing to website / github?

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 , 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 :pray:
link to said app in case anyone is interested ahaha : coding sample- processing - YouTube

2 Likes

Hi @YueLin :slight_smile: What a cute app!

This answer by @josephh seems relevant to your question:

2 Likes

Hi @YueLin,

You may also want to look at this thread:

I also recommend Netlify which is great for hosting static websites for free.

Have fun!

3 Likes

You can host Processing code by pasting it in www.openprocessing.org You need to have an account before you can post in openprocessing

1 Like

A great intro to github:

2 Likes

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

:open_mouth: 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!

1 Like

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

1 Like

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

1 Like

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 :smile: I’ll go give it a try soon!

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 :joy: 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! :pray:

1 Like

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.

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.

1 Like

hmm, i’m a bit stuck on p5.js :disappointed_relieved: 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

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

original file seperated to 3 parts image

error for imports

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:

3 Likes

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

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

3 Likes

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.

:nerd_face:

3 Likes

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

4 Likes

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!

2 Likes

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 :laughing: His tutorials are really good, I’ll have to go and revisit them soon.