app.use(titleStore)

app.route('/*', mainView)

app.mount('div#app')

​

function mainView (state, emit) {

  return html`

    <div>

      <h1 style="color: ${state.color}">p5 with choo</h1>

      <input type="text" value="${state.message}" oninput=${updateText} />

      <input type="range" min="0" max="255" value="${state.r}" oninput=${updateSlider} />

    </div>

  `

​

  function updateText (e) {

    emit('updateText', e.target.value)

  }

  function updateSlider (e) {

    state.r = e.target.value

  }

}

​

function titleStore (state, emitter) {

  state.message = 'hi p5.js, from choo👋'

  state.color = "blue"

  state.r = 0;

  emitter.on('DOMContentLoaded', function () {

    emitter.on('updateText', function (newTitle) {

      state.message = newTitle

      emitter.emit('render')

    })

    // emitter.on('updateSlider', function (r) {

    //   state.r = r

    // })

  })

}

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  const r = app.state.r

  background(parseInt(r));

  fill(255 - parseInt(r));

  textSize(25)

  textAlign(CENTER, CENTER)

  translate(width / 2, (millis() * 0.1) % height)

  rotate(sin(millis()*0.004)*0.2)

  text(app.state.message, 0, 0);

}

​

function mousePressed() {

  app.state.color = app.state.color === "red" ? "blue" : "red"

  app.emitter.emit('render')

}