Hello there, I made this fun web toy using p5.js, some vanilla JS, HTML, CSS and it’s hosted using netlify. It aims to show you the future and allow you to save it.
Experience it here: https://showmethefuture.logikblok.com/
Code here: GitHub - logikblok/futuregenerator: a site that generates predictions for the future
Future iterations include showing you new words that will come, what the weather will be like in the future and what sorts of amazing new types of music there will be.
Aside from general feedback I’d love some specifics on why it fails for mobile, how to make it faster and if there is anything wrong I’m doing JS code wise. Thank you 
4 Likes
Hey @logikblok! A great & fun web app! It reminds me a little of The Twilight Zone opening sequences.
I have some ideas as to why your website might not be rendering properly on mobile. First off, big kudos to you for using the WEBGL rendering! Using 3D is definitely not an easy feat! Having said this, using 2D shapes with 3D is always tricky. In this case, it seems like you are drawing a rect before you draw the future prediction text. While logically, the rect() should be drawn text(), on mobile, it seems to be rendering the text() before rect(). This isn’t a fault to your code, but rather seems like an inconsistency with p5.js itself on how it renders WEBGL canvases on mobile. You can test this by moving the text() away from the rect() – you should see that they both get rendered.
There can be a couple of different ways of resolving this. One would be changing the visual design a little so that the text is not on top of the rectangle. If you like the visual design, I’d also suggest perhaps looking into rendering the text as an HTML element rather than within the canvas. So similar to how you create HTML buttons right now, you’d be appending to the innerHTML of a <p> tag, for example.
Hope my suggestions are helpful and looking forward to seeing your other sketches!
1 Like
