ASCII Wave? - OpenProcessing

mySketch.js
style.css
index.html
xxxxxxxxxx
 
let div = 40, ascii = []
​
function setup() {
  createCanvas(windowWidth, windowHeight)
  colorMode(HSB)
  textFont('Grandiflora One') 
  textAlign(CENTER, CENTER)
  textSize(52)
  
  for (let y = 0; y < height; y += height / div) {
    for (let x = 0; x < width; x += width / int(width / height * div)) {
      if (x == 0 || y == 0) continue
      ascii.push(new Typo(x, y))
    }
  }
}
​
function draw() {
  background(255)
  
  ascii.forEach(txt => txt.display(createVector(mouseX, mouseY)))
  
  describe(`There are ${ascii.length} ASCII Text on the sketch. Click the screen to make ASCII Wave.`, LABEL)
}
​
class Typo {
  constructor(x, y) {
    this.x = x
    this.y = y
    this.txt = 44032 // Start with the first Hangul syllable
    this.num = this.txt
    this.count = 0
  }
  
  display(mouse) {
    if (mouseIsPressed) {
      let power = constrain(map(dist(mouse.x, mouse.y, this.x, this.y), 0, max(width, height) / 4, 10, 0), 0, 10)
      this.num += int(power)
    }
    
    if (this.txt < this.num) this.txt++
    else if (this.txt == this.num && this.num > 44032) { // Ensure it stays within the Korean range
      if (this.count < 30) this.count++
      else { this.num--; this.count = 0 }
    }
    else this.txt = this.num
    
    fill((this.txt * 4) % 360, 100, 100)
    text(char(this.txt), this.x, this.y)
  }
}
​