ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記 - The Diigo Meta page

• 14 Apr 13
  

  dai suzuki

  processing

• 30 Jan 12
  

  makoto tateno

  javascript library processing visualization

• 24 Nov 11
  

  keniti tanaka

  Processing.js

• 03 Nov 10
  

  Yusuke Hikime

  javascript processing

• 21 Aug 10
  

  washo ohsaw

  javascript library plugin jquery howto japan download

• 07 Jan 10
  

  nkmry .

  Processiong.jsの使い方

  Proce55ing HTML5

  • Processing.js を使うには、以下の手順が必要です。

     
     
    1. Processing.js をダウンロードする。
     
    2. HTML ファイルを作って、Processing.js を読み込む。
     
    3. canvas 要素を挿入する。
     
    4. Processing という関数を呼び出す。
  • 以下のように、HTML ファイルを作って script 要素の src 属性にさっきダウンロードしてきた processing.js のファイルを指定
  • <script type="text/javascript" src="processing.js"></script>
  • HTML ファイルに canvas 要素を挿入
  • <canvas width="400" height="400"></canvas>
  • IE には canvas 要素はありませんが、 excanvas.js を読み込むことで canvas 要素を使えるようになります。
  • canvas 要素とは、 JavaScript から絵を描ける要素

  • Processing.js によって Processing 関数が作られているので、 JavaScript から Processing 関数を呼び出します。

     

    引数には、

     
     
    • canvas 要素
     
    • Processing のソースコード
     
     

    を指定します。
  • // canvas 要素  var canvas = document.getElementsByTagName('canvas')[0];
  • // Processing のソースコード  var code = "s
  • // Processing 関数を呼び出す  Processing(canvas, code);
  • 基本的な準備は完了ですが、もう 2 個テクニックを追加しておきます。
  • script 要素に Processing のソースコードを書く
  • script 要素は、 type 属性に実行できないタイプが指定されると何もしません。逆にそれを利用して script 要素に Processing のソースコードを書くのです。
  • // Processing のソースコードが書かれた script 要素  var codeElm = document.getElementById('processing-code');  // 要素の内容を取得する  var code = codeElm.textContent || codeElm.innerText;   Processing(canvas, code);
  • <script id="processing-code" type="application/processing"> // ここに Processing のソースコードが書ける
  • IE にも対応させる
  • IE は canvas 要素に対応していないので excanvas.js という JavaScript のファイルを読み込んであげる必要があります。

  16 more annotations...

• 14 Aug 09
  

  Hiroyo Kida

  javascript html5 processing tutorial graphics

• 09 Dec 08
  

  genki katsutani

  Programming javascript ajax browser tutorial animation graphics Processing js visualization library canvas sample

• 14 Aug 08
  

  k t

  programming Processing it

• 17 May 08
  

  zigorou

  processing javascript

• 

  Kazkun guru

  ja ajax javascript library

• 14 May 08
  

  teruteru tarou

  javascript processing library programming tutorial

• 13 May 08
  

  ytesaki

  library tutorial amachang javascript from_delicious

• 12 May 08
  

  hiroyuki sano

  javascript

• 

  jimi bandrix

  processing javascript

• 11 May 08
  

  koki nagasawa

  Processing をブラウザで使えるようになるjavascriptのライブラリ

  processing javascript library 2008 2008-5-11

• 

  po fag

  ライブラリ　お絵描き　processing

  javascript image #

• 

  javascript processing あとで試す

• 10 May 08
  

  yohei taniguchi

  jQuery作者によるJSライブラリ、Processing.jsの解説

  javascript

• 

  M. Tokuyo

  javascript

• 

  Hiroto Kagotani

  javascript graphics drawing

• 

  topaz2

  どっかで使いたいな。

  javascript visualization

• 

  dotimpact

  LDR dev 2008-05

Would you like to comment?

Join Diigo for a free account, or sign in if you are already a member.