We have learned Dave Whyte’s wave motion in day 16. Today, I’d like to feature another one category of his creations, the illusion of swapping foreground and background. Here are a few of his work:
Hope they can give you some inspiration about today’s task, and do not forget to check out more of Dave’s work.
Today we are having an open task - implement the illusion, it’s not necessary to reimplement the exact same as Dave did (but feel free to try!). Let’s see if you can make it with different shapes and ideas.
Here is my port in p5.js implementing a very fundamental one:
The basic idea is to have two animations swapping with each other, one for rotating white squares and one for the black, each of the animation should finish a complete loop back to what it starts. On the moment of switching, the black background becomes squares while the white squares become the background, vice versa.
const ms = millis() // milliseconds
const mode = Math.floor(ms / 2000) % 2
if (mode == 0) {
// animate white squares, finish a loop in 2000ms
} else {
// animate black squares
}const ms = millis() // milliseconds
const mode = Math.floor(ms / 2000) % 2
if (mode == 0) {
// animate white squares, finish a loop in 2000ms
} else {
// animate black squares
}When you are all done, post your work on Twitter with the hashtag #codecember and #day18. Remember to include a link to the source code, so others can learn from your creation. We look forward to seeing your sketch!