Upgrade to Pro — share decks privately, control downloads, hide ads and more …

event

tutida
February 06, 2016

 event

2016/2/6 プログラミングイベント用

tutida

February 06, 2016
Tweet

More Decks by tutida

Other Decks in Education

Transcript

  1. 本日の流れ # ガイダンス - 本イベントについて - processingについて - 準備などなど #

    プログラミング - ゲームが出来るまでのstep1~10まであります - ゲームじゃなくて好きに作ってもOK! - 最後にグループ内で発表 # 時間 - 13:00~16:00 (休憩 15分)
  2. Processingについて # Processingとは - 電子アートとビジュアルデザインのための プログラミング言語であり、統合かん(ry - 要はプログラミングで絵が描けるようになります! - http://processingjs.org/exhibition/

    # Processing.jsとは - 色々準備が必要なProcessingを パソコンに入っているブラウザだけで使えるようになる! - 詳しいことが知りたい人はリンクを参考 http://qiita.com/Souj/items/fe8aa34f1b1339a94427
  3. #教材 □ step_01.html ~ step_10.html → 問題ファイル □ step_01_answer.html ~

    step_10_answer.html → 解答例ファイル □ imgフォルダ / jsフォルダ → 問題に必要な画像やJavaScript □ TeraPad.exe → 問題を解く時に使います
  4. #教材 <!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> この中を 編集していきます。
  5. #step_01.html step_01 : 画面の大きさを設定してみよう - setup()の中にある size(100, 100)を変更して 横 1065

    縦 612 の画面を作ってみよう [Point] - size(横の大きさ, 縦の大きさ); →画面のサイズを決めるための命令
  6. #step_02.html step_02 :画像を背景に設定してみよう - 背景用画像が 「./image/sea.png」にあります - この背景用画像を画面に貼ってみよう [Point] -

    変数 : データや値をいれるための箱 - loadImage("./image/sea.png")で 変数 sea に画像の情報を保存します - background(画像の情報) で背景の設定が出来ます
  7. #step_03.html step_03 : 四角を書いてみよう - draw(){} の中で rect(???, ???, ???,

    ???)で四角が書けます。 - 場所や大きさなど色々触ってみよう [Point] - rect(横位置, 縦位置, 横大きさ, 縦大きさ); [Extra] - 画面の四隅にぴったりはまる 100×100の四角を置いてみよう
  8. #step_04.html step_04 : 四角を動かしてみましょう - setup(){} を一回だけ通った後は draw(){} を何回も繰り返して通ります -

    rect()の位置が毎回変わるようにすると、 動いているように見えます [Point] - 変数 : データや値をいれるための箱 - 四角の位置や大きさに変数を入れることができます (例) rect(x, y, 100, 100) - 「x = x + 3;」 xの値に3を加える
  9. # 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
  10. (0,y) (0,0) (y) if ( x == 0 ) {

    xを元の位置に戻す数字を入れる 壁の高さを変える } #step_06.html
  11. #step_07.html step_07 : 魚を作ろう - 魚を作りましょう。 - 今回はまだ四角で代用 - キーボードを押すと上に移動、押していないと下に移動

    [point] - keyPressed - if(keyPressed) { キーボードが押されているときに通る処理 } else { キーボードが押されていないときに通る処理 }
  12. if ( keypress ) { キーボードを押している時の処理 (四角が上に行く) } else {

    キーボードを押していない時の処理 (四角が下に行く) } #step_07.html
  13. if ( 条件A && 条件B ) { AとBの両方がOKの場合の処理 } (例)

    if ( x < 10 && x > 5 ) { x が 6~9の場合ここを通る } #step_08.html
  14. #step_09.html step_09 : 魚の画像を表示しよう - 魚画像が 「./image/sakana.png」にあります - この魚画像を画面に貼ってみましょう [Point]

    - loadImage("./image/sea.png")で 変数 sea に画像の情報を保存します - image(読み込む画像, 横位置, 縦位置, 横大きさ, 縦大きさ); - 画像を貼り付けるための命令
  15. #step_10.html step_10 : 壁に当たった時に花火がでる - いままで exit(); で終わらせていたところで 「花火」を出してみよう [Point]

    - drawFire() - 花火を出すための命令 - if (ゲームオーバーなら) { 花火を出す } else { 魚を出す }