- チュートリアルは、あくまで何もやりたいことが無い人向けのイメージ。やりたいことがある人はやりたいことをやってもらう。(適宜質問受け付けるって感じ？)
- 期限については夏休み入るまでに終わらせたいような感じはします。
- 定期的にリアルで勉強会を開催して新入生どうし、部員間の交流を深めるのは大事。
- 新入生には、Processing チュートリアル一覧 | P5 Code Schoolのチャプターを進めてもらい、各チャプターのマイルストーンの回答を制作する。
- マイルストーンの回答は、C0de部Discordサーバーの新入生用カテゴリの中にprocessingチャンネルを作り、そこに P5 Code Schoolのチャプターのマイルストーン毎にスレッドを作って、そのスレッドに投稿してもらう。
ちなみに期限は5月末だと早すぎた(5月入部もいらっしゃるので)。
ちなみに、ここにもチュートリアル記載されてる: https://github.com/c0demattari/directors-documentation/blob/main/Joining.md#5チュートリアル
- 単純なコマンドラインアプリケーションとは異なり、視覚的にプログラミングを楽しむことができること。
- 情報工学科の講義でも取り入れられていること。
- Java言語がベースであり、JavaScriptのような非常にややこしい歴史的しがらみや、C言語のようにコンピューターの構造を理解したものでなくてよいこと、情報が豊富なこと。
- WebはHTML/CSSをちょっとかじった上で色々やっていく必要があり、最初のプログラム完成が少し長い気がする。 (Chrome拡張機能はHTML/CSSを軽くだけ知らないと、置いていかれた感じになってしまう)
- 教える負担が比較的少ないこと。
- 良い教材があること。
序盤のおすすめの勉強の仕方はHackMDのチュートリアルを8までやり、P5 Code SchoolのものをChapter 10までやることです
問題番号はP5 Code Schoolと対応させています
Processingのチュートリアルのドキュメントです
使ってみてください
https://web.archive.org/web/20220521194827/https://p5codeschool.net/tutorial/
序盤のおすすめの勉強の仕方はhackmdのチュートリアルを8までやり、p5 code schoolのものをchapter 10までやることです
HackMD
https://hackmd.io/@CNSUW3DuRZmqmeHSm_mZwQ/S16n92Zjx?type=view
P5 Code School
https://hackmd.io/@CNSUW3DuRZmqmeHSm_mZwQ/S16n92Zjx?type=view
Processingでよくあるエラーとして「前のファイルは実行できたのに新しくファイル作ったら実行できない;;」ということがよくあります
Processingではなぜかファイル名とフォルダ名が同じでなければならない、という仕様があります。
ファイル名とフォルダ名が違うと実行できないので確認してみてください
これはProcessing特有なので他の言語ではない（はず）です
もしわからないことがあれば questions か @部長 のDMにでも質問してくださいな
エラーが起こったりしてわからない、という場合は積極的に質問してください
もしかしたら他の人も困っているかもしれないので
僕たちも質問してくれると対応できるので嬉しいです
- P5 Code Schoolはリンク切れしてしまったが、GitHubリポジトリは と アーカイブある。
- 回答例のリポジトリ (一部本家から追加を行っている)
■ Chapter 0 のマイルストーン
コードサンプルを実行して絵をかいてみよう!!
（このスレッドにスクリーンショットを上げて共有しよう）
■ Chapter 1 のマイルストーン
好きなサイズのウインドを表示させて、色（モノクロでいいです）をつけよう
（このスレッドにスクリーンショットを上げて共有しよう）
■ Chapter 2 のマイルストーン
円、四角形、三角形を表示させよう
追記：
雑でいいです笑
円、四角形、三角形を表示させるだけでいいです！(クオリティ高すぎるときがあるので笑笑)
■ Chapter 3 & 4 のマイルストーン
変数を用いながら、様々な色の表現を扱おう。
- 色の情報を変数に格納し、その変数を用いて、好きな図形に色をつけよう。
さらに、変数を用いてその図形のサイズにあわせて、図形同士の間隔(spacing)を調節しよう。
- 色の情報の変数は、定数(マジックナンバー)であるため大文字が推奨されます。(強制ではない)
つまり、`red`, `blue`, `yellow` ではなく、`RED`, `BLUE`, `YELLOW`
■ Chapter 5 のマイルストーン
[Chapter5/sketch06.pde](https://github.com/KoCSience/p5codeschool-samples/blob/master/Chapter5/sketch06/sketch06.pde)のコードを改造して、生成される図形をただの丸ではなく、にっこり顔😃にしよう。
ただし以下の要件を満たすこと。
- 図形はすべて無透過にしてください。
- 目は真っ白に塗りつぶしてください。
- 口は顔面の色の補色で塗りつぶしてください。（ヒント：補色は色相の位相を180度ずらすことで実現できます。）
- 顔の輪郭のみに黒い枠線をつけてください。それ以外の図形にはつけないでください。
- 各図形の大きさ，細かい位置関係は自由です。
例: （顔が混雑する場合は，図形を小さくするか，フレームレートを15くらいに落とすとよさそうです。）
■ Chapter 6 のマイルストーン
if文とswitch文を使って表示される図形を変化させよう
要件
- 学籍番号を10で割った余りによって色を変える。設定する色は以下の通り。
- 0 : 赤（ `#ff0000` ）
- 1 : オレンジ （ `#ff7f00` ）
- 2 : 黄 （ `#ffff00` ）
- 3 : 黄緑（ `#7fff00` ）
- 4 : 緑（ `#00ff00` ）
- 5 : 青緑（ `#00ff7f` ）
- 6 : シアン（ `#00ffff` ）
- 7 : アジュール（ `#007fff` ）
- 8 : 青（ `#0000ff` ）
- 9 : 紫（ `#7f00ff` ）
- 背景は`background(0)`
- 学籍番号が2の倍数ならば`rect(width/4, height/4, width/2, height/2)`
2の倍数でないならば`circle(width 0.5, height 0.5, width * 0.5)`を表示
- 完成したら結果を貼り付け
- 学籍番号をいじってみて、他の場合でもうまく行くことを試す
例えば、学籍番号が2の倍数なら長方形、2の倍数でないなら円が表示されます
学籍番号が `32 000 000` の場合、赤色で長方形が表示されます
ソースコード
// int型の範囲：[- 2^31, 2^31 - 1]
int STUDENT_NUMBER = 32 000 000;
int RED = #ff0000;
int ORANGE = #ff7f00;
int YELLOW = #ffff00;
int CHARTREUSE_GREEN = #7fff00;
int GREEN = #00ff00;
int SPRING_GREEN = #00ff7f;
int CYAN = #00ffff;
int AZURE = #007fff;
int BLUE = #0000ff;
int VIOLET = #7f00ff;
// プログラム開始時に一度だけ実行される処理
void setup() {
size(960, 540); // 画面サイズを設定
background(0); // 背景色を設定
}
// setup()実行後に繰り返し実行される処理
void draw() {
// 図形の輪郭線を消す
noStroke();
switch (STUDENT_NUMBER % 10) {
case 0: {
fill(RED);
break;
}
case 1: {
fill(ORANGE);
break;
}
case 2: {
fill(YELLOW);
break;
}
case 3: {
fill(CHARTREUSE_GREEN);
break;
}
case 4: {
fill(GREEN);
break;
}
case 5: {
fill(SPRING_GREEN);
break;
}
case 6: {
fill(CYAN);
break;
}
case 7: {
fill(AZURE);
break;
}
case 8: {
fill(BLUE);
break;
}
case 9: {
fill(VIOLET);
break;
}
}
if(STUDENT_NUMBER % 2 == 0){
rect(width/4, height/4, width/2, height/2);
} else {
circle(width / 2, height / 2, width / 2);
}
}■ Chapter 7 のマイルストーン
- ループ処理を用いて、明度のグラデーションをつける
- Chapter7/sketch06.pdeと同様。
- グラデーションの中心をx軸方向へ移動
- 実行時に見た目が変化するので、setup関数とdraw関数を使う形にする。
- Chapter7/sketch06.pdeと同じだとダメだよって意味
- グラデーションの中心の座標を変数として保持し、drawごとに中心座標を変化させる。
- グラデーションのfor文は、中心より右側と、中心より左側の二つのエリアで別々に実装するとやりやすい。
以下は、やらなくてもいいです。
- マウスの位置によって、色相・彩度を変化（x座標で色相、y座標で彩度を変化）
- int <-> doubleの型に注意しないと、計算が想定したものではなくなります
ソースコード
final int barNum = 10; // Number of Colums
void setup() {
size(1000, 540);
background(255);
colorMode(HSB, 360, 100, barNum * 10);
}
int position = 5; // The index of Column which is most brightness;
int countChangePosition = 0; // Modifier of changing speed of brightness positon ;
final int resetCount = 3; //Thereshold for countChangePosition. if exceeded, position is set to 0.
void draw() {
int boxW = width/ barNum;
int boxH = height/ 10;
int brightness = barNum * 10;
noStroke();
//Draw columns to the right of Position Column
for (int x = position; x < barNum; x++) {
for (int y = 0; y < 10; y++) {
fill((int)(360 * ((double)mouseX / 960)), (int)(225 * ((double)mouseY / 540)), brightness);
rect(x*boxW, y*boxH, boxW, boxH);
brightness--;
}
}
//Draw columns to the left of Position Column
brightness = barNum * 10;
for (int x = position - 1; x >= 0; x--) {
for (int y = 0; y < 10; y++) {
fill((int)(360 * ((double)mouseX / 960)), (int)(225 * ((double)mouseY / 540)), brightness);
rect(x*boxW, y*boxH, boxW, boxH);
brightness--;
}
}
countChangePosition++;
if (countChangePosition > resetCount) {
position = (position + 1) % (int)(barNum * 1.0);
countChangePosition = 0;
}
} ■ Chapter 8 のマイルストーン（関数）
イライラ棒 的なやつ。
- 自分で関数を1つ以上作る
- 道の端に近づくほど、背景の色が変わるようにする。背景は長方形の図形を背景のようにしてもよい。
- スタートからゴールまで表示で分かるようにする。
例：これは、右上がスタート位置になっている。内側、または外側に出ると、「Fail Restart」と出る。道の端っこのほうに近づくと、背景がより赤くなる。
もしかしたらChapter9の内容も見たほうがいいかもしれません。
https://web.archive.org/web/20210805225430/https://p5codeschool.net/tutorial/chapter9/
1. 一通り、Chapter9の内容を確認する。
2. Pongゲームの作成 (少し難しいと思います)
Pongゲームの作成については、[pong_game.md](https://github.com/KoCSience/p5codeschool-samples/blob/master/Chapter9/pong_game/pong_game.md)
この課題は難しいですので、積極的に1年生同士でコミュニケーションをとりましょう。
完成したら、画像とソースコードを貼ってください。(ソースコードの貼り付けは、[Gist](https://gist.github.com/)を使うと良いでしょう)
自由課題 何か作ってください！(画像や動画、ソースコードも貼ってくれると嬉しいです)
ぜひ腕を奮ってください！楽しみにしてます！！
- チュートリアルの課題にはTechTrainのMISSIONを使用すること。
- チュートリアルで使用するのにより適していると考えられるMISSIONが新たに出た場合は、使用するMISSIONをそれに変更して構わない。
- 自分が入部手続きをした新入部員が入るチャンネルを役員それぞれが作成し、ポートフォリオサイトの発表まではそのチャンネルにて進捗確認などのサポートをするとよい。
- 途中入部してきた人にはその時全体が取り組んているMISSIONから取り組んでもらうとよい。
- 「めざせ！GitHubMaster」でGitとGitHubについて勉強してもらう。
- 「ポートフォリオサイト（自己紹介サイト）をつくってみよう」でポートフォリオサイトを作成してもらう。
- 各自が作成したポートフォリオサイトを7月の部会にて発表してもらう。
- 「就活に便利！会社情報をみんなで共有しよう」でチームでのモバイル/Webアプリ開発を体験してもらう。
- 各チームが作成したモバイル/Webアプリを12月の部会にて発表してもらう。