How do change the shape of a 'point' in p5js?

p5.js Coding Questions
1

I have created a text animation which has split the word into points using the font.toTextPoints() function. this function makes the points in circular shapes and only on the borders of the word. How can I change the code to replace the points with an image or to change its shape to another, say a triangle?
How do I make the points on the whole word instead of only on its borders?

I am still new to p5js and would be very grateful if you could help me :slight_smile: thank you very much.

1 Like
2

Consider this example:

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

10%20AM

1 Like