プログラミングで作る!アニメーション
「プログラミングB」補足資料として改変

甲南女子大学 文学部 メディア表現学科 准教授

3- 今日の授業内容


  • プログラミングを体験してみよう
  • プログラムをつかってアニメーションを作ろう
  • p5.jsという JavaScript というプログラミング言語をもとにしたクリエイティブコーディングを今日はやってみます.
  • コード(命令などをまとめた手順書)を実際に書いてみよう.

4- 授業に入る前に


  • コンピュータ苦手,プログラミング苦手という意識を一旦脇におきましょう😃
  • 机の上に両手を出して,キーボードに入力しましょう.
  • スマートフォンは机の上に置いておいて,良いプログラムが書けたら写真や動画で撮影しましょう.
  • ステップバイステップで進めていきます.つまづいたり分からないところは遠慮なく手をあげてください😃見出しに数字で番号を振っているのでそれをガイドにしてください.
  • 体験授業なのでリラックスして取り組んでいきましょう.


5- p5.jsを使ってみよう


  • デスクトップに右図のようなアイコンのWEBブラウザ「Google Chrome」を起動してください.
  • 検索窓に「p5js editor」と入力してください.
  • 一番上にでてきた検索結果のリンクをクリック.


6- p5.js Web Editorの画面説明


  • 「Auto-refresh」にチェック してください(プログラムが自動で更新されます)
  • 左上の再生ボタンを押してください

7- 最初のプログラムの解説


// setup関数:最初に1回だけ{}で囲われた範囲が実行される
function setup() {
  createCanvas(400, 400); //  命令① 描画するエリアの大きさを幅:400px,高さ:400pxに設定
}

// draw関数:setup関数が実行された後,繰り返し実行される
function draw() {