# How to add a text input for a TextToPoints project

**URL:** <https://discourse.processing.org/t/how-to-add-a-text-input-for-a-texttopoints-project/41686>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [April 11, 2023, 4:55pm UTC](https://discourse.processing.org/t/how-to-add-a-text-input-for-a-texttopoints-project/41686 "2023-04-11T16:55:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![qmartial](https://avatars.discourse-cdn.com/v4/letter/q/a87d85/32.png) [@qmartial](https://discourse.processing.org/u/qmartial)\
**Post date:** [April 11, 2023, 4:55pm UTC](https://discourse.processing.org/t/how-to-add-a-text-input-for-a-texttopoints-project/41686/1 "2023-04-11T16:55:09Z")

</div>

Hello everyone !

I am still very new to P5js, and i’m trying to experiment generative/interactive typography for an art school project ; i followed a tutorial by Jeff Thompson about experimenting the TextToPoints effect, and i really like the final product !

Now i would like to implement my own ideas, but despite many hours of research, i am still pretty lost 😕

The first idea i have is to add a **text input** , so that the user can type any word and it would be displayed on the canvas with the “chaotic” effect that i learned. I figured out how to create a text input, but i cannot manage to make it work how i would like to ! I asked Jeff Thompson in the comments of the video, and he told me that there might be some reformatting to do. What do you think ? Any help is welcome 🙂

Thank you !

(also i’m french, sorry for the potential typos !)

Here is the current code :

```auto
let gridSize = 10
let points = []
let font 

var textInput

function preload() {
	font = loadFont('assets/Karrik-Regular.otf')
}

function setup () {
	createCanvas (windowWidth, windowHeight)
	background(220)

	textInput = createInput('CHAOS')

	textFont(font)
	textSize(300)
	textAlign(CENTER, CENTER)
	fill (0)
	noStroke()
	text(textInput.value(), width/2, height/2)
	

	loadPixels()
	for (let y=0; y<height; y+=gridSize) {
		for (let x=0; x<width; x+=gridSize) {
			let px = get(x,y)
			let red = px[0];
			if (red < 127) {
				points.push( createVector(x,y) )
			}
		}
	}
	console.log(points)

}

function draw() {
	background(220)

	let mutationAmount = map(mouseX, 0, width, 3, width/6)
	randomSeed(0)

	for (let i = 0; i < points.length; i++) {
		let circlex = points[i].x;
		let circley = points[i].y;
		circlex += random(-mutationAmount, mutationAmount)
		circley += random(-mutationAmount, mutationAmount)

		fill('black')
		noStroke()
		ellipse(circlex+2, circley+2, gridSize, gridSize)

		fill(220)
		stroke (0, 100)
		ellipse(circlex, circley, gridSize, gridSize)
	}
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 13, 2023, 12:38pm UTC](https://discourse.processing.org/t/how-to-add-a-text-input-for-a-texttopoints-project/41686/2 "2023-04-13T12:38:34Z")

</div>

Hello @qmartial

This looks promising:

> **[examples | p5.js](https://p5js.org/examples/dom-input-and-button.html)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

`:)`

---

<div class="post-metadata">

**Author:** ![qmartial](https://avatars.discourse-cdn.com/v4/letter/q/a87d85/32.png) [@qmartial](https://discourse.processing.org/u/qmartial)\
**Post date:** [April 13, 2023, 2:22pm UTC](https://discourse.processing.org/t/how-to-add-a-text-input-for-a-texttopoints-project/41686/3 "2023-04-13T14:22:29Z")

</div>

Hi ! Thank you for your help `:)` Now i think i better understand how the text input function works !

However i am still struggling with the order of these informations … because Jeff put the text() function in the setup part, it’s impossible to change the input.value() ; if I put it in the draw() function, the “mutation” effect (the interactive element using the movement of the mouse) doesn’t apply.

Should i maybe make some of these parameters another function ? And then use a callback somewhere ? The solution might be really obvious, but unfortunately i cannot find it haha ! `:')`