Last updated: 2016 -2014. Kajiyama                    [ 目次に戻る ]

Processing.jsでweb表示する方法


  1. Processing で作成した作品をProcessing.js を利用しWebで公開することができる.

    1. 使用できるのはHTML5に対応しているWebブラウザ.

    2. Processing.js は、Webブラウザで Processing 言語を実行する JavaScript のライブラリ.

      ・Processing.js 公式サイト   ・Processing.jsとは-wikipedia

    3. Webに表示するためには,「JS」フォルダを作成し,この中に@ Processing.js とA Processing.min.js を入れる.

      JS」フォルダを利用してwebに表示させるB sample.html ファイルが必要になる.
      JSは JavaScriptの略である.



  2. JS」フォルダを作成する.これはHTMLサーバーのB sample.html ファイルと同じところに置く.

    (1) まずフォルダ名「JS」を新規作成する.

    (2) この「JS」フォルダにJavaScriptのライブラリ @とAを入れておく

      @ Processing.jsをダウンロードし,「JS」フォルダに入れる.(800k)

      A Processing.min.jsをダウンロードし,「JS」フォルダに入れる.(220k) 私が使用するのは小さいほうのこちら.

    (3) Processing.jsとProcessing.min.jsのダウンロードの方法

    1. Processing.js 公式サイトのダウンロードをクリックする.

    2. Processing.jsとProcessing.min.jsをクリックし,それぞれProcessing.jsProcessing.min.jsのファィル名を付けて保存する.




  3. WEBでProcessingのプログラムを表示するためのB sample.htmlファイルのテンプレートを次に示す.

     ・このテンプレートの方法(1)はProcessingのプログラムをhtmlファイルの中に直接書き込むやり方である.

      Processingで作成したプログラムの置き場所は<script type="application/processing">と</script>で囲まれた範囲に

     ・このほかに,Processingのプログラムをhtmlファイルの中にデータファイルとして読み込む方法(2)がある.これは別の機会に.


    sample.html ファイルのテンプレート
    <!DOCTYPE html><!------この文書型宣言は忘れずに書く------>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;  charset=shift_jis">
    <title>Processing.jsでweb表示するサンプルhtml</title>
    
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
    <script src="JS/processing.min.js"></script>
    
    </head>
    
    <body BGCOLOR="#ffffff">
    <h3>Processing のプログラム</h3>
    
    <script type="application/processing">
    
    /*---------------------------------------------------------
    WEBで表示したいProcessingのプログラムはこの位置に記述する
    ---------------------------------------------------------*/
    
    </script>
    <canvas id="canvas"></canvas>
    
    </body>
    </html>
    


  4. 次のBsampleファイルを開き,内容をすべてコピーして,これにsample.htmlの名前を付けて保存する.

  5. Bsample.htmlファイルの実行結果

    @Processing.jsとAProcessing.min.jsの入った「JS」フォルダとBsample.htmlファイルが準備できたら実行する.

       画面上で,マウスを動かしてください.
    
    
    
    //  Processingのプログラム
    
    
    void setup ( ) {
      size(300, 300); //キャンバスの大きさ
      background(255);//キャンバスの背景色を白
    }
    
    
    void draw( ) {
      if (mousePressed) {
        fill(200);//マウスボタンを押すと灰色に
      } else {
        fill(255);//マウスボタンを押さないと白色に
      }
      ellipse(mouseX, mouseY, 50, 50);
               //カーソルの位置に半径50の円を描く
    }
    

[ 目次に戻る ]