Page 8: Exercise 2: Graphics Park

Over the next few weeks, we’ll build Graphics Town. But to start, we’ll begin with something less ambitious: a park. We’ll add some “rides” to the park to make it more like an Amusement Park than just a playground.

You can see the beginnings of a park below ( 07-08-01.html). The code is located in three files:

• 07-08-01.js makes the park: it makes the world and places the playground equipment into it;
• 07-08-simplepark.js defines a simple example of an animated object;
• 07-08-parkobjects.js defines the more complex animated objects.

You should look over all the files, you’ll have to change both 07-08-01.js and 07-08-parkobjects.js.

Here are the required things to do. We recommend doing them in order to learn how the code works:

1. Look at the simplest example (the bouncing cube) in 07-08-simplepark.js, make sure you understand it, and then take it out of the main setup in 07-08-01.js since it is distracting and really has no place in a park.

2. The file 07-08-parkobjects.js has a bunch of playground toys defined in it. Some of these are already placed in the world. Make sure you understand these examples as well. Also, you should place some new ones in the world.

   Right now, there are two “roundabouts” (a playground toy that spins around - sometimes these are called “orbiters” or “spinners” or “spinning wheel” - see Roundabout). There is a simple one and a fancy one. These are good examples to understand.

   The same file also defines some other objects (a swing and a carousel). Place at least one more swing set and one carousel in the park. This will give you a chance to see how we place objects in the world using the framework. Note that this does not require you to change the objects (class definitions), but it does require you to edit the world setup function.

   When you add objects, you will need to make sure that appropriate import statements are included in the 07-08-01.js file. You should also make sure that you position the different playground toys so they have some space between them.

3. We have started to make a “Carousel” or “Merry-go-Round.” While the Wikipedia page says these can be like the “roundabout” above, what we really intended was an amusement park “merry go round” where horses (or other things you sit on) go up and down while the ride spins. There was a famous one at Ella's Deli on the east side, until it closed. We’d like you to expand the spinning thing we started to be more like one of these. You need to place “horses” on the poles. You can use simple geometry for the horses (a cube or other primitive), but there needs to be one on each pole, and it needs to go up and down as the merry-go-round spins. Note: the pole can go right through the object. This will require you to edit the constructor and stepWorld function for the Carousel class.

4. Make your own object and put it into the scene. Preferably something that is appropriate for a park. It can be simple, but we want to see that you can create a new class of object that moves. Maybe a bird flying in the sky, or a tree that waves in the wind, or a child riding a bicycle on a path.

These are the three simple changes (remove the bouncing cube, add another swing, and animate the merry-go-round) and one less-simple change (new object type). But in the process, you’ll get to see the framework code and get some practice making and animating a hierarchical object using THREE.JS (and our framework).

For advanced points, you can do better than the minimums. Note that each of these can only get you a few points - doing the basic stuff is far more important.

1. Make the merry-go-round have nice geometry (like horses and other animals, or something else). You can add more poles if you need to.

2. Make more amusement park rides that have hierarchical motion. Things like tilt-a-whirls, spinning teacups, or (well, I don’t know the names for these things). See the “flat rides” on Trip Savvy for names, or a Google image search for “spinning amusement park ride” turns up lots of things. It is more important that the rides have hierarchical motion than they have detailed geometry. Your ride must be animated and have hierarchical motion.

   This extra ride is in addition to what you had to make for the basic points (the object that you made for 4 above cannot count for both basic and advanced points). You may make up to two rides.

Everything you do for this exercise should be in the files 07-08-01.js and 07-08-parkobjects.js. Make sure that they show up properly in the view below on the page!

As with the quadcopter exercise, you may add object files subject to the same rules: Explain where they come from in the text file below, use legal ones, avoid huge ones, avoid features not discussed in class yet.

Please see the framework code ground rules on Page  7  (The CS559 Framework Code (GraphicsTown)).

The park ( 07-08-01.html):

You must list the features you have implemented in the text file 07-08-01.txt:

After you do this exercise, go on to Page  9  (Exercise 3: Construction Site).