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: https://www.mendeley.com/groups/7620091/interactive-computer-graphics/
1 Graphical User Interface
1-1 Scrolling Interface
- Igarashi and Hinckley. Speed-dependent automatic zooming for browsing large documents. UIST 2000.
- Perlin. Pad: An Alternative approach to the computer interface. SIGGRAPH 1993.
- Edward Tufte’s The Visual Display of Quantitative Information.
Zooming can be very useful in interface design:
1-2 Desktop Icons
Spatial aggregation supports loose clustering of information
Visual clutter \neq SEmantic cluster
- Watanabe, et al. Bubble Clusters: An Interface for Manipulating Spatial Aggregation of Graphical Objects. UIST2007.
- Blinn. A generalization of algebraic surface drawing. SIGGRAPH 1982.
- Lorensen and Cline. Marching cubes: A High resolution 3D surface construction algorithm. SIGGRAPH 1987.
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.
- Kobayashi and Igarashi. Ninja Cursors: Using Multple Cursors to Assist Target Acquisition on Large Screens. CHI 2008.
- Grossman and Balakrishnan. The bubble cursor. Enhancing Target Acquisition by Dynamic Resizing of the Cursor’s Activation Area. CHI 2005.
- Baudisch, et al. Drag-and-pop and drag-and-pick: Techniques for accessing remote screen contetn on touch- and pen operated system. Interact 2003.
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.
- Igarashi and Hughes. Voice as Sound: Using Non-verbal Voice Input for Interactive Control. UIST 2001.
- Bolt. Put-that-there: Voice and gesture at the graphics interface. SIGGRAPH 1980.
- Goto, et al. Speech Completion: On-demand Completion Assistance Using Filled Pauses for Speech Input Interface.
Quiz 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
|
1 2 3 4 5 6 7 |
function scroll(mouse_position, drag_start_position) { dx = abs(mouse_position - drag_start_position) scale = pow(s0, (dx-d0)/(d1-d0)) scale = max(s0, min(1.0, scale)) speed = v0 / scale * sign(dx) scroll_position += speed } |
3. The potential field generated by a kernel located at c is given as a function of position p: h(p)=200−|p−c|, 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?
|
1 2 3 4 5 |
clusters = clustering(icons) foreach (cluster in clusters) { potential_field = calculate_potential_field(cluster) contour_lines.add(marching_squares(potential_field)) } |
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?
30s
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
queue = new Queue() function mouseMoved(mouse_movement) { foreach (cursor in all_cursors) { if (cursor.position + mouse_movement is in any icon) { if (queue.contains(cursor)) { if (queue.top() == cursor) { cursor.position += mouse_movement } } else { queue.push(cursor) } } else { if (queue.contains(cursor)) queue.delete(cursor) cursor.position += mouse_movement } } } |
7. Rotate the input strokes.
|
1 2 3 4 5 6 7 |
function addInputStroke(Stroke stroke) { foreach (Point p in stroke.points) { p.x = p.x * cos(theta) - p.y * sin(theta) p.y = p.x * sin(theta) + p.y * cos(theta) } segment.addPaintedStroke(stroke) } |
8. It makes a duplicate of the input stroke and translates it.
|
1 2 3 4 5 6 7 8 9 |
function addInputStroke(Stroke stroke) { Stroke stroke2 = new Stroke() foreach (Point p in stroke.points) { Point p2 = new Point(p.x + dx, p.y) stroke2.points.add(p2) } segment.addPaintedStroke(stroke) segment.addPaintedStroke(stroke2) } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function detectPitchChange(double[] prev, double[] current) { sum_low = 0 sum_high = 0 for (i=1; i<prev.length-1; i++) { sum_low += prev[i] * current[i-1]; sum_high += prev[i] * current[i+1]; } if (sum_low > sum_high) { return PITCH_GETS_LOWER } else if (sum_low < sum_high) { return PITCH_GETS_HIGHER } else { return PITCH_DOES_NOT_CHANGE } } |
2-3 Shape Manipulation
As-rigid-as-possible shape manipulation
2-4 Dynamic Illustrations
Automatic flow visualization
3D GEOMETRIC MODELING
3-1 Suggestive Interface
3-2 Sketch-based Modeling
3-3 Shape Control by Curves
3-4 Flower Modeling
3-5 Volumetric Textures
2 Responses
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.