Nomad - OpenProcessing

mySketch.js
xxxxxxxxxx
 
let tagline = ["c", "o", "d", "e", "/",
  "d", "e", "c", "o", "l", "o", "n", "i", "z", "e", "d"
]
let button, inp
let widther, heighter, waver, glitch, maxIndex, maxim
let cx = [],
  cy = [],
  cratio = []
​
function preload() {
  font1 = loadFont("TWKLausanne-900.otf")
  font2 = loadFont("Tomato Grotesk Black.otf")
  font3 = loadFont("Inter-Black.otf")
  
}
​
function setup() {
  createCanvas(windowWidth, windowHeight, SVG);
  textSize(50)
  rectMode(CENTER)
  frameRate(1)
  maxim = 0
  maxIndex = 0
​
  button = createButton('click me to save');
  button.position(10, 10);
  buttonStyle()
  button.mousePressed(saveC);
​
  inp = createInput('');
  inp.position(10, 60);
  inp.style('width', '120px')
  inp.input(myInputEvent);
}
​
function myInputEvent() {
  if (inp.value()) {
    tagline = inp.value().replaceAll(" ", "/").split("")
  }
}
​
function saveC() {
  save('sticker.svg')
}
​
function draw() {
  background(0);
  cx = []
  cy = []
  cratio = []
​
  push()
  translate(width / 8, height / 3)
  widther = 50
  heighter = 100
  waver = random(100)
  glitch = random(0.3, 0.8)
  for (let i = 0; i < tagline.length; i++) {
    generateXYC(i)
  }
  for (let i = 0; i < tagline.length; i++) {
    cuteCircle(tagline[i], i)
  }
  for (let i = 0; i < tagline.length; i++) {
    cuteText(tagline[i], i)
  }
​
  maxim = cx[maxIndex-1]
  fill(255)
  textSize(10)
  text("the roaming bookstore",
    maxim + random(50, 150), 50)
  pop()
}
​
function generateXYC(index) {
  let ratio = random(1, 1.5)
​
  if (tagline[index] === "/") {
    maxIndex = index
    widther -= random(50, 100)
    heighter += 80
  }
  cx.push(widther)
  cy.push(heighter + sin(index / 2 + waver) * 30)
  cratio.push(ratio)
​
  widther += textWidth(tagline[index]) * ratio
}
​
function cuteCircle(texter, index) {
  push()
  noStroke()
  fill(255)
  translate(cx[index], cy[index])
  rect(20, -20, 60 * cratio[index], 60, random(5, 25))
  pop()
}
​
function cuteText(texter, index) {
  push()
  fill(0)
  stroke(0)
  strokeWeight(1)
  if (random(1) < glitch) {
    let decider = random(1)
    if (decider < 0.25) {
      textFont(font1)
    } else if (decider < 0.5) {
      textFont(font2)
    } else if (decider < 0.75) {
      textFont(font3)
    } else {
      textFont(font4)
    }
  } else {
    textFont('Helvetica')
  }
  translate(cx[index], cy[index])
  textAlign(LEFT)
  scale(cratio[index], 1)
  shearX(random(-PI / 20, PI / 20));
  text(texter, 0, 0)
  pop()
}
​
function buttonStyle() {
  button.style('background', 'black');
  button.style('color', 'white');
  button.style('padding', '10px');
  button.style('border', '2px solid #fff');
  button.style('border-radius', '20px');
  button.style('border-radius', '20px');
  button.style('cursor', 'pointer');
}