P5.js Text Box Tool

p5.js Coding Questions
1

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.

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
textbox1365×719 67.2 KB

2

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

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.

1 Like
3

Hi,

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

The code still has a slight problem.

image

4

image
image1500×1142 29.9 KB

5

image
image649×615 29.6 KB

6

Should be

i = p.txt.length;

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

7

Please check the video below
Not working properly.

https://www.awesomescreenshot.com/video/10171153?key=e8b8eea92ab93f283899c730cd365a13

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.

	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

<!-- 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>