epicycle-drawing.js

/* ... */

class Vector2D { /* ... */ }

let showTracer = true
let vectorCount = 4
let initState = []
let vectors = []

const handleInit = (arr) => { /* ... */ }

const step = () => {
  ctx.clearRect(0, 0, canv.width, canv.height)
  bgCtx.fillStyle = 'rgba(255, 255, 255, 0.01)' // fade out the drawing
  bgCtx.fillRect(0, 0, background.width, background.height)
  
  for (let i = 0; i < vectorCount; i++) {
    const prevVector = vectors[i - 1]
    const currentVector = vectors[i]
    
    // set the current vector start position
    // to the previous vector end position
    if (prevVector) {
      currentVector.sx = prevVector.ex
      currentVector.sy = prevVector.ey
    }
    
    currentVector.rotation += currentVector.rotationStep
    
    // render every vector in the mechanism
    if (showTracer) {
      currentVector.render(ctx)
    }
    
    // trace out all of the vectors marked as pencils
    if (currentVector.isPencil) {
      const { lastX, lastY, color } = currentVector
      bgCtx.restore()
      bgCtx.beginPath()
      bgCtx.strokeStyle = color
      bgCtx.lineWidth = 3
      bgCtx.lineJoin = 'round'
      bgCtx.moveTo(lastX, lastY)
      bgCtx.lineTo(currentVector.ex, currentVector.ey)
      bgCtx.closePath()
      bgCtx.stroke()
      currentVector.lastX = currentVector.ex
      currentVector.lastY = currentVector.ey 
    }
  }
  
  requestAnimationFrame(step)
}
requestAnimationFrame(step)