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

p5.js 기본 도형 그리기

직선 그리기

직선 그리기의 기본이 되는 문법은 line(x1, y1, x2, y2)이다.

function setup(){
	createCanvas(400,400);
	background('#f0f0f0');
}
function draw(){
	line(20, 20, 380, 380);  // 좌표1(20, 20)에서 좌표2(380, 380)까지 이어진 선
}

 

위와 같이 가로, 세로 400 크기의 캔버스를 만들고 line(20, 20, 380, 380) 함수를 실행하면,
아래 그림처럼 좌표 1(20, 20)에서 좌표 2(380, 380)까지 이어진 사선이 그려진다.

 

line(20, 20, 380, 380) 함수 실행 화면

 

 

직선의 두께와 색상 설정

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

※ line의 색상이나 두께를 지정할 때는 반드시 line 함수보다 앞서 지정해 주어야 한다. (아래 코드 참조)

function setup(){
	createCanvas(400,400);
	background('#f0f0f0');
}
function draw(){
	stroke('gray');  // 선의 색상을 지정. 기본 색상은 검정색임
	strokeWeight(5);   // 선의 두께를 설정. 기본 두께는 1px임
	line(20, 20, 380, 20);
	line(380, 20, 380, 380);
	line(380, 380, 20, 380);
}

 

색상과 두께를 한 번만 지정했을 때 

line1 ~ line3 실행 화면

 

만약 각 line의 색상이나 두께를 달리하고 싶다면, 해당 line 앞에 각각 stroke, strokeWeight를 설정해 주면 되겠다.

stroke의 색상값은 색상명, 16진 표기, RGB표기 모두 다 지정 가능하다.

function setup(){
	createCanvas(400,400);
	background('#f0f0f0');
}
function draw(){
	stroke('gray');   // 색상명으로 색상 지정
	strokeWeight(5);
	line(20, 20, 380, 20);   //line 1
    
	stroke('255');    // RGB 표기법으로 색상 지정
	strokeWeight(15);
	line(380, 20, 380, 380);   //line 2
    
	stroke('#f00');   // 16진 표기법으로 색상 지정
	strokeWeight(2);
	line(380, 380, 20, 380);   //line 3
}

 

각 선분의 색상과 두께를 달리 지정했을 때 

line1 ~ line3 의 색상과 두께를 각기 달리 설정한 후 실행 화면

 

 

p5.js 기본 구조와 좌표체계