Skip to content

Instantly share code, notes, and snippets.

@techbelly
Last active January 28, 2019 21:11
Show Gist options
  • Save techbelly/a6f2c1e66e4521b0378ea114e15c46b5 to your computer and use it in GitHub Desktop.
Save techbelly/a6f2c1e66e4521b0378ea114e15c46b5 to your computer and use it in GitHub Desktop.
SCRIPT-8
// title: Swirly squares
initialState = {
totalElapsed: 0, // total time passed
rotations: [], // each rectangle's individual rotation
}
// given a number of milliseconds and square index,
// returns the square's rotation
const getRotation = (milliseconds, i) => {
return Math.sin(milliseconds / 400) * 16 * (i + 1)
}
update = (state, input, elapsed) => {
state.totalElapsed += elapsed
state.rotations = range(8).map(i => getRotation(state.totalElapsed, i))
}
draw = (state) => {
clear()
const { angle } = state
range(8).forEach(i => {
const halfSide = 8 * i / 2
const topLeft = [64 - halfSide, 64 - halfSide]
const topRight = [64 + halfSide, 64 - halfSide]
const bottomRight = [64 + halfSide, 64 + halfSide]
const bottomLeft = [64 - halfSide, 64 + halfSide]
const color = i % 7
// 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)
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment