|
メモリ（変数）の定義 int x, y; ←（例）座標(x,y)というメモリを定義 |
|
void setup() { : ←メモリの最初の値などをここに記述（一度だけ実行される） } |
|
void draw() { : ←描画命令はここに記述（繰り返し実行される） } |
【演習】 320x240の大きさのウインドウを生成する。
setup(){...}は一度だけ呼び出される処理、draw(){...}は繰り返し呼び出される処理。
size(w, h); ... w × h 大きさのウインドウを生成する。
【演習】 円（、線、矩形、塗りつぶし円）を描く。
ellipse(160,200, 40,40); ... 中心(160,200)、大きさ40×40の円
fill(r,g,b); ... r,g,b [0,255] ３つの数値で図形の色を指定。(255,0,0)は赤。
線なら、line(160,200, 200,100); 矩形なら、 rect(160,200, 80, 40);
【演習】 円をマウスで動かす。
さきほど追加した描画命令(２行)と差し替える
※座標(160,120)→(mouseX, mouseY)に差し替え
background(r,g,b); ... キャンバスをクリアするには単色で塗る。(255,255,255)は白。drawの１行目に置く。
【演習】 円の上方移動（座標の記憶と変更）。
先ほど指定した座標(mouseX,mouseY)を今度は(x,y)に差し替える。
メモリ（変数）の値は保持され、y = y - 1; のように変更できる。
【演習】 画像を読み込み円の代わりに描く。
ellipse(...); を image(img, x,y, 40,40); に差し替える。
1. まず、作成中のプログラムを保存する。(sketch_160824aというフォルダができる)
2. 
ball.png 画像を右クリックし、先ほどのフォルダ内に「名前をつけて画像を保存」。
下記のようにWWWの画像を直接指定することも可能。Dの2の代わりに以下を貼り付け。
img = loadImage("http://www.is.kyusan-u.ac.jp/~yonemoto/it-lec/ball.png");
【演習】 ボールが見えなくなったら座標をリセット。
-100は画面外を表す適当な値。
@サンプルのキット （webtest.zipファイル）をダウンロードし デスクトップ（またはダウンロードした場所）に解凍。 index.htmが編集対象（右クリック→プログラムから開く→メモ帳など）。 A該当箇所にProcessingのプログラムをコピー＆ペーストし保存 Bindex.htmをダブルクリックしブラウザで実行 （IEでは動作しないので、別のブラウザで開く。右クリック→プログラムから開く→Google Chromeなど）
【演習】 円内でクリックしたら上に移動。
メモリ「s」は数値1でオン、0でオフ、を記憶する。sが1なら上移動が起こる。
y = y - 1; を if (s==1) { } で囲う。さらに s=0; を追加する。
absで絶対値(absolute value)を求める。例えばabs(-3)は|-3|を意味する。