CS349 W19
Information
Schedule
Resources
A5: Direct Manipulation & Scene Graphs (Java/Android) — Ragdoll
Due Fri Apr 5 at 5:00 PM
Synopsis
Your job will be to create a “paper doll” like the one shown, and then allow it to be manipulated by direct manipulation — moved about the screen, and arms, legs and head to be repositioned (within limits). Click here for a demo of a previous version of this assignment (it was a desktop assignment, so it’s not identical, but it illustrates the movement that we expect).

Learning Goals
• Graphics transformations and scene graphs
• Direct manipulation with touch events
Requirements
Layout Window
Your application should be a single activity, showing a paper doll in its default orientation (defined by you). There should be adequate space around the paper doll to demonstrate moving and manipulating it.
Your application should also have a menu or toolbar that provides the following functionality:
• Reset: return the doll to its starting size, and position.
• About: Display a popup with an application name, your name and student number.
Paper Doll
You should display a paper doll, similar to what is shown in the diagram. It should, minimally, consist of head, torso, upper and lower arm, hands, upper and lower leg, and feet. It can be as simple as what it shown here, but there will be additional marks for creativity!
Model the paper doll as a scene graph. Each node in the scene graph should define an affine transform so it draws itself in the correct location relative to its parent’s coordinate system. This transform will be passed down to children so they always draw themselves relative to their parent’s coordinate system. For example, if you want to draw the torso in a particular location, you will define a translation transform, set the Graphics2D to that transform, then draw the torso at (0,0). Since you set the Graphics2D transform to a translation matrix, the torso will not actually draw at (0,0) on the screen, but at the location defined by the translation matrix. Furthermore, the head will inherit the torso’s coordinate system and simply draw relative to the torso and appear in the expected location relative to the torso.
Direct Manipulation
The paper doll should be directly manipulable: You should be able to touch on any body part and manipulate it using the following guidelines:
• Touching and dragging a body part will translate or rotate as appropriate (see below).
• Pinch or spread using two fingers will scale a body part, using constraints below.
• Rotating a body part is done by touching a body part and moving your finger relative to the pivot point.
• You should be able to rotate and scale at the same time. The body part should not move until your finger is moved, and it should transition smoothly from its current scale and rotation to the new scale and rotation: it should not “pop” into some default value when it’s clicked.
• This is a direct-manipulation interface, so you should be interacting with body parts directly. This implies that when you touch and drag a body part, it should stay positioned under your finger as it moves.
The following rules and constraints apply to these manipulations:
• The torso is the only body part that can be translated.
◦ Touching and dragging the torso should move the entire paper doll. The torso cannot be rotated.
• All other body parts can be rotated around their contact point.
◦ The head can tilt left and right relative to the torso, but should not deviate more than 50 degrees in either direction from the primary axis defined by the torso. You may define where the rotation point is for the head (i.e. at the torso, or some other location, such as in the head).
◦ The upper arm is attached to the torso and may rotate an entire 360 degrees about its point of attachment to the torso. When rotating the upper arm, the lower arm should retain its same relative orientation to the upper arm. For example, if the lower arm is at a 30 degree angle relative to the upper arm, and the upper arm is rotated, the lower arm should retain its 30 degree angle relative to the upper arm.
◦ The lower arm should have a movement range of 135 degrees in either direction relative to the primary axis defined by the upper arm.
◦ The hand can pivot 35 degrees in either direction relative to the lower arm. It should maintain its same relative orientation to the lower arm independent of any rotations of the lower or upper arm.
◦ The upper leg can pivot 90 degrees in either direction relative to the primary axis defined by the torso.
◦ The lower leg can also pivot 90 degrees in either direction relative to primary axis defined by the upper leg.
◦ Assume the feet are attached at a 90 degree angle to the lower leg. Given this, they can pivot 35 degrees in either direction from this initial orientation.
• Upper and lower legs can be scaled.
◦ The upper and lower legs can each be “stretched” by scaling them along their primary axes. Other parts, such as the feet, however, should stay at the same scale (i.e., feet do not scale). Furthermore, scaling the upper leg should scale the corresponding lower leg simultaneously.
Choose Your Feature
Implement one or more features totalling up to 10% from this section. NOTE: this is not a bonus section, you just get to choose which feature to implement from the following list.
• Locate or draw images for a head, torso, upper and lower arm, hands, upper and lower leg, and feet. These don’t need to be fancy or perfectly cut out. In fact, roughly cut-out photographic images, or hand-sketched components can have a pleasing aesthetic (10 marks).
Important note: You are free to choose any content for the paper doll as long as it is tasteful and respectful of any and all individuals or groups of individuals — any submission not meeting these criteria will be dealt with according to Policy 33 or similar policies, and will run the risk of losing some or all marks. When in doubt, ask the prof if you have questions about your choice of content.
• Multiple ragdolls. There should be a second menu item that switches between multiple ragdoll models. These ragdolls must have different “structures”: they cannot simply be different textures on the human-like ragdoll from the core requirements. Instead, they should have different parts, such as an animal, or a tree, or something else interesting. You should have at least one new ragdolls along with the human-shaped ragdoll from the core requirement, and they should have their own rotation constraints (10 marks).
• The ability to record and play back the animation of your doll. You need to add at least three buttons: one for playback, one for a “keyframe”, and one for removing all keyframes. When the keyframe button is pressed, the current pose of the ragdoll is added as a point on the timeline. (Where the keyframe is added is up to you: you can have a timeline with a fixed length and the keyframe is inserted at the current position of the playback cursor, or you can extend the timeline and add a new keyframe.) When the play button is pressed, the doll should transition through each pose (keyframe) on the timeline (10 marks).
Technical Requirements
The following is a list of technical constraints and guidelines:
• You must test using a Pixel (Google Phone) AVD using API 28.
• You need to Android SDK API 28 to build your application (the latest released version at the time of this assignment).
• You can use either Android Studio or IntelliJ, at your discretion. The course examples use Java 8 and IntelliJ 2018.3, but Android Studio can also be used, as long as the project builds using gradle from the command-line. Instructions to install and configure IntelliJ are included in the Android development slides.
• You can use any functionality included in the Android SDK, and are free to use code snippets from the Android sample code included with the SDK (i.e. a snippet being a small segment of code). You can also use any code that we introduce in the course (i.e. from the CS 349 Git repo). If you do this, put comments in your code referencing the original source. You are not allowed to use any other third-party code or libraries.
• Your project must build from the command-line using Gradle. i.e. `gradle build` to build it. In your submission, you also need to explicitly include the APK file (see below).
Submission
Submit the following in your personal Git repository:
• All required source code and resources, gradle build and project files. Remember that your project needs to build using `gradle build`.
• The APK file at the top-level of your directory structure, so that the TAs can easily find it. You will likely need to manually create this (Build -> Build APK) and copy to this location. This will help the TA to load and test your application without needing to load the project.
• A `readme` file (text or markdown) that documents any information that the TA will need to grade this.
Assessment
This assignment is graded out of 100%. If you include more than 10% in additional features, they will only grade the first ones that are submitted. The submission will be assessed roughly as follows:
5%
Deliverables: Appropriate makefile, readme.txt, compiles and runs.
20%
Basic functionality: Menus implemented as described; paper doll displayed in a visually pleasing manner
15%
Translation: The entire doll can be translated using the torso.
20%
Rotation: Head, arms, legs, etc. can be rotated, within the limits described.
20%
Scaling: The legs can be stretched, as described.
10%
Robustness: The interactions should be smooth, and not involve any “popping” or graphical glitches.
10%
Enhancements.
Versions
• 1.0. Mar 21, 2019. Initial draft.
• 1.1. Mar 30, 2019. Simplified the playback feature.
CS 349 User Interfaces (Winter 2019)
Cheriton School of Computer Science
University of Waterloo