プログラミング 2022
【到達目標】
変数、データ型、値とリテラルの概念を理解し、コードを作成できる。
条件分岐、繰り返しを理解し、アルゴリズム(フローチャート)からコードを作成できる。
関数(メソッド)を理解し、使うことができる。
配列を理解し、配列を使ってコードを作成できる。
p5js(Processing)でグラフィックスを表現できる。
指示に従い、簡単なプログラムを作成できる。
【講義内容】
この授業では、Processingというプログラミング言語をJavaScriptで実装したp5.jsを使ってプログラミングの基本を学習する。
p5.jsは、グラフィックの取り扱いが容易なので、ゲーム感覚で楽しみながらプログラミングを学習できるというメリットがある。p5.jsはJavaScriptで実装されているので、ほぼすべてのコンピュータのWebのクライアント環境で容易に実現できる。また、HTML5の実装を利用しているので、多彩な表現を使って、ネットワークで公開することも、スマートフォンやタブレットで見ることもできる。
初心者でも、直感的に理解でできるように、グラフィックスを使ってすぐに結果が見えるようにプログラムしながら進めていく。
【授業計画】
初日
初めてのp5.jsとHTML,、変数について
rect、ellipse、lineなどの基本図形と色とその表現
アニメーション
条件分岐
理解度チェック1
二日目
繰り返し
移動、回転、伸縮
理解度チェック2
三日目
関数
配列
イベント
理解度チェック3
最終日
応用課題
作品品評会
定期試験
【授業の進め方】
プログラミングは、教えてもらうという姿勢では覚えることは難しいと思います。自分から積極的に学んでください。
わからないことは、質問コーナーに投稿してください。わたしにメンションすると回答が得られるまでの時間が短縮されます。
また、この授業は、全員が同じ歩調で進めると言う方針は取りません。理解しながら各自のペースで進んでください。進む人はどんどん進んでください。
プログラムはアイディアです。自分の実現したいアイディアを考えてください。もし、それが自力で実現できないときは、私に相談してください。
授業は、30分の講義と説明、30分の演習というペースで進みます。また、ビデオを単元ごとにで区切りますので、その都度一度会議を終了して、入り直してもらいます。何時に集合と言いますので、その時までに必ず再入場してください。
30分の演習で終わらない人は、続けて演習を行ってください。
table: タイムテーブル(あくまでも予定です)
日時 講義 演習 ビデオ
7日 9時00分 授業に関して お絵描き 関数とパラメータ 1回目
7日 9時30分 例題1 円を描く
7日 10時00分 変数 例題2 小さい 円を大きくする 2回目
7日 10時40分 課題1 円を小さくしていくアニメーション
7日 11時10分 アニメーション 例題3 変数を使ったアニメーション 3回目
7日 11時40分 色とその表現 例題5 色と線種
休息
7日 13時00分 基本図形 課題2 基本図形 4回目
7日 14時40分 条件分岐 例題4 if文
7日 15時30分 復習と質問コーナー 課題3 天井や床から出てくる円 5回目
7日 16時00分 課題4 円の大きさをifを使って変更する
2日目
8日 9時00分 テキストの表示 6回目
ボーナス問題1
8日 10時40分 繰り返し 7回目
課題5 繰り返しループ
8日 13時00分 理解度チェック1 理解度の確認
8日 14時40分 個別問題
3日目
9日 9時00分 システムで用意している変数 初級問題
9日 10時40分 関数とイベント
復習と質問コーナー 中級問題
休息
9日 13時00分 配列とアルゴリズム 例題 配列の要素の最大値
9日 14時40分 移動、回転、伸縮 課題6 配列
9日 15時40分 ボーナス問題2バブルソート
3日目
10日 9時00分 復習コーナー学習すべきこと 応用自由課題
10日 10時40分
10日 13時00分 品評会
10日 14時40分 試験
p5.js 入門からスタート
学習すべきこと一覧に
注意事項
Webエディタ
【成績評価の方法】
提出課題(50%)、理解度チェック(10%)と定期試験(40%)により成績を評価する。 到達目標を全てクリアしたらS評価、3つ以上クリアしたら合格、それらの理解度によってA,B,Cの評価を行なう。
※未提出の課題が一つでもある場合は採点を行わず、受験無資格者とする。
【テキスト】
p5.js 入門
マット・ピアソン 『ジェネラティブ・アート―Processingによる実践ガイド』ビー・エヌ・エヌ新社,2014
Casey Reas 『Processingをはじめよう 第2版 (Make: PROJECTS)』オライリージャパン; 第2版,2016/9/7
巴山 竜来 [https://www.amazon.co.jp/%E6%95%B0%E5%AD%A6%E3%81%8B%E3%82%89%E5%89%B5%E3%82%8B%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%A9%E3%83%86%E3%82%A3%E3%83%96%E3%82%A2%E3%83%BC%E3%83%88-Processing%E3%81%A7%E5%AD%A6%E3%81%B6%E3%81%8B%E3%81%9F%E3%81%A1%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E5%B7%B4%E5%B1%B1-%E7%AB%9C%E6%9D%A5/dp/4297104636/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=1640676345&sr=1-1 『数学から創るジェネラティブアート - Processingで学ぶかたちのデザイン』 ] 技術評論社,2019
参考:
ドットインストール p5.js入門