그리고 이것 :
그리고 물론 여기에서 찾을 수있는 모든 것. 그러나, 우리가 이전에 processing.js를 가지고 있다면, p5.js는 무엇입니까?
키 테이크 아웃 p5.js는 처리 언어의 직접적인 JavaScript 포트로, 아티스트, 디자이너, 교육자 및 초보자가 코딩에 액세스 할 수 있도록하는 반면, Processing.js는 순수한 처리 코드를 즉시 JavaScript로 해석하는 변환기입니다. <.> P5.DO.JS와 같은 AddON 라이브러리로 P5.JS를 확장 할 수 있으며,이 라이브러리는 P5로 HTML 요소를 생성하고 조작하는 옵션, 슬라이더, 버튼, 형태 요소 등을 스케치에 추가합니다. >성능 측면에서, Processing.js는 텍스트에서 시도 된 두 데모에서 두 데모에서 더 잘 성능을 발휘하여 약 58 ~ 60의 꾸준한 프레임 속도를 유지하는 반면, P5는 그림을 그리면 50 개로 낮아집니다. 그리고 유휴 상태 일 때 최대 60으로 되돌아갑니다.
p5.js 란 무엇입니까?
를 목표로하는 JavaScript 라이브러리입니다
> 클릭 했습니까? 지금 가져와? 아니요? 좋아요. 고장합시다.
라이브 컴파일 vs 언어 번역 : Processing.js는 원시 처리 코드 (유형 및 모두가있는 Java와 유사한)를 사용하여 즉시 JavaScript로 변환하는 라이브러리입니다. Processing.js 웹 사이트의 브라우저에서 실행되는 예제는 실제로 JS로 라이브로 번역 된 순수한 처리 코드입니다. 예를 들어이 변환은 DART2JS를 사용하여 DART VM이 내장되지 않은 브라우저에서 DART 코드를 실행할 때 얻는 것과 유사합니다. 반면, P5는 처리를 JS 코드로 완전히 변환 한 것입니다. 모든 기능은 결국 번역되며 JavaScript로 작성하게됩니다. <.> Processing.js에서는 PDE 파일 (프로세스 소스 코드가있는 파일)으로 이어지는 데이터 소스가있는 캔버스 영역을 정의해야합니다. 대안적인 접근법도 있지만 간단히 말해서 바로 그게 다릅니다. P5에서는 JS 코드를 직접 작성하고 웹 사이트에 포함 된 다른 JS 파일과 같이 실행됩니다. 확장
: 또 다른 차이점은 P5를 Addon 라이브러리로 확장 할 수 있다는 것입니다. 예를 들어, p5.dom.js 라이브러리 추가는 P5를 사용하여 HTML 요소를 생성하고 조작하는 옵션을 추가하고 슬라이더, 버튼, 폼 요소 등을 스케치에 추가합니다. 이전 섹션.데모 전체 요점을 얻기 위해 데모 비교를 보자. 각 접근 방식에 동일한 데모를 포함하는 Github 리포지토리를 만들었습니다.
p5.js
이 경우 스케치 코드가 포함 된 Sketch.js 파일과 실행되는 index.html 파일이 필요합니다. sketch.js 코드는 다음과 같습니다
그런 다음 index.html 파일 : 가 있습니다
<span>git clone https://github.com/Swader/processing</span>
데모 2
p5 
위에서 번역 될 때 P5에 대한 코드는 다음과 같습니다.
js 코드 쓰기 에 이미 익숙 할 것입니다
<ed> 공식적으로 프로세싱 재단 <h3>
Dom Library Addon을 사용한 HTML DOM 조작 - P5 스케치에 일반적인 HTML 요소 추가 및 더 많은 </h3>
<the>를 그리지 않을 때 자원에서 가벼워집니다
<p>
<using> Processing.js : 사용의 장점
</using></p>
<ing> 당신은 가공을 배우고 비가 아닌 환경에 더 빠르고 휴대가 가능한 환경에서 사용할 수 있습니다.
<a>는 더 꾸준한 프레임 속도를 가지고 있으며 두 데모에서 더 잘 수행합니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>function setup() {
</span><span> createCanvas(640, 480);
</span><span>}
</span><span>
</span><span>function draw() {
</span><span> if (mouseIsPressed) {
</span><span> fill(0);
</span><span> } else {
</span><span> fill(255);
</span><span> }
</span><span> ellipse(mouseX, mouseY, 80, 80);
</span><span>}</span></pre><div class="contentsignin">로그인 후 복사</div></div>
<keeping> 우리는이 라이브러리를 주시하고 정기적으로 연주 할 것입니다. 당신은? 흥미로운 예를 들여다 보면 알려주세요. 우리는 그들에 대해 글을 쓰고 싶습니다! <h3><questions> Processing.js 및 P5.js 에 대한 자주 묻는 질문 (FAQ)
<main> Processing.js와 P5.JS의 주요 차이점은 무엇입니까? 그러나 몇 가지 주요 차이점이 있습니다. Processing.js는 Java로 작성된 원래 프로세싱 언어의 포트로 JavaScript로 작성되었습니다. 기존 처리 코드와 호환되도록 설계되었으므로 수정되지 않은 처리 스케치를 실행할 수 있습니다. 반면, P5.JS는 웹을 위해 처음부터 설계된 처리 원칙에 대한 새로운 해석입니다. 그것은 더 간단하고 JavaScript와 같은 구문과 미디어 및 상호 작용을 처리하기위한보다 현대적이고 웹 친화적 인 접근 방식을 가지고 있습니다. <h2> </h2> P5.JS는 처리하는 것보다 학습하기가 더 쉽습니다. , P5.JS는 일반적으로 Processing.js, 특히 초보자를 위해 학습하기가 더 쉽게 간주됩니다. P5.JS는 표준 JavaScript에 더 가까운 더 단순하고 직관적 인 구문을 가지고 있기 때문입니다. 또한 마우스 및 키보드 입력, 이미지 및 사운드로드 및 캔버스 드로잉과 같은 기능을 갖춘 미디어 및 상호 작용 처리에 대한보다 사용자 친화적 인 접근 방식이 있습니다. 또한 P5.JS는 튜토리얼, 예제 및 우호적 인 포럼을 포함하여 매우 활발한 커뮤니티와 풍부한 학습 리소스를 보유하고 있습니다. <h3> </h3> 동일한 프로젝트에서 Processing.js 및 P5.JS를 함께 사용할 수 있습니까? <p> 동일한 프로젝트에서 Processing.js와 P5.JS를 모두 사용하는 것이 기술적으로 가능하지만 일반적으로 권장되지 않습니다. 두 라이브러리에는 매체 및 상호 작용 처리에 대한 구문과 접근 방식이 다르기 때문에 혼란과 호환성 문제가 발생할 수 있기 때문입니다. 대신, 일반적으로 하나의 라이브러리를 선택하고 프로젝트 기간 동안이를 고수하는 것이 좋습니다. </p> Processing.js를 사용하는 장점은 무엇입니까? Processing.js는 기존 처리 코드와의 호환성입니다. 웹에서 실행하려는 프로세싱 스케치가있는 경우 Processing.js를 사용하여 최소한의 수정으로 수행 할 수 있습니다. 또한 Processing.js는 일부 프로그래머에게 더 친숙 할 수있는 전통적인 Java와 같은 구문을 가지고 있습니다. <h3> P5.js를 사용하는 것의 장점은 무엇입니까? P5.js는 가지고 있습니다. Processing.js에 대한 몇 가지 장점. 첫째, 표준 JavaScript에 더 가깝게 더 간단하고 직관적 인 구문이있어 쉽게 학습하고 사용하기가 쉽습니다. 둘째, 마우스 및 키보드 입력, 이미지 및 사운드 로딩 및 캔버스 드로잉과 같은 기능을 갖춘 미디어 및 상호 작용을 처리하는보다 현대적이고 웹 친화적 인 접근 방식이 있습니다. 마지막으로, P5.JS는 매우 활발한 커뮤니티와 풍부한 학습 자원을 보유하고있어 초보자와 숙련 된 프로그래머 모두에게 훌륭한 선택입니다.<process> 상업 프로젝트에 Processing.js 또는 P5.JS를 사용할 수 있습니까? <h3> 예, Processing.js와 P5.JS는 상용 프로젝트에 사용할 수있는 오픈 소스 라이브러리입니다. 그러나 상업 프로젝트에서 사용하는 모든 라이브러리 또는 도구의 특정 라이센스 조건을 확인하여 준수하는지 확인하는 것이 좋습니다. </h3> Processing.js와 P5 중에서 어떻게 선택합니까? 내 프로젝트의 JS? <p> Processing.js와 P5.JS 간의 선택은 특정 요구 사항과 선호도에 달려 있습니다. 웹에서 실행하려는 기존 처리 코드가 있거나 전통적인 Java와 같은 구문을 선호하는 경우 Processing.js가 더 나은 선택 일 수 있습니다. 반면에, 처음부터 새로운 프로젝트를 시작하거나 더 단순하고 더 단순하고 더 많은 JavaScript와 같은 구문과 미디어 및 상호 작용을 처리하는보다 현대적이고 웹 친화적 인 접근 방식을 선호하는 경우 P5.JS가 더 나은 선택. </p> <h3> Processing.js와 P5.js 사이의 성능 차이가 있습니까? 그리고 애니메이션은 부드럽습니다. 그러나 모든 JavaScript 라이브러리의 성능은 코드의 복잡성, 코드를 실행하는 장치의 기능 및 웹 브라우저에서 JavaScript 엔진의 효율성을 포함한 다양한 요소의 영향을받을 수 있습니다. 따라서 최적의 성능을 보장하기 위해 다양한 장치와 브라우저에서 코드를 테스트하는 것이 좋습니다. </h3> 다른 JavaScript 라이브러리 또는 프레임 워크와 함께 Processing.js 또는 P5.JS를 사용할 수 있습니까? <p> 예, Processing.js 및 P5.JS는 모두 다른 JavaScript 라이브러리 또는 프레임 워크와 함께 사용할 수 있습니다. 그러나 잠재적 호환성 문제를 인식하고 모든 것이 예상대로 작동하는지 확인하기 위해 코드를 철저히 테스트하는 것이 중요합니다. </p> 처리를위한 학습 리소스를 찾을 수있는 곳은 어디에서 찾을 수 있습니까? > Processing.js와 P5.JS는 모두 풍부한 학습 리소스를 사용할 수 있습니다. Processing.js의 경우 튜토리얼, 예제 및 참조 안내서가있는 공식 프로세싱 웹 사이트부터 시작할 수 있습니다. P5.JS의 경우 튜토리얼, 예제, 참조 안내서 및 친절한 포럼이있는 공식 P5.JS 웹 사이트로 시작할 수 있습니다. 또한 두 라이브러리 모두에 사용할 수있는 온라인 자습서, 비디오 및 코스가 많이 있습니다.</process>
</h3></main></questions></h3></keeping></a></ing></the></ed>
위 내용은 Processing.js vs P5.JS- 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
