p5.js 기본 도형 그리기 - 점 · 삼각형 그리기

점 그리기

점 그리기의 기본이 되는 문법은 point(x, y, [z])이다. 

z좌표 값은 WebGL 모드용이라고 레퍼런스 페이지에 설명돼 있는데 필수 값은 아니기에 여기서는 x, y 좌표만을 이용하여 점을 그려보도록 하겠다. 

function setup(){
	createCanvas(400,400);
	background('#f0f0f0');
}
function draw(){
    stroke('lightgray'); // 점의 색상을 연회색으로 지정
    strokeWeight(10); // 점의 두께를 10px으로 지정
    point(50, 50);  
    point(350, 50);  
    stroke('#000'); // 점의 색상을 검정색으로 지정
    point(350, 350);  
    stroke('red');  // 점의 색상을 붉은색으로 지정
    point(50, 350);  
}

 

 

point 함수 실행 화면

 

point 함수는 화면 좌표에 해당하는 1픽셀 크기의 점을 그리는 것으로,
점의 크기나 색상을 변경하고 싶을 경우 point 함수 앞에 지정해 주면 된다. (위의 소스 코드 참고)

 

 

점의 크기와 색상 설정

• 점의 크기 : 기본값은 1px이며 strokeWeight() 함수를 사용하여 크기 변경 가능
• 점의 색상 : 기본값은 검정이며 stroke() 함수를 사용하여 색상 변경 가능

 

 

삼각형 그리기

삼각형 그리기의 기본이 되는 문법은 triangle(x1, y1, x2, y2, x3, y3)이다.

function setup(){
	createCanvas(400,400);
	background('#f0f0f0');
}
function draw(){
	triangle(50, 350, 350, 350, 200, 50);
}

위와 같이 가로, 세로 400 크기의 캔버스를 만들고 triangle(50, 350, 350, 350, 200, 50) 함수를 실행하면,
아래 그림처럼 좌표 1(50, 350), 좌표 2(350, 350), 좌표 3(200, 50)이 이어진 삼각형이 그려진다.

 

triangle(50, 350, 350, 350, 200, 50) 함수 실행 화면

 

직선 그리기에서와 마찬가지로 선 색상과 굵기를 조절하고 싶을 때는 stroke(), strokeWeight() 함수를 각각 사용하여 변경해 줄 수 있다. 

function setup(){
	createCanvas(400,400);
	background('#f0f0f0');
}
function draw(){
	stroke('red');  // 선의 색상을 붉은 색으로 지정
	strokeWeight(5);  // 선의 굵기를 5px로 지정
	fill('#ffd1de');  // 면의 색상을 #ffd1de로 지정
	triangle(50, 350, 350, 350, 200, 50);
}

 

삼각형의 선과 면에 색상을 지정했을 때

삼각형에 두께 5px인 붉은색 선 과 배경색을 지정한 후 실행 화면

 

 

fill() 함수를 이용하면 도형의 면을 채울 색상을 지정할 수도 있다.

 

 

점과 삼각형을 같이 그려보기

function setup(){
	createCanvas(400,400);
	background('#f0f0f0');
}
function draw(){
	stroke('black'); // 삼각형의 선 색상 지정
	strokeWeight(1); // 삼각형의 선 두께 지정
	triangle(50, 350, 350, 350, 200, 50);

	stroke('red'); // 점의 색상을 지정
	strokeWeight(20); // 점의 크기를 지정
	point(50, 350);
	point(350, 350);
	point(200, 50);
}

p5.js 기본 도형 그리기 - 삼각형 그리기

triangle과 point 함수를 같이 실행한 화면

* p5.js를 공부하면서 그 내용을 기록하는 글입니다. 잘못된 내용이 있다면 댓글로 알려주세요!

p5.js 기본 도형 그리기 - 직선 그리기

p5.js 시작하기