I made a web site using only p5.js and you can find it here: rich.gg
The purpose of the site is to promote my designer capabilities and initiate contact by:
1 displaying a portfolio of some selected works
2 carrying my UX/UI skills, creative thinking and focus on quality
As an architect and a designer dedicated to real time 3D for almost 20 years, I took the opportunity offered by p5.js and WebGL to developed a fully 3D web site, finally breaking free of plugins and being able to run on all platforms. Coming from the Processing community, the choice of P5.js made complete sense, the API offering all the tools and conveying the functions and logics of Processing.
First and foremost, following my idea that 3D interfaces and 3D internet can only exist as long as it performs 2D tasks at least as good as classical 2D, the navigation, readability, graphical quality and overall usability had to be checked against 2D all along the development process. The use of HTML text being kept a priority.
Second, the general composition of the site was dictated by “the responsive constraint”. Not only did the responsive part of the coding amounted for about 40% of the work, but the constraint became the architectural driver of the project.
Then the “Multiplatform challenge” carried over to the “mouse / touch / pad” constraint. Considering the target audience of tech oriented decision-makers and designers pairs, priority order was set as : High end Smartphones, tablets, Desktop PCs and lastly trackpad only Laptops.
The trick in the making of this site was to manage the connection between the 2D html and the 3D WebGL space, both for interaction (buttons) and for the dynamic nature of the site(responsive + motions)
Another “feature” was to be able to get some feedback without using third partie stats so I developped a very minimal php/mysql system to track visites.(Really getting annoyed by all those companies going after your datas like craving piranhas after your bones)
Finally, a “trap” was set in the about “cell” of the site to encourage contact. It is a false trap that can be overcome by using the contour of the cell to swipe over
So I wish you like it, I’d be glad to hear your comments and suggestions and I would be happy to exchange with other people looking at building their own 3D web site
update: I have had some feedback that the images doesn’t show on some iPhones
If you see this problem and you are willing to upload a screenshot that would help ^^
This Behaviour happens on both Safari and Chrome
I think I would go for a Texture() failure of p5.js, some WebGL problem with some iPhones
Feedback tells me the site is ok on :
- iPhone 6S 12.1.4
- iPhone SE 12.1.4
Textures not showing on :
- iPhone 8+ 12.1.4 (you)
- iPhone X 12.1.4
- iPhone XS 12.1.4
I changed some code to try and fix the iPhone bug using this technique
If someone who owns an iPhone 8, 9 or X could give it a go and tell me it the site show up good that would really help
the site should look like this