Composition Example

const state = {
  crystalSize: CRYSTAL_SIZE,
  sides: SIDES ,
  stepsOut: 8,
  thinStroke: 1,
  thickStroke: 3
}

const setState = (state) => {
  state.numShapes = state.sides
  state.angle =  TWO_PI / state.numShapes
  state.singleStep = (state.crystalSize / 2) / state.stepsOut
  state.layerColor = getRandomFromPalette(PALETTE)
  return state
}

const circles = (state) => {
  state.shapeSize = (state.crystalSize / 2) * 0.93,
  state.position = (state.crystalSize / 2) - (state.shapeSize / 2)

  return ({
    render: () => {
      stroke(state.layerColor)
      strokeWeight(state.thinStroke)
      noFill()
      push()
      // translate(width / 2, height / 2)  // **
      for (let i = 0; i <= state.numShapes; i++) {
        ellipse(state.position, 0, state.shapeSize, state.shapeSize)
        rotate(state.angle)
      }
      pop()
    }
  })
}
  
circles(setState(state)).render()