[JavaScript] p5.js를 통해 프로그래밍 이해하기

교재 : 비전공자를 위한 프로그래밍 입문 

[JavaScript 웹 편집기 - p5.js] : http://p5.js Web Editor

p5.js를 통해 프로그래밍 원리를 이해하고, 프로그래밍 기초 문법과 개념을 알아보자.

 

 

p5.js : JavaScript 언어를 사용하는 웹 편집기

JavaScript : 웹브라우저에서 작동하는 언어 (HTML, CSS와 같은 마크업 언어와 같이 사용됨)

 

 

[용어 정리]

· function(펑션) : 함수

   function 뒤에는 setup()이나 draw()가 쓰인다.

function setup() {
  （한번만 실행하고 싶은 것을 작성）
}

function draw() { 
  （반복해서 실행하고 싶은 것을 작성）
}

· argument(아규먼트) : 인수 

   - 테이블에서 구하는 항목이나 함수를 발견하는 데 필요한, 이미 알고 있는 관련 요소

  - 함숫값을 결정하는 변수. 함수의 매개 변수들은 함수명 다음의 괄호 속에 나열한다. 함수 정의에 의해 정의된 함수는 매개 변수들을 이용하여 함숫값을 계산한다.

 

 

[함수 정리]

createCanvas() : 캔버스 크기 결정

background() : 배경 색상 지정 (3개의 인수를 통해 RGB 값 산출)

createCanvas(x축 캔버스크기, y축 캔버스크기)
background(R, G, B) // RGB값 숫자로 입력

 

 

· 도형

circle() : 원(ellipse보다 인수가 1개 적음)

ellipse() : 타원

rect() : 사각형

square() :정사각형

triangle() : 정삼각형

quad() : 삼각형

line() : 선

circle(x좌표, y좌표, 직경) //원에서 좌표는 원의 중심점이 된다.

ellipse(x좌표, y좌표, x축직경, y축직경)

rect(x좌표, y좌표, x축길이, y축길이) //사각형에서 좌표는 좌상구석이 중심점이 된다.

square(x좌표, y좌표, 한변의길이)

triangle(x1, y1, x2, y2, x3, y3)

quad(x1, y1, x2, y2, x3, y3, x4, y4)

line(시작점의x좌표, 시작점의y좌표, 종점의x좌표, 종점의y좌표)

 

· 채우기

fill() : 채우기 (3개의 인수를 통해 RGB값 산출)

noFill() : 채우기X

fill(R, G, B) //RGB값을  숫자로 입력하여 색깔 내기

noFill(); // 채우기를 없애는거라 값을 따로 입력하지 않아도 됨

 

· 테두리

stroke() : 테두리 선 (3개의 인수를 통해 RGB 값 산출)

strokeweight() : 선 두께 

noStroke() : 테두리X

stroke(R, G, B) // RGB값 숫자로 입력

strokeweight(숫자) 

noStroke(); // 테두리를 없애는 기능이기때문에 값을 따로 입력하지 않아도 됨

 

· 반복

noLoop() : 반복을 중단한다. 

noLoop(); // 값 입력 없이 사용

(p5.js 특성 때문에 noLoop를 걸지 않으면 1분에 60번 반복됨.)

 

function draw() : 괄호() 안에 기술된 코드는 반복적으로 실행된다.

for문도 반복문이기 때문에 noLoop를 이용할 수 있음.

 

 

---

[예제]

# 원, 사각형 만들기

function setup() {
  createCanvas(400, 400);
  noLoop(); //반복작업 중지
}

function draw() {
  background(102, 105, 160); //배경색상 지정
  ellipse(200,200,80,80); //이립스:원을 그림
  
  circle(100, 100, 100); //원은 가운데가 시작점
  square(100, 100, 100); //사각형은 왼쪽 상단 꼭지점이 시작점
  // sircle과 square의 시작점(원점)의 위치가 각 다름
  
}

▽ 실행 화면 ▽

 

 

 

# 타원, 직사각형, 삼각형, 선 만들기

function setup() {
  createCanvas(420, 520);
  noLoop(); //반복작업 중지
}

function draw() {
  background(102, 103, 171); //배경색상 지정
  
  ellipse(100, 100, 100, 80); //타원을 그릴때는 4개의 인수를 입력
  circle(300, 100, 80, 80);
  
  rect(50, 210, 100, 80); // 직사각형
  square(260, 210, 80); //정사각형
  
  triangle(50, 400, 120, 350, 150, 450);
  quad(240, 400, 300, 350, 360, 420, 330, 450);
  
  line(210, 50, 210, 450);
  
}

▽ 실행 화면 ▽

 

 

#원 채우기, 선 두께 이용하기

function setup() {
   createCanvas(500, 300);
}

function draw() {
   background(102, 103, 171);

   fill(0, 128, 255); // 채우기（파랑）
   circle(100, 100, 80);

   stroke(255, 128, 0); // 선색상（오렌지）
   circle(200, 100, 80);

   strokeWeight(10); //선두께（10픽셀）
   circle(300, 100, 80);

   noFill(); // 채우기 없음
   strokeWeight(1); // 선두께 (1픽셀)
   stroke(0); // 선색상(검정)
   circle(400, 100, 80);
}

▽ 실행 화면 ▽

 

 

 

 

# RGB 색상 코드표

https://cityattack.tistory.com/69

[색상표] RGB 컬러 색상표