https://editor.p5js.org/illus0r/sketches/NHBATASC7

Начинаем с такого кода:

let str = 'Helloworld'
let myFont
let da = 0

function preload() {
  myFont = loadFont('MajorMonoDisplay-Regular.ttf')
}

function setup() {
  createCanvas(400, 400)
  textAlign(CENTER, CENTER)
  textSize(100)
  // frameRate(1)
  textFont(myFont)
  background(0)
  fill(255)
}

function draw() {
  background(0, 10)
  for (let i = 0; i < str.length; i++) {
    let a = i * 2 * PI / str.length
    let x = width / 2 + 150 * sin(a)
    let y = height / 2 + 150 * -cos(a)
    text(str[i], x, y - 10)
  }
}

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0a39aebe-0d2e-4084-816c-e9366f6ef4d0/Untitled.png

let str = 'loremipsumdolorametset'
let myFont
let da = 0

function preload() {
  myFont = loadFont('MajorMonoDisplay-Regular.ttf')
}

function setup() {
  createCanvas(400, 400)
  textAlign(CENTER, CENTER)
  textSize(40)
  textFont(myFont)
  background(0)
  fill(255)
}

function draw() {
  background(0, 70)
  da += (sin(frameCount * .1) * .4 + .6) * .01
  for (let i = 0; i < str.length; i++) {
    push()
    let x = 100 + 50 * (i % 5)
    let y = 100 + floor(i / 5) * 50
    translate(x, y)
    rotate(-atan2(x - mouseX, y - mouseY))
    text(str[i], 0, -10)
    pop()
  }
}

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3f02fbc0-d8e3-4a7e-97bb-79dffe1fa0c4/Untitled.png

let str = 'helloworldhelloworldhelloworld'
let myFont
let da = 0

function preload() {
  myFont = loadFont('MajorMonoDisplay-Regular.ttf')
}

function setup() {
  createCanvas(400, 400)
  textAlign(CENTER, CENTER)
  textSize(40)
  // frameRate(1)
  textFont(myFont)
  background(0)
  fill(255)
}

function draw() {
  background(0, 10)
  for (let i = 0; i < str.length; i++) {
    let x = 100 + (i % 5) * 40
    let y = 100 + floor(i / 5) * 40
    text(str[i], x, y - 10)
  }
}
let str = 'helloworldhelloworldhelloworld'
let myFont
let da = 0

function preload() {
  myFont = loadFont('MajorMonoDisplay-Regular.ttf')
}

function setup() {
  createCanvas(400, 400)
  textAlign(CENTER, CENTER)
  textSize(40)
  textFont(myFont)
  background(0)
  fill(255)
}

function draw() {
  background(0, 10)
  for (let i = 0; i < str.length; i++) {
    push()
    let x = 100 + (i % 5) * 40
    let y = 100 + floor(i / 5) * 40
    translate(x, y)
    text(str[i], 0, -10)
    pop()
  }
}

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6147ae86-d38b-4e00-82b9-3cd1f6be3149/Untitled.png

let str = 'helloworldhelloworldhelloworld'
let myFont
let da = 0

function preload() {
  myFont = loadFont('MajorMonoDisplay-Regular.ttf')
}

function setup() {
  createCanvas(400, 400)
  textAlign(CENTER, CENTER)
  textSize(40)
  textFont(myFont)
  background(0)
  fill(255)
}

function draw() {
  background(0, 50)
  for (let i = 0; i < str.length; i++) {
    push()
    let x = 100 + (i % 5) * 40
    let y = 100 + floor(i / 5) * 40
    let a = -atan2(x-mouseX,y-mouseY)
    translate(x, y)
    rotate(a)
    text(str[i], 0, -10)
    pop()
  }
}

https://www.instagram.com/p/CEci4Hfhjhx/

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/53f2f3b3-24dd-4228-8ff2-fd363248e68c/Untitled.png

let str = 'helloworldhelloworldhelloworld'
let myFont
let da = 0

function preload() {
  myFont = loadFont('MajorMonoDisplay-Regular.ttf')
}

function setup() {
  createCanvas(400, 400)
  textAlign(CENTER, CENTER)
  textSize(40)
  textFont(myFont)
  background(0)
  fill(255)
}

function draw() {
  background(0, 50)
  for (let i = 0; i < str.length; i++) {
    push()
    let x = 100 + (i % 5) * 40
    let y = 100 + floor(i / 5) * 40
    let dx = x-mouseX
    let dy = y-mouseY
    let a = atan2(dx,dy)
    const R = 100
    
    function f(d, R){
      return (d/R)**.25 * R
    }
    
    let d = Math.sqrt(dx**2+dy**2)
    if(d < R){
      x = mouseX + f(d, R) * sin(a)
      y = mouseY + f(d, R) * cos(a)
    }
    
    translate(x, y)
    // rotate(a)
    text(str[i], 0, -10)
    pop()
  }
}

p5.js Web Editor