본문 바로가기

p5.js6

p5.js 도형을 회전시키기 rotate( ) x축과 y축으로 회전시키기 rotateX( ), rotateY( ) * rotate( ) 사용자가 지정한 각도 매개변수에 따라 도형 회전시키기 이 함수는 angleMode( ) 함수의 영향을 받으며 ( ) 안에 RADIANS 또는 DEGREES를 입력하여 각도가 해석되는 방식을 지정할 수 있음 원점에 대한 상대적 위치를 중심으로 객체가 회전 양수 : 시계방향 회전 rotate( ) 함수는 현재 변환 행렬에 회전 행렬을 곱하는 셈이다. 이 함수는 pusch( ) 와 pop( ) 함수를 통해 추가적으로 제어 가능하다. * rotateX( ) 도형이 x축을 따라 회전 * rotateY( ) 도형이 y축을 따라 회전 [문법] 1) rotate( angle, [axis] ) angle : angleMode의 매개변수인 RADIANS(원주호) 또는 DEGREES(도)의 설정 사항에.. 2020. 12. 1.
p5.js 캔버스에 3차원 상자 그리기 box( ) 사용자가 지정한 너비, 높이, 깊이로 상자를 그리기 [문법] 1) box( [width], [Height], [depth], [detailX], [detailY] ) width : 상자의 너비 값 (선택사항) Height : 상자의 높이 값 (선택사항) depth : 상자의 깊이 값 (선택사항) detailX : (정수) x-차원상의 삼각 세분면 개수 (선택사항) detailY : (정수) y-차원상의 삼각 세분면 개수 (선택사항) ( 동영상 추가하여 넣기) * WEBGL p5.js의 두 가지 렌더링 모드 중 하나 P2D(기본 렌더러) 및 WEBGL 세번째 차원을 도입하여 3D 렌더링을 활성화 함 createCanvas( ), createGraphics( ) 함수 안에 사용됨 createCanvas(WE.. 2020. 12. 1.
p5.js 캔버스에 타원 그리기 ellipse( ) 캔버스에 타원 그리기 eillipse( ) ellipseMode( ) 함수를 사용하여 타원의 시작점을 원의 중심으로 지정할 수 있음. 너비와 높이가 동일한 값으로 지정될 경우 원이 그려지며, 다른 값으로 지정될 경우 타원이 그러짐 높이값 입력을 생략할 경우, 너비값이 높이값으로 동일하게 적용됨 너비값이나 높이값을 음수(-)로 입력해도 절대값이 반영됨 [문법] 1) ellipse( x, y, w, [h] ) x : 타원의 x 좌표 y : 타원의 y 좌표 w : 타원의 너비값 h : 타원의 높이값 2) ellipse( x, y, w, h, detail ) x : 타원의 x 좌표 y : 타원의 y 좌표 w : 타원의 너비값 h : 타원의 높이값 detail : (정수) 타원을 몇 개의 부분으로 나누어 그릴 것.. 2020. 11. 29.
p5.js 마우스의 현재 수평 or 수직 위치 담기 mouseX, mouseY mouseX : 캔버스 (0,0)에 대한 마우스의 현재 수평 위치 담기 mouseY : 캔버스 (0,0)에 대한 마우스의 현재 수직 위치 담기 2D상 (0,0)은 좌측 상단, WebGL상에는 (-너비/2, 높이/2)를 의미한다. 마우스 입력 대신 터치가 사용될 경우 mouseX는 가장 마지막 터치 지점의 x좌표값을 담는다. 마우스 입력 대신 터치가 사용될 경우 mouseY는 가장 마지막 터치 지점의 y좌표값을 담는다. p5.js 마우스 위치 담기 mouseX, mouseY 2020. 11. 28.
p5.js 직사각형 그리기 rect( ) 캔버스에 직사각형 그리기변이 4개이고 모p5.js 직사각형 그리기 rect( )든 변 사이 각도가 90도인 도형rectMode( ) 함수로 사각형 그리기 모드를 변경하면 모든 매개변수값이 다르게 해석됨 [문법] 1)rect(x, y, w, [h], [tl], [tr], [br], [bl] ) x : 직사각형의 x 좌표값 y : 직사각형의 y 좌표값 w : 직사각형의 너비값 h : 직사각형의 높이값 tl : 좌측 상단 모퉁이 각도값 (선택사항) tr : 우측 상단 모퉁이 각도값 (선택사항) br : 우측 하단 모퉁이 각도값 (선택사항) bl : 좌측 하단 모퉁이 각도값 (선택사항) 2)rect( x, y, w, h, [detailX], [detailY] ) x : 직사각형의 x 좌표값 y : 직사각형의 y.. 2020. 11. 28.
p5.js 두 점을 연결하는 곧은 선 그리기 line( ) 화면에 두 점을 연결하는 곧은 선 그리기 이차원 평면 선 stroke( ) 함수로 색상을 지정할 수 있음 선은 면을 갖지 않기 때문에 면채우기 함수인 fill( ) 함수가 적용되지 않음 기본 선 두께 1픽셀 strokeWeight( ) 함수를 사용하여 선 두께를 변경할 수 있음 [문법] 1)line(x1, y1, x2, y2) x1 : 1번째 점의 x 좌표값 y1 : 1번째 점의 y 좌표값 x2 : 2번째 점의 x 좌표값 y2 : 2번째 점의 y 좌표값 2)line(x1, y1, z1, x2, y2, z2) x1 : 1번째 점의 x 좌표값 y1 : 1번째 점의 y 좌표값 z1 : 1번째 점의 z 좌표값 x2 : 2번째 점의 x 좌표값 y2 : 2번째 점의 y 좌표값 z2 : 2번째 점의 z 좌표값 p5... 2020. 11. 21.
반응형

티스토리툴바