Skip to content

Instantly share code, notes, and snippets.

@xaviervia
Created September 24, 2020 11:24
Show Gist options
  • Save xaviervia/cb2a18276ca9f48d4f0ffd1cf4be914e to your computer and use it in GitHub Desktop.
Save xaviervia/cb2a18276ca9f48d4f0ffd1cf4be914e to your computer and use it in GitHub Desktop.
lights
<script src="./script.js"></script>
<!-- <script src="./test.js" type="module"></script> -->
<style> body { margin: 0 } </style>
<canvas />
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,
}
})
})
console.log('it works!')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment