본문 바로가기

★ 프로그래밍94

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.
대학원 : 경인교대 대학원 인공지능융합교육과 면접 예상 질문 1. 왜 지원하게 되었는가? 얼마전부터 프로그램 공부를 시작하였고, 혼자서 공부 하였지만 전문가의 도움이 필요한 시점이 왔습니다. 조금 더 체계적으로 공부를 시작해 보고자 대학원을 지원하게 되었습니다. * 어떻게 공부하고 있는가? 처음에는 교육청 및 지원청 인공지능 연수를 찾아 다녔습니다. 인천시 교육청에서 진행한 인공지능융합교육 기초연수 1)파이썬연수와 2)자바스크립트, 머신러닝 라이브러리 연수를 이수하였습니다. 개인적으로는 파이썬 책을 1권 구매하여 예제 200개를 직접 작성하며 공부하였고, 현재 자바스크립트 책 1권과 P5.js 예제와 래퍼런스를 보며 공부하고 있습니다. 2. 굳이 대학원 까지 진학할 필요가 있는가? 본인은 운동학습과 운동제어에 관심이 많습니다. 그 중 (정확성, 효율적) 동작 분석.. 2020. 11. 27.
반응형

티스토리툴바