最近の記事

2018年09月11日

Processing.jsで複数のpdeファイルを取り込むには

Processingは、Javaベースのデジタルアート向けのプログラミング環境であり、標準のエディタでは複数のpdeファイルを並行して使う事が出来る為、よく使う処理はクラスやメソッドにして、本体とは別のpdeファイルにするのが一般的であり、効率的です。JavaScript実装のprocessing.jsでも同じように本体pdeファイルとクラスpdeファイルを分けておく事が出来ます。
クラスpdeファイルである「cx2.pde」と本体pdeファイルである「worp_man.pde」があるとします。以下はHTMLソースコードの一部です。


<script src="processing.js" type="text/javascript"></script>
<script type="text/javascript">
function getProcessingSketchId () { return 'vivid'; }
</script>
</head>
<body>
<canvas id="sketch3dstg" data-processing-sources="cx2.pde worp_man.pde" width="1280" height="720">
<p>Your browser does not support the canvas tag.</p>
</canvas>
<noscript>
<p>JavaScript is required to view the contents of this page.</p>
</noscript>
</body>


canvas要素のdata-processing-sources属性を「data-processing-sources="cx2.pde worp_man.pde"」とする事で、纏めてpdeファイルの導入が可能です。
posted by takatan at 22:40| 大阪 ☁| linux | このブログの読者になる | 更新情報をチェックする