See more from Coding and the Arts
This project from chapter 2 of Coding and the Arts asks students to apply the visual arts concepts of depth and perspective to a program.
Demo Project
This activity starts with a short demo. Here is the program used in the book, but feel free to make it your own (or even use prior student work the second time around).
See inside
Exemplar
This example demonstrates both a reasonably strong use of the y location to control depth and a common issue that you’re likely to run into.
See inside
Note that the spacing of the two rows of houses feels off, even though the size effectively communicates depth. This issue here is that items spaced further back should have less vertical space between them than ones closer. In other words, more realistic spacing would require the spacing to change exponentially (though only slightly so).
Whether you choose to worry about this really depends on where your students’ math skills are at. Changing this program from linear to exponential growth could be a good challenge for students who have seen or are learning about exponential functions in math, but it could also be a frustrating hurdle for students who are less confident in their math skills. One middle ground is to avoid patterned layouts altogether - who’s to say what the right spacing should be for a field of flowers or ocean full of boats?
Parallax Animation
For a more advanced take on the concept of depth you can add parallax animation in to the mix. Just as size appears to change with distance, so too does relative motion. Think about looking out the side window of a moving car - nearby objects seem to be moving incredibly quickly while further away objects like trees or mountains appear to be moving much more slowly. Try moving your mouse over the example below to see it in action.
See inside