Processing.jsで画像が表示できない（.pdeファイルを使うやり方で）

###前提・実現したいこと
お世話になります。

Processingで画像を使うプログラムを作りました。手元では動きます。
次に同じpdeファイルをサーバーに上げ、index.htmlとprocessing.jsを用意して実行したのですが、画像が表示されません。
なお、画像以外の記述内容は実行されています（例えば下記ソースコードの**text("test",10,100)**は実行されています）

画像を表示するにはどこを修正すればよろしいでしょうか？

###ファイル構成
同一ディレクトリ内に以下すべてのファイルを置いています。

index.html
processing.pde
processing.js
image.png

###ソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<title>これがindex.htmlです</title>
6	<script src="processing.js"></script>
7</head>
8<body>
9	<canvas data-processing-sources="processing.pde"></canvas>
10</body>
11</html>

Java
1// processing.pdeがこちら↓
2
3PImage img;
4
5void setup(){
6  size(500,400);
7  noLoop();
8  fill(10);
9  img = loadImage("image.png");
10}
11
12void draw(){
13	text("test",10,100);
14	image(img,0,0);
15}

###補足情報(言語/FW/ツール等のバージョンなど)
Processing.jsは最新版(1.4.8)です。
最新版のChrome、Firefoxともに画像は表示されませんでした。
ローカル開発環境ではなくサーバー上で動かしています。

teratailを初めて利用するためお見苦しい点があるかもしれませんが、何卒よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

公式サイトの
Processing.js クイックスタート(Processing開発者向け)

Processing.js has to cheat to simulate Processing's synchronous I/O
（Processing.jsでProcessingの同期型I/Oをシミュレートするためにはチートが必要）
という項目を参照してください

具体的にはPDEで使用するファイルを
予め読み込む(preloadする)必要があり
1つのファイル(image.png)を使用する場合は
pdeファイルの頭に
/ @pjs preload="image.png"; /
というコメント文を入れる必要があるようです

また複数ファイルを使用する場合は""の中を
"image0.png,image1.png,image2.png"
と指定できるようです

Processing.js クイックスタート(Processing開発者向け)

↑このページは他にもProcessingユーザーが
Processing.jsを使う上での注意点等が記載されているので
一度目を通しておかれると良いでしょう

投稿2017/02/09 03:35