Skip to content

Instantly share code, notes, and snippets.

@erraticgenerator
Last active December 9, 2020 03:50
Show Gist options
  • Save erraticgenerator/03603f13a91cc5ed7ee1364adc72ce8c to your computer and use it in GitHub Desktop.
Save erraticgenerator/03603f13a91cc5ed7ee1364adc72ce8c to your computer and use it in GitHub Desktop.
const words = [] // store word objects
function setup() {
createCanvas(800, 400)
background(0)
const str = 'Hello, world! Hi, there! Nice to meet you!'
const wordsStr = str.split(' ')
textSize(48)
// track word position
let x = 20
let y = 60
fill(255)
// iterate over each word
for (let i = 0; i < wordsStr.length; i++) {
const wordStr = wordsStr[i] // get current word
const wordStrWidth = textWidth(wordStr) // get current word width
const word = new Word(wordStr, x, y, i)
words.push(word)
x = x + wordStrWidth + textWidth(' ') // update x by word width + space character
// look ahead the next word - will it fit in the space? if not, line break
const nextWordStrWidth = textWidth(wordsStr[i+1]) || 0
if (x > width - nextWordStrWidth) {
y += 40 // line height, sort of
x = 20 // reset x position
}
}
}
function draw() {
background(0)
for (let i = 0; i < words.length; i++) {
const word = words[i] // retrieve word object
word.update()
word.display()
}
}
function mousePressed() {
for (let i = 0; i < words.length; i++) {
const word = words[i]
word.spread()
}
}
class Word {
constructor(word, x, y, idx) {
this.word = word
this.x = x
this.y = y
// target position is the same as current position at start
this.tx = this.x
this.ty = this.y
this.idx = idx
this.fcolor = color(255)
}
spread() {
this.tx = random(width)
this.ty = random(height)
}
update() {
// move towards the target by 10% each time
this.x = lerp(this.x, this.tx, 0.1)
this.y = lerp(this.y, this.ty, 0.1)
}
display() {
fill(this.fcolor)
noStroke()
text(this.word, this.x, this.y)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment