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

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

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

​​今日の授業内容

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

​​p5.jsとは

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