# Adding one textured plane slows/lags the whole environment

**URL:** <https://discourse.processing.org/t/adding-one-textured-plane-slows-lags-the-whole-environment/21720>\
**Category:** Coding Questions\
**Created:** [June 9, 2020, 9:14pm UTC](https://discourse.processing.org/t/adding-one-textured-plane-slows-lags-the-whole-environment/21720 "2020-06-09T21:14:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![awunk](https://avatars.discourse-cdn.com/v4/letter/a/5fc32e/32.png) [@awunk](https://discourse.processing.org/u/awunk)\
**Post date:** [June 9, 2020, 9:14pm UTC](https://discourse.processing.org/t/adding-one-textured-plane-slows-lags-the-whole-environment/21720/1 "2020-06-09T21:14:50Z")

</div>

Following some popular p5.js tutorials I got a 3d environment of cubes running, I want to add a text element for a little GUI. However, when texture(hovertext) is ran in the draw function, the environment drops from 30fps down to 1-4fps. I am hoping anyone can see if I did something wrong to make it run so poorly.

The code:  
[https://editor.p5js.org/awunk/sketches/uzy\_ltqOT](https://editor.p5js.org/awunk/sketches/uzy_ltqOT)  
Uncomment lines 50-58 to display the text.

---

<div class="post-metadata">

**Author:** ![janmaltel](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@janmaltel](https://discourse.processing.org/u/janmaltel)\
**Post date:** [June 10, 2020, 9:31am UTC](https://discourse.processing.org/t/adding-one-textured-plane-slows-lags-the-whole-environment/21720/2 "2020-06-10T09:31:07Z")

</div>

I think I can only partly answer your question because I don’t know why the texture is slowing down your sketch that much ☹

I can offer you two semi-fixes, both shown in [this sketch](https://editor.p5js.org/janmaltel/sketches/yCMqfjG5I).

A first option is to use [`text()`](https://p5js.org/reference/#/p5/text) directly. You still can get the (desired?) effect that the text is “swimming” in your boxes (I like it!). However, as far as I am aware, you cannot really trigger any function (GUI-stuff) by clicking on it (unless you manually determine the bounding boxes of the text element and check whether `mouseX` and `mouseY` are inside this box when the mouse is pressed).

A second option is to create a `<p>` DOM element that sits “on top” of your sketch using the [`createP()`](https://p5js.org/reference/#/p5/createP) function. The advantage is that you can easily interact with it using the `.mousePressed()` method (as shown in the sketch; change the color of the text by clicking on it). However, the text does not swim in your boxes as it does when the text is part of the canvas.

---

<div class="post-metadata">

**Author:** ![awunk](https://avatars.discourse-cdn.com/v4/letter/a/5fc32e/32.png) [@awunk](https://discourse.processing.org/u/awunk)\
**Post date:** [June 11, 2020, 5:46pm UTC](https://discourse.processing.org/t/adding-one-textured-plane-slows-lags-the-whole-environment/21720/3 "2020-06-11T17:46:54Z")

</div>

Hi, thank you so much for replying. I recall reading somewhere that the text() function doesn’t render in webgl/3d environments without importing a font so I avoided it, but that second option you listed I had no idea about. I’ll try that. Thanks alot.