# Designing the input

**URL:** <https://discourse.processing.org/t/designing-the-input/22451>\
**Category:** Coding Questions\
**Created:** [July 7, 2020, 2:13pm UTC](https://discourse.processing.org/t/designing-the-input/22451 "2020-07-07T14:13:43Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [July 7, 2020, 2:13pm UTC](https://discourse.processing.org/t/designing-the-input/22451/1 "2020-07-07T14:13:43Z")

</div>

i want to create an input whose width and increases with respect to how much you’ve  
written and to create another line… Can I do something like this???  
I know I can do it for length… just by checking the input.value() an increasing the width accordingly… But what about multiple lines…

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [July 7, 2020, 6:54pm UTC](https://discourse.processing.org/t/designing-the-input/22451/2 "2020-07-07T18:54:15Z")

</div>

With `textWidth()` [https://processing.org/reference/textWidth\_.html](https://processing.org/reference/textWidth_.html) you can check how wide a string would be on canvas. You would need to check when text is wider than width of your allocated area and split the text there, along the whitespace. And start a new line and new section of text.

It can be done. It’s not simple, but it’s not overly complicated either.

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [July 8, 2020, 6:44am UTC](https://discourse.processing.org/t/designing-the-input/22451/3 "2020-07-08T06:44:56Z")

</div>

i did for the width one @SomeOne… But I have no clue as to if I can do this for a new line…, how to do that??

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [July 8, 2020, 6:49am UTC](https://discourse.processing.org/t/designing-the-input/22451/4 "2020-07-08T06:49:53Z")

</div>

found it

```auto

         <br>
         <textarea rows = "5" cols = "60" name = "description">
            Enter details here...
         </textarea><br>

```

---

<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:** [July 14, 2020, 4:32pm UTC](https://discourse.processing.org/t/designing-the-input/22451/5 "2020-07-14T16:32:46Z")

</div>

Is this a Processing or a p5.js question? The answer is for Processing (Java Mode) and measuring the width of text. However, the follow-up is an html textarea input for p5.js (JavaScript).

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [July 16, 2020, 6:21am UTC](https://discourse.processing.org/t/designing-the-input/22451/6 "2020-07-16T06:21:26Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/38d8a023db09d15a6fb4ad2702f03fb7a20de5c5.png)

---

<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:** [July 17, 2020, 12:00am UTC](https://discourse.processing.org/t/designing-the-input/22451/7 "2020-07-17T00:00:56Z")

</div>

![Screen Shot 2020-07-16 at 5.00.03 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bb0aa2f556e3faea9489ae606785f110addaa247.png)