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