arjunmakesthings / p5.textToPoints

A p5.js library that converts any piece of text to points with x & y coordinates.

Examples of Use

John Mayer's words, inputted as text and outputted as x & y coordinates to make drawing transformations easier.

How To Use

Step 1: Download the p5.textToPoints.js file, add it to your program's root folder and include it in the HTML file.

<script src="p5.textToPoints.js"></script> <!-- Include your addon library -->

Or, you can include this (to fetch it via GitHub):

<script src="https://github.com/arjunmakesthings/p5.textToPoints/blob/main/p5.textToPoints.js"></script> <!-- Include your addon library -->

---

Step 2: Declare an array and run the function with your desired parameters.

lettersToPoints = convertLetterToPoints (string, xPos, yPos, [gridSize], [fontSize], [font], [horAlignment], [verAlignment])

The parameters are:

• string: the text you want to transform.
• gridSize: how far apart should the points be; smaller value = more points, less spaced out & vice-versa (default is 3).
• fontSize: font size, default is 24.
• font: the font you want to use, default is Arial.
• horAlignment: horizontal alignment type, accepts all p5.textAlign modes, default is LEFT.
• verAlignment: bertical alignment type, accepts all p5.textAlign modes, default is TOP.

For example:

lettersToPoints = convertLetterToPoints("hello person", 10, height / 2, 3, 85);

---

Step 3: Run through the declared array and draw. For example:

  for (let i = 0; i < lettersToPoints.length; i++) {
    stroke (0);  
    strokeWeight (0.3) 
    fill (150); 
    square(lettersToPoints[i].x, lettersToPoints[i].y+sin(i*frameCount*0.0001)*5, 3);
  }

The program above produces this:

Screen.Recording.2024-06-28.at.7.37.49.PM.mov