Bubble Text - OpenProcessing

mySketch
font utils
path
getInterpolatedCurves
gradientShader
xxxxxxxxxx
 
let font
// let input
OPC.text({ name: 'input', label: 'Text', value: 'testing' })
OPC.color({ name: 'material', label: 'Fill', value: '#FFFFFF' })
OPC.palette({
  name: 'palette',
  label: 'Reflections',
  options: [
    ["#0a1966", "#ffef0d", "#fafafa"],
    ["#32312e", "#795330", "#c7ae82", "#f5f2e3"],
    ["#ee726b", "#ffc5c7", "#fef9c6"],
    ["#203051", "#4464a1", "#62b6de", "#b3dce0", "#e2f0f3"],
    ["#584594", "#e488b7", "#d74c41", "#f0d235", "#36ad63", "#69bcea", "#fdfdfd"],
  ],
})
OPC.slider({ name: 'metal', label: 'Metalness', min: 0, max: 100, value: 100 })
OPC.slider({ name: 'wiggle', label: 'Wiggle', min: 0, max: 1, step: 0.001, value: 1 })
OPC.toggle({ name: 'showBG', label: 'Show Background', value: false })
​
let filterShader
let bg
let bgs = {}
let models = {}
let distort
​
const defaultSize = 20
​
const {
  findMats,
  toScaleAxis,
  traverseEdges,
  getCurveToNext,
  getBoundaryBeziersToNext,
  getCpNodesOnCircle,
  isTerminating,
  isSharp,
  getBranches,
  getCurveBetween,
  simplifyMat,
} = MAT
​
function preload() {
  // Sniglet 800
  font = loadFont('https://fonts.gstatic.com/s/sniglet/v17/cIf4MaFLtkE3UjaJ_ImHRGEsnIJkWL4.ttf')
  
  // Tac One
  // font = loadFont('https://fonts.gstatic.com/s/tacone/v2/ahcZv8Cj3zw7qDr8fO4hU-FwnU0.ttf')
  
  // Imbue
  // font = loadFont('https://fonts.gstatic.com/s/imbue/v27/RLpXK5P16Ki3fXhj5cvGrqjocPk4n-gVX3M93TnrnvhoPxaQfOsNNK-Q4xY.ttf')
  
  // Open Sans
  // font = loadFont('https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4nY1M2xLER.ttf')
}
​
function rThreshold(cpNode) {
  const rs = []
  const cpStart = cpNode
  do {
    rs.push(cpNode.cp.circle.radius)
    cpNode = cpNode.next
  } while (cpNode !== cpStart)
  rs.sort((a, b) => a - b)
  // return rs[floor(0.99 * rs.length)]
  return rs[rs.length-1]
}
​
function cpNodeChildren(cpNode) {
  let cp = cpNode.next;
  if (isTerminating(cpNode)) { return []; }
  let children = [cp];
​
  let cp_ = cp;
  while (cp_.nextOnCircle !== cp.prevOnCircle) {
    cp_ = cp_.nextOnCircle;
    children.push(cp_); 
  }
​
  return children;
}
​
function treeChildrenLength(cpNode) {
  if (cpNode.treeChildrenLength === undefined) {
    const children = cpNodeChildren(cpNode)
    cpNode.treeChildrenLength = 0
    if (children.length === 1) {
      for (const child of cpNodeChildren(cpNode)) {
        const distToChild = Math.hypot(
          cpNode.cp.circle.center[0] - child.cp.circle.center[0],
          cpNode.cp.circle.center[1] - child.cp.circle.center[1],
        )
        cpNode.treeChildrenLength += distToChild + treeChildrenLength(child)
      }
    }
  }
  return cpNode.treeChildrenLength
}
​
function getCharModel(char) {
  if (!models[char]) {
    const loops = font.paths(char, 0, 0, defaultSize)
    const mats = findMats(loops, 1) //.map(mat => simplifyMat(mat, 20, 5))
    const sats = mats.map((mat) => toScaleAxis(mat, 5))
    const levels = 6
    let shapes = []
    const maxRs = []
    let currentShape
    let currentLoop
    let loopStart
    let lastBoundary
    let lastMedial
    for (const sat of sats) {
      // Start node to iterate from - it also represents the maximum radius 
      // maximal disk.
      const cpStart = sat.cpNode
      const maxR = cpStart.cp.circle.radius
      const minR = maxR * 0.5 //rThreshold(cpStart)
​
      // Iterate through all boundary piece curves
      let cpNode = cpStart
      do {
        // Get the loop that this boundary piece belongs to
        let loop = cpNode.cp.pointOnShape.curve.loop;
        
        const medialCurve = getCurveToNext(cpNode)
        const medialCurves = medialCurve ? [medialCurve] : []
        const boundaryCurves = getBoundaryBeziersToNext(cpNode) || []
        const includedNodes = [cpNode]
        
        if (loop !== currentLoop) {
          currentLoop = loop
          loopStart = cpNode
          currentShape = []
          for (let i = 0; i < levels; i++) {
            currentShape.push([])
          }
          shapes.push(currentShape)
          maxRs.push(maxR)
        }
        
        let medialCurveLen = medialCurve ? approxCurveLen(medialCurves) : 0
        let boundaryCurveLen = boundaryCurves ? approxCurveLen(boundaryCurves) : 0
        while (
          cpNode.next !== cpStart &&
          cpNodeChildren(cpNode.next).length === 1 &&
          (
            cpNode.next.cp.circle.radius < minR ||
            (medialCurveLen < 2 && boundaryCurveLen < 2)
          ) &&
          cpNode.next.cp.pointOnShape.curve.loop === loop // &&
        ) {
          cpNode = cpNode.next
          const nextMedial = getCurveToNext(cpNode)
          if (nextMedial) {
            medialCurves.push(nextMedial)
            medialCurveLen += approxCurveLen([nextMedial])
          }
          const nextBoundary = getBoundaryBeziersToNext(cpNode)
          if (nextBoundary) {
            boundaryCurves.push(...nextBoundary)
            boundaryCurveLen += approxCurveLen(nextBoundary)
          }
          includedNodes.push(cpNode)
        }
        
        const prevR = includedNodes[0].cp.circle.radius
        const nextR = cpNode.next.cp.circle.radius
        
        if (medialCurves.length === 0) {
          medialCurves.push([lastMedial, lastMedial])
        }
        if (boundaryCurves.length === 0) {
          boundaryCurves.push([lastBoundary, lastBoundary])
        }
​
        const interps = getInterpolatedCurves(medialCurves, boundaryCurves, prevR, nextR, maxR, levels)
        const last = cpNode.next === cpStart || cpNode.next.cp.pointOnShape.curve.loop !== loop || isSharp(cpNode.next) || cpNode.next.isHoleClosing || isTerminating(cpNode.next)
        for (const [i, interp] of interps.entries()) {
          if (last) {
            currentShape[i].push(...interp)
          } else {
            currentShape[i].push(...interp.slice(0, -1))
          }
        }
        
        const lastMedialCurve = medialCurves[medialCurves.length-1]
        lastMedial = lastMedialCurve[lastMedialCurve.length-1]
        const lastBoundaryCurve = boundaryCurves[boundaryCurves.length-1]
        lastBoundary = lastBoundaryCurve[lastBoundaryCurve.length-1]
​
        // Go to next boundary piece
        cpNode = cpNode.next
      } while (cpNode !== cpStart)
    }
​
    models[char] = buildGeometry(() => {
      const allOutlines = shapes.flatMap((shape) => shape[0])
      const allNormals = shapes.flatMap((shape) => {
        let outerNormals = shape[0].map((v, i) => shape[0][(i+1)%shape[0].length].copy().sub(v))
        for (let i = 1; i < outerNormals.length; i++) {
          const prev = outerNormals[i-1]
          const next = outerNormals[i]
          if (next.x === 0 && next.y === 0) {
            next.set(prev.x, prev.y, 0)
          }
        }
        for (let i = outerNormals.length-2; i >= 0; i--) {
          const prev = outerNormals[i+1]
          const next = outerNormals[i]
          if (next.x === 0 && next.y === 0) {
            next.set(prev.x, prev.y, 0)
          }
        }
        for (const n of outerNormals) n.normalize()
        outerNormals = outerNormals.map((n, i) => n.copy().add(outerNormals[(i-1)%outerNormals.length]).normalize())
        for (const normal of outerNormals) {
          normal.rotate(PI/2)
        }
        return outerNormals
      })
​
      for (const [shapeIdx, shape] of shapes.entries()) {
        const maxR = maxRs[shapeIdx]
        let outerNormals = shape[0].map((v, i) => shape[0][(i+1)%shape[0].length].copy().sub(v))
​
        for (let i = 1; i < outerNormals.length; i++) {
          const prev = outerNormals[i-1]
          const next = outerNormals[i]
          if (next.x === 0 && next.y === 0) {
            next.set(prev.x, prev.y, 0)
          }
        }
        for (let i = outerNormals.length-2; i >= 0; i--) {
          const prev = outerNormals[i+1]
          const next = outerNormals[i]
          if (next.x === 0 && next.y === 0) {
            next.set(prev.x, prev.y, 0)
          }
        }
        for (const n of outerNormals) n.normalize()
        outerNormals = outerNormals.map((n, i) => n.copy().add(outerNormals[(i-1)%outerNormals.length]).normalize())
        for (const normal of outerNormals) {
          normal.rotate(PI/2)
        }
​
        outerNormals = outerNormals.map((curr, i) => {
          return allNormals.map((v, j) => v.copy().mult(1/(allOutlines[j].copy().sub(shape[0][i]).magSq() + 1)))
            .reduce((acc, next) => acc.add(next)).normalize()
        })
        const normals = shape.map((ring, i) => {
          let ringNormals = ring.map((v, j) => {
            const t = v.z / maxR
            const n = outerNormals[j].copy().lerp(createVector(0, 0, 1), t).normalize()
            return n
          })
          return ringNormals
        })
        for (let i = 1; i < shape.length; i++) {
          const prev = shape[i-1]
          const next = shape[i]
          const prevN = normals[i-1]
          const nextN = normals[i]
          beginShape(QUAD_STRIP)
          for (let j = 0; j < prev.length; j++) {
            const k = j % next.length
            normal(nextN[k].x, nextN[k].y, nextN[k].z)
            vertex(next[k].x, next[k].y, next[k].z)
            normal(prevN[k].x, prevN[k].y, prevN[k].z)
            vertex(prev[k].x, prev[k].y, prev[k].z)
          }
          endShape()
        }
      }
      
      const graph = {}
      for (const [i, shape1] of shapes.entries()) {
        const loop1 = shape1[0]
        const loop1Start = loop1[0]
        const loop1End = loop1[loop1.length-1]
        const connections = {}
        for (const [j, shape2] of shapes.entries()) {
          const loop2 = shape2[0]
          const loop2Start = loop2[0]
          const loop2End = loop2[loop2.length-1]
          let found = false
          for (const [start, end] of [[loop2End, loop1Start], [loop1End, loop2Start]]) {
            if (start.dist(end) < 1e-1) {
              found = true
              connections[j] = true
              break
            }
          }
        }
        graph[i] = connections
      }
      
      const components = []
      const seen = {}
      const visit = (key) => {
        seen[key] = true
        const component = components[components.length-1]
        component.push(key)
        for (const key2 in graph[key]) {
          if (seen[key2]) continue
          visit(key2)
          break
        }
      }
      for (const key in graph) {
        if (seen[key]) continue
        components.push([])
        visit(key)
      }
      
      beginShape()
      let first = true
      for (const component of components) {
        if (!first) beginContour()
        for (const index of component) {
          const shape = shapes[parseInt(index)]
          const loop = shape[shape.length-1]
​
          normal(0, 0, 1)
          loop.forEach((v) => vertex(v.x, v.y, v.z))
        }
        if (!first) endContour()
        first = false
      }
      endShape()
    })
    models[char].clearColors()
  }
  return models[char]
}
​
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL)
  bg = createFramebuffer({ width: 800, height: 400 })
  filterShader = createFilterShader(gradientShader)
  distort = createWarp(({ glsl, millis, position }) => {
    const amount = glsl.param('amount')
    const t = millis.div(1000)
    return glsl.vec3(
      t.mult(2).add(position.y().mult(0.002)).sin().mult(15),
      t.mult(0.5).add(position.y().mult(0.02/2)).sin().mult(25),
      t.mult(1.5).add(position.x().mult(0.03/2)).sin().mult(25)
    ).scale(amount)
  }, { space: 'world', defs: 'uniform float amount;' })
}
  
