p5.js 입문 튜 토리 얼 과 기본 모양 그리 기

1.p5.js 가 무엇 입 니까?
최근 인 터 액 티 비 티 라 는 디지털 미디어 예술 과목 을 접 했 는데 p5.js 를 가 르 쳤 다.
강연 선생님 이 개발 자 중 한 명 이 라......................................................
p5.js 는 예술가,디자이너 를 위해 개 발 된 자바 script 라 이브 러 리 로 Processing 의 웹 버 전 으로 볼 수 있다.Processing 학습 경험 이 있다 면 p5.js 는 손 이 매우 빠르다.
p5.js 가 무슨 소 용이 있 는 지 에 대해 서 는 대답 하기 어렵다.왜냐하면 나 도 초보 자 이기 때문이다.
나 는 현재 p5.js 가 창의 성 을 자극 하 는 좋 은 도구 라 고 생각한다.또한 p5.js 의 내용 을 웹 페이지 에 삽입 하여 당신 의 웹 사 이 트 를 더욱 멋 지게 할 수 있다.
둘째,p5.js 사용
p5.js 는 온라인 코드 편집기 가 있 습 니 다.주 소 는 다음 과 같 습 니 다.
http://alpha.editor.p5js.org/
왼쪽 에 코드 를 입력 하고 실행 단 추 를 누 르 면 오른쪽 에서 코드 실행 효 과 를 볼 수 있 습 니 다.
p5.js 계 정 을 등록 할 수 있 습 니 다.매번 코드 는 공식 사이트 에 저장 할 수 있 습 니 다.수정,테스트 또는 전시 가 매우 편리 합 니 다.
다음 그림 은 ellipse()함수 로 원 을 그 렸 습 니 다.

3.위의 p5.js
p5.js 프로젝트 를 새로 만 들 면 다음 코드 가 생 성 됩 니 다.

function setup() { //setup  ，             ，     。 
 createCanvas(400, 400);//    400x400    
}  
function draw() { //draw  ，    60 ，            
 background(220);//    ，   RGB(220,220,220) 
} 

p5.js 프로그램 은 항상 setup()부터 실 행 됩 니 다.setup()을 한 번 실행 한 후에 draw()함수 의 끊 임 없 는 순환 호출 에 들 어 갑 니 다.
문법 과 자 바스 크 립 트 는 크게 다 르 지 않 고 호출 할 수 있 는 특수 한 함수 가 많이 생 겼 을 뿐 이라는 것 을 알 수 있다.
4.기본 도형 그리 기
p5.js 에서 도형 을 그 리 는 것 은 쉬 운 일이 고 관련 함수 가 많 습 니 다.

function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
  ellipse(100,100,100,100);//    (x,y, , ) 
  triangle(150,150,150,200,200,200);//     (x1,y1,x2,y2,x3,y3) 
  quad(180,100,200,150,270,150,250,100);//     (x1,y1,x2,y2,x3,y3,x4,y4) 
  rect(30, 20, 50, 50);//    (x,y, , ) 
  line(0,0,100,100);//    (x1,y1,x2,y2)      
  arc(200, 50, 50, 50, 0, HALF_PI);//   (x,y, , ,    ,    ) 
} 

효 과 는 다음 그림 과 같다.

물론 라인 색상 과 충전 색 은 모두 교체 할 수 있 고 라인 굵기 도 수정 할 수 있 습 니 다.

function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
   
  stroke(255,128,128); 
  strokeWeight(5); 
  fill(255,200,0); 
  ellipse(100,100,100,100); 
  triangle(150,150,150,200,200,200); 
   
  noStroke(); 
  fill(100,255,0); 
  quad(180,100,200,150,270,150,250,100); 
  rect(30, 20, 50, 50); 
   
  stroke(0); 
  line(0,0,100,100); 
  arc(200, 50, 50, 50, 0, HALF_PI); 
} 

효 과 는 다음 그림 과 같다.

5.참조 조회
p.5.js 는 많은 함 수 를 제공 하여 창작 을 하고 많은 함수 들 이 여러 가지 과부하 함수 가 있 는데 여기 서 일일이 설명 하지 않 습 니 다.
p.5.js 홈 페이지 는 Reference 를 제공 하여 모든 함수 에 대해 상세 하 게 설명 하 였 으 며,이러한 함수 의 용법 을 조회 하여 p.5.js 를 더 배 울 수 있 습 니 다.인터넷 주 소 는 다음 과 같 습 니 다.
https://p5js.org/reference/

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.