Processing.js를 사용해보기

6283 단어 processingProcessing_js루비Rails4
대학 서클에서 Processing 강습을 한 후 "부내에서 Processing 작품을 보여줄 수있는 장소가 있으면 좋겠다 ..."라고 생각했지만, 그러한 사이트는 해외 사이트뿐이라는 것이 현재 상태 그렇다면, 조금 ... 느낌 WEB에서 Processing을 실행시킬 수 있는지 알아 보았는데, 무슨 목적이 무엇을 발견했습니다.

이름도 processing.js라는 javascript 라이브러리입니다.
하지만 유감스럽게도 processing의 코드를 canvas로 바꾸어 출력하는 것만 싶고 canvas로 할 수 없는 것은 processing.js를 사용해도 할 수 없는 것 같습니다.

processing.js는 Processing 공식 사이트에서 다운로드할 수 있습니다.
h tp // p 로세신 gjs. 오 rg / 도 w 응 아 d /

다음은 js 파일을 읽고 processing을 실행하는 샘플 html입니다.

sample.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="processing.min.js"></script>
    <script>
      var Pjs = new Array(1); // 拡張させて同一ページでの複数起動が可能なようにあえて配列にしました。
      function stop(num){ // 動作を止めるメソッド
        if (Pjs[num]) Pjs[num].exit();
      }
      function run(num){ // processingを動作させるメソッド
        stop(num);
        var canvas = document.getElementById('canvas'+String(num));
        var code = document.getElementsByName('source_code')[0].value;
        try{
          Pjs[num] = new Processing(canvas, code);
        }catch(e){
          alert(e);
        }
      }
    </script>
  </head>

  <body>
    <canvas id="canvas0" width="320px" height="320px"></canvas>
<textarea id="editor" rows=25 cols=80 name="source_code">
// ここにProcessingのソースコードを書く
void setup(){
  size(500,500);
  background(#ff00bb);
  frameRate(10);
}

void draw(){
  int l= random(10,100);
  int x=random(0,500);
  int y=random(0,500);
  int r=random(0,255);
  int g=random(0,255);
  int b=random(0,255);
  fill(r,g,b);
  stroke(r,g,b);
  ellipse(x,y,l,l);
}
</textarea><br>
    <button onclick="run(0)">Run</button>
    <button onclick="stop(0)">Stop</button>
  </body>
</html>



이것을 사용해, Processing의 작품을 투고할 수 있는 게시판 「Processing content」를 만들어 보았습니다. 이제 보통 게시판과 정확히 같은 요령으로 만들 수 있습니다.
다음은 Processing Contest URL입니다.
htps : // Gthty-was rs-75922. 어리석은 p. 코m/



또 이 사이트의 개선점으로서는
1. 현재 RDBMS에 Processing의 긴 코드를 그대로 넣고 있다는 상태이기 때문에 조만간 개선시키고 싶다고 생각하고 있습니다.
2. 한꺼번에 Processing 의 프로그램을 움직이면 동작이 무거워지므로 javascript 측에서 움직일 수 있는 작품의 개수를 제한한다. (이제 바로 할 수 있을 것 같은 느낌이・・・)

역시 실력이 부족한 탓인지 여러가지 곳에서 가바가바라고 느끼네요・・・
앞으로도 다양한 기술을 착용하는 등 매일 정진하고 싶습니다.
processing 시작하기
Discord.JS: Usuarios의 데이터

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage