p5.js入門記 -その２Flaskにp5.jsの画像を載せる-

前回まで

• その１：雪を降らせる

はじめに

今回は、自分のWebサイトにp5.jsの作品をUPしてみます。

【環境】

• Webサーバ: Heroku
• フレームワーク: Flask
• 言語: p5.js

また、コードは前回と同じなので、省いております。

Flaskで作成したページにp5.jsの作品（画像）を載せたい

問題点：画像が反映されない

• pythonでWebサーバを立てた状態→正常に動作する
• Herokuにアップロードした状態→画面が真っ白の状態である

原因

• 画像のファイルパスが認識されていないため？

sample.js

bg = loadImage("../static/bg_snow_jutaku.jpg");
img = loadImage("../static/kids_hashirimawaru_snow.png");

対処法

• .jsファイルの内容を.htmlファイルに直書きしたら解決した

sample.html

  bg = loadImage("{{url_for('static', filename='bg_snow_jutaku.jpg')}}");
  img = loadImage("{{url_for('static', filename='kids_hashirimawaru_snow.png')}}");

成果物

おわりに

次回はサンプルを元にした模様について書こうと思います。

• その３：#つぶやきProcessingをやってみる