参考:Processing日本語版リファレンス
作成者:chihiro


例題

px001...書き方の説明、変数、コメント、ellipse

01.png

※つぶれた点(・)はアスタリスク(*)

  • ellipse();の中の数字を変えてみよう
  • int a = の数字を変えてみよう
  • ellipse(a,a,b,b);の中身に数式記号(四則演算子、+-*/)を入れてみよう
    • 例:ellipse(a+b,a-b,b*2,a/2);

サンプル

px002...四角、線、色

02.png

サンプル

px003...forループ

p03.png

サンプル

px004...if

px004.png
  • 確認できたら、background(255);をコメントアウトしてみよう

サンプル

px005...whileループ

px005.png
  • どうしてグラデーションになっているか考えてみよう

サンプル

px006...二重forループ

px006.png
  • iやjにかけている数字を変えて、縦横の列の関係をつかもう

サンプル

px007...switch

px007.png

※キーボードのaでiを1足す、zでiを1減らす

  • (abs(i-(i/5)*5))の意味を考えてみよう

サンプル

演習問題

qx001...顔を描いてみよう

ellipseやrect、lineを使って顔を描いてみよう。
サンプル1
サンプル2

qx002...変数を使って花を描いてみよう

q2_q2.png
q2_q.png

クリックしたら花が咲くプログラムについて考えよう。
「?」の部分に花びらを描くためのプログラミングを書いてみよう。
ヒント:ex、ey(黄色い円のx座標、y座標)から花びらの中心がどれくらい離れているか考えてみよう。

q2_q3.png

qx003...円を一列に描いてみよう

ellipse.png

図のように円を一列に描いてみよう。
等間隔に描写すること。
px003

qx004...はねかえる動きを考えてみよう

qx004_c.png
qx004.png

円が画面の中を動きまわり、画面の外に出そうになったらはねかえる動きを考えてみよう。
x_speedやy_speedに何をかけるべきか?

解答

qx005_a.png

解答のプログラムは、円の半径radが画面外に出たらはねかえる動きをします。
if(e_x > width || e_x < 0)も正解としました。
動きがパターン化(一定の所でしかはねかえらない)人もいましたが、
書き方が合っていれば正解としました。

qx005...条件を考えてみよう

qx005_c.png
qx005_2.png

左から数えて、3の倍数の円は赤、5の倍数の円は青、
3の倍数かつ5の倍数の円は紫で塗りつぶす条件を考えてみよう。

解答

qx005.png

qx006...二重forループについて考えよう

qx006_c.png
qx006_2.png

図のように色分けしてみよう。

qx007...whileループとforループを書きかえてみよう

px003をwhileループに、px005をforループに書きかえてみよう。

発展例題

dx001...sinとcos

dx001.png
  • t=t+6;の数字を色々変えてみよう

サンプル

dx002...マウスにあわせて動く円

dx002.png

サンプル

dx003...マウスについていく線

dx003.png

サンプル

dx004...for、if、elseで不思議な渦

dx004.png

サンプル

dx005...キーボードお絵かき

dx005_c.png
dx005.png

※キーボードのwで上、aで左、sで右、zで下に動く

  • 画面の端にいったら、反対から現れるようにしてみよう
  • キーボードのxを押すたびにスピードが上がるようにしてみよう
    • void keyPressed(){}という関数を使う
      • if(keyPressed){}との違いは何か考えてみよう
  • キーボードのqを押すとはねかえる動きをするようにしてみよう

サンプル

解答

dx005_a.png

Processingの基本

void setup(){}
画面サイズや背景色など、常に適用される設定を書く所。
size(横,縦)
画面のサイズ。
background(値)
背景色の指定。値ひとつだと黒~白、値みっつでRGBの指定。
smooth()
図形をなめらかに表示する。
frameRate(値)
描写するフレーム数を設定する。フレーム数を大きくすると速くなる。Rは大文字。
void draw(){}
Arduinoでいうところのloop。この中にプログラムを書く。
図形関係
stroke(値)
線色。値ひとつだと黒~白、値みっつでRGBの指定。
noStroke()
線なし。Sは大文字。
strokeWeight(値)
線の太さ。Wは大文字。
fill(値)
図形の塗りつぶし。値ひとつだと黒~白、値みっつでRGBの指定。もうひとつ値を増やすと透明度の指定ができる。
noFill()
塗りつぶしなし。Fは大文字。
ellipse(x座標,y座標,横,縦)
円(正確にいうと楕円)。横と縦の値が等しければきれいな円になる。
rect(x座標,y座標,横,縦)
長方形。横と縦の値が等しければ正方形になる。
line(始点のx座標,始点のy座標,終点のx座標,終点のy座標)
線をひく。
値関係
width
画面の横幅の値。
height
画面の高さの値。
sin(値)
サイン。値はラジアンで測られた角度。
cos(値)
コサイン。値はラジアンで測られた角度。
random(値)
乱数を出す。値ひとつだとゼロからその値までの間の乱数。値ふたつだとその間の数字で乱数を出す。
abs(値)
値の絶対値を出す。
mouseX
マウスのx座標の位置の値。Xは大文字。
mouseY
マウスのy座標の位置の値。Yは大文字。
その他
println(値)
プログラムの下に指定の値が改行付きで表示される。普通の文字列の場合はダブルコーテーション(")で囲む。文字列と値はプラス(+)でつなぐ。
background(値)
背景を描きなおす。主にアニメーションをつくる際に使う。
void keyPressed(){}
キーボードが押された時の動作の設定を書く。押されている「間」ではないので注意。
key
キーの指定。Aキーを押されたときの動作は「if(key == 'a')」と書く。
void mousePressed(){}
マウスがクリックされた時の動作の設定を書く。クリックされている「間」ではないので注意。

プログラミングの基本

  • 行末は;を忘れずに書く。
  • できるだけTabキーを使って見やすく書く。

添付ファイル: filedx004.png 595件 [詳細] filepx005.png 540件 [詳細] fileqx006_c.png 519件 [詳細] fileq2_q2.png 564件 [詳細] fileqx003_2.png 258件 [詳細] filepx006.png 594件 [詳細] fileqx004.png 603件 [詳細] fileq2_q.png 972件 [詳細] fileqx005_a.png 678件 [詳細] fileq2_q3.png 548件 [詳細] filedx001.png 538件 [詳細] file02.png 606件 [詳細] fileqx004_c.png 496件 [詳細] filepx007.png 563件 [詳細] fileqx005_2.png 558件 [詳細] filedx005_c.png 543件 [詳細] filedx002.png 590件 [詳細] filedx005_a.png 572件 [詳細] fileqx005.png 498件 [詳細] file01.png 613件 [詳細] fileqx006_2.png 549件 [詳細] filedx005.png 521件 [詳細] fileellipse.png 501件 [詳細] filep03.png 580件 [詳細] filepx004.png 571件 [詳細] fileqx005_c.png 517件 [詳細] filedx003.png 558件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-10-04 (日) 17:43:43 (1326d)