Main logic for initializing the epicycle mechanism

epicycle-initialization.js

const background = document.querySelector('#background')
const canv = document.querySelector('#canvas')
const bgCtx = background.getContext('2d')

const canvMidX = canv.width * 0.5
const canvMidY = canv.height * 0.5

class Vector2D { /* ... */ }
const randomInRange = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)

let vectorCount = 4 // default number of vectors
let initState = []
let vectors = []

const handleInit = (arr) => {
  // reset background canvas and initial state
  bgCtx.clearRect(0, 0, background.width, background.height)
  initState = []
  
  // overwrite the vectorCount with the array lenght if provided
  vectorCount = arr ? arr.length : 
  
  // initialize data with the provided array or an empty array with lenght === vectorCount
  const data = arr || [...Array(vectorCount)]
  
  // populate the vectors array with Vector2D instances
  vectors = data.map((val, idx) => {
    const { sx, sy, size, angle, color, isPencil, rotationStep } = val || {} 
    const vector = new Vector2D(
      sx || canvMidX,
      sy || canvMidY,
      size || randomInRange(10, 150),
      angle || undefined // randomInRange(0, 360)
    )
    
    vector.color = color || `#${Math.floor(Math.random() * (256 ** 3)).toString(16)}`
    vector.isPencil = isPencil || idx === vectorCount - 1
    vector.rotationStep = rotationStep !== undefined ? rotationStep : randomInRange(-10, 10)

    // store a clone of each vectors initial state
    initState.push({ ...vector })
    
    return vector
  })
}