FrontPage

processingを使って教材を作る

メリット

絵や音をプログラミングで再現するのが簡単

理由

  1. 使いやすいライブラリが実装されている
  2. 言語仕様も比較的扱いやすくなっている

processingを使ってプログラミングを体験する

メリット

画像の取り扱いが簡単なことに加え、マウス操作も取り入れやすい

processingの特徴

  1. 面倒なコンパイル作業が不要
  2. グラフィック関係の命令が充実
  3. 分かりやすいUI

さあ、始めよう!

起動すると新しいSketchが用意される。Sketchとはprocessingのプログラムのこと。
processingではどんなプログラムでも作ることができるが、ここは割りきってグラフィックに限定してしまおう。
グラフィックを描画するためのウインドウを作成する。

 size(640,480);

これだけでも立派なプログラム。実行させてみよう。

演習

sizeの引数(カッコの中の数)を変えるとウインドウの大きさが変わる。試してみよう。

背景がグレイの地味なウインドウが表示される。少し見た目を変えてみよう。背景の色を指定するには

 background(255);

を指定しよう。どうなったかな?

演習

backgroundの引数を変えると見た目がどのように変わるか試してみる。この数が何を表しているのか考えてみる。

演習

背景を白黒グレイ以外の色にしたいときはどうしたらいいだろうか。試してみよう。ヒントは光の三原色。

描画スクリーン上にはたくさんのピクセルがある。このピクセルには座標が設定されている。ウインドウ左上の点が原点(0,0)
先ほどのsize(640,480)では描画スクリーンの右下の点の座標は(639,479)となっている。

x座標は右に行くほど大きくなるが、y座標は下に下がるほど大きくなる。数学で習う座標系とはここが違うので注意が必要だ
コンピュータ業界ではy座標の向きが数学の授業とは違うのだが、その理由は昔のモニタが真空管だったことに由来する。画面を描画するときに画面を走査していくときに画面左上から走査が始まっていたことからこのような座標系になったと考えられる。ただ、言語やデータ形式、アプリケーションによっては数学で使う座標系と同様に左下に原点がある場合もあるので注意が必要である。

描画スクリーン上に対角線を描いてみよう

線を描くにはlineというコマンドを使う。

 line(0,0,639,479);

描画のコマンドは描いた図形が描画ウインドウからはみ出したとしてもエラーにはならず無視される。はみ出すことを恐れずにたくさん線を描いてみよう

演習 画面上にいっぱい線を描いてみよう

*このときに、綺麗な幾何学模様をお手本として提示すると生徒のやる気が俄然違ってくる。 *幾何学模様には規則的なパターンが存在している。これらのパターンは繰り返しによって生成される。 *この幾何学模様を見せることで繰り返しの重要性を認識させられるかどうかがこの後の授業展開の成功の鍵となる。

参考サイト http://yoppa.org/proga10/1301.html


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-09-20 (火) 21:07:00 (1155d)