event

高校生から20歳までのプログラミング講座 in Fusic 2016年2月6日

本日の流れ # ガイダンス - 本イベントについて - processingについて - 準備などなど #
プログラミング - ゲームが出来るまでのstep1~10まであります - ゲームじゃなくて好きに作ってもOK! - 最後にグループ内で発表 # 時間 - 13:00～16:00 (休憩 15分)

# ガイダンス

イベントの前にプログラミングをしたことありますか？

イベントの前にプログラミングはどこに使われていると思いますか？

本イベントについて # 目的 - みんなが使っているテクノロジー技術の内側を少し覗いて、学んでほしい - プログラミングに触れてみて身の回りの技術への関心を持ってほしい -
簡単なゲームを作ってみよう！

Processingについて # Processingとは - 電子アートとビジュアルデザインのためのプログラミング言語であり、統合かん(ry - 要はプログラミングで絵が描けるようになります！ - http://processingjs.org/exhibition/
# Processing.jsとは - 色々準備が必要なProcessingをパソコンに入っているブラウザだけで使えるようになる！ - 詳しいことが知りたい人はリンクを参考 http://qiita.com/Souj/items/fe8aa34f1b1339a94427

準備などなど # 本日の教材のダウンロード - http://17.gigafile.nu/g47bd9f5b5fcd9010737e3d92ea38d817-0213 - リンクよりダウンロードして展開してみましょう

#教材 □ step_01.html ~ step_10.html → 問題ファイル □ step_01_answer.html ~
step_10_answer.html → 解答例ファイル □ imgフォルダ / jsフォルダ → 問題に必要な画像やJavaScript □ TeraPad.exe → 問題を解く時に使います

#教材 # 普通にクリックをすると、ブラウザで開きます

#教材 # TeraPadを開いて、ドラッグ＆ドロップすると…

#教材 # step_01.html を作っている中身を編集できます！

#教材 <!DOCTYPE html> <html lang="ja"> <head> <meta charset=“UTF-8" /> <title>processing</title>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="./js/processing.min.js"></script> </head> <script type="text/processing" data-processing-target="mycanvas"> /********************************************* STEP_01 : 画面の大きさを設定してみよう **********************************************/ /********************************************* ・ setup()の中にある size(????, ????)を変更して横 1065 縦 612 の画面を作ってみましょう - size(横の大きさ,縦の大きさ) *********************************************/ </script> <body> <canvas id="mycanvas"></canvas> </body> </html> この中を編集していきます。

# プログラミング

#流れ ① 解答例をみて、作るものを確認しましょう！

#流れ ② 問題をTeraPadで開いて、見てみましょう！

#流れ ③ 問題の中の「?」や間違った値を編集して、回答例と同じように動くようにしてみましょう！編集してブラウザで確認

#step_01.html step_01 : 画面の大きさを設定してみよう - setup()の中にある size(100, 100)を変更して横 1065
縦 612 の画面を作ってみよう [Point] - size(横の大きさ, 縦の大きさ); →画面のサイズを決めるための命令

#step_01.html 横縦

#step_02.html step_02 :画像を背景に設定してみよう - 背景用画像が「./image/sea.png」にあります - この背景用画像を画面に貼ってみよう [Point] -
変数 : データや値をいれるための箱 - loadImage("./image/sea.png")で変数 sea に画像の情報を保存します - background(画像の情報) で背景の設定が出来ます

now previous next ../sea.png ./sea.png ./next/sea.png #step_02.html

変数とは情報に名前を与えて、記憶しておくもの例： // 画像情報を記憶するための箱を用意 Pimage sea; // 画像情報を格納 sea
= loadImage(“./image/sea.png”); #step_02.html

#step_03.html step_03 : 四角を書いてみよう - draw(){} の中で rect(???, ???, ???,
???)で四角が書けます。 - 場所や大きさなど色々触ってみよう [Point] - rect(横位置, 縦位置, 横大きさ, 縦大きさ); [Extra] - 画面の四隅にぴったりはまる 100×100の四角を置いてみよう

（x,y）（x）（0,0）（y） rect(横位置, 縦位置, 横大きさ, 縦大きさ); #step_03.html

#step_04.html step_04 : 四角を動かしてみましょう - setup(){} を一回だけ通った後は draw(){} を何回も繰り返して通ります -
rect()の位置が毎回変わるようにすると、動いているように見えます [Point] - 変数 : データや値をいれるための箱 - 四角の位置や大きさに変数を入れることができます (例) rect(x, y, 100, 100) - 「x = x + 3;」 xの値に3を加える

