집 >웹 프론트엔드 >JS 튜토리얼 >p5.js 입문 튜토리얼 및 기본 도형 그리기

p5.js 입문 튜토리얼 및 기본 도형 그리기

亚连원래의: 2018-05-30 10:09:473069검색

이 글은 주로 p5.js 입문 튜토리얼의 소개와 기본 도형 그리기를 소개하고 참고용으로 올려드립니다.

1. p5.js란 무엇인가

최근에 p5.js를 가르치는 Interactivity라는 디지털 미디어 아트 강좌를 접하게 되었습니다.

강사는 개발자 중 한명입니다... 꽤 기대됩니다.

p5.js는 아티스트와 디자이너를 위해 개발된 Javascript 라이브러리로, 프로세싱의 웹 버전이라고 볼 수 있습니다. 프로세싱을 학습한 경험이 있다면 p5.js를 매우 빠르게 시작할 수 있습니다.

p5.js 사용에 관해서는 저도 초보자라 답변이 어렵습니다.

현재 p5.js는 창의성을 자극하는 좋은 도구라고 생각하며, p5.js의 콘텐츠를 웹페이지에 삽입하여 웹사이트를 더욱 눈부시게 만들 수 있습니다.

2. p5.js를 사용하세요

p5.js에는 온라인 코드 편집기가 있으며 URL은 다음과 같습니다.

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() 함수의 연속 루프 호출에 들어갑니다.

구문은 JavaScript와 크게 다르지 않으며 호출할 특수 함수가 훨씬 더 많다는 것을 알 수 있습니다.

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. 참조 확인

p5.js는 다양한 기능을 제공합니다. 생성을 위한 함수이며 많은 함수에는 여러 개의 오버로드된 함수가 있으므로 여기서는 하나씩 설명하지 않습니다.

p5.js 공식 웹사이트에서는 각 기능을 자세히 설명하는 Reference를 제공합니다. URL은 다음과 같습니다.

https://p5js.org/reference /

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

p5.js 입문 튜토리얼 및 기본 도형 그리기

관련 기사