CMPS160, Fall 2013, Section 01: Lab 1 Painterly Rendering

Lab 1- Painterly Rendering:

lab1 screenshot

This lab will serve as an introduction to opening windows in Glut, working with pixels and their colors, reacting to mouse events, and rendering simple shapes. It is out of 65 points, so a maximum of 70/65 is possible when fulfilling the criteria below.

You can use the code provided as your starter code, or write your own. The program should load an image when started, but initially display a blank canvas. When the user drags the mouse over the canvas, convert the mouse movements into paint strokes and paint the original image onto the canvas. Check the 'Grading / Requirements' section below for the specifics that you'll be graded on.

Starter Files (MSVC++ 2012 solution included)

Tutorial on setting up a Visual Studio project (not required)


  • Manifest:
    • Lab1.cpp - starter code
    • ppm_canvas.cpp - code to handle reading in .ppm files
    • ppm_canvas.h - associated header file
    • some.ppm - a .ppm file to test your program with
    • glut32.dll - some windows version of the openGL Utility Toolkit library
    • Lab1MSVC - Microsoft Visual Studio 2012 project folder (the .sln is in here)
  • Other:
    • ImageMagick - command line tools for converting image formats
      • e.g. `convert myImage.jpg myImage.ppm`
    • Online ppm converter - web-based tool to convert jpeg/png/gif files into ppm files for use in your program

Criteria: (For Grade)

5 Load image file named on the command line
5 Display a help message about what the mouse and keyboard do
5 Present a window/the blank canvas
5 Draw a correct colored rectangle when you cilck
5 Draw continuously when you drag
10 Orient the stroke in the direction of mouse motion (for at least one brush shape)
10 Something that looks like the source image appears when used
5 Provide keystroke or menu to clear the canvas
5 Provide key or menu to change brush size
5 Provide key or menu to change brush shape (at least three shapes including circle and thick line)
5 Don't Crash! - For example, when mouse is dragged out of window, or when bogus filename given. (demonstrate this in your video)
5 Provide an eraser

Clarifications and Refinements

In bold above are some clarifications that have been added to the assignment. First, for changing brush shape, you must implement at least the following three brushes:

  1. A circular brush.
  2. A thick line brush that draws a continuous line following the mouse movement, even when the mouse moves fast (hint: draw some shape that extends from the previous mouse position to the current position).
  3. A custom brush that you've designed to look cool. This should involve more than one shape being drawn.

Related to this restriction, the points for orienting the stroke in the direction of the mouse apply to brush #3 above: your custom brush should include some orientation-dependent component (like a square or a series of lines) that changes orientation as the direction of mouse motion direction changes. That is, dragging the mouse up-and-down across an area should produce a different pattern than dragging it left-to-right across the same area. Of course, not all of your brush shapes ahve to be orientable (the circle brush shape won't be, for example).

Finally, make sure to demonstrate that your program doesn't crash when you drag the mouse outside the canvas area in your video.

Example Submission

This link points to an exmaple submission to give you an idea of what your video submission should look like. Note that this submission does not include stroke orientation or a continuous brush style, so it wouldn't receive a perfect score, but it does do a good job of explaining what is going on and walking through the list of features. Note that you don't have to record audio: using captions is perfectly fine as long as the video clearly explains what's going on.

Related Research Papers:

  • Paint by numbers: abstract image representations. SIGGRAPH 1990, Paul Haeberli.
  • Interactive pen-and-ink illustration, SIGGRAPH 1994, Michael Salisbury, Sean Anderson, Ronen Barzel, David Salesin
  • John Lansdown , Simon Schofield, Expressive Rendering: A Review of Nonphotorealistic Techniques, IEEE Computer Graphics and Applications, v.15 n.3, p.29-37, May 1995
  • Barbara J. Meier, Painterly rendering for animation, Proceedings of the 23rd annual conference on Computer graphics and interactive techniques, p.477-484, August 1996
  • Processing images and video for an impressionist effect, SIGGRAPH 1997, Peter Litwinowicz.
  • Painterly rendering with curved brush strokes of multiple sizes, SIGGRAPH 1998, Aaron Hertzmann.
  • Long list at


  •, application/octet-stream, 9,314,004 bytes