lights

index.html

<script src="./script.js"></script>
<!-- <script src="./test.js" type="module"></script> -->
<style> body { margin: 0 } </style>
<canvas />

script.js

const { ceil, floor } = Math

const size = 20
const gutter = 5
// const size = 60
// const gutter = 15
// const size = 200
// const gutter = 50
// const size = 5
// const gutter = 50
const aberrationFactor = 0.15

const getSquareDrawerFor = (context2d) => (x, y, aberrationX, aberrationY) => {
  const path1 = new Path2D()
  path1.rect(x - aberrationX, y - aberrationY, size,size)
  const path2 = new Path2D()
  path2.rect(x, y, size, size)
  const path3 = new Path2D()
  path3.rect(x + aberrationX, y + aberrationY, size,size)

  context2d.fillStyle = '#ff0000'
  context2d.fill(path1)

  context2d.fillStyle = '#00ff00'
  context2d.fill(path2)
  
  context2d.fillStyle = '#0000ff'
  context2d.fill(path3)
}

const getLattice = (width, height) => {
  const howManyInX = ceil(width / (size + gutter))
  const howManyInY = ceil(height / (size + gutter))
  const lattice = new Int16Array(howManyInX * howManyInY * 2)
  
  let i = 0
  for (; i < howManyInY; i ++) {
    let j = 0
    for (; j < howManyInX; j ++) {
      // const index = (j + (i * j)) * 2 // (beautiful)
      const index = (j + (i * howManyInX)) * 2 // fixed
      lattice[index] = j
      lattice[index + 1] = i
    }
  }

  return lattice
}

const redraw = ({
  canvas,
  cursorX,
  cursorY,
  width,
  height,
}) => {
  // add subscriptions later
  canvas.setAttribute('width', width)
  canvas.setAttribute('height', height)
  canvas.style.backgroundColor = 'black'

  const context2d = canvas.getContext('2d')

  context2d.globalCompositeOperation = 'lighter'

  const squareDrawer = getSquareDrawerFor(context2d)

  const lattice = getLattice(width, height)
  
  let iterating = 0
  for (; iterating < lattice.length; iterating += 2) {
    const x = lattice[iterating] * (size + gutter)
    const y = lattice[iterating + 1] * (size + gutter)
    const centerX = x + size / 2
    const centerY = y + size / 2
    squareDrawer(
      x,
      y,
      (cursorX - centerX) / (size + gutter) * aberrationFactor,
      (cursorY - centerY) / (size + gutter) * aberrationFactor
    )
  }
}

const state = {
  current: {}
}

const renderLoop = (callback, loop = true) => {
  callback(state.current)

  loop && requestAnimationFrame(() => renderLoop(callback))
}

window.addEventListener('DOMContentLoaded', () => {
  state.current = {
    canvas: document.querySelector('canvas'),
    width: window.innerWidth,
    height: window.innerHeight,
    cursorX: 500,
    cursorY: 300,
  }

  renderLoop(redraw)

  window.addEventListener('mousemove', (event) => {
    state.current = {
      ...state.current,
      cursorX: event.pageX,
      cursorY: event.pageY,
    }
  })
})

test.js

console.log('it works!')