​​Day2-8: p5.svg.jsでのSVG出力｜デジタルファブリケーションとの接続
​​京都造形芸術大学
​​オープンレクチャー「クリエイティブコーディング：2020」
​​2020年3月16日（月）〜18日（水）
​​
​​高尾俊介（甲南女子大学 メディア表現学科講師）
​​
​​

​​作例

​​

​​ファイル名

​​URL

​​060_p5.svg.jsの利用（1）ファイルの読み込み・スタティックモード
​​https://editor.p5js.org/takawo2020/sketches/742QVNtQ
​​061_p5.svg.jsの利用（2）インタラクティブモード
​​https://editor.p5js.org/takawo2020/sketches/0GNzujIs
​​062_p5.svg.jsの利用（3）図形を並べる
​​https://editor.p5js.org/takawo2020/sketches/t_Gf8X_p
​​063_p5.svg.jsの利用（4）10 PRINT
​​https://editor.p5js.org/takawo2020/sketches/2yZ4G2ZC

​​p5.jsとライブラリ

​​
 
User-uploaded image: +2020-03-17+9.24.41.png
​​https://p5js.org/libraries/
​​
  • ​​p5.jsにはライブラリと呼ばれる，機能を拡張するJavaScriptコードを追加出来ます
  • ​​ライブラリを使用することで可能になること
  • ​​p5.sound.js：オーディオファイルの再生，音声合成，音響解析（FFTなど）
  • ​​mappa.js：地図の利用
  • ​​p5.scribble.js：手書き風の描画
  • ​​p5.voronoi.js：ボロノイ図の作成
  • ​​種類は豊富で，利用方法も個々で異なるため，個別の事例は作例を確認してみてください
​​
​​
​​

​​ライブラリの利用方法

​​
  • ​​p5.jsはJavaScriptのファイルで，HTML内でp5.jsを読み込んでいる
  • ​​同様にライブラリファイルもp5.jsと合わせてHTMLファイル内で読み込む必要がある
​​
​​外部ライブラリの共通の読み込み方法
  • ​​A：ファイルがCDN等のリンクが公開されている場合
  • ​​例：地図表示のライブラリmappa.jsの場合
​​<script src="https://cdn.jsdelivr.net/npm/mappa-mundi/dist/mappa.min.js" type="text/javascript"></script>
  • ​​index.html内に上記コードをコピー・アンド・ペーストする．
  • ​​B：ダウンロードして利用する場合
  • ​​ファイルをダウンロード後，p5.js Web Editorでアップロード（画像等と同様の方法）したのち，index.html内に
​​<script src="ファイル名（適宜書き換える）.js" type="text/javascript"></script>
​​を書き換える．
  • ​​p5.svg.jsの場合はこっち．
​​
​​
 
User-uploaded image: p5_js_Web_Editor___p5js_svg_test_01_copy.png
​​
​​
​​とはいえ，ここで躓くのも本意ではないので，作例をDuplicate（複製）したのち，自由にコードを書いたりするのが良いと思います．
​​

​​p5.svg.jsのダウンロード

​​