All Articles

OpenGL 강좌 _ 3강. 2D Mouse Interaction

Image

* 각각의 강의에서 쓰이는 메서드의 내용은 조금씩 달라질 수 있기 때문에 마지막 전체코드를 확인하여주시기 바랍니다.

1. 강의 설명

OpenGL 강좌 : 2강. 2D Programming 코드를 기본으로 다음 강의를 시작하겠습니다.

이번에 배울 내용은 Mouse Interaction에 대한 내용으로 glutMouseFuncglutMotionFunc을 통해

마우스의 드래그 앤 드롭 (drag & drop)으로 직선을 그리는 과정을 설명합니다.

2. 전역 변수 추가

static bool mouseLeftDown;
static float point[2][2];
  • mouseLeftDown은 현재 마우스의 왼쪽버튼을 누르고 있는 상태인지를 체크합니다.
  • point[2][2]에서 point[0]은 마우스 드래그 시작점의 x,y 좌표를, point[1]은 마우스 드래그 끝점의 x,y 좌표를 저장합니다.

3. 새로운 메서드 추가

void mouseEvent(int button, int state, int x, int y)
{
	if (button == GLUT_LEFT_BUTTON)
	{
		if (state == GLUT_DOWN)
		{
			if (!mouseLeftDown)
			{
				double viewport[4];
				glGetDoublev(GL_VIEWPORT, viewport);

				point[0][0] = x / (float)viewport[2] * 500;
				point[0][1] = (viewport[3] - y) / (float)viewport[3] * 500;
				point[1][0] = point[0][0];
				point[1][1] = point[0][1];

				mouseLeftDown = true;
			}
		}
		else if (state == GLUT_UP)
		{
			if (mouseLeftDown)
				mouseLeftDown = false;
		}
	}
	else if (button == GLUT_RIGHT_BUTTON)
	{
		if (state == GLUT_DOWN)
		{
		}
		else if (state == GLUT_UP)
		{
		}
	}

    // Refresh DisplayFunc
	glutPostRedisplay(); 
}
  • mainglutMouseFunc의 파라미터로 호출되는 메서드입니다. ex) glutMouseFunc(mouseEvent);
  • glutPostRedisplay : 화면갱신이 필요할 때 이 메서드를 호출하면 glutDisplayFunc 강제로 한 번 더 실행합니다.
void mouseMotion(int x, int y) {
	if (mouseLeftDown) {
		double viewport[4];
		glGetDoublev(GL_VIEWPORT, viewport);

		point[1][0] = x / (float)viewport[2] * 500;
		point[1][1] = (viewport[3] - y) / (float)viewport[3] * 500;
	}

	glutPostRedisplay();
}
  • mainglutMouseMotion의 파라미터로 호출되는 메서드입니다. ex) glutMouseMotion(mouseMotion);
  • 마우스 왼쪽버튼을 누르고 있는동안 point[1]에 해당하는 위치를 바꿔줍니다.
  • glutPostRedisplay : 화면갱신이 필요할 때 이 메서드를 호출하면 glutDisplayFunc 강제로 한 번 더 실행합니다.

4. main 메서드

// Main program entry point
int main(int argc, char* argv[])
{
	glutInit(&argc, argv); // Initialize GLUT Library
	glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // Set Display Mode 
	glutInitWindowSize(600, 600); // width 600, height 600
	glutCreateWindow("GL2"); // Create new Window App "GL2"
	glutDisplayFunc(RenderScene);
	glutReshapeFunc(ChangeSize);

	glutMouseFunc(mouseEvent);
	glutMotionFunc(mouseMotion);

	Init();

	glutMainLoop(); // GLUT, GL Routine

	return 0;
}

5. 결과물

Image

마우스 왼쪽 버튼 누른 상태로 드래그를 했을 때, 점선모양으로 나옵니다.

Image

마지막으로 해당 위치에서 마우스 왼쪽 버튼에서 손을 떼게되면 직선모양으로 바뀌어 나옵니다.

6. 전체코드 확인