Consider this example:

https://p5js.org/reference/#/p5.Font/textToPoints

```
for (let i = 0; i < points.length; i++) {
let p = points[i];
vertex(
p.x * width / bounds.w +
sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,
p.y * height / bounds.h
);
}
```

textToPoints returns a list of points, `points[]`

. `p = point[i]`

is a single point β it has an x and y, `p.x`

and `p.y`

.

So, in the example we are in the middle of creating a shape, and we are calling vertex β but we can loop over those x,y pairs and do anything with them. Letβs draw circles.

```
// 2019-11 fonts with shapes
// simple example of using textToPoints
// to draw fonts with circles, squares, images, whatever
// from textToPoints example
// and from loadFont in p5.js by Rune Madsen
let font;
function preload() {
font = loadFont('GermaniaOne-Regular.ttf');
}
let points;
let bounds;
let zoom;
function setup() {
createCanvas(100, 100);
stroke(0);
fill(255, 104, 204);
points = font.textToPoints('p5', 0, 0, 10, {
sampleFactor: 2,
simplifyThreshold: 0
});
bounds = font.textBounds(' p5 ', 0, 0, 10);
zoom = 10;
}
function draw() {
background(255);
translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);
for (let i = 0; i < points.length; i++) {
let p = points[i];
if(second()%2==0){
rect(p.x*zoom, p.y*zoom, 5, 5);
} else {
ellipse(p.x*zoom, p.y*zoom, 5, 5);
}
}
}
```