Interaction Interaction 321190 2007 년봄학기 3/20/2007 박경신 컴퓨터기술의중요한발전가운데하나는사용자가컴퓨터화면을이용하여상호작용을할수있다는것이다. 상호작용 (Interaction) 사용자는마우스와같은대화식장치를통하여행동을취한다. 컴퓨터가사용자의입력을감지한다. 프로그램은이입력에반응하여상태를바꾼다. 프로그램은이새로운상태를디스플레이한다. 사용자는바뀐디스플레이를본다. 사용자가이변화에다시반응하는과정들이반복된다. Historical Highlights MEMEX (1945) Vannevar Bush MEMEX J.C.R. Licklider Man-Computer Symbiosis Steve Russell Spacewar Ivan Sutherland Sketchpad Douglas Engelbart NLS (online System) Xerox PARC GUI (Graphical User Interface) 제 2 차세계대전이끝난 1945 년바네바부시는 1939 년에써두었던 As we may think 라는글을 Atlantic Monthly 에발표. 이글에서그는메멕스 (Memex, Memory Extender) 라는가상의기계를소개. 이선구적인글은많은이론가, 과학자들의주목을끌었으며, 현재우리에게익숙해져있는개인용으로사용되는정보처리기계및인간과컴퓨터간의인터페이스에대한최초의묘사로여겨지고있음. 그는 Douglas Engelbart, J.C.R. Licklider, Ivan Sutherland 등한세대에걸친컴퓨터과학자들에게영감을주어현대정보사회가성립하는데촉매역할을한것으로기억됨. 출처 : 위키백과 Man-Computer Symbiosis (1960) Spacewar (1961) 당시컴퓨터란자료를조작하여기계적인계산을수행하는장치였음. 1960 년 J.C.R. Licklider 가주창한인간 - 컴퓨터공생 (Man-Computer Symbiosis) 관점은컴퓨터를인간의협력자로제시함으로써보다효과적으로기능할수있고이러한상호작용을통해서인간이할수있는이상의좋은결과를얻을수있을것이라고주장. 인간과컴퓨터간의상호작용 (Human-Computer Interaction) 을최초로묘사함. MIT 학생 Steve Russell 이 Spacewar 라는최초의상호작용적인컴퓨터게임을개발함. Digital PDP-1 (Programmed Data Processor-1) 컴퓨터와 CRT 스크린을사용함. 프로그램의크기는 9K. 상업화를목적으로하지않음. Spacewar 는이미만들어진컴퓨터에프로그램을짜넣은최초의게임. 1
Sketchpad (1963) NLS (1968) MIT 대학의 Ivan Sutherland 박사학위논문 The Sketchpad: A Man-Machine Graphical Communication System (1963) 는디자인과공학을위해개발한최초의상호작용적인컴퓨터그래픽스시스템. 이를인간과컴퓨터의그래픽대화의시작으로본다. Douglas Engelbart 와 SRI (Stanford Research Institute) 연구자들은하이퍼링크를기반으로마우스를사용하는 online System (NLS) 을개발. NLS 는최초로하이퍼링크, 마우스, 레이저스킨비디오모니터, 스크린윈도우 (GUI) 를사용. 복잡한정보와개념의공간을 NLS 같은상호소통할수있는도구를통해쉽게탐험하면서인간의지적능력증대 (Augmenting human intellect) 를추구함. 1968 년도유타대학교에서 NLS 데모시연. Graphical User Interface (1973) 1973 년에개발된 Xerox PARC Alto 컴퓨터는그래픽사용자인터페이스 (GUI: Graphical User Interface) 를사용한최초의퍼스널컴퓨터이다. 현재대부분의 GUI 는기본적으로이인터페이스로부터유래되었으며, 혹자는이를 PUI(PARC User Interface) 라부른다. PUI 는창, 메뉴, 아이콘, 라디오단추, 체크상자등의그래픽요소들을사용하며, 마우스같은장치를키보드와함께사용한다 - WIMP (Windows, Icons, Menus, and Pointing device). 그래픽사용자인터페이스에서어떤요소에대한동작은그요소에해당하는그래픽을직접조작하여이루어진다. Graphical Input 입력장치를두가지다른방법으로생각할수있다 물리적장치 Mouse, Keyboard, Trackball 논리적장치 물리적특성이아닌사용자프로그램과의상위인터페이스에의하여특징지어짐 입력모드 입력장치가응용프로그램에게입력을제공하는방식은측정과정 (measure) 과장치트리거 (trigger) 로설명될수있다. 요구모드 (Request mode) 이벤트모드 (Event mode) Physical Input Devices Physical Input Devices 물리적입력장치 (Physical input devices) 지시장치 (Pointing devices) 사용자가화면상의한위치를지시할수있게함 대부분의경우사용자가컴퓨터에신호즉, 인터럽트를보내기위해 1 이상의버튼을가지고있다. Mouse, trackball, tablet, lightpen, joystick, spaceball 키보드장치 (Keyboard devices) 프로그램에문자코드를반환하는장치 Keyboard mouse trackball light pen data tablet joy stick space ball 2
Relative Positioning Device 데이터테블렛 (data tablet) 같은장치는절대위치를제공한다. 마우스, 트랙볼, 조이스틱같은장치는변화하는속도를적분하여위치정보가계산된다. Rotation of cylinders in mouse Roll of trackball 정확한절대위치를구하기어려움 장치를가변 - 감도입력으로사용할수있음 Logical Input Devices 문자열장치 (String device) - keyboard 사용자프로그램에 ASCII 문자열 (strings of characters) 을제공 위치장치 (Locator device) mouse, trackball 사용자프로그램에실세계좌표의위치 (position) 를제공 지적장치 (Pick device) mouse button, gun 사용자프로그램에객체의식별자 (ID) 를반환 선택장치 (Choice device) widgets, function keys, mouse button 사용자가선택사항들 (menu) 중하나를선택하도록함 벨류에이터장치 (Valuators) slide bars, joystick, dial 사용자프로그램에아날로그입력 (range of value) 을제공 획장치 (Stroke) mouse drag 위치들의배열 (array of positions) 을반환 X Window Input X Window System 모델은클라이언트와서버모델 (client-server model) 네트워크로구성. 그래픽스서버 (Graphics Server) 는래스터디스플레이, 키보드, 마우스를가진워크스테이션이다. 이서버는디스플레이에출력서비스를키보드와마우스를통한입력서비스를제공한다. 클라이언트 (Client) - OpenGL 프로그램은그래픽스서버를사용하는클라이언트이다. Input Modes 입력장치는 OS 에신호를보내는트리거 (trigger) 를가지고있다. 마우스 버튼 키보드에서 리턴 / 엔터 키 입력장치는트리거시컴퓨터에게측정치 (measure) 를넘겨준다. 신호를주는데사용할수있는장치의물리적입력이다. 마우스는 위치정보 를준다. 키보드는 ASCII code 를준다. Request Mode 요구모드 (Request mode) 에서는장치가트리거될때까지측정치가프로그램으로반환되지않는다. 문자입력을요구하는전형적인비그래픽스적인응용프로그램의표준 예를들어 C 프로그램의 scanf 함수가사용될때프로그램이단말기에서문자를칠때까지기다리면서정지한다. 그리고엔터키 (trigger) 를누르기까지타이핑과교정이가능하다. Sample Mode 샘플모드 (Sample mode) 에서는즉각적인입력을제공한다. 사용자프로그램에서함수의호출을만나는즉시측정치가반환된다. 따라서트리거가필요하지않다. 예 : C 프로그램의 getc 3
Event Mode 대부분의시스템은여러개의입력장치가있으며각장치마다자신의트리거로측정과정을실행하는환경으로구성된다 입력장치가트리거 (trigger) 될때마다이벤트 (event) 가생성되고, 장치의측정치가장치식별자 (ID) 와더불어이벤트큐 (event queue) 에들어간다. 답신 (callback) 함수를특정이벤트와연결하여사용한다. Event Types Window 윈도우 resize, expose, iconify Keyboard 키를누름 (press) 와키에서뗌 (release) Mouse 마우스버튼을누름 Motion 마우스움직임 Idle 이벤트가없음 Programming Event-Driven Input 이벤트 - 구동 (Event-drive) 입력프로그래밍을위해이벤트에대응하는답신함수 (callback function) 을정의한다. 이벤트가발생시해당답신함수 (callback function) 이동작한다. 예를들어,GLUT 에서마우스이벤트의답신함수는 main 함수내에서 glutmousefunc(mouse) 를통해서지정한다. 그리고 mouse 답신함수의형태는다음과같다. void mouse(int button, int state, int x, int y) GLUT Devices Keyboard normal keys special keys Mouse Position buttons Joystick Tablet Dial/button box Spaceball GLUT Keyboard Functions glutkeyboardfunc(func) ACII character 키가눌려졌을때불려짐 glutspecialfunc(func) 특수 special 키가눌려졌을때불려짐 glutkeyboardupfunc(func) ACII character 키가떼어졌을때불려짐 glutspecialupfunc(func) 특수 special 키가떼어졌을때불려짐 glutgetmodifiers() 이벤트발생시 Shift, Control, Alt keys 의상태를줌 glutignorekeyrepeat(val) GLUT 에게자동키보드반복을무시하라고알려줌 GLUT Keyboard Event Callback void keyboard(unsigned char key, int x, int y) 키보드인터랙션에대한처리를지정. key 인자는 ACII character code 로지정 x, y 인자는키를눌렀을때의마우스의위치 void keyboard(unsigned char key, int x, int y) switch (key): /* q-key exits the program */ case q : exit(0); 4
GLUT Special Key GLUT 특수키 (special key) 지정 GLUT_KEY_F1,F2..,F12 GLUT_KEY_UP,DOWN,LEFT,RIGHT 방향키 GLUT_KEY_PAGE_UP,PAGE_DOWN,HOME,END,INSERT void specialkey(int key, int x, int y) switch(key) case GLUT_KEY_F1: red = 1.0; green = 0.0; blue = 0.0; break; case GLUT_KEY_F2: GLUT Modifier Key CTRL, ALT, SHIFT modifier key 가눌려졌는지확인하려면 int glutgetmodifiers(void) 사용. GLUT_ACTIVE_SHIFT SHIFT 키 ( 혹은 Caps Lock 인상태 ) GLUT_ACTIVE_CTRL GLUT_ACTIVE_ALT void keyboard(unsigned char key, int x, int y) if (key == 27) /* ESC-key exits the program */ exit(0); else if (key == r ) int mod = glutgetmodifier(); if (mod == GLUT_ACTIVE_CTRL) red = 0.0; else red = 1.0; GLUT Mouse Functions glutmousefunc(void(*func)(int button, int state, int x, int y)) 마우스버튼이눌려졌을때불려짐 glutmotionfunc(void(*func)(int button, int state, int x, int y)) 마우스가버튼이눌려진상태에서움직일때불려짐 glutpassivemotionfunc(func) 마우스버튼이눌려지지않은상태에서움직일때불려짐 GLUT Mouse Event Callback void mouse(int button, int state, int x, int y) button 인자에는 GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON state 인자에는 GLUT_DOWN ( 마우스버튼이눌려졌을때 ) GLUT_UP ( 마우스버튼이떼어졌을때 ) x, y 인자는마우스버튼이눌렸거나떼어졌을때마우스의위치 (in GLUT window coordinates) void mouse(int button, int state, int x, int y) GLUT Motion Event Callback void motion(int x, int y) x, y 인자는마우스의새로운위치 (in GLUT window coordinates) void motion(int x, int y) GLUT Mouse Enter/Leave the Window void glutentryfunc(void(*func)(int state)); void entry(int state) state 인자는 GLUT_LEFT, GLUT_ENTERED void entry(int state) 5
Mouse Positioning GLUT screen coordinate 은원점을왼쪽위쪽 (top-left corner) 으로하고 x+ 는오른쪽, y+ 는아래쪽으로 1 pixel 단위로증가한다. OpenGL 은 2D drawing coordinate 은원점이왼쪽아래쪽 (bottom-left corner) 으로하고, x+ 는오른쪽, y+ 는위쪽으로증가한다. 따라서, 마우스로입력된 y 값을윈도우의높이 (height) 에서빼주어야 OpenGL 의화면에그림을그릴수있다. y = height y; (0,0) w h Drawing squares at cursor location void mouse(int button, int state, int x, int y) if(button==glut_right_button && state==glut_down) exit(0); if(button==glut_left_button && state==glut_down) drawsquare(x, y); void drawsquare(int x, int y) y = window_height - y; /* invert y position */ glcolor3ub( (char) rand()%256, (char) rand )%256, (char) rand()%256); /* a random color */ glbegin(gl_polygon); glvertex2f(x+size, y+size); glvertex2f(x-size, y+size); glvertex2f(x-size, y-size); glvertex2f(x+size, y-size); glend(); If both a mouse button and ALT key are pressed void mouse(int button, int state, int x, int y) specialkey = glutgetmodifiers(); if((state==glut_down)&&(specialkey == GLUT_ACTIVE_ALT)) if (button == GLUT_LEFT_BUTTON) red = 1.0; green = 0.0, blue = 0.0; else if (button = GLUT_MIDDLE_BUTTON) red = 0.0; green = 1.0, blue = 0.0; GLUT Device Functions glutjoystickfunc(func) 조이스틱의상태를매 t milliseconds 단위로호출 gluttabletmotionfunc(func) 테블렛 puck 이움직였을때호출 gluttabletbuttonfunc(func) 테블렛버튼이눌렸거나떼어졌을때호출 glutdialsfunc(func) 다이얼이돌려졌을때호출 glutbuttonboxfunc(func) 다이얼 / 버튼박스의버튼이눌렸거나떼어졌을때호출 Widgets 대부분의윈도우시스템은그래픽사용자인터페이스 (Graphical User Interface) 위제트 (widgets) 을제공 그래픽디스플레이에입력기능을제공하는고수준인터페이스 (Higher-level interface) 물리적입력장치가제공하는대부분의기능을제공한다. 위제트의예 Menus Buttons Radio buttons Sliders Scroll bars Dials GLUT Menus Functions GLUT 는간단한팝업메뉴 (pop-up menus) 기능을제공한다. 먼저메뉴안에항목들을정의한후, 이팝업메뉴를특정마우스버튼과연결해야한다 ( 이마우스버튼을눌렀을때나타날수있도록 ). 각메뉴항목에해당하는답신함수를정의해야함. 주 menus 아래 sub-menus 를만들수있다. id = glutcreatemenu(func); /* starts defining a new menu */ glutaddmenuentry(label, value); /* adds an entry to the menu */ glutaddsubmenu(label, id); /* adds a submenu to the menu */ glutattachmenu(button); /* defines mouse buttons to pop-up the menu */ Menus 는실행중에아래와같은함수를써서바꿀수도있다. glutsetmenu, glutrevemomenuitem, glutchangetomenuentry, glutchangetosubmenu Menus 는실행중에아래와같은함수를써서버튼에 attach 혹은 detach 가가능하다. glutdetachmenu 6
Defining a simple menu int glutcreatemenu(void (*func)(int value)); void glutaddmenuentry(char *name, int value); name 인자는메뉴에나타나는이름 value 인자는메뉴엔트리가선택됐을때답신함수에보내지는값 void glutattachmenu(int button); button 인자에는 GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON menu_id = glutcreatemenu(menu); glutaddmenuentry( clear Screen, 1); gluaddmenuentry( exit, 2); glutattachmenu(glut_right_button); clear screen exit Menu actions Menu callback void menu(int id) if(id == 1) glclear(); if(id == 2) exit(0); 각각의메뉴는생성시 ID 를갖는다. glutaddsubmenu(char *submenu_name, submenu id) 를사용하여 sub-menus 추가 Hierarchical Menus Idle Callback sub_menu = glutcreatemenu(size_menu); glutaddmenuentry( Increase Size, 2); glutaddmenuentry( Decrease Size, 3); glutcreatemenu(top_menu); glutaddmenuentry( Quit, 1); glutaddsubmenu( Resize, sub_menu); glutattachmenu(glut_right_button); Quit Resize Increase Size Decrease Size glutidlefunc(void (*func)(void)) 의답신함수는다른이벤트가없을때실행됨. Idle 은애니메이션움직임에사용함, e.g. rotating square void idle() /* change something */ t += dt glutpostredisplay(); void display() glclear(); /* draw something that depends on t */ glutswapbuffers(); Idle 의 default 답신함수는 NULL. The display callback glutpostredisplay 디스플레이답신함수는 GLUT 에서윈도우가새로그리기 (window refresh) 를요할때불려진다. 윈도우가처음으로열렸을때 윈도우가재구성이필요할때 윈도우가 expose 됐을때 사용자프로그램에서디스플레이가바뀌길원할때 glutdisplayfunc(display) 는모든 GLUT 프로그램에서반드시불리는 display callback 이다. void glutpostredisplay() 함수는윈도우가새로그려져야할필요가있는경우를표시하는일을한다. 일반적으로 display callback 함수를직접호출하는것보다, 이함수를사용하면디스플레이가다시그리기지시플래그를 GLUT 메인루프내에설치해서, 과다하거나불필요한화면그리기를방지한다. glutpostredisplay 를사용하면이프로그램이이벤트루프를처리할때마다디스플레이가한번실행되도록한다. 7
Animating a Display Display callback 함수내에서디스플레이를새로그릴때 glclear() 를사용하여먼저윈도우를 clear 한다. 그러나, 프레임버퍼에서의그림정보는그림내용의디스플레이와분리되어있다. 따라서반쪽만그리게되는디스플레이를보게됨. (single_double_buffer.cpp 참고 ) The Reshape callback glutreshapefunc(reshape) 는재구성이벤트답신함수를호출한다. void reshape(int w, int h) 윈도우의넓이 (width) 와높이 (height) 를반환한다. 이답신함수는자동적으로 redisplay 를부른다. Reshape callback 함수는윈도우가처음열렸을때호출되므로관측함수를넣기에좋은곳이다. Example Reshape void reshape(int w, int h) glviewport(0, 0, w, h); glmatrixmode(gl_projection); /* switch matrix mode */ glloadidentity(); if (w <= h) gluortho2d(-2.0, 2.0, -2.0 * (GLfloat) h / (GLfloat) w, 2.0 * (GLfloat) h / (GLfloat) w); else gluortho2d(-2.0 * (GLfloat) w / (GLfloat) h, 2.0 * (GLfloat) w / (GLfloat) h, -2.0, 2.0); glmatrixmode(gl_modelview); /* return to modelview mode */ 8