p5.js 기본 도형 그리기 - 호(arc) 그리기
호(arc) 그리기
호(arc) 그리기의 기본이 되는 문법은 arc(x, y, w, h, start, stop, [mode], [detail])이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.0/p5.min.js"></script>
<title>HALF_PI 호 그리기</title>
</head>
<body>
<script>
function setup(){
createCanvas(400,400);
background('#f0f0f0');
}
function draw(){
arc(200,200,300,300,0,HALF_PI);
// 기준 좌표(200,200)을 기준으로 가로 세로 300px이며 시작점이 0, 끝점이 90도인 호
}
</script>
</body>
</html>
ellipse() 함수와 마찬가지로 arc() 함수도 x, y 좌표가 원호 중앙의 기준점이 된다.
위의 실행 화면을 보면 기본적으로 호는 닫혀있지 않고 열려 있는 상태임을 알 수 있다.
모드를 변경하면 닫힌 호를 그릴 수 있으니 아래 선택사항을 확인해 보기 바란다.
arc() 함수의 선택사항
[mode], [detail]은 생략 가능한 항목으로 각각 아래와 같은 값을 의미한다.
- mode : 호를 그리는 방식들로, CHORD(닫힌 반원), PIE(닫힌 파이 조각), OPEN(반원) 중 선택 가능
모드를 선택하기 전에는 열린 파이 조각의 형태로 그려짐 - detail : WebGL 모드를 위한 선택적 변수로, 호의 윤곽선을 구성하는 꼭짓점 개수를 지정. 기본값은 25.
arc() 함수에서 각도 값을 나타내는 명칭
호의 각도 값(0도를 기준으로 함)은 아래와 같으니 잘 알아 두자!
- 0도 = 0
- 45도 = QUARTER_PI
- 90도 = HALF_PI
- 180도 = PI
- 270도 = PI+HALF_PI
- 360도 = TWO_PI
arc() 함수를 이용한 각도 그리기 연습
function setup(){
createCanvas(400,400);
background('#f0f0f0');
}
function draw(){
arc(200,200,320,320,0,TWO_PI);
noFill();
arc(200,200,200,200,0,QUARTER_PI,PIE); //PIE 모드를 사용하여 닫힌 파이 조각으로 나타냄
arc(200,200,150,150,QUARTER_PI,HALF_PI);
arc(200,200,100,100,HALF_PI,PI);
arc(200,200,150,150,PI,PI+HALF_PI);
arc(200,200,250,250,PI+HALF_PI,TWO_PI);
}
arc() 함수를 이용해 스마일 그리기
function setup(){
createCanvas(400,400);
background('#f0f0f0');
}
function draw(){
// 얼굴 그리기
fill('yellow');
arc(200,200,320,320,0,TWO_PI);
// 눈 그리기
fill('black');
arc(150,160,30,50,0,TWO_PI);
arc(250,160,30,50,0,TWO_PI);
// 입 그리기
noFill();
arc(200,230,180,150,0,PI);
}
* p5.js를 공부하면서 그 내용을 기록하는 글입니다. 잘못된 내용이 있다면 댓글로 알려주세요!
p5.js 기본 도형 그리기 - 타원 그리기
p5p5.js 기본 도형 그리기 - 타원 그리기 타원 그리기 타원 그리기의 기본이 되는 문법은 ellipse(x, y, w, [h])이다. 타원그리기 rect() 함수는 x, y 좌표가 좌측 상단의 기준점이 되지만..
wonder-future.tistory.com
p5.js 시작하기
웹브라우저 상에서 모션그래픽을 할 수 있는 p5.js는 자바스크립트를 할 수 있으면 더 잘 다룰 수 있다고 한다. 정말 기본적인 자바스크립트 밖에 모르는 무지렁이인 나는 .... 그래도 포기하지 않
wonder-future.tistory.com
'지식 확장 > p5.js' 카테고리의 다른 글
| KMOOC] 예술가와 디자이너를 위한 아트 코딩 2주 차 실습 예제 (0) | 2021.04.18 |
|---|---|
| KMOOC] 예술가와 디자이너를 위한 아트 코딩 1주차 실습 예제 (0) | 2021.04.18 |
| p5.js 기본 도형 그리기 - 타원 그리기 (0) | 2021.04.17 |
| p5.js 기본 도형 그리기 - 직사각형 그리기 (0) | 2021.04.11 |
| p5.js 기본 도형 그리기 - 점 · 삼각형 그리기 (2) | 2021.04.11 |
