본문 바로가기
processing

[processing] Chapter3_Interaction

by Meaning_ 2022. 3. 10.
728x90
반응형

ellipseMode()

ellipse의 매개변수를 통해 ellipse가 그려지는 위치를 수정하는 것이다. 

 

ellipseMode(CENTER)

 

기본모드이다. 처음 두 매개변수가 ellipse의 중심점을 말하고, 3번째와 4번째 변수가 너비와 높이를 말한다. 

 

ellipseMode(RADIUS)

 

얘 또한 처음 두개의 매개변수를 도형의 중심점으로 잡고, 3번째 4번째 매개변수는 도형의 너비 및 높이를 설정하는데, 이때 매개변수에 들어간 인자의 2배의 크기의 도형이 출력된다. 

 

ellipseMode(CORNER)

 

얘는 ellipse(왼쪽 위의 x좌표,왼쪽 위의 y좌표, 너비,높이) 이다.

 

 

ellipseMode(CORNERS)

 

왼쪽 위 x,y좌표 오른쪽 끝 x,y좌표를 정해서 대략적인 크기를 정해주는 함수이다.

 

 

setup() , draw()

setup()은 첫번째만 실행되는 것이다.

size()는 반드시 setup함수의 첫번째 줄에 있어야 한다.

 

draw는 내가 창을 끌때까지 반복된다. 

mouseX, mouseY

mouseX는 현재 사용자의 마우스가 가리키는 수평좌표 값을 반환한다.

mouseY는 반대로 현재 사용자의 마우스가 가리키는 수직좌표의 값을 반환한다.

 ellipse(mouseX,mouseY,너비,높이)를 해주면 내가 마우스를 움직일 때마다 그 자리에 원이 생긴다.

rect이나 triangle을 하면 사각형이나 삼각형이 생길 것이다.

 

이렇게 하면 원과 사각형이 함께 움직인다.

 

pMouse

pMouseX, pMouseY는 직전 프레임의 마우스 좌표를 저장하는 변수이다. 

선을 그어줄 때 이전의 마우스 위치에서 현재의 마우스 위치까지 선을 그어준다. 

 

 

Mouse Key Events

mousePressed()와 keyPressed()가 있다. 

마우스를 누르면 사각형이 생기고, 키보드의 자판을 누르면 사각형이 사라지는 프로그램을 구현해볼 것이다. 

여기서 중요한 것은 draw()함수 안에 아무것도 안쓴다고 해서 draw함수를 지우면 안된다.

이걸 지우면 아무것도 안그려진다..ㅋㅋㅋ

 

frameRate()

초당 표시할 프레임 수를 지정한다. 예를 들어 frameRate(30)이면 1초당 30회의 새로 고침을 시도한다.  

이것과 연결된 기능이 frameCount인데 이것은 현재 화면에 출력되는 fps값을 반환한다.

 

frameCount를 사용해 도형이 깜빡이는 효과를 구현해보았다.

 

 

 

translate()

도형의 좌표체계를 변환하는 함수이다. 

 

예를 들어 동그라미 사각형이 붙어있는 이 도형을 마우스의 위치에 따라 생기게 하고 싶으면

일일이 rect(mouseX,mouseY,너비,높이) ellipse(mouseX,mouseY,너비 ,높이) 를 하는 방법도 있지만

애초에 translate(mouseX,mouseY)를 통해 마우스의 위치에 따라 도형의 위치가 변할 수 있는 것을 명시한 후

rect과 ellipse의 x,y좌표에는 상대적인 위치만 넣어준다. 

https://randomflik.blogspot.com/2016/08/processing.html

 

[Processing] 좌표계와 이동의 기본개념

프로세싱의 좌표계가 어떻게 이루어져있는지와 변환(Transformation) 개념, 그리고 이어서 평행이동 함수인 translate()에 대한 설명

randomflik.blogspot.com

 

 

tweak

tweak은 변수를 조절하는 것인데 파일을 저장하고 스케치 -> 변수조정하기(tweak)을 하면 

 

원래 이랬던 화면이

이렇게 형광펜 쳐있는 부분에 보이는 색깔 사각형이 생겨난다.

이 사각형을 선택하면 색깔을 더 세밀하게 조절할 수 있다. 

 

색깔만 조절할 수 있는 것이 아니다. 도형의 위치도 조절할 수 있다.

 

화살표가 보이는 부분을 길게 누르면 도형의 위치도 내 마음대로 편하게 조절할 수 있다. 

 

// 혼자서 레퍼런스 보며 하나하나씩 실습하고 기능을 써보며 느낀것을 쓰는 것이기에 기능을 잘못 전달했을 수도 있습니다. (그럴 확률이 매우 높습니다..) 그래서 틀린부분이 있다면 댓글에 써주세요. 어떤 지적도 공부하는 입장에서 감사히 받겠습니다!!

728x90
반응형

'processing' 카테고리의 다른 글

[Processing] Chapter 7_function/ Chapter8_Object  (0) 2022.03.13
[Processing] Chapter5_조건문  (0) 2022.03.12
[Processing] Chapter4_variables  (0) 2022.03.12
[Processing] bounce ball  (0) 2022.03.10
[processing] Chapter1_Pixel,Shape  (0) 2022.03.03

댓글