function getBG() {
  const key = palette.join(',')
  if (!bgs[key]) {
    const nParticles = []
    for (let i = 0; i < 40; i++) {
      nParticles.push(i)
    }
    bg.draw(() => {
      clear()
      filterShader.setUniform('size', [bg.width, bg.height])
      filterShader.setUniform('numParticles', nParticles.length)
      filterShader.setUniform('positions', nParticles.flatMap(() => [
        random(-0.5, 0.5) * bg.width,
        random(-0.25, 0.25) * bg.height,
      ]))
      filterShader.setUniform('influences', nParticles.map(() => random(0.8, 1)))
      filterShader.setUniform('colors', nParticles.flatMap((i) => {
        if (i < 3) return [1, 1, 1]
        if (i === 3) return [0, 0, 0]
        const c = random(palette)
        return [red(c)/255, green(c)/255, blue(c)/255]
      }))
      filterShader.setUniform('blur', 0.05)
      filter(filterShader)
    })
    bgs[key] = bg.get()
  }
  return bgs[key]
}
​
function draw() {
  orbitControl()
  if (showBG) {
    panorama(getBG())
  } else {
    background(0)
  }
  
  push()
  noStroke()
  imageLight(getBG())
  const c = color(material)
  fill(c)
  directionalLight(100, 100, 100, 0, 1, -0.1)
  ambientMaterial(c)
  ambientLight(50)
  specularMaterial(100)
  shininess(map(metal, 0, 100, 50, 200))
  metalness(metal)
  distort({ amount: wiggle })
  
  textFont(font)
  textSize(defaultSize)
  const lines = input.split('\n').map((line) => {
    const chars = line.split('')
    const widths = chars.map((char) => textWidth(char))
    const totalWidth = widths.reduce((acc, next) => acc + next, 0)
    const models = chars.map((char) => char === ' ' ? undefined : getCharModel(char))
    return { chars, widths, totalWidth, models }
  })
  const maxWidth = Math.max(0, ...lines.map(l => l.totalWidth))
  scale(15)
  translate(-maxWidth/2, -lines.length/2 * textLeading())
  for (const line of lines) {
    translate(0, textLeading())
    push()
    for (const [i, m] of line.models.entries()) {
      if (m) {
        model(m)
      }
      translate(line.widths[i], 0)
    }
    pop()
  }
  pop()
}