Interactive Computer Graphics

posted in: MOOC | 0

Interactive Computer Graphics on Coursera is taught by Prof. Takeo Igarashi. A similar course is Interactive Computer Graphics by WebGL. I also maintain a Mendeley group here for all referenced papers:


1 Graphical User Interface

1-1 Scrolling Interface

Zooming can be very useful in interface design:


zommin zomming

equ  equ2




1-2 Desktop Icons

Spatial aggregation supports loose clustering of information

Visual clutter \neq SEmantic cluster


1-3 Pointing

It is difficult to point to a distant object.

Use multiple cursors on the screen.

Multiple pointers point to multiple objects at the same time.

cursor   fittslaw


1-4 Digital Ink

Flatland: Disgning computationally augmented office whiteboard.


3D Drawing, automatically cut, …

  • Mynatt, et al. Faltland: New Dimensions in Office Whiteboards. CHI 1999.
  • Rubine. Specifying gestures by example. SIGGRAPH 1991.
  • Wobbrock, et al. Getstures with out libraries, tookits or training: a $1 recognizer for user interface prototypes. UIST 2007.
  • Pie and marking menus: Kurtenbach. The design and evaluation of marking menus. University of Toronto. 1993.


1-5 Voice Interaction

Flatland: Designing computationally augmented office whiteboard.

voice  pitch



Quiz 1


  1. d-const1 = const2 * log(speed) || speed = const1 * const2^d represents the relationship between speed and mouse displacement (d) in the revised implementation of speed-dependent automatic zooming.

2. The following pseudo-code with blanks [1] ~ [5] represents the core part of the one-dimensional scrolling function in speed-dependent automatic zooming technique. DABEC

3. The potential field generated by a kernel located at c is given as a function of position p: h(p)=200|pc|, and the two kernels are located at c1=(200,200) and c2=(400,200).

What is the shape of the area (bubble) that satisfies h>100?


4. Which of the following pseudo-codes represents the clustering and visualization algorithms of Bubble Clusters correctly?

5. Consider a 1D desktop with three icons that occupy regions [100, 120], [200,220], and [300,320], where the mouse cursors are located at x=90, x=180, and x=270, respectively.

Suppose that the mouse moves the cursors by +1 pixel per second (if they are not blocked). How long does it take for a cursor to enter the third icon?


6. The following pseudo-code represents the process to move cursors according to the user input (movement of mouse) in Ninja Cursors.

Answer the correct combination of code fragments to fill in the blanks [1] ~ [3].

Assume that mouse movement is small and any cursor does not go out of an icon and enter another icon a once. BAC

7. Rotate the input strokes.

8. It makes a duplicate of the input stroke and translates it.

9. Suppose that we have the spectrum [100, 110, 100, 120, 110] at time t=0 and [110, 100, 110, 110, 120] at time t=1.


The pitch becomes higher between t=0 and t=1.

[120, 110, 120, 100, 110] at time t=0 and [110, 120, 100, 110, 100] at time t=1.

The pitch becomes lower between t=0 and t=1.


10. AB



2-3 Shape Manipulation

As-rigid-as-possible shape manipulation


2-4 Dynamic Illustrations

Automatic flow visualization



3-1 Suggestive Interface


3-2 Sketch-based Modeling


3-3 Shape Control by Curves


3-4 Flower Modeling

w3a4 w3a42

3-5 Volumetric Textures


Leave a Reply