I’m trying to translate a project I made in Processing (here) into a browser environment with P5.js. It works smoothly until additional rings are added (, after which it really starts to slow down. Here’s the initial, stripped down version I’m working on.
There’s a big for() loop for the string of type and rings that draws the appropriate letter and places it correctly in the cylinder structure. And aside from that, lots of push/pop/translate()s and sliders. Any idea how I could optimize it run smoother?
I increased the top “count” field on your example sketch and added a bunch of waves – it seemed to be performing fine in my browser?
Untested, but I wonder whether you can pre-compute the letter shapes from your keyboard routines to increase performance. It looks like you are redrawing every letter every time? As far as I can tell, continuous recalculation of letter forms is only necessary with Wave: Type: Y-axis – the rest of the time, it can be done once whenever a type slider changes and then left cached.
Like the amateur coder I am, I only tested it on one system. It’s running much better on other computers. It’s maybe not as much of an issue as I was thinking.
The caching idea is interesting. I’ve never worked with that technique before but if it slows down further I’ll test it.
hi @kiel.d.m
i think you miss numbers in your STG font ??
i want try it for a p5.js STARWARS theme text intro for this project
simple test ( incl some changes) here
as (WEBGL + rotateX + text()) not work in p5.js ( with processing no problem…)
Ha! I haven’t coded the numbers yet. It’s on my to-do list.
If the text() is in a WEBGL sketch, it needs to be an Opentype I think. I needed to add an Opentype to my assets and use that rather than the default when working with type in 3D. So find a serif that has an .otf version you can use?