# Help optimizing a p5.js type generator

**URL:** <https://discourse.processing.org/t/help-optimizing-a-p5-js-type-generator/3941>\
**Category:** Coding Questions\
**Created:** [September 28, 2018, 5:30pm UTC](https://discourse.processing.org/t/help-optimizing-a-p5-js-type-generator/3941 "2018-09-28T17:30:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kiel.d.m](https://avatars.discourse-cdn.com/v4/letter/k/dfb087/32.png) [@kiel.d.m](https://discourse.processing.org/u/kiel.d.m)\
**Post date:** [September 28, 2018, 5:30pm UTC](https://discourse.processing.org/t/help-optimizing-a-p5-js-type-generator/3941/1 "2018-09-28T17:30:39Z")

</div>

I’m trying to translate a project I made in Processing ([here](https://www.behance.net/gallery/69674423/SPACE-TYPE-GENERATOR-_vcylinder)) 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](https://editor.p5js.org/full/ryzpqAjKm) 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?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 29, 2018, 8:07pm UTC](https://discourse.processing.org/t/help-optimizing-a-p5-js-type-generator/3941/2 "2018-09-29T20:07:33Z")

</div>

Beautiful project.

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.

---

<div class="post-metadata">

**Author:** ![kiel.d.m](https://avatars.discourse-cdn.com/v4/letter/k/dfb087/32.png) [@kiel.d.m](https://discourse.processing.org/u/kiel.d.m)\
**Post date:** [September 30, 2018, 7:29pm UTC](https://discourse.processing.org/t/help-optimizing-a-p5-js-type-generator/3941/3 "2018-09-30T19:29:23Z")

</div>

Thanks!

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.

Thanks for the response!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 3, 2018, 3:27am UTC](https://discourse.processing.org/t/help-optimizing-a-p5-js-type-generator/3941/4 "2018-10-03T03:27:12Z")

</div>

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](https://editor.p5js.org/full/r1NIxDJq7) project  
simple test ( incl some changes) [here](https://editor.p5js.org/full/Bk8SYYxc7)  
as (WEBGL + rotateX + text()) not work in p5.js ( with processing no problem…)

---

<div class="post-metadata">

**Author:** ![kiel.d.m](https://avatars.discourse-cdn.com/v4/letter/k/dfb087/32.png) [@kiel.d.m](https://discourse.processing.org/u/kiel.d.m)\
**Post date:** [October 3, 2018, 3:47pm UTC](https://discourse.processing.org/t/help-optimizing-a-p5-js-type-generator/3941/5 "2018-10-03T15:47:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 3, 2018, 11:55pm UTC](https://discourse.processing.org/t/help-optimizing-a-p5-js-type-generator/3941/6 "2018-10-03T23:55:49Z")

</div>

> [@kiel.d.m](#):
>
> Ha! I haven’t coded the numbers yet. It’s on my to-do list.

check out my above linked “test” ?as edit? [here](https://editor.p5js.org/kll/sketches/Bk8SYYxc7)  
from there can copy the numbers and find how to enable/disable menu/sliders [F1]  
( but its “in work” )