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

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

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

​​雑談

​​https://editor.p5js.org/takawo/sketches/s6iQSwdCz
​​
 
クリエイティブコーディング学習の最適解「ルートB」としてのp5.js - 日常の進捗
はじめに これはProcessing Advent Calendar 2018の3日目の記事です． 昨年のProcessing Advent Calendar 2017では「クリエイティブコーディング学習の最適解としてのProcessingと，デイリーコーディングのススメ」というエントリを書きました．このエントリは「Processingは短いコードを書きやすく，日々のコーディング学習に最適」という主旨をまとめたものです． その後，現在担当しているプログラミングに関する授業での開発環境について検討するうちにp5.jsの多々ある長所や魅力に気が付き，現在p5.jsでのクリエイティブコーディングを中…
takawo.hatenablog.com
クリエイティブコーディング学習の最適解「ルートB」としてのp5.js - 日常の進捗 • takawo.hatenablog.com
​​
​​
​​

​​今日の授業内容

  • ​​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 より
​​
​​