Processing.js 사용 : 하나의 데이터 처리 소스 인 sketch.pde가있는 여러 캔버스를 사용할 수 있습니까?

Processing.js를 사용하면 내가하려는 일이 가능한지 알고 싶습니다. Pomax의 튜토리얼 Processing.js에서 JS 개발자 페이지의 빠른 시작 인 PJS Google 그룹을 살펴 보았습니다. 질문에 대한 답변을 찾지 못하는 것 같습니다. "여러 개의 캔버스를 가질 수 있습니까? 모두 동일한 처리 스케치 (아래 예제에서는 engine.pde)를 사용합니다. 각 캔버스는 스케치에 변수를 전달하여 결과가 처리되는 동안 각 캔버스에서 다른 이미지가 열리고 같은 방법으로 편집됩니다.Processing.js 사용 : 하나의 데이터 처리 소스 인 sketch.pde가있는 여러 캔버스를 사용할 수 있습니까?

나는 각각의 캔버스가 처리 스케치 다른 이름을 말하고, 각 캔버스에 스케치를 열고 해당 배경 이미지를 갖는 많은 캔버스로, 단지 1 처리 스케치를 사용하고 싶습니다.

<!DOCTYPE html><html><head><meta charset="utf-8"> 
    <script src="../../../processingjs/processing.js"></script> 
    <script> 
     // Tell sketch what counts as JavaScript per Processing on the Web tutorial 
     var bound = false; 

     function bindJavascript(instance) { // Can I pass 'instance' like this? 
      var pjs = Processing.getInstanceById(instance); 
      if(pjs!=null) { 
       pjs.bindJavascript(this); 
       bound = true; } 
      if(!bound) setTimeout(bindJavascript, 250); } 

     bindJavascript('B104'); 
     bindJavascript('B105'); 

     function drawSomeImages(instance) { 
      // This is where I am trying to tell processing that each canvas has a number, and the number is assigned to a corresponding image. 
      var pjs = Processing.getInstanceById(instance); 
      var imageName = document.getElementById(instance); 
      pjs.setup(instance); 
     } 
     drawSomeImages('B104'); 
     drawSomeImages('B105'); 

     // Where is the Mouse? 
     function showXYCoordinates(x, y) { ... this is working ... } 


     // Send images back to server 
     function postAjax(canvasID) { ... AJAX Stuff is working ...} 
    </script> 
    </head> 
<body> 
    <canvas id="B104" data-processing-sources="engine.pde" onmouseout="postAjax('B104')"></canvas> 
    <canvas id="B105" data-processing-sources="engine.pde" onmouseout="postAjax('B105')"></canvas> 
</body> 
</html>

그리고에를처리 측 :

출처

2013-03-04 anthonyCarton

동일한 data-processing-sources 속성을 가진 모든 페이지에 백만 개의 캔버스 요소를 추가하기 만하면 모두 동일한 파일을로드합니다. Processing.js는 스케치 파일이 각 스케치 파일과 동일하다는 점을 염두에 두지 않으면 서 스케치를 작성할 것입니다. =

(설명했듯이 하나의 스케치 인스턴스를 여러 캔버스에 렌더링하고, 각각 다른 이미지는 스케치가 작동하는 방식이 아닙니다. 스케치는 캔버스의 드로잉 표면으로 묶여 있지만, 자바 스크립트에서 지시 할 때 이미지를 그릴 책임이있는 백만 개의 "슬레이브"스케치를 만들 수 있습니다. 마스터 스케치는 JavaScript로 슬레이브 스케치에 그림 그리기를 지시합니다. 자바 스크립트를 이미지로 설정하면 처리가 필요하지 않습니다.

출처

2013-03-04 19:36:06

잘 알고 있습니다. 내가하려는 일이 효과가 없을 것 같아. 그러나 스케치는 단지 이미지를 표시하는 것이 아니라 실제로 어리석은 일입니다. 다음은 내가 수행하려고 시도하는 두 가지 예입니다. http://graphic-interaction.com/mfa-thesis/testing-group02/tangible-decay-02.html http : // graphic-interaction. 첫 번째로는 캔버스 세트를 가지고 있는데, 각각 하나의 캔버스를 사용하여 이미지를 그립니다. 두 번째 이미지에서는 단일 캔버스가 이미지와 함께 재생할 수 있으며 다음 서버로 다시 저장되어 다음 사람이 다시 열 수 있습니다. – anthonyCarton

아, 알겠습니다. 산뜻한. 예, 아마도 이것은 같은 스케치를 여러 번 페이지에로드하는 좋은 예일 것입니다. –

글쎄, 아직 투표 할 수는 없지만 그 대답을 인터넷을 통해 보았습니다. 내 다음 하나는 각각의 이미지가로드 된 이미지의 이름 만 다른 sketch.pde (복사/붙여 넣기 및 각 파일 편집없이)를 60 개 이상 빠르게 생성하는 좋은 방법을 알고 있다면 될 것입니다. 나는 작은 파이썬을 알고, 나는 그것을 시도하는 것을 생각하고 있었다. – anthonyCarton

Processing.js 사용 : 하나의 데이터 처리 소스 인 sketch.pde가있는 여러 캔버스를 사용할 수 있습니까?

답변

관련 문제