[프로세싱] 마우스를 따라가는 다이내믹한 선 애니메이션

마우스를 따라가는 다이내믹한 선 애니메이션

코드 분석

void setup() {
  size(100, 100); // 100x100 크기의 창을 설정
}

void draw() {
  background(204); // 배경을 회색으로 설정 (204는 회색에 해당하는 RGB 값)

  float x = mouseX; // 마우스의 X 좌표를 변수 x에 저장
  float y = mouseY; // 마우스의 Y 좌표를 변수 y에 저장

  // 세 개의 선을 그리는 코드
  line(x, y, x+20, y-40); // 마우스 위치에서 오른쪽 위로 20, 40만큼 떨어진 위치까지 선을 그림
  line(x+10, y, x+30, y-40); // 마우스 위치에서 10만큼 오른쪽으로 이동한 지점에서 오른쪽 위로 30, 40만큼 떨어진 위치까지 선을 그림
  line(x+20, y, x+40, y-40); // 마우스 위치에서 20만큼 오른쪽으로 이동한 지점에서 오른쪽 위로 40, 40만큼 떨어진 위치까지 선을 그림
}

실행 결과 설명

• 창 크기: size(100, 100)로 설정된 창의 크기는 100x100 픽셀입니다.
• 배경 설정: background(204)로 창의 배경색을 회색으로 설정하고 있습니다.
• 마우스 좌표 사용: mouseX와 mouseY는 마우스의 현재 좌표를 나타냅니다. 이 좌표를 기준으로 선이 그려집니다.
• 선 그리기: line() 함수는 시작 좌표와 끝 좌표를 받아 선을 그립니다. 세 개의 선이 마우스의 위치를 기준으로 오른쪽 위 방향으로 그려집니다. 각 선은 마우스의 위치에 따라 움직이며, 마우스가 움직일 때마다 선의 위치도 함께 변합니다.

시각적 결과

마우스가 움직일 때마다 세 개의 대각선이 그려집니다. 이 선들은 모두 마우스 위치를 기준으로 오른쪽 위로 일정 간격으로 그려집니다.

 

이러한 방식으로 마우스를 따라가는 다이내믹한 선 애니메이션을 구현할 수 있습니다.