Processingの勉強 - Friendly fire

しゃのさんに教わっているProcessing、ノート書いてるのでせっかくだから
blogにアップしました。今日はマウスとキーボードの動きを習いました。
わかりにくいとしたら、僕の記述力のせいです。

11/25/2010 [Processing：インタラクション]

☆『mouse』

- - - - -

『mouseX』実行するウィンドウ内にマウスの座標があてはまる。

- - - - -

例：縦ライン
void setup(){
size(100,100);
}

void draw(){
background(204);
line(mouseX, 20, mouseX, 80);
println(mouseX);
}

- - - - -

例：横ライン
void setup(){
size(100,100);
}

void draw(){
background(204);
line(20, mouseY, 80, mouseY);
}

- - - - -

『pmouse』:　(previous　mouseの略)　前のフレームのX座標

- - - - -

例：※早くカーソルを動かすと前のx座標との差が大きくなるため、棒の傾きが大きくなる
void setup(){
size(100,100);
}

void draw() {
background(204);
line(mouseX, 20, pmouseX, 80);
}

- - - - -

void setup(){
size(100,100);
}

void draw() {
background(204);
line(20, mouseY, 80, pmouseY);
}

- - - - -

※フレームレートの変え方(setupに書く)　 frameRate();　※デフォルトは30、()内に数字を書く

- - - - -

『mousePressed』マウス押したのを判別するコマンド。turuがon　

- - - - -

例：
void setup(){
size(100,100);
}

void draw() {
if (mousePressed == true) {
fill(0);
} else {
fill(255);
}
rect(25, 25, 50, 50);
}

- - - - -

『mousePressed()』マウスを押したとき。関数、書き方が違う。※概念が難しい、触って理解。挙動の違い、
はやって覚える。valueバリュー

- - - - -

例：
int value = 0;

void setup(){
size(100,100);
}

void draw() {
fill(value);
rect(25, 25, 50, 50);
}

void mousePressed() {　　//マウスを押したときに出てくる反応
if(value == 0) {
value = 255;
} else {
value = 0;
}
}

- - - - -

mouseClicked()：押して離す

- - - - -

例：
int value = 0;

void setup(){
size(100,100);
}

void draw() {
fill(value);
rect(25, 25, 50, 50);
}

void mouseClicked() {
if(value == 0) {
value = 255;
} else {
value = 0;
}
}

- - - - -

「mouseReleased()」：マウスを離したときに()を動かす

- - - - -

例：
int value = 0;

void setup(){
size(100,100);
}

void draw() {
fill(value);
rect(25, 25, 50, 50);
}

void mouseClicked() {
if(value == 0) {
value = 255;
} else {
value = 0;
}
}

- - - - -

「mouseMoved()」::マウスが移動しているときに動く。

- - - - -

例：
int value = 0;

void setup(){
size(100,100);
}

void draw() {
fill(value);
rect(25, 25, 50, 50);
}

void mouseMoved() {
value = value + 5;
if (value > 255) {
value = 0;
}
}

- - - - -

「mouseDragged()」：マウスでドラッグしているときに、動く。

- - - - -

例：
int value = 0;

void setup(){
size(100,100);
}

void draw() {
fill(value);
rect(25, 25, 50, 50);
}

void mouseDragged()
{
value = value + 5;
if (value > 255) {
value = 0;
}
}

- - - - -

「mouseButton」:右クリック　左クリックのとき　第三ボタンを押したときに動く

- - - - -

例:押したときだけ動く
int value = 0;

void setup(){
size(100,100);
}
// Click within the image and press
// the left and right mouse buttons to
// change the value of the rectangle
void draw() {
rect(25, 25, 50, 50);
}

void mousePressed() {
if (mouseButton == LEFT) {
fill(0);
} else if (mouseButton == RIGHT) { //右クリック
fill(255);
} else {
fill(126);
}
}

- - - - -

例：押したとき以外にも
int value = 0;

void setup(){
size(100,100);
}
// Click within the image and press
// the left and right mouse buttons to
// change the value of the rectangle
void draw() {
if (mousePressed && (mouseButton == LEFT)) {
fill(0);
} else if (mousePressed && (mouseButton == RIGHT)) {
fill(255);
} else {
fill(126);
}
rect(25, 25, 50, 50);
}

