Skip to content

Instantly share code, notes, and snippets.

@erraticgenerator
Created December 6, 2020 18:58
Show Gist options
  • Save erraticgenerator/db8cf95b7e9c80a34f793931c75e5f8c to your computer and use it in GitHub Desktop.
Save erraticgenerator/db8cf95b7e9c80a34f793931c75e5f8c to your computer and use it in GitHub Desktop.
1. basic use of p5.Font.textToPoints()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
</head>
<body>
<script>
/*
1. basic use of p5.Font.textToPoints()
*/
let font
let fSize // font size
let msg // text to write
let pts = [] // store path data
function preload() {
// preload OTF font file
font = loadFont('../ChunkFive-Regular.otf')
}
function setup() {
createCanvas(800, 500)
fSize = 256
textFont(font)
textSize(fSize)
msg = 'point'
pts = font.textToPoints(msg, 0, 0, fSize, {
sampleFactor: 0.1, // increase for more points
simplifyThreshold: 0.0 // increase to remove collinear points
})
console.log(pts) // { x, y, path angle }
stroke(255)
strokeWeight(2)
noFill();
}
function draw() {
background(0)
// 1. interactive
// const d = dist(mouseX, mouseY, width/2, height/2)
// const angle = atan2(mouseY-height/2, mouseX-width/2)
// 2. animate on its own
const d = 10 + sin(frameCount/50.) * 50
const angle = frameCount/100.
push()
translate(60, height*5/8)
for (let i = 0; i < pts.length; i++) {
const p = pts[i]
push()
translate(p.x, p.y)
rotate(angle)
line(-d, -d, +d, +d)
pop()
}
pop()
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment