ProcessingをWeb上で動かすための方法についてです
方法は主に2つあります
1つ目はhtmlファイル内に直接記述するもの
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>processing in html</title> </head> <body> <script src="processing.js"></script> <script type="text/processing" data-processing-target="processing-canvas"> //ここにProcessingのプログラムを記述 </script> <canvas id="processing-canvas"></canvas> </body> </html> |
コメントの部分にWeb上で表示したいプログラムを記述するだけです
2つ目は外部のpdeファイルから読み込む方法
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>processing in html2</title> <script type = "text/javascript" src = "processing.js"> </script> </head> <body> <canvas data-processing-sources="processing_sample.pde"></canvas> //processing_sample.pdeはサンプルのファイル、各々で設定してください </body> </html> |
processing_sample.pdeは私が作成したプログラムですので、皆さまが作ったものに書き換えて使ってください
結構簡単にできますね、Processing最高
created by Rinker
¥2,200 (2023/12/06 03:00:55時点 Amazon調べ-詳細)
参考:https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/
http://www.mlab.im.dendai.ac.jp/~15fi103/processing/howto.html