setup() draw() 最初の１回目に通るあとはここで繰り返し #step_04.html

（x,y）（x）（0,0）（y） #step_04.html

（x,y）（x）（0,0）（y）（x+1,y）（x＋１） #step_04.html

#step_05.html step_05 : 障害物を作ろう_1 - これまでの練習を基に「右から左」に動く障害物を上下それぞれ作みよう [Point] - 壁を横（右端から左端）に動かす
- fill(102, 51, 0); ->壁の色を茶色指定するための命令 ->中の数字を変えると色が変わります

#step_06.html step_06 : 障害物を作ろう_2 - 壁が繰り返して出るようしてみよう - 壁が端っこ（左）まで行ったら「右側に戻る」ように - 壁の高さが毎回変わるようにしてみよう
[Point] - if文 - random(0,100) ランダム関数 randam(x,y) xからyまでの数字をランダムに出してくれる

# if 文 if ( 条件 ) { 条件がOKの場合はここの処理を通る }
条件がOK-> true / 条件がNG -> false 例： --------------------- x = 5; if ( x == 5) { x = x – 3; } ------------------- x = 5; if ( x < 0) { x = x + 3; } #step_06.html

（x,y）（x）（0,0）（y） #step_06.html

（x-3,y）（x-3）（0,0）（y） #step_06.html

（0,y）（0,0）（y） if ( x == 0 ) {
xを元の位置に戻す数字を入れる壁の高さを変える } #step_06.html

（x,y）（x）（0,0）（y）最初の位置に戻る壁の高さが変わる #step_06.html

#step_07.html step_07 : 魚を作ろう - 魚を作りましょう。 - 今回はまだ四角で代用 - キーボードを押すと上に移動、押していないと下に移動
[point] - keyPressed - if(keyPressed) { キーボードが押されているときに通る処理 } else { キーボードが押されていないときに通る処理 }

keyPressed 押しているとき押していないとき true false #step_07.html

if ( keypress ) { キーボードを押している時の処理（四角が上に行く） } else {
キーボードを押していない時の処理（四角が下に行く） } #step_07.html

keyPressed = fasle 押さない If文が実行されない #step_07.html

keyPressed = true If文が実行される #step_07.html

#step_08.html step_08 :あたり判定を作ろうあたり判定として ①魚が壁（上）にあたった時 ②魚が壁（下）にあたった時 ③魚が上または下に行き過ぎた時 [point] ・「あたる」について考えてみましょう・if文
&& ・exit() ->処理を中止する命令

if ( 条件A && 条件B ) { AとBの両方がOKの場合の処理 } (例)
if ( x < 10 && x > 5 ) { x が 6～9の場合ここを通る } #step_08.html

100 200 50

100 200 50 300 ①壁の横の位置ここ＜ 300 ↓ここ

100 200 50 50 ②壁の横の位置 50 ＜ここ ↓ここ

さかなの縦 →keyを押すたびに変わる値壁の縦 →ランダムな値 ③壁の縦の位置さかなの縦＜壁の縦

条件（上）・条件①：魚の横位置 < 300 ・条件②：50 <魚の横位置・条件③：魚の縦位置 < 壁の縦大きさ #step_08.html

#step_08.html 条件（下）・条件①：50 < 魚の横位置・条件②：魚の横位置 < 300 ・条件③：魚の縦位置
+ 200 < 612 - 壁の縦大きさ

#step_09.html step_09 : 魚の画像を表示しよう - 魚画像が「./image/sakana.png」にあります - この魚画像を画面に貼ってみましょう [Point]
- loadImage("./image/sea.png")で変数 sea に画像の情報を保存します - image(読み込む画像, 横位置, 縦位置, 横大きさ, 縦大きさ); - 画像を貼り付けるための命令

#step_10.html step_10 : 壁に当たった時に花火がでる - いままで exit(); で終わらせていたところで「花火」を出してみよう [Point]
- drawFire() - 花火を出すための命令 - if (ゲームオーバーなら) { 花火を出す } else { 魚を出す }

#Extra ① : hockey.html を作ってみましょう！ ② : http://processingjs.org/exhibition/ サンプルサイトから色々いじってみよう ③：http://processingjs.org/reference/
好きに色々触ってみよう！

event

event

More Decks by tutida

Other Decks in Education

Featured

Transcript