Interactive Computer Graphics

posted in: MOOC | 9

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


9 Responses

  1. Avinash Kolluri

    could you kindly send me the solutions of all quizzes? I’m stuck at quiz 2.

    • grant

      Sorry, but this was an online course, so I didn’t keep all the answers at my disk. If you could post which question did you stuck at, maybe I can help.

      • louis

        I have problem in w5 q3 and q7, I have read the paper still have something dont understan

  2. Santhoshkumar s p

    Dear sir,
    I am unable to clear fabrication assignment 5 out of 10 I am able to tick 7 answers .. I am unable to reach 8/10. Pls help me to pass the assignment 5 , 6 and 7

  3. Pranesh Biswas

    could you kindly send me the solutions of all quizzes? I’m stuck at quiz 2.

  4. anjali

    The following pseudo-code represents the pattern adjustment process of the Plushie system. Pseudo-code

    while(true){ apply_simulation(mesh); foreach(vertex v in mesh_seam){ Vector2 p = project_to_screen(v); Vector2 q = get_corresponding_stroke_position(v); double displacement = Vector2.dot_product(get_screen_space_normal(p), Vector2.subtract(q,p)); Vertex2D[] vs = get_corresponding_pattern_vs(v); vs[0].translate( Vector2.multiply( vs[0].normal, displacement )); vs[1].translate( Vector2.multiply( vs[1].normal, displacement )); }
    update_rest_lengthes(mesh); }
    ?? Select the all missing elements in this code.
    updating rest length of the mesh according to changes in the pattern
    stopping iteration when the inflation result matches well with the input stroke applying inflation simulation stopping pattern growth when self-overlap occurs shrinking the pattern when the inflated result is larger than the input sketch
    enlarging the pattern when the inflated result is smaller than the input sketch
    applying inflation simulation

  5. madhu vamsi

    Dear sir,
    I am unable to clear fabrication assignment 5 out of 10 I am able to tick 7 answers .. I am unable to reach 8/10. Pls help me to pass the assignment 5 , 6 and 7

  6. madhu vamsi

    Dear sir,
    I am unable to clear assignment 5,6,7. Pls help me to solve the assignment 5 , 6 and 7

Leave a Reply

Your email address will not be published. Required fields are marked *