SCRIPT-8

README.md

This is a SCRIPT-8 cassette. Click here to boot it.

code.js

// title: sine easing

const reproject = p => [p[0], 127 - p[1]]

const minX = 32
const maxX = 96
const minY = 13
const maxY = 110

initialState = {
  x: minX,
  dx: 1
}

update = state => {
  state.x += state.dx
  if (state.x > maxX || state.x < minX) {
    state.dx *= -1
  }
}

const ease = x => {
  const spanX = maxX - minX
  const spanY = maxY - minY
  return Math.cos((spanX-minX)*Math.PI/spanX + x * Math.PI/spanX) * spanY/2 + spanY/2 + minY
}

draw = state => {
  clear()
  
  // draw axes
  line(...reproject([0, minY]), ...reproject([0, maxY]), 6)
  line(...reproject([minX, 0]), ...reproject([maxX, 0]), 6)

  range(minX, maxX, 1).forEach(i => {
    circFill(...reproject([i, ease(i)]), 1, 4)
  })

  // draw balls
  circFill(...reproject([state.x, 0]), 2, 0)
  circFill(...reproject([0, ease(state.x)]), 2, 0)
  circFill(...reproject([state.x, ease(state.x)]), 2, 4)
  
}