Scattered Text


在 P5.js 中实现的文字分散效果。

实现方式:将画布分为若干个 tile,然后对每个 tile 中文字的位置按正弦函数进行偏移。

grid.pnggrid-2.png

核心代码

for (let y = 0; y < tile; y++) {
  for (let x = 0; x < tile; x++) {
    // sine function
    const offsetX = sin(frameCount * 0.0025 * (x * y)) * 30
    // source position
    const sx = floor(x * tileW + offsetX)
    const sy = floor(y * tileH)
    const sw = tileW
    const sh = tileH
    // dest position
    const dx = floor(x * tileW)
    const dy = floor(y * tileH)
    const dw = tileW
    const dh = tileH
    
    copy(pg, sx, sy, sw, sh, dx, dy, dw, dh)
  }
}