# P5.js Text Box Tool

**URL:** <https://discourse.processing.org/t/p5-js-text-box-tool/38092>\
**Category:** Coding Questions\
**Created:** [July 25, 2022, 8:28am UTC](https://discourse.processing.org/t/p5-js-text-box-tool/38092 "2022-07-25T08:28:00Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![courserastudent16](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@courserastudent16](https://discourse.processing.org/u/courserastudent16)\
**Post date:** [July 25, 2022, 8:28am UTC](https://discourse.processing.org/t/p5-js-text-box-tool/38092/1 "2022-07-25T08:28:00Z")

</div>

Hello,  
I hope everyone is doing well.

I’m trying to create a textbox using P5.js.  
I’m using a constructor function to make the tool.

Please let me know what I’m doing here.

```auto
function textBox(p) {
  this.name = 'textBox';
  this.icon = 'assets/textBox.png';

  var s = 100;
    ex = 10;
    txt;
    i;

  p.setup = function () {
    p.createCanvas(1500, 500);
    p.background(200);
    txt = [];
  };

  p.draw = function () {
    p.background(200);
    p.textRegion(300, p.height / 2 - ex, s + ex, ex, txt, s);
  };

  p.textRegion = function (r1, r2, r4, stroke, _text, _size) {
    var r3 = p.textWidth(p.join(_text, '')) + ex;
    p.strokeWeight(stroke);
    p.fill(255);
    p.rect(r1, r2, r3, r4);
    p.fill(0);
    p.textSize(_size);
    p.text(p.join(_text, ''), r1 + stroke, r2 + _size);
    p.noFill();
    p.rect(r1, r2, r3, r4);
  };

  p.keyPressed = function () {
    i = txt.length;
    txt[i] = p.key.toLowerCase();
    if (txt.length > (p.width - ex * 2) / s) {
      txt.splice(0, 1);
    }
  };
}

var p = new p5(textBox);

```

 ![textbox](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/b/ab2b9dab0e21d9dec5cb80af81cf267527295331.jpeg)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 26, 2022, 12:56pm UTC](https://discourse.processing.org/t/p5-js-text-box-tool/38092/2 "2022-07-26T12:56:58Z")

</div>

I have updated your sketch code to work hopefully you will see why it works. I suggest that you watch this [video on instance mode](https://www.youtube.com/watch?v=Su792jEauZg)

```auto
function textBox(p) {
  p.name = 'textBox';

  p.s = 50;
  p.ex = 10;

  p.preload = function () {
    // p.icon = p.loadImage('assets/textBox.png');
  }

  p.setup = function () {
    p.createCanvas(1500, 500);
    p.background(200);
    p.txt = ["Hello World", "welcome to Processing"];
  };

  p.draw = function () {
    p.background(200);
    p.textRegion(300, p.height / 2 - p.ex, p.s + p.ex, p.ex, p.txt, p.s);
  };

  p.textRegion = function (r1, r2, r4, stroke, _text, _size) {
    let r3 = p.textWidth(p.join(_text, ' ')) + p.ex;
    p.strokeWeight(stroke);
    p.fill(255);
    p.rect(r1, r2, r3, r4);
    p.fill(0);
    p.textSize(_size);
    p.text(p.join(_text, ' '), r1 + stroke, r2 + _size);
    p.noFill();
    p.rect(r1, r2, r3, r4);
  };

  p.keyPressed = function () {
    i = txt.length;
    p.txt[i] = p.key.toLowerCase();
    if (p.txt.length > (p.width - p.ex * 2) / p.s) {
      p.txt.splice(0, 1);
    }
  };
}

let p = new p5(textBox);

```

BTW it appears most programmers use `let` in preference to `var` the difference is in the scoping rules but I find `let` because you have to declare the variables before you use them.

---

<div class="post-metadata">

**Author:** ![courserastudent16](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@courserastudent16](https://discourse.processing.org/u/courserastudent16)\
**Post date:** [July 26, 2022, 2:22pm UTC](https://discourse.processing.org/t/p5-js-text-box-tool/38092/3 "2022-07-26T14:22:26Z")

</div>

Hi,

I appreciate your time and effort!  
Thank you very much!

The code still has a slight problem.

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

---

<div class="post-metadata">

**Author:** ![courserastudent16](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@courserastudent16](https://discourse.processing.org/u/courserastudent16)\
**Post date:** [July 26, 2022, 2:23pm UTC](https://discourse.processing.org/t/p5-js-text-box-tool/38092/4 "2022-07-26T14:23:02Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/d/0d6e268bd9459d774c717a8e16f2831388031906.png)

---

<div class="post-metadata">

**Author:** ![courserastudent16](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@courserastudent16](https://discourse.processing.org/u/courserastudent16)\
**Post date:** [July 26, 2022, 2:23pm UTC](https://discourse.processing.org/t/p5-js-text-box-tool/38092/5 "2022-07-26T14:23:39Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/c/5cadf0464fbeae7450f5ceab0a6ef65cc6248bff.png)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 26, 2022, 4:01pm UTC](https://discourse.processing.org/t/p5-js-text-box-tool/38092/6 "2022-07-26T16:01:07Z")

</div>

Should be

`i = p.txt.length;`

in keyPressed method. I for got to test for key presses LOL

---

<div class="post-metadata">

**Author:** ![courserastudent16](https://avatars.discourse-cdn.com/v4/letter/c/977dab/32.png) [@courserastudent16](https://discourse.processing.org/u/courserastudent16)\
**Post date:** [July 26, 2022, 4:26pm UTC](https://discourse.processing.org/t/p5-js-text-box-tool/38092/7 "2022-07-26T16:26:18Z")

</div>

Please check the video below  
Not working properly.

[https://www.awesomescreenshot.com/video/10171153?key=e8b8eea92ab93f283899c730cd365a13](https://www.awesomescreenshot.com/video/10171153?key=e8b8eea92ab93f283899c730cd365a13)

```auto
function textBox(p) {
  p.name = 'textBox';
   

  p.s = 50;
  p.ex = 10;

  p.preload = function () {
    p.icon = p.loadImage('assets/textBox.png');
  }

  p.setup = function () {
    p.createCanvas(1500, 500);
    p.background(200);
    p.txt = [];
  };

  p.draw = function () {
    p.background(200);
    p.textRegion(300, p.height / 2 - p.ex, p.s + p.ex, p.ex, p.txt, p.s);
  };

  p.textRegion = function (r1, r2, r4, stroke, _text, _size) {
    let r3 = p.textWidth(p.join(_text, ' ')) + p.ex;
    p.strokeWeight(stroke);
    p.fill(255);
    p.rect(r1, r2, r3, r4);
    p.fill(0);
    p.textSize(_size);
    p.text(p.join(_text, ' '), r1 + stroke, r2 + _size);
    p.noFill();
    p.rect(r1, r2, r3, r4);
  };

  p.keyPressed = function () {
    i = p.txt.length;
    p.txt[i] = p.key.toLowerCase();
    if (p.txt.length > (p.width - p.ex * 2) / p.s) {
      p.txt.splice(0, 1);
    }
  };
}

let p = new p5(textBox);

```

Place for tools being stored JS file.

```auto
	toolbox = new Toolbox();

	//add the tools to the toolbox.
	toolbox.addTool(new FreehandTool());
	toolbox.addTool(new LineToTool());
	toolbox.addTool(new SprayCanTool());
	toolbox.addTool(new mirrorDrawTool());
	toolbox.addTool(new editableShapeTool());
        toolbox.addTool(new ellipseTool());
        toolbox.addTool(new textStampTool());
        toolbox.addTool(new eraserButton());
	toolbox.addTool(new floodFill());
        toolbox.addTool(new textBox(text));
	background(255);

```

HTML file

```auto
<!-- add extra scripts below -->
    <script src="toolbox.js"></script>
    <script src="colourPalette.js"></script>
    <script src="helperFunctions.js"></script>

    <script src="freehandTool.js"></script>
    <script src="lineToTool.js"></script>
    <script src="sprayCanTool.js"></script>
    <script src="mirrorDrawTool.js"></script>
    <script src="textStampTool.js"></script>
    <script src="ellipseTool.js"></script>
    <script src="editableShapesTool.js"></script>
    <script src="eraserbutton.js"></script>
    <script src="floodFill.js"></script>
    <script src="textBox.js"></script>

```