본문 바로가기

★ 프로그래밍/º P5.js12

p5.js 캔버스에 삼각형 그리기 triangle( ) 캔버스에 삼각형 그리기 [문법] 1) triangle( x1, y1, x2, y2, x3, y3 ) x1 : 1번째 꼭지점의 x 좌표값 y1 : 1번째 꼭지점의 y 좌표값 x2 : 2번째 꼭지점의 x 좌표값 y2 : 2번째 꼭지점의 y 좌표값 x3 : 3번째 꼭지점의 x 좌표값 y3 : 3번째 꼭지점의 y 좌표값 p5.js 한 점을 중심으로 넓이가 달라지는 삼각형 만들기 triangle( ) + mouseX + mouseY 2020. 12. 1.
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 도형 선 두께 strokeWeight( ) 및 선 색 변경하기 stroke( ) 1) stroke( ) 그려질 선 또는 도형의 윤곽선 색상을 설정 색상값은 coloerMode( ) 로 지정된 현재 색상 모드에 따라 RGB 또는 HSB 로 지정 기본값으로 제공되는 색상모드는 RGB 이며 색상 범위는 0부터 255 까지 지정 가능 문자열 인수에 대해 RGB, RGBA, Hex CSS 색상 문자열과 더불어 명명된 모든 색상 문자열이 지원됨 단, 투명도 알파값을 설정하지 위해서는 반드시 RGBA를 사용해야 함 2) strokeWeight( ) 선, 점, 도형 윤곽선을 그릴때 쓰이는 함수인 stroke( ) 의 결과값 두께를 설정 모든 두께는 픽셀 단위로 지정됨 [문법] 1) stroke( v1, v2, v3, [alpha] ) 2) stroke( value ) 3) stroke( value.. 2020. 11. 29.
무료 온라인 HTML 컬러코드 찾기 사이트 : 컬러코드 찾기 1) HTML 컬러차트 코드 찾기 사이트 HTML 컬러 코드 HTML 컬러 차트 사각형 모양의 컬러버튼을 클릭하여 HTML 컬러 코드를 찾으세요. HTML 컬러 코드 이론 "이 이상한 기호와 숫자와의 조합이 어떤 의미가 있을까?" 하고 궁금하신가요. 그 답은 "예" 입 html-color-codes.info 2020. 11. 29.
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.
반응형

티스토리툴바