How to add a text input for a TextToPoints project

p5.js Coding Questions
1

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 :confused:

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 :slight_smile:

Thank you !

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

Here is the current code :

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)
	}
}
2

Hello @qmartial

This looks promising:

:)

1 Like
3

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 ! :')