Tutorial: Simple Sprite Frame Animation

code.js

let anim = {}

litecanvas()

function init() {
  // each frame of the animation
  // for this example, lets create 3 circles
  anim.frames = [
    createFrame(3),
    createFrame(4),
    createFrame(5)
  ]

  // current frame index
  anim.curFrame = 0

  // 0.5 seconds for each frame
  anim.frameTime = 0.5

  // next frame timer
  anim.curTime = anim.frameTime
}

// this function controls the game logic
function update(dt) {
  anim.curTime -= dt
  if (anim.curTime <= 0) {
    anim.curFrame = (anim.curFrame + 1) % anim.frames.length;
    anim.curTime = anim.frameTime
  }
}

// this function render the game scene
function draw() {
  cls(0)

  // draw the current frame of the animation
  image(0, 0, anim.frames[anim.curFrame])
}

function createFrame(color) {
  return paint(128,128,() => {
    circfill(64,64,64,color)
  })
}

Demo