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?
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!
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!
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!
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.
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
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
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:
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.
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!
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.
What a cute app!
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!
I’ll give it a try for my portfolio site!
Thank you for the link!
I’ll go give it a try soon!
I’m happy to find out there are actually free website hosting sites.
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 
His tutorials are really good, I’ll have to go and revisit them soon.