Professional website with p5


a typical website contains multiple pages besides the index.html.
(i.e. home, bio, shop, dates, contact etc.), Do you develop pro websites in p5 or is it a mere code learning platform?


1 Like

heres a website built with p5.js

heres another

as with all websites i dont think you’ll be able to not use html. Then you got to consider your database, or server, which you can handle with p5, then you got to consider the security which I don’t think you can handle with p5, might be wrong though.


Great help and insight, paulgoux

Dan does great and I found this where he talks about the interaction of html and p5. He suggests to accent one or the other inside a particular detail of the project. So knowing html besides p5 seems crucial in creating web sites, at least I would see so far regarding your aspects yet.

I also found another thing called progressive web application (PWA). Where to put this in the overall picture? Is it a kind of extended html programming or such?

My main question is if I am correct to see the key is to implement and connect the different areas (p5, html, PWA) correctly in a typical web site project? One aspect then is the referencing techniques and putting everything in a appropriate order (inside the index.html??)

Did you learn all languages(?) for your work? Looks like a bigger thing to do, of course.


1 Like

just idea about HTML .v.s. sketch.js


Kll, Great!!
I would regard this as one of a multi page site. Is cool to stay in p5.

the createElement Function is the key to write html like headers, I slowly understand that, The create thing in general seems to be the html secret here, (as far as I can see) Alright!

How to add several sites (say: home, bio, shop, contact etc.) in one p5 project, (If possible, of course). And/Or how to organize a file structure containing the media material (mp3, mp4, pics) of each particular page of the whole web site?

wait, you should work on both sides,
and this what i show is only one option,

it is a HTML page with a ( small ) processing canvas
means example the menu and links are all handled on the HTML side…
not need processing create element in all cases.
BUT for both must learn HTML, style / CSS…

but if you check on what we talk here with the “gamers”
is also possible, only to use the minimal HTML index.html
and a fullscreen canvas with a button menu ( of mouse click on rectangles ) and a state system
( like for multi screen games )

also that here is only a test, actually the real HTML start would be
to get one of the HTML 5 templates and integrate there the p5.js canvas…

i remember that i used a free ,
for my webserver CMS project python
but just to make it ?programmable? took me 3 days.

for the media file system you have the data or assets dir.

1 Like


what about the PWA (progressive web application) approach? Is it a different story, necessary or useful for creating “regular” web sites or more or less a online app development scheme?

I understand that html5 and p5 should be combined so far in web development, or maybe a better expression makes sense to use both, okay. It would be great to know a bit on the application of the tools. Is it possible if you start out in PWA to implement/edit it in html or p5 later?