Help us understand the problem. What is going on with this article?

Processing.jsを使ってみる

More than 3 years have passed since last update.

大学のサークルで Processing の講習をやった後「部内で Processing の作品を見せあえるような場があればいいな・・・」と思ったのですが、そういったサイトは海外のサイトばかりというのが現状でして、ちょっとなぁ・・・と感じWEB上でProcessingを実行させることってできるのかと調べてみたところ、なんとまさに目的のものが見つかりました。

その名もprocessing.jsというjavascriptのライブラリです。
ですが残念なことにどうやらprocessingのコードをcanvasに変えて出力するものみたいでcanvasにできないことはprocessing.jsを使ってもできないようです。

processing.jsはProcessing公式サイトよりダウンロードできます。
http://processingjs.org/download/

以下、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_js.png

これを使い、Processingの作品を投稿できる掲示板「Processing content」を作ってみました。もう普通の掲示板とまったく同じ要領で作れてしまいますね。
以下が Processing Contest の URL になります。
https://mighty-waters-75922.herokuapp.com/

sample.png

またこのサイトの改善点としては
1. 現在RDBMSにProcessingの長いコードをそのまま入れているという状態なので近いうちに改善させたいなぁと考えております。
2. いっぺんに Processing のプログラムを動かすと動作が重くなるので javascript 側で動かせる作品の個数を制限する。(これすぐできそうな感じが・・・)

やはり実力が足らないせいかいろいろなところでガバガバだなぁと感じますね・・・
これからも様々な技術を身に着けるなどして日々精進していきたいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away