let points = [];

let offsetX, offsetY;

​

function preload() {

  // Load a TTF file instead of an OTF file

  font = loadFont('hei.ttf');

}

​

function setup() {

  createCanvas(600, 400);

  background(255);

  // Set the font size

  let fontSize = 200;

  // Extract the outline points of the Chinese character "摆"

  // sampleFactor controls the density of the points, larger values result in more points

  points = font.textToPoints("摆", 0, 0, fontSize, {

    sampleFactor: 0.2,

    simplifyThreshold: 0

  });

  // Calculate the bounding box of the outline points for centering the character

  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;

  for (let pt of points) {

    if (pt.x < minX) minX = pt.x;

    if (pt.y < minY) minY = pt.y;

    if (pt.x > maxX) maxX = pt.x;

    if (pt.y > maxY) maxY = pt.y;

  }

  // Calculate the translation offsets to center the character on the canvas

  offsetX = (width - (maxX - minX)) / 2 - minX;

  offsetY = (height - (maxY - minY)) / 2 - minY;

  stroke(0);

  strokeWeight(2);

  noFill();

}

​

function draw() {

  background(255);

  push();

  // Translate the coordinate system to center the character

  translate(offsetX, offsetY);

  beginShape();

  // Apply a vibrational offset to each outline point using sine and cosine functions

  for (let i = 0; i < points.length; i++) {

    let pt = points[i];

    let vx = pt.x + sin(frameCount * 0.1 + i) * 2;

    let vy = pt.y + cos(frameCount * 0.1 + i) * 2;

    vertex(vx, vy);

  }

  endShape(CLOSE);

  pop();

}

​