마우스 인터렉션

코드 셋업

• week2-mouse.js 새 파일 만들기

  • 선생님 스케치의 week2-mouse.js 템플릿을 일단 복사+붙여넣기 해도 된다.

• index.html 파일에서 아래와 같이 정리 및 새 파일 추가.

• <!-- --> 표시는 html에서의 주석(코멘트)이다. 이 처리가 된 파일은 html에서 실행하지 않는다.

	<!--- 위 생략 --->
	<script src="utils.js"></script>
	<script src="myAlphabets.js"></script>
<!-- 	<script src="week1.js"></script> -->
<!-- 	<script src="week1-1.js"></script> -->
	<script src="week2-mouse.js"></script>

week2-mouse.js 템플릿

// 전역 변수: 색상 hex문자열 리스트 Array


// 그 외 전역 변수들

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  angleMode(DEGREES);
  // rectMode(CENTER);
}

// p5js에서 제공하는 마우스 관련 함수들
function mouseDragged() {
	
}
function mouseClicked() {
	
}

// 실제 그림 그리는 함수
function draw() {
  background(0);
  drawGrid(20);         // 모눈종이표
  showCoordinateNum();  // 마우스 현재 위치 좌표값
	
  // 도형 코드 적기
	
}

마우스 인터렉션

시스템 변수: 이미 p5js에서 정의해서 만든 변수.

mouseX: 마우스의 가로 위치 숫자 값이 계속 업데이트 되어 담겨있는 변수. mouseY: 마우스의 세로 위치 숫자 값.

기본 HTML, vanilla Javascript 에서 마우스 위치를 구하는 법.

• https://developer.mozilla.org/ko/docs/Web/API/MouseEvent/clientX

• https://developer.mozilla.org/ko/docs/Web/API/MouseEvent/clientY

• https://ko.javascript.info/mouse-events-basics

마우스 이벤트 인터렉션

• 마우스 클릭했을 때: https://p5js.org/ko/reference/#/p5/mouseClicked

• 마우스를 누르고 있는 동안: https://p5js.org/ko/reference/#/p5.Element/mousePressed

• 마우스로 드래그하는 동안: https://p5js.org/ko/reference/#/p5/mouseDragged

1. 실습: 마우스 위치에 따라 도형의 위치를 바꿔보자.

1. 첫번째 방법: translate() 함수에 mouseX, mouseY를 적용

2. 두번째 방법: 도형 함수에 직접 mouseX, mouseY를 적용

function draw()
    push();
    translate(mouseX, mouseY);
    myTriM();
    pop();
}

function draw() {
  // 다른 코드는 있다고 가정하고 여기선 생략.
  myTriM();
}
function myTriM() {
  push();
  triangle(0 + mouseX, 100 + mouseY, 
          20 + mouseX, 0 + mouseY, 
          40 + mouseX, 100 + mouseY);
  triangle(40 + mouseX, 100 + mouseY, 
          60 + mouseX, 0 + mouseY, 
          80 + mouseX, 100 + mouseY);
  pop();
}

2. 실습: 마우스 위치에 따라 도형의 사이즈를 바꿔보자.

1. 첫번째 방법: 도형 함수의 너비, 높이 파라미터에 직접 mouseX, mouseY를 적용

• myRectA() 함수 안에 있는 rect()의 사이즈를 바꿔보자.

function myRectA() {
    let mWidth = mouseX;
    push();
    rect(50, 20, 25 * 0.5 + mWidth, 10);
    rect(50, 40, 25 + mWidth, 10);
    rect(50, 60, 50 + mWidth, 10);
    rect(50, 80, 75 + mWidth, 10);
    rect(50, 100, 100 + mWidth, 10);
    pop();
}

2. 두번째 방법: scale() 함수에 mouseX, mouseY를 적용

• scale() 함수를 이용해서 배수로 사이즈를 조절하자: 0.25배, 0.5배, 1배, 2배 ...

• translate()으로 정한 새로운 기준점을 기준으로 scale이 바뀐다.

push();
translate(width/2, height/2);
scale(mouseX * 0.1, 1.0);
myRectA();
pop();

3. 실습: 마우스에 반응하되 그 값을 한정하자.

값이 최소값과 최대값을 넘지 않도록 한다.

• constrain()

constrain(mouseX, 100, 200);

값을 환산한다.

• map(실제값, 실제 최소값, 실제 최대값, 변환할 최소값, 변환할 최대값)

• 예) 원래 숫자 값이 1 ~ 100 범위이고, 10 ~ 50 사이로 환산하고 싶다.

1 : 100 = 10 : 50
비례식을 생각하면 조금 더 이해하기 쉽다. 
1 => 10, 100 => 50 이런 식으로 숫자를 새로 매핑하는 것.

let mapX = map(mouseX, 0, width, 0.5, 1.5);
// 0 : width = 0.5 : 1.5
push();
translate_guide(width/2, height/4);
scale(mapX, 1.0);
myRectA();
pop();

4. 실습: 마우스 위치 => 각도에 적용해서 회전하자. 예) ArcD()

1. translate() 기준점을 기준으로 회전.

let rot = map(mouseX, 0, width, 0, 360);
push();
translate(width-100, height/2);
rotate(rot);
myArcD();
pop();

2. 제자리에서 회전.

function myArcD() {
    let rot = map(mouseX, 0, width, 0, 360);
    push();
    translate(20, 50);
    rotate(rot);
    arc(0, 0, 150, 100, 270, 270+180);
    pop();
}

5. 실습: 마우스를 드래그해서 위치를 옮겨보자.

// 글로벌 변수를 만들어서 사용한다. 
let dragX = 0;
let dragY = 0;
function mouseDragged() {
    dragX = mouseX;
    dragY = mouseY;
}
function draw() {
    // ... 생략 ...
    // 마우스 드래그 연습
    push();
    translate(dragX, dragY);
    myRectE();
    pop();
}

• 해당 도형 가까이서 클릭했을 때만, OR

• 여러 개의 도형을 각각 옮기고 싶다면,

• 조건문을 사용해서, 해당 도형 가까이/내부에서 드래그를 시작했는지 확인해야 한다.

6. 실습: 마우스 클릭에 따라 색상을 바꿔보자.

1. 색상 문자열 여러 개를 변수에 저장한다. 이런 리스트 데이터를 Array라고 부른다.

let coolors = ["#cbf3f0", "#2ec4b6", "#ff9f1c","#ffbf69"];

2. 리스트에 있는 아이템을 가져다가 쓸 때는, 인덱스(순서)로 가져온다.

• 컴퓨터는 리스트의 순서를 0부터 시작한다.

console.log(coolors[0]);  // 0번째
console.log(coolors[1]);  // 1번째
console.log(coolors[2]);  // 2번째
console.log(coolors[3]);  // 3번째
console.log(coolors[4]);  // 어떤 일이 발생하는가?

3. 인덱스를 고정 숫자가 아닌 변수로 대체하자.

// 코드 상단에 변수 새로 만들기.
let colorIndex =  0;

function draw() {
    console.log(coolors[colorIndex]);
}

4. 이 변수를 마우스 클릭에 따라 업데이트 해보자.

• 컴퓨터의 연산은 오른쪽에서 왼쪽 방향이라는 것을 기억하자!

let colorIndex =  0;
function draw() {
    console.log(coolors[colorIndex]);
}
function mouseClicked() {
    colorIndex = colorIndex + 1; 
    // 기존 값에 +1을 해서 왼쪽으로 넘긴다. 
    // colorIndex 변수를 업데이트한다.
}

5. 계속 클릭했더니 에러가 발생한다!

• 리스트에는 아이템이 4개밖에 없는데

• 우리의 colorIndex 값은 점점 커지기만 한다.

• 수학의 나머지 % 연산을 이용해서 값이 0~3 사이를 반복하도록 한다.

나누기   몫     나머지
0 / 4 = 0 ... 0
1 / 4 = 0 ... 1
2 / 4 = 0 ... 2
3 / 4 = 1 ... 3
4 / 4 = 1 ... 0
5 / 4 = 1 ... 1
6 / 4 = 1 ... 2
7 / 4 = 1 ... 3
8 / 4 = 1 ... 0

function mouseClicked() {
    colorIndex = colorIndex + 1;  // 1을 더해서 업데이트
    colorIndex = colorIndex % 4;  // 나머지 연산으로 0~3 사이로 가두기.
}

마우스 참고 예제

• 이징, 속도감: https://p5js.org/ko/examples/input-easing.html

• 마우스 클릭, 드래그: https://p5js.org/ko/examples/input-mouse-functions.html

• 마우스 신호: https://p5js.org/ko/examples/input-mouse-signals.html