ProgrammingAssignment2-Colin Chang

From CS160 Spring 2013
Jump to: navigation, search


Colin prog2 home.png

Paper! A name so called to draw deliberate attention to the (now hopefully) painfully obvious paper and pen metaphor. This app is designed for the Nexus 7.

As suggested in class, anyone using a tablet to draw is likely a casual drawer, and will not require (nor will s/he desire to be burdened by) unnecessarily detailed drawing calibrations. Instead, I implemented simple pickers for our fun-seeking user.

Design Decisions


Canvas is nice and large!
Drawing section obviously takes a substantial portion of the screen
Yet options are always available
Options section is always available, meaning its one click closer to customizing the brush.


Look Ma, no gaps!
Used pathing to connect all the lines in the drawing (rather than intermittent dots, my first attempt). Continuous lines with continuous strokes is something that the user expects in a drawing application (as it is a 'gimme' metaphor for real drawing), so the importance of implementation was obvious.

Options Bar

Colin prog2 brusherasertoggle.png
Brush and eraser toggle buttons. Erasing is something we want to access quick, so it is easy access as a button on the options bar. Mode switching made sense here (between a brush mode and an erase mode) since they were mutually exclusive (at least, cognitively speaking) options for 'drawing'.
Mode reminders with the blue underline of the brush/eraser buttons
Color choosing evaporates when in erasing mode and preview background is inverted
Erasers, do not have color, so I decided to hide the color picking option on the options bar. This reinforces the mode. Also the blue bars underneath the buttons also remind the user of which mode they are in.Brush preview is backed by the same background as in the canvas view, which gives the user a real sense of what their stroke will look like on the canvas. This is problematic for previewing erasers of varying brush sizes, since the eraser is the same color as the background. To mitigate this, I inverted the preview's background for the preview when determining the eraser.
Colin prog2 brushoptions.png
Brush size slider offered users a quick way to change the size of their brush. Though it is inexact on a pixel level, I predict most casual users will take the trade off of 'close enough' to the speed of picking brush size
Colin prog2 coloroptions.png
Color picker used some popular colors. Nothing outstanding here... except for 'Party!' which is a fun feature I implemented (for fun's sake only) that chooses a random color for the path while the path is being drawn by the user
Colin prog2 brushpreview.png
Brush preview offers users two things: 1) instant feedback on their brush and color choices and 2) a chance to review their decisions before committing that brush stroke to their canvas
Colin prog2 eraseallbutton.png
Colin prog2 eraseallconfirmation.png
'Erase all' gives the users the option of starting over. Since we are on a touch screen where buttons can be accidentally pressed, the user is prompted by a dialog to ensure they really intend to erase their canvas.
Colin prog2 savetoast.png
Save button saves the canvas (the bitmap) to file


The media player is loading... Note: apologies about the emulator lag. It only occurs while screen recording (and my fan goes nuts), leading me to believe that these two events in tandem (necessarily so) causes the lag. The lag does not occur when not screen recording.

Source Code


For The Future (for a 'me' with more time)

  • Implement an 'undo' feature
  • Implement a more sophisticated color picking feature
  • Implement other shapes to draw (like a spray can, or squares or drag and drop larges shapes)
  • Implement the ability to draw straight lines