1K Views
April 19, 21
スライド概要
サークルでProcessingを使ったプログラミング基礎講習会を行った時の資料です。
公立はこだて未来大学複雑系学部3年
プログラミング基礎講習 第一回 at FUN AI 2020/5/11
本日の予定 18:15 〜 講習会開始 19:30 〜 遊ぶ時間 〜20:00 終わり スライド以外にPDFverも配ります。 各位休憩を適宜とって下さい。
用意して欲しいもの ・Processing コードを実行させつつ進めていきます。 手元で遊びながら聞いてね。
目次 ・プログラミングis何 ・フローチャートとは ・調べ方 ・エラー・バグへの接し方 ・質問をするということ
1 プログラミングis何
プログラミングis…? > 何かを実現させるために、様々な言語で命令を書くこと
2 フローチャートとは
フローチャートとは > 実行したいことのために行う工程を、表現した図
商品購入の工程
合計値を出す工程
なにがうれしいの。 > フローチャートをイメージすることによって、 コードを書くときの思考の流れが追いやすくなる
複雑になると…
あとは書くだけ。 言語で命令を順番通りに書いてあげるだけ。 どう命令すれば良いか考えるのも大変。
質問タイム 14
3 Hello World!
Hello World!(儀式) 技術系の人間は新しい言語を触るとき、 とりあえず「Hello World!」と出力します。
print(“Hello World!”);
便利コマンド紹介 ● ctrl + R : 実行 ● ctrl + T : 自動フォーマット ● ctrl + S : 保存
3 サンプルコード
void setup(){ size(500,500); } int x=0; void draw(){ background(255); circle(x,250,100); x = x + 1; }
3 コードの調べ方
1. ネットで調べる この世で信じられるのはリファレンスだけです。
https://processing.org/reference/
[言語名 関数名]
注意 複数の記事を参考にしよう。
2. コメントアウトで調べる processingには//でその行をプログラムと関係ない行にす ることができます。 例)backgroundをコメントアウトする //background(255);
3. コードを変えて調べる わからない関数も書き換えてしまえばどう動いてたかわかる はず!! 例)直接数字を変えてみる。(関数size()を10倍に) size(5000, 5000);
実践 各関数がどのような動きをしているのか、 遊びながら調べてみましょう。
解説 void setup(){ size(500,500); //ウィンドウサイズ } int x=0; //円のx座標 void draw(){ background(255); //全面に塗る circle(x, 250, 100); //x座標、y座標250に半径100の円を描く。 x = x + 1; //x座標を1たす }
4 エラーへの接し方
エラーのでるタイミング ・実行前(セミコロンないよ、かっこが足りないよ) ・実行後
間違ったコード void setup(){ size(500,500); } int x=0; void draw(){ circle(x,250,100); x = x + 1; background(255) }
実行前のエラー Processingではある程度のエラーは実行する前に教えてくれ ます。エラーが出たまま実行しても動きません!
● エラータブに詳細(行、エ ラー内容) ● エラーのある箇所に赤い 波線
修正 エラーを見つめてるだけで消えるなら苦労しない! 指定された箇所を確認して、修正しましょう。 background(255) //修正前 background(255); //修正後
実行後のエラー コンソールにエラー内容が出て、引っかかった箇所に黄色の ラインが引かれます。 英語だからって怯えないで!
エラーが出たまま実行すると… ● コンソールにエラーログ ● 止まったところに黄色のラ イン
ぴえん
4 バグへの接し方
ぴえん
原因究明への順番 1. どこまで正しく動いているのかを調べる 2. 変数の中身を調べる 3. それ以外の可能性を調べる
どこまで動いてる?
画面からわかること ● 関数size(500,500)は動いている ● 関数background(255)は動いている
画面からわからないこと ● 変数xが動いているかわからない ● 関数circleが動いているかわからない
変数の中身 変数にどのような値が入っているのか、print()や println()で確認できる。
void setup() { size(500, 500); } int x=0; void draw() { println(x); circle(x, 250, 100); x = x + 1; background(255); }
コードの順番 変数が間違っていないとき、 コードの順番がおかしい可能性があります。
void setup() { size(500, 500); } int x=0; void draw() { circle(x, 250, 100); x = x + 1; background(255); } background()の順番が…?
void setup() { size(500, 500); } int x=0; void draw() { background(255); circle(x, 250, 100); x = x + 1; }
5 あそぼう。
あそべ〜 ● ● ● ● 色つけたり 背景変えたり 四角形にしたり 二個動かしたり
質問タイム 52
6 質問をするということ。
伝えるべきこと ● 何をしたいのか(実現したいこと) ● 何をした(どうコードを書いたなど) ● 何に困ったのか(どんなエラーが出たのかなど)
どんどん聞こう。 知識がないことは罪じゃない! 向き合い方がとてもだいじ。
6 次回予告
お品書き(予定) ● 命名規則 ● 変数のスコープ ● if文for文という概念
おわり。 感想くれ。 58