- - - - -
        
        -
        
        -
        
        -

☆『Keyboard』文字通りキーボードで動く。

- - - - -

「keyPressed」：keyを押しているときに動く

- - - - -

例

void setup(){
size(100,100);
}
// Click on the image to give it focus
// and press any key

// Note: the rectangle in this example may
// flicker as the operating system may
// register a long key press as a repetition
// of key presses

void draw() {
if (keyPressed == true) {
fill(0);
} else {
fill(255);
}
rect(25, 25, 50, 50);
}

- - - - -

keyPressed()：関数バージョン

- - - - -

例
int value = 0;

void setup(){
size(100,100);
}
// Click on the image to give it focus,
// and then press any key
void draw() {
fill(value);
rect(25, 25, 50, 50);
}

void keyPressed() {
if (value == 0) {
value = 255;
} else {
value = 0;
}
}

- - - - -

keyReleased()：離すと動く

- - - - -

例
int value = 0;

void setup(){
size(100,100);
}
// Click on the image to give it focus,
// and then press any key
void draw() {
fill(value);
rect(25, 25, 50, 50);
}

void keyReleased() {
if (value == 0) {
value = 255;
} else {
value = 0;
}
}

- - - - -

key：押したkeyが何のボタンかということで条件をつけたい場合。
　　 ※ノンアスキーのkeyが反応しない「例：delete space」

- - - - -

例
void setup(){
size(100,100);
}
// Click on the window to give it focus
// and press the 'B' key

void draw() {
if(keyPressed) {
if (key == 'b' || key == 'B') {
fill(0);
}
} else {
fill(255);
}
rect(25, 25, 50, 50);
}

- - - - -

keyCode：ノンアスキーのkeyでも動くようにする場合

- - - - -

例
color fillVal = color(126); //色用の変数 http://processing.org/reference/color_datatype.html

void draw() {
fill(fillVal);
rect(25, 25, 50, 50);
}

void keyPressed() {
if (key == CODED) {
if (keyCode == UP) {
fillVal = 255;
} else if (keyCode == DOWN) {
fillVal = 0;
}
} else {
fillVal = 126;
}
}

- - - - -

※color fillVal = color()１６進数法でも表せる。
例
color c1 = color(204, 153, 0);
color c2 = #FFCC00;
noStroke();
fill(c1);
rect(0, 0, 25, 100);
fill(c2);
rect(25, 0, 25, 100);
color c3 = get(10, 50);
fill(c3);
rect(50, 0, 50, 100);

- - - - -

void keyTyped()：mouse clickと似た動作。keyPressed()とkeyReleased()

- - - - -

void draw() { } // Empty draw() needed to keep the program running

void keyPressed() {
println("pressed " + int(key) + " " + keyCode);
}

void keyTyped() {
println("typed " + int(key) + " " + keyCode);
}

void keyReleased() {
println("released " + int(key) + " " + keyCode);
}

//超高速でクリックするとreleasedがprintinで表示されない。

- - - - -

課題１：ドローイングツールをつくる。マウスとキー両方
例：点描　キーボードの赤押したら　赤になるとか
例：Dのキー押したら全消し。backroadでやる。
課題２：条件分岐のあるアニメーション
例：玉が右に動いてるときに、クリックすると逆方向に動いたりとか

- - - - -

こういうのがやりたいときは、こういうのが使うとできるというのが大事。

- - - - -

cursor()：カーソルの表示：種類ARROW, CROSS, HAND, MOVE, TEXT, WAIT

- - - - -

例：Xを５０超えると
// Move the mouse left and right across the image
// to see the cursor change from a cross to a hand

void draw()
{
if(mouseX < 50) {
cursor(CROSS);
} else {
cursor(HAND);
}
}

- - - - -

noCursor()：カーソル非表示　

- - - - -

例：マウスをクリックしているときだけ非表示
// Press the mouse to hide the cursor
void draw()
{
if(mousePressed == true) {
noCursor();
} else {
cursor(HAND);
}
}

- - - - -

ON/off はture/falseだけど、elseで処理しちゃえば大丈夫。

- - - - -------------------------