이 글은 주로 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 입문 튜토리얼 및 기본 도형 그리기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!