Skip to content

Instantly share code, notes, and snippets.

@badvision
Created January 30, 2019 21:58
Show Gist options
  • Save badvision/b7c07321d2f9a93e732acfd0086a5653 to your computer and use it in GitHub Desktop.
Save badvision/b7c07321d2f9a93e732acfd0086a5653 to your computer and use it in GitHub Desktop.
SCRIPT-8
// title: Swirly squares with color cycle
initialState = {
totalElapsed: 0, // total time passed
rotations: [], // each rectangle's individual rotation
color: 0
}
// given a number of milliseconds and square index,
// returns the square's rotation
const getRotation = (milliseconds, i) => {
return Math.sin(milliseconds / 500) * 16 * (i + 1)
}
update = (state, input, elapsed) => {
state.totalElapsed += elapsed
state.rotations = range(8).map(i => getRotation(state.totalElapsed, i))
state.color = (state.color + 1) % 8
}
draw = (state) => {
clear()
const { angle } = state
var color = state.color
range(8).forEach(i => {
const halfSide = 3 * i
const topLeft = [64 - halfSide, 64 - halfSide]
const topRight = [64 + halfSide, 64 - halfSide]
const bottomRight = [64 + halfSide, 64 + halfSide]
const bottomLeft = [64 - halfSide, 64 + halfSide]
// add 10 degrees to each successive square.
// e.g. the first square gets 0 new degrees, the second one gets 10,
// the third one gets 20, etc.
const customAngle = state.rotations[i]
polyStroke([topLeft, topRight, bottomRight, bottomLeft], customAngle, (color + i) % 8)
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment