let font
let graphic

const waveInput = document.querySelector("input.wave-speed")
const waveX = document.querySelector("input.wave-x")
const waveY = document.querySelector("input.wave-y")
const line1Input = document.querySelector("input.line1")
const line2Input = document.querySelector("input.line2")


// function preload() {
//   font = loadFont();
//   push(); // text just drawn once
  // textFont("Maven Pro");
// }

function setup(params) {
  createCanvas(1200, 600)

  createCopy()
}

function draw() {
  background("#FFCA32")

  const tileSize = 10

  for(let x = 0; x < 120; x++) {
    for(let y = 0; y < 60; y++) {

      const waveSpeed = waveInput.value

      const distortionX = sin(frameCount * waveSpeed + x * 0.5 + y * 0.1) * waveX.value
      const distortionY = sin(frameCount * waveSpeed + x * 0.5 + y * 1) * waveY.value

      // source
      const sx = x * tileSize + distortionX
      const sy = y * tileSize + distortionY
      const sw = tileSize
      const sh = tileSize

      // destination
      const dx = x * tileSize
      const dy = y * tileSize
      const dw = tileSize
      const dh = tileSize

      image(graphic, dx, dy, dw, dh, sx, sy, sw, sh)
    }
  }
}

function createCopy() {
  graphic = createGraphics(1000, 500)

  const text = line1Input.value + "\n" + line2Input.value

  graphic.fill("#0007C2")
  graphic.textSize(200)
  graphic.textAlign(CENTER, CENTER)
  push(); // text just drawn once
  graphic.textFont('Space Grotesk')
  graphic.textLeading(150)
  graphic.text(text, width/2, height/2)
}

line1Input.addEventListener('input', ()=>createCopy())
line2Input.addEventListener('input', ()=>createCopy())