728x90
p5p5.js 기본 도형 그리기 - 타원 그리기
타원 그리기
타원 그리기의 기본이 되는 문법은 ellipse(x, y, w, [h])이다.
<!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>타원그리기</title>
</head>
<body>
<script>
function setup(){
createCanvas(400,400);
background('#f0f0f0');
}
function draw(){
ellipse(200,200,300);
//타원의 중심 기준 좌표 (200,200)를 기준으로 가로 세로 300px 인 원
}
</script>
</body>
</html>
rect() 함수는 x, y 좌표가 좌측 상단의 기준점이 되지만,
ellipse() 함수는 x, y 좌표가 타원 중앙의 기준점이 된다는 차이가 있다.
타원의 가로 세로 높이를 다르게 그리고 싶을 경우 높이 값을 추가로 지정해 주면 된다.
* p5.js를 공부하면서 그 내용을 기록하는 글입니다. 잘못된 내용이 있다면 댓글로 알려주세요!
p5.js 기본 도형 그리기 - 직사각형 그리기
p5.js 기본 도형 그리기 - 직사각형 그리기 직사각형 그리기 직사각형 그리기의 기본이 되는 문법은 rect(x, y, w, [h], [tl], [tr], [br], [bl])이다. function setup(){ createCanvas(400,400); backgro..
wonder-future.tistory.com
p5.js 시작하기
웹브라우저 상에서 모션그래픽을 할 수 있는 p5.js는 자바스크립트를 할 수 있으면 더 잘 다룰 수 있다고 한다. 정말 기본적인 자바스크립트 밖에 모르는 무지렁이인 나는 .... 그래도 포기하지 않
wonder-future.tistory.com
반응형
'지식 확장 > p5.js' 카테고리의 다른 글
| KMOOC] 예술가와 디자이너를 위한 아트 코딩 1주차 실습 예제 (0) | 2021.04.18 |
|---|---|
| p5.js 기본 도형 그리기 - 호(arc) 그리기 (0) | 2021.04.18 |
| p5.js 기본 도형 그리기 - 직사각형 그리기 (0) | 2021.04.11 |
| p5.js 기본 도형 그리기 - 점 · 삼각형 그리기 (2) | 2021.04.11 |
| p5.js 기본 도형 그리기 - 직선 그리기 (0) | 2021.04.04 |
