Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

# ガイダンス

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

#教材 processing /********************************************* STEP_01 : 画面の大きさを設定してみよう **********************************************/ /********************************************* ・ setup()の中にある size(????, ????)を変更して 横 1065 縦 612 の画面を作ってみましょう - size(横の大きさ,縦の大きさ) *********************************************/ この中を 編集していきます。

Slide 14

Slide 14 text

# プログラミング

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

#step_01.html 横 縦

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

(x,y) (x) (0,0) (y) #step_04.html

Slide 28

Slide 28 text

(x,y) (x) (0,0) (y) (x+1,y) (x+1) #step_04.html

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

# 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

Slide 32

Slide 32 text

(x,y) (x) (0,0) (y) #step_06.html

Slide 33

Slide 33 text

(x-3,y) (x-3) (0,0) (y) #step_06.html

Slide 34

Slide 34 text

(x-3,y) (x-3) (0,0) (y) #step_06.html

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

100 200 50

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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