​​プログラミングB #02

​​#02 アカウントの登録／p5.js入門（1）基本的な図形描画

​​
​​高尾俊介（takawo@konan-wu.ac.jp）
​​甲南女子大学 文学部 メディア表現学科 講師
​​
​​

​​今日の授業内容

​​
  • ​​p5.js入門
  • ​​p5.jsとは
  • ​​プログラムのプロセスについて
  • ​​座標
  • ​​基本的な図形描画
  • ​​p5.jsを学んでいくにあたっての準備
  • ​​アカウントの作成
  • ​​p5.js editor（エディタ）
  • ​​openProcessing（授業課題の提出公開）
​​
​​p5.jsを学んでいくにあたっての準備は，次回以降の授業でも関連してくる項目です．欠席した人は次の週までに2つのアカウントの登録を済ませておいてください．
​​
​​

​​p5.jsとは

​​
  • ​​ニューヨーク大学のLauren McCarthy が中心になって開発されたプログラミング環境
  • ​​クリエイティブコーディングのためのプログラミング環境「Processing」から派生
​​
​​p5.jsの特徴
​​
  • ​​ブラウザを通じてコードを編集することができる
  • ​​ウェブ上で動作する
  • ​​つまりインターネットがあればどこでもプログラムを書いて実行することができる
  • ​​スマートフォンやタブレットでも動作する
  • ​​ウェブ上のDOMと呼ばれるHTMLの要素を操作することができる
  • ​​画像・カメラ・オーディオなどを読み出して使用できる
  • ​​JavaScriptという言語で動作する
  • ​​比較的簡単な記述でプログラムを作成出来る
​​
 
User-uploaded image: historyofprocessing-1014x487.png
​​Processingの歴史
​​Research essay: The History of Processing より
​​
​​
​​
​​

​​参考書籍

​​
​​
 
User-uploaded image: 81THp0anQ8L.jpg
​​
​​
​​Generative Design with p5.js - [p5.js版ジェネラティブデザイン] ―ウェブでのクリエイティブ・コーディング
​​Benedikt Gross (著), Hartmut Bohnacker (著), Julia Laub (著), 深津貴之 (監修), 国分宏樹 (監修)