Drawing with Code

How to draw programmatically

Simple demonstration how you can simulate pointer events. Stroke starts with pointerStart event at given coordinates. Stroke is updated on every pointerMove and it goes on until poointerEnd method is called.

// Modes
// 0 = paint
// 1 = pan
// 2 = move
const mode = 0

tatami.api.setBrushSize(30)
tatami.api.setColor('#cc0000')

const width = window.innerWidth
const height = window.innerHeight

let drawing = true
// Start stroke at center
tatami.api.pointerStart(mode, width/2, height/2)

// Our drawing function gets repeated in a loop (i = frame number)
function draw () {
    let x = Math.sin(-i)
    let y = Math.cos(i)
    // Try changing some values here and see what happens
    tatami.api.pointerMove(mode, width/2 + x * 2 * i, height/2 + y * 2 * i)
     if (drawing) {
        requestAnimationFrame(draw)
     }
    i += 0.1 // modify this for speed
}

// Let's start
requestAnimationFrame(draw)

// Stop drawing after 10 seconds
setTimeout(() => {
    tatami.api.pointerEnd()
    drawing = false
}, 10*1000)