Individual Programming Assignment 2

From CS160 Spring 2013
Jump to: navigation, search

Due 11:59pm on Friday 2/15

Overview

In this assignment you will build a painting application that lets the user create artwork on their mobile device (see New yorker covers painted on the iPad).

The purpose of the assignment is to deepen your understanding of drawing and touch event-handling on the Android platform.

You will submit three things:

  1. your source code
  2. your executable (Make sure your executable has all resources that it needs to run.)
  3. a narrated video demo of your app.

Design Requirements

Requirements:

  • Application:
    • Create an application that recognizes and responds to touch events.
    • Using the touch data, draw points on a canvas. Continuous dragging should produce continuous lines.
    • User must be able to switch between drawing and erasing
    • User must be able to clear the screen
    • User must be able to select the color for drawing (selecting between a few pre-defined colors is sufficient; full color pickers get extra credit)
    • User must be able to change the brush size for drawing
  • Video: Submit a narrated video demo of your application, 60-90 seconds in lengths, that shows and describes the features.

One way to satisfy the application functionality requirements is to create an application with two views: one of the canvas, and another of an options screen that lets the user change modes and adjust settings.


Extra credit: Up to 5 extra credit points are available if you design and implement more features, such as:

  • Saving and loading pictures to device memory (see Data Storage.)
  • Additional drawing tools such as shapes or different brushes
  • Zooming and panning the canvas.
  • Layers (hard).

Notes

Implementation

First you need to get the user's input. You will need an OnTouchListener over the paint window to catch touch events.

There are a few ways to paint in Android. One way is to paint directly on a View object. If performance is an issue, i.e. for real-time graphics as the case here, its preferred to paint onto a Canvas object which gives the programmer more control and is usually faster. To do this, define a custom class which extends View and override its onDraw method. onDraw is where you do your drawing. onDraw will automatically be called with a Canvas object argument, so you dont need to extract the canvas from the View. In order to draw on the canvas, you will need to create one or more paint objects with the desired colors. (see the Canvas and Drawing developer guide).

To put this custom View object in the hierarchy, create an instance of it in the main onCreate() method as you would for other Views, and then make it a child of a View or Layout widget that you have included in your XML layout file using View.addView. The new view will have "fill_parent" attributes by default, and so will fill available space which is probably what you want.

Because painting in Android (like most other GUI toolkits) is "smart", the display doesn't automatically change when you paint on the canvas. Instead you have to tell android that the image really changed by calling View.invalidate().

This is by no means a brilliant design. You are free to design your own app provided that it has at least the functionality as enumerated above.

Screencast Video

  • What your screencast should contain:
    • Narrated walkthrough of the interface from the user's perspective
    • No implementation details
    • In the end, point out any extra credit points
    • Be CONCISE. Your video shouldn't be longer than 90 seconds for the basic functionality. You may use additional time to point out possible extra credit features.
    • Be prepared to do multiple takes; writing a script down first is helpful.
    • Don't record the entire screen - only record the Android emulator window.

There are different free software packages available to create narrated screencasts. Here are some options:

Please crop your video to only show the emulator - we don't need to see your entire desktop.

Grading criteria

Up to 20 points will be given if your application compiles, runs, contains the functionality as detailed in the instructions. We will grade the usability of your application. This means you may lose points for design problems, even if your application formally fulfills the requirements. Examples of problems that will cost points are: color choices that make the interface hard to read; inappropriate sizing and positioning, overly complicated and onerous sequences of steps required to complete tasks, lack of feedback, etc.

Up to 5 extra points will be given if you implement additions that make the application more usable or more useful.

Sample Solution

Here is a screenrecording I created with Jing on OS X. This video lacks narration but has all other required features for this assignment. You have to include narration in your video. The video was uploaded to YouTube.

The media player is loading...

Here is a video from the last time I taught this course: Adela Chang's drawing application CS160 Spring 2011.

Submission Instructions

Create a Wiki Page for this assignment

Begin by creating a new wiki page for this assignment. Go to your user page. Edit your user page to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[ProgrammingAssignment2-FirstName_LastName|Programming Assignment 2]]

Again replace FirstName and LastName with your name. Look at my user page for an example. Then click on the link and enter the information about your assignment. You should upload two files (described below) and in the wiki page, describe any extra credit functionality you implemented and want us to review.

Upload Project

  • Your submitted project must include the full source code as well as the executable of the working application and the video.
  • Create a zip file of your project tree (the top-level folder that includes the Eclipse project. Rename the zip file to firstname-lastname-ipa2.zip (e.g., bjoern-hartmann-ipa2.zip)
  • Upload the zip file to the ProgrammingAssignment2-FirstNameLastName page you just created:
    • Create a new file link like this: [[File:firstname-lastname-ipa2.zip]]
    • Save the page, then click on the File link you just created to upload the zip file.
  • Upload or link your video file to the ProgrammingAssignment2-FirstNameLastName page you just created. You can either upload the video itself, or post a link to an online video sharing site such as YouTube, vimeo, or jing.
    • Video file: If you will upload your file directly, create a new file link like this: [[Media:firstname-lastname-ipa2.mov]] We accept mov, mp4, and ogv formats. Save the page, then click on the File link you just created to upload the zip file.
    • Video link: Add a link to your submission page like this: <mediaplayer>http://youtube.com/myvideolink</mediaplayer>.

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it at the bottom of the page with your full name as the link text. The wiki syntax will look like this: *[[ProgrammingAssignment2-FirstName_LastName|FirstName LastName]]. Hit the edit button for the last section to see how I created the link for my name.

Links to Finished Assignments

Add your submission below this line.