CS 106 Winter 2016

Lab 02: User interfaces

---

Question 1 Spirographs

A Spirograph is a classic drawing toy in which a gear holding a pen rotates inside or around a larger gear. You will be given code to draw Spirograph designs, to which you must add interactive user interface controls. Proceed as follows:

1. Download the provided zip file and unzip it. Open the Spirograph sketch.
2. Initially, the sketch doesn't do anything. Add a call to drawSpirograph() at the end of draw() and run the sketch to see a simple Spirograph pattern on the screen. Congratulations, that's the only change you need to make to draw().
3. Now add the basic skeleton of the ControlP5 library:
   • An import statement at the top of the sketch.
   • A global variable that holds an instance of the ControlP5 class.
   • A line in the setup() function that initializes the global variable to a new ControlP5 instance.
   The sample sketches for Module 03 demonstrate these lines of code.
4. Next, you're ready to add your first UI element. Create a slider to manipulate the global variable big_teeth:
   • Add code to setup() to build a slider (using the addSlider() method of your ControlP5 instance.)
   • Give the slider a reasonable size and position in the window (keeping in mind that you'll be adding a few additional UI elements).
   • Let the slider range over values from 20 to 120. You can also call the method setDecimalPrecision( 0 ) on the slider so that its display rounds to whole numbers.
   • Finally, create a controlEvent() hook at the bottom of the sketch, as demonstrated in class. When this first slider is manipulated, get the slider's value and store it in the global variable big_teeth. Once that's working, you should be able to move the slider and see the Spirograph drawing change interactively.
5. Repeat the process above with a second slider to control the variable little_teeth. Let that slider range over whole number values from 10 to 60.
6. Next, add a slider to control the variable l, which can range over real numbers between 0 and 1.
7. Next, add a slider to control the radius, which can range over real numbers between 50 and 250.
8. Finally, add a toggle switch that controls the boolean variable inside (see the ControlP5 addToggle() method). Clicking the toggle should flip the value of the global variable, flipping the Spirograph drawing over to the outside of the large gear (it'll get larger).
9. Make sure to arrange your interface in a reasonable way (widgets that don't overlap and don't get too much in the way of the drawing).

Save your work in a sketch called Spirograph. (If you start with the provided code, this should be automatic.)

Question 2 Revenge of Rush Hour

You played a bit of the logic game Rush Hour at the beginning of CS 105. Let's revisit that game in the context Direct Manipulation interfaces.

1. Open the RushHour sketch.
2. Have a quick look at the Car tab. You'll see a predefined Car class that stores information about a Car on the game board. You don't have to change anything in this class, but you should make sure you understand how to call a Car's methods.
3. Initially, the sketch doesn't draw the Cars. Add code at the bottom of the sketch's draw() function that calls the draw() method for every Car in the global array of Cars (use a for loop). When this is done, you'll be able to see the initial game board.
   
   
4. Add a global variable of type Car that will keep track of which Car the user is currently manipulating. Set the variable to null in setup(). While the sketch is running, make sure the variable is null if no Car is being manipulated.
5. Add a mousePressed() hook. Inside this function, ask each Car in turn whether the current mouse position is a hit. If the hit test succeeds for any Car, record that Car's identity in the global variable created above.
6. Create a mouseDragged() hook. If there's any Car currently being dragged, call its move() method, passing the amount by which the mouse has moved in x and y during this drag, as well as the complete array of Cars. The move() method constrains the Car to move horizontally or vertically, and to avoid collisions.
7. By this point, you should be able to move Cars around. But there's a small bug: if you drag a Car, then release the mouse, and then drag on the sketch's background, the same Car will still move. The problem is that your global variable still remembers that last moved Car. So add a mouseReleased() hook that resets the state of the global variable.

The steps above will give you a reasonably complete Rush Hour game. In the provided puzzle, you can actually try to play to move the red Car straight off the right end of the screen. But the interface is still a bit permissive—it's easy to cheat by moving random Cars off the board. That's OK for this lab, though you can try the enhancements below if you have time.

Enhancements

These enhancements are entirely optional, and may give you bonus marks if you do them. You may need to modify the Car class to achieve some of these.

• Right now you can slide Cars by continuous amounts, which isn't how the game works. Change the code so that when the user releases the mouse after dragging a Car, that Car snaps to the nearest grid position in the game.
• Change the code so that it's impossible to slide Cars outside the game grid (indicated by the white outline in the sketch).
• Modify the code above so that the red Car can leave the game grid. Give visual feedback when the user completes the level.

Submission

Remember to review the Code Style Guide and use Processing's built-in auto format tool. Then review the How To Submit document. At the top of all of your source files, be sure to include a comment with your name and student ID number. When you're ready, zip up the entire L02 folder containing the two sketches above (Spirograph and RushHour) into a single archive called L02.zip and upload that file to LEARN.