let r = 0;

​

const Hello = {

  view: function () {

    return m("main", [

      m("h1", { class: "title" }, "Mithril example!"),

      // m("p", message),

      m(

        "input[type=text]",

        {

          oninput: function (e) {message = e.target.value},

          value: message

        },

      ),

      m(

        "input[type=range]",

        {

          oninput: function (e) {r = e.target.value},

          value: r,

          min: 0,

          max: 255

        },

      ),

    ]);

  },

};

​

const root = document.querySelector("div");

m.mount(root, Hello);

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  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(message, 0, 0);

}

​