p5.js 입문 튜 토리 얼 과 기본 모양 그리 기
3335 단어 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/
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
P5.js 한국어 참조 (플레인)이 페이지에서는 의 plane 함수에 대해 설명합니다. 설명문 지정된 폭과 높이로 평면을 그립니다. 구문 plane([width], [height], [detailX], [detailY]) 매개변수 width Num...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.