"A Walk Through Town", by Emily Musgrove, Ursinus CS 174, Fall 2022
The purpose of this intro to CS assignment is to give students practice with modularity and method design in a fun application: designing virtual 3D city environments from scratch. Students are provided with various overloaded methods for drawing primitive 3D shapes in different colors and proportions. The shapes include cylinder, ellipsoids, and rectangular prisms. Students put these shapes together in methods that draw different city objects, including:
In the process of making these methods, students gain practice reading method documentation of the primitive shapes, as well as writing their own method documentation for the method parameters specifying positions and orientations of each city object.
Once the individual city objects are completed, students go one level of abstraction higher and create a method to make a city block consisting of all of the objects together. Finally, they make a method to call the city block in a loop to create an entire city consisting of multiple city blocks.
Students are graded on the accuracy of the city shapes, as well as style and quality of their method documentation. Students are expected to properly modularize methods in a hierarchy with individual methods for each city object, a method for a city block, and a separate method for the entire city. If students set their code up correctly, they only have to pass an x and z offset parameter to the city block method to move all of the objects in the block together. In this way, the assignment serves as a gentle introduction to "scene graphs" and relative coordinate systems in computer graphics, couched in the framework of method design, modularity, and re-usability (an ulterior motive is to get intro students excited enough to continue on in the curriculum to reach our capstone computer graphics course).
Once the students satisfied the primary objective of making a basic city, they are required to make a creative submission to submit to the class "art contest." The art contest is actually the primary reason I am submitting this assignment to SIGCSE, as I have been absolutely blown away by what the students have done on the art contests. I've run this assignment 4 semesters now, and ever time students went miles beyond what I would have expected. Therefore, I think I accidentally stumbled into a well of student creativity, and I want to share this with other instructors to help students get excited about CS at the intro level.
Here are a few of the many highlights, which span many hilarious and obviously painstaking efforts on the part of my students, who made me very proud:
NOTE: One of the reviewers had a very nice idea about having each student make their own unique city block that can be positioned up to a global translation, and then putting them all together into one big city as a class. This way, there's a collaborative effort in addition to a competitive effort. I will probably add this on the next iteration of the assignment!
One of the biggest challenges designing this assignment was to get a cross-platform 3D system to work with minimal hassle. During the first iteration of the assignment, I ran it in Netbeans + Java, and the primitive methods wrote the student's scene to a JSON file that could be loaded in my home grown graphics engine called "ggslac" (Geometry and Graphics Library for Small Liberal Arts Colleges) that I'd been using to teach a capstone course on computer graphics in our department. However, I quickly discovered that students liked to go all out on the art contests, and they quickly brought my dinky little education engine to a halt. Therefore, I upgraded the code this year to instead wrap around three.js, which has better support for textured meshes, as well as adaptive space partitioning for real time rendering of the large scenes my students were designing. The code now outputs an HTML file which includes the appropriate three.js files and which can be loaded directly into a browser.
| Summary | This assignment has students design 3D virtual cities from the "ground up" in a modular way by creating methods that assemble primitive shapes such as cylinders, ellipsoids, and rectangular prisms, into more complex city objects such as stop lights and fire hydrants, which they eventually assemble into an entire city block, and then into a city. The students' code outputs an HTML file that uses three.js to render their cities in the browser in a cross-platform way, making software configuration straightforward. |
| Audience | I have run this assignment 4 times as the first assignment in a second semester CS course to get students warmed back up on methods and conditional statements, as well as some optional practice with loops (though students can get around not using loops). I believe it is also appropriate for the middle/end part of an intro to CS course. The assignment has energized students from a wide variety of backgrounds, so I believe it's a great topic to engage students both inside and out of the major |
| Difficulty |
This was on the easy to moderate end for most students. Even if students struggled with some individual city objects (the sedan with the rotated cylinders was usually the most challenging), they were able to make incremental progress on other city objects in parallel, so they could keep moving without getting completely stuck. Students would also often chip away at the art contest as they were going along. Sometimes I had to take a little bit of extra time to explain the 3D coordinate system in class, but I was pleasantly surprised to discover that most students got that on their own. |
| Strengths |
Students were able to make incremental progress on individual city objects, so they didn't get too stuck. This also seems to have substantially tapped into student creativity with the art contests. Every semester I'd include winners from the previous semester's art contest as a teaser to motivate students, which seems to have kept the energy and creative output going. The assignment also provides an opportunity to hone in on good coding style and method documentation, as well as gently introducing students to external libraries and having them read others' method documentation to understand the point of it all. Finally, the assignment appears to have mass appeal. Students from a wide variety of backgrounds were able to pursue their creative interests and have a lot of fun with the art contest. |
| Weaknesses |
Students sometimes noted that they had to do some trial and error to get the city objects to look the way they wanted them to. Students also have to understand a clear separation between the code they're running and the code that's being provided; compared to other assignments in the course, students write less code from scratch themselves, but they at least still have to define their new methods for the city objects from scratch.
Beyond that, in the C++ version of the assignment, I was trying to teach makefiles concurrently with a method review as students were transitioning from Java in their intro course to C++ in this course. However, I often found that students were confused on the makefiles at that stage of the course, and sometimes simply edited the Finally, the primitive methods were encapsulated in a Scene3D class, and I hadn't gotten to classes yet, so I always had to wave my hands a little bit about passing that along by reference. But this never seemed to cause too much trouble, and students were able to focus on methods. |
| Dependencies / Variants |
I've provided two different versions of the assignment: one in C++ and one in Java. The C++ version requires standard GNU tools such as C++ and make, but there are no other dependencies. To make things easier for students, I had them use Visual Studio Code as an IDE, and I had them install a plugin for a local web server that automatically refreshed every time their programs overwrote their HTML files. This improved earlier versions of the assignment where students had to manually import JSON files into the scene viewer web page every time their code regenerated them. Click here for more details on the VSCode and live server setup.
In both cases, the web pages should be run in a local web server to display properly and to avoid cross-origin requests when loading meshes. The easiest way to do this, by far, is to use the live server plugin in VSCode, as this will automatically refresh the page every time students run their code.
Alternatively, one can run a local web server in this directory with, for instance NOTE: In response to reviewer comments about friction from the dependency on VSCode or a local web server, I'm hosting a page at this link as a backup option where one can upload their HTML file and the scene will be displayed in that page. |
| Teaching Notes |
In the C++ version, it's helpful to have a mini assignment where students configure their software environment before starting this assignment, since compiling code in C++ can be tricky for beginners. I used to have detailed instructions on how to get WSL setup on Windows, and to get the proper libraries setup on Mac and Linux. But recently, I've switched to using an Ubuntu server at our college with a uniform software setup that students can ssh into using Visual Studio Code, and I've found this works quite nicely and requires less tech support. Beyond that, it's also helpful for students to have had a week's experience with navigating folders/files in the terminal before starting this assignment, since they have to manage a few files |