Processing.js vs P5.JS- 차이점은 무엇입니까?

며칠 전, P5.JS는 야생으로 방출되었습니다. 처리 교리를 따르는 시각적 프로그래밍을위한 JavaScript 라이브러리입니다. 이 게시물에 따라

프로세싱은 시각적 인 대화식 응용 프로그램을 작성하기가 매우 쉽게 만드는 환경/프로그래밍 언어입니다. 아이들을 가르치는 방법부터 코드 코드, 과학 데이터 시각화에 이르기까지 모든 것에 사용할 수 있습니다.

는 이렇게 마법사 뒤에있는 언어입니다

그리고 이것 :

그리고 물론 여기에서 찾을 수있는 모든 것. 그러나, 우리가 이전에 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는 공식적으로 프로세싱 재단에 의해 지원되며 사용자 처리를위한 전환 매뉴얼이 제공되지만, Processing.js는 가공이 아닌 환경에 더 빠르고 휴대 할 수있는 환경에서 처리를 배우고 사용할 수 있습니다. <.>

p5.js 란 무엇입니까?

를 목표로하는 JavaScript 라이브러리입니다

아티스트, 디자이너, 교육자 및 초보자가 코딩에 액세스 할 수 있도록하고 오늘날의 웹을 위해이를 재 해석하십시오.

그래서, 그것은 자체 처리처럼 들린다. 그러나 그것은 정말 무엇입니까? 혼란스럽고 혼란스러운 독자, 우리는 그것을 얻을 것입니다! 먼저, 놀랍도록 열광적 인 소개를보고 여기로 돌아 오십시오.

> 클릭 했습니까? 지금 가져와? 아니요? 좋아요. 고장합시다.

Processing.js와 P5.js tl; dr : P5는 처리 언어의 직접적인 JS 포트입니다. Processing.js는 순수한 처리 코드를 즉시 JS로 해석하는 변환기입니다. 후자는 가공을 배우지 않아야하지만 JS는 아니지만 그 반대도 마찬가지입니다.

---

라이브 컴파일 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 요소를 생성하고 조작하는 옵션을 추가하고 슬라이더, 버튼, 폼 요소 등을 스케치에 추가합니다. 이전 섹션. 두 가지 중 P5만이 Processing Foundation에서 공식적으로 지원되며 여기에 사용자를 처리하기위한 전환 매뉴얼도 있습니다.

데모 전체 요점을 얻기 위해 데모 비교를 보자. 각 접근 방식에 동일한 데모를 포함하는 Github 리포지토리를 만들었습니다.

프로세싱 폴더에는 처리와 P5의 두 가지 하위 폴더가 있습니다. 각각에는 index.html 파일이 포함 된 Demo1 및 Demo2 하위 디렉터가 포함됩니다. 이것이 브라우저 및 테스트에서 실행할 수있는 것입니다. 첫 번째 샘플은 P5 웹 사이트에서 나온 것입니다. 마우스를 클릭 할 때 검은 색으로 변하는 지속적으로 그려진 타원입니다. js는 ajax 요청 (XHR을 통해)으로 PDE 파일을로드하므로 index.html을 실행하여 브라우저에서 열면 크로스 오리핀 오류가 발생합니다. 올바르게 실행하려면 샘플에 액세스 할 수있는 가상 서버를 설정해야 할 것입니다. 그것은 Vagrant Box에서 개선 된 홈스테드 인스턴스로 가장 잘 이루어집니다. 5 분 안에 가동되어 달리게됩니다. . p5.js 이 경우 스케치 코드가 포함 된 Sketch.js 파일과 실행되는 index.html 파일이 필요합니다. sketch.js 코드는 다음과 같습니다 index.html 파일에는 다음에만 포함됩니다

Processing.js 이 예제에는 처리 코드가있는 PDE 파일이 필요합니다. 우리의 경우, 그것은 다음 p5 번역 코드가 포함 된 sketch.pde입니다.

그런 다음 index.html 파일 : 가 있습니다

<span>git clone https://github.com/Swader/processing</span>

분석 언뜻보기에는 눈에 띄는 차이가 없습니다. 두 샘플 모두 거의 같은 속도로 실행되며 성능이 좋으며 구문이 비슷합니다. 그러나 Google Chrome을 사용하고 Chrome : // 플래그로 이동 한 다음 프레임 속도 카운터를 활성화하면 (아래 이미지 참조) Processing.js 캔버스가 꾸준한 프레임 속도를 유지합니다. P5는 약 58 ~ 60, P5는 그리기시 50 개로 낮아지고 유휴 상태에서 60으로 되돌아갑니다. 또 다른 흥미로운 사실은 가공이 커서가 캔버스 영역 외부에있을 때에도 항상

> 하드웨어 가속도를 사용한다는 것입니다. 반면에 P5는 캔버스의 변경이 없으면 (커서가 드로잉 영역 외부에있는 경우) 렌더링을 일시 중지하므로 드로잉하지 않고 부하를 가볍게합니다.

데모 2 또 다른 데모를하자 - 간단한 입자 효과. 이 입자 이미 터는 무작위 방향으로 중력에 민감한 입자를 생성하며 프레임 속도를 다시 살펴볼 것입니다. 우리가 사용할 예제 (그리고 p5로 번역)는 이것입니다.

Processing.js sketch.pde의 코드는 위의 링크 된 예제입니다.

p5

위에서 번역 될 때 P5에 대한 코드는 다음과 같습니다.

분석 다시 한번, 우리는 Processing.js에서 약간 더 나은 프레임 속도를 볼 수 있습니다. P5는 약 56 세로 유지하는 반면, 가공. JS는 58 세 정도에 서있는 것처럼 보입니다. 두 경우 모두 Processing.js는 승리, 성능면에서 입증되었습니다

결론 P5JS는 현재까지 처리하는 것보다 더 접근하기 쉬운 방식으로 시각적 프로그래밍을 대중에게 가져 오는 것을 목표로하는 젊고 야심 찬 프로젝트입니다. 현재 다소 기능적으로 멍청하게 멍청이가되어 있지만 팀은이 JS에 대한 나머지 처리 언어를 포팅하기가 어려워집니다. Processing.js보다 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">&lt;span&gt;function setup() { &lt;/span&gt;&lt;span&gt; createCanvas(640, 480); &lt;/span&gt;&lt;span&gt;} &lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;function draw() { &lt;/span&gt;&lt;span&gt; if (mouseIsPressed) { &lt;/span&gt;&lt;span&gt; fill(0); &lt;/span&gt;&lt;span&gt; } else { &lt;/span&gt;&lt;span&gt; fill(255); &lt;/span&gt;&lt;span&gt; } &lt;/span&gt;&lt;span&gt; ellipse(mouseX, mouseY, 80, 80); &lt;/span&gt;&lt;span&gt;}&lt;/span&gt;</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 id="P-js를-사용하는-것의-장점은-무엇입니까-P-js는-가지고-있습니다-Processing-js에-대한-몇-가지-장점-첫째-표준-JavaScript에-더-가깝게-더-간단하고-직관적-인-구문이있어-쉽게-학습하고-사용하기가-쉽습니다-둘째-마우스-및-키보드-입력-이미지-및-사운드-로딩-및-캔버스-드로잉과-같은-기능을-갖춘-미디어-및-상호-작용을-처리하는보다-현대적이고-웹-친화적-인-접근-방식이-있습니다-마지막으로-P-JS는-매우-활발한-커뮤니티와-풍부한-학습-자원을-보유하고있어-초보자와-숙련-된-프로그래머-모두에게-훌륭한-선택입니다-process-상업-프로젝트에-Processing-js-또는-P-JS를-사용할-수-있습니까-h-예-Processing-js와-P-JS는-상용-프로젝트에-사용할-수있는-오픈-소스-라이브러리입니다-그러나-상업-프로젝트에서-사용하는-모든-라이브러리-또는-도구의-특정-라이센스-조건을-확인하여-준수하는지-확인하는-것이-좋습니다"> 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 id="Processing-js와-P-js-사이의-성능-차이가-있습니까-그리고-애니메이션은-부드럽습니다-그러나-모든-JavaScript-라이브러리의-성능은-코드의-복잡성-코드를-실행하는-장치의-기능-및-웹-브라우저에서-JavaScript-엔진의-효율성을-포함한-다양한-요소의-영향을받을-수-있습니다-따라서-최적의-성능을-보장하기-위해-다양한-장치와-브라우저에서-코드를-테스트하는-것이-좋습니다"> 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!