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
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.
santhoshkumar
Kindly help me for Week 6 Graded Quiz Question No. 1 and 2
louis
I have problem in w5 q3 and q7, I have read the paper still have something dont understan
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
Pranesh Biswas
could you kindly send me the solutions of all quizzes? I’m stuck at quiz 2.
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