Assignment Overview
In this assignment, you will create a buggy (car) that the user can directly manipulate. Specifically, they will be able to:
- Position it on the screen by selecting it and dragging it with a pointer,
- Rotate it about its center by dragging the mouse pointer,
- Make it wider or longer by interactively manipulating control points on the car,
- Make the axles longer by interactively pulling the tires out, and
- Turn the car’s front wheels by dragging them with the mouse.
You will render the car using an overhead view:
You do not need to make the car “drive” on its own, though you may certainly provide this functionality, if you wish.
For this assignment, you cannot use any third-party HTML, JavaScript, CSS, or code-generation utilities, with the exception of CSS preprocessors and the code provided. You must create all HTML, JavaScript, and CSS on your own.
Buggui!: Interaction Design
Canvas Size
For this assignment, you will use an HTML 5 canvas with a size of 800×600 pixels.
Moving, Resizing, and Rotating the Car
The user can directly interact with the car in a number of ways. At the most basic level, they can select the car with the pointer and interactively drag it around the screen. They can also rotate the car by clicking and dragging on the front or back part of the car (but not the bumper). The car should rotate about its center.
The user can select the front or rear bumper to change the length of the car. However, they may only adjust the length within the limits specified below. Similarly, users can click on the left or right side of the car to make it wider or narrower (within limits).
Resizing the car should uniformly scale the car in the given dimension. For example, if they select the front bumper and extend it, it should also extend the back bumper. Similarly, resizing the left side of the car should simultaneously resize the right side of the car. In essence, you can think of the resizing operation as scaling the car about its center, along one dimension or the other (i.e., its length or its width).
You should provide clear affordances for resizing and rotating the car. That is, the car’s design or the interface should clearly communicate to the user that they can manipulate the car’s length and width, or that they can rotate the car. This design should be elegant and intuitive. Test with others to ensure you have a good design.
Interacting with the Tires and Axles
Users can directly select any of the four tires with a pointer. When they select a tire, they can pull them in and out from the car, effectively making the axles longer or shorter. When pulling a tire out, all four tires should simultaneously respond.
Finally, when the user selects either front tire, they can swivel them left or right, as if the steering wheel was being turned.
