しゃのさんに教わっている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で処理しちゃえば大丈夫。
- -------------------------
]]>
