2018.
01.
20
10:39:04
Processingで描いた図形を動かすやり方は2つあります。
１．微妙に位置をズラして同じ図形を何回も描く
２．translate()を使って座標をズラす
の2つです。
順番に見ていきましょう。
まずは「１．微妙に位置をズラして同じ図形を何回も描く」について説明します。
Processingはパラパラ漫画です。
静止画を何枚もパラパラすることで動いているように見せています。
だから、描く位置を少しずつズラしながら何回も描けば
動いているように見えます。
文字通りのパラパラ漫画と同じ理屈です。
例えば、こんな感じで円を描いたとしますφ（－－）
draw()の度に円の横位置に「1」足されるようにしてみましょう。
例えば、こんな感じの処理ですφ（－－）
そうすると、すこ～しずつ円が右に動きます。
これはdraw()の度に
１．横位置100に円を描く
２．横位置101に円を描く
３．横位置102に円を描く
４．横位置103に円を描く
５．横位置104に円を描く
が行われているからです。
位置が右にズレた円の静止画をパラパラして見ることで
円が動いているように見えています。
これが「１．微妙に位置をズラして同じ図形を何回も描く」です。
図形を動かすときの基本です。
次に「２．translate()を使って座標をズラす」について説明します。
translate()は座標軸をズラす指定です。
具体的には、あーだこーだ。
きちんと理屈を理解しようとすると混乱するかもしれません。
実際に遊んでみて、まずは「どんな指定をすると、どうなる」だけ覚えてしまった方が良いでしょう。
仕組み的なことは余裕があったら勉強してください。
それでは実際の例を見てみましょう。
例えば、こんな感じで円を描いたとしますφ（－－）
translate()を使って座標軸を1ずつ右にズラします。
例えば、こんな感じの処理ですφ（－－）
そうすると、すこ～しずつ円が右に動きます。
これはdraw()の度に
１．軸を（0,0）にして横位置100に円を描く
２．軸を（1,0）にして横位置100（軸を移動する前の101のところ）に円を描く
３．軸を（2,0）にして横位置100（軸を移動する前の102のところ）に円を描く
４．軸を（3,0）にして横位置100（軸を移動する前の103のところ）に円を描く
５．軸を（4,0）にして横位置100（軸を移動する前の104のところ）に円を描く
が行われているからです。
うん、言葉で説明すると分かりにくいですね（－－ゞ
理屈を理解しようと思うと大変かもしれません。
まずは「どんな指定をすると、どうなる」を体感してください。
これが「２．translate()を使って座標をズラす」の説明です。
さて、図形を動かすやり方として
１．微妙に位置をズラして同じ図形を何回も描く
２．translate()を使って座標をズラす
の2つを説明しました。
それぞれの使いどころですが
１．微妙に位置をズラして同じ図形を何回も描く
→描かれている図形のどれかを動かすときに使う
２．translate()を使って座標をズラす
→描かれている図形を全部まとめて動かすときに使う
です。
例えば、画面に2つ円が描かれていたとしましょう。
こんな処理ですφ（－－）
1つ目の円だけを動かしたいときは「１．微妙に位置をズラして同じ図形を何回も描く」を使います。
例えば、こんな感じですφ（－－）
このプログラムを動かすと、1つ目の円だけが右に動いて見えるはずです。
画面に描いてある図形を全部まとめて動かしたい場合は
「２．translate()を使って座標をズラす」を使います。
例えば、こんな感じですφ（－－）
このプログラムを動かすと、2つの円が右に動いて見えるはずです。
「１．微妙に位置をズラして同じ図形を何回も描く」は図形をズラします。
「２．translate()を使って座標をズラす」は画面全体をズラします。
そんなイメージです。
気が向いたら、サンプルを動かしたり、数字を変えたりして遊んでみてください。
「百聞は一見にしかず」です（－－）ノ
そんな感じ＼（－－）／
１．微妙に位置をズラして同じ図形を何回も描く
２．translate()を使って座標をズラす
の2つです。
順番に見ていきましょう。
まずは「１．微妙に位置をズラして同じ図形を何回も描く」について説明します。
Processingはパラパラ漫画です。
静止画を何枚もパラパラすることで動いているように見せています。
だから、描く位置を少しずつズラしながら何回も描けば
動いているように見えます。
文字通りのパラパラ漫画と同じ理屈です。
例えば、こんな感じで円を描いたとしますφ（－－）
void setup(){
background(255);
size(800,400);
}
void draw(){
background(255);
//円を描く
ellipse(100, 100, 100, 100);
}
background(255);
size(800,400);
}
void draw(){
background(255);
//円を描く
ellipse(100, 100, 100, 100);
}
draw()の度に円の横位置に「1」足されるようにしてみましょう。
例えば、こんな感じの処理ですφ（－－）
void setup(){
background(255);
size(800,400);
}
int a = 0;
void draw(){
background(255);
//円を描く
ellipse(100 + a, 100, 100, 100);
//aに1を足す
a = a + 1;
}
background(255);
size(800,400);
}
int a = 0;
void draw(){
background(255);
//円を描く
ellipse(100 + a, 100, 100, 100);
//aに1を足す
a = a + 1;
}
そうすると、すこ～しずつ円が右に動きます。
これはdraw()の度に
１．横位置100に円を描く
２．横位置101に円を描く
３．横位置102に円を描く
４．横位置103に円を描く
５．横位置104に円を描く
が行われているからです。
位置が右にズレた円の静止画をパラパラして見ることで
円が動いているように見えています。
これが「１．微妙に位置をズラして同じ図形を何回も描く」です。
図形を動かすときの基本です。
次に「２．translate()を使って座標をズラす」について説明します。
translate()は座標軸をズラす指定です。
具体的には、あーだこーだ。
きちんと理屈を理解しようとすると混乱するかもしれません。
実際に遊んでみて、まずは「どんな指定をすると、どうなる」だけ覚えてしまった方が良いでしょう。
仕組み的なことは余裕があったら勉強してください。
それでは実際の例を見てみましょう。
例えば、こんな感じで円を描いたとしますφ（－－）
void setup(){
background(255);
size(800,400);
}
void draw(){
background(255);
//円を描く
ellipse(100, 100, 100, 100);
}
background(255);
size(800,400);
}
void draw(){
background(255);
//円を描く
ellipse(100, 100, 100, 100);
}
translate()を使って座標軸を1ずつ右にズラします。
例えば、こんな感じの処理ですφ（－－）
void setup(){
background(255);
size(800,400);
}
int a = 0;
void draw(){
background(255);
//座標をズラす
translate(a, 0);
//円を描く
ellipse(100, 100, 100, 100);
//aに1を足す
a = a + 1;
}
background(255);
size(800,400);
}
int a = 0;
void draw(){
background(255);
//座標をズラす
translate(a, 0);
//円を描く
ellipse(100, 100, 100, 100);
//aに1を足す
a = a + 1;
}
そうすると、すこ～しずつ円が右に動きます。
これはdraw()の度に
１．軸を（0,0）にして横位置100に円を描く
２．軸を（1,0）にして横位置100（軸を移動する前の101のところ）に円を描く
３．軸を（2,0）にして横位置100（軸を移動する前の102のところ）に円を描く
４．軸を（3,0）にして横位置100（軸を移動する前の103のところ）に円を描く
５．軸を（4,0）にして横位置100（軸を移動する前の104のところ）に円を描く
が行われているからです。
うん、言葉で説明すると分かりにくいですね（－－ゞ
理屈を理解しようと思うと大変かもしれません。
まずは「どんな指定をすると、どうなる」を体感してください。
これが「２．translate()を使って座標をズラす」の説明です。
さて、図形を動かすやり方として
１．微妙に位置をズラして同じ図形を何回も描く
２．translate()を使って座標をズラす
の2つを説明しました。
それぞれの使いどころですが
１．微妙に位置をズラして同じ図形を何回も描く
→描かれている図形のどれかを動かすときに使う
２．translate()を使って座標をズラす
→描かれている図形を全部まとめて動かすときに使う
です。
例えば、画面に2つ円が描かれていたとしましょう。
こんな処理ですφ（－－）
void setup(){
background(255);
size(800,400);
}
void draw(){
background(255);
//説明文
fill(0);
text("円を2つ描く",10, 10);
//円1を描く
ellipse(100, 100, 100, 100);
//円2を描く
ellipse(100, 200, 100, 100);
}
background(255);
size(800,400);
}
void draw(){
background(255);
//説明文
fill(0);
text("円を2つ描く",10, 10);
//円1を描く
ellipse(100, 100, 100, 100);
//円2を描く
ellipse(100, 200, 100, 100);
}
1つ目の円だけを動かしたいときは「１．微妙に位置をズラして同じ図形を何回も描く」を使います。
例えば、こんな感じですφ（－－）
void setup(){
background(255);
size(800,400);
}
int a = 0;
void draw(){
background(255);
//説明文
fill(0);
text("円を2つ描く",10, 10);
//円1を描く
ellipse(100 + a, 100, 100, 100);
//円2を描く
ellipse(100, 200, 100, 100);
//aに1を足す
a = a + 1;
}
background(255);
size(800,400);
}
int a = 0;
void draw(){
background(255);
//説明文
fill(0);
text("円を2つ描く",10, 10);
//円1を描く
ellipse(100 + a, 100, 100, 100);
//円2を描く
ellipse(100, 200, 100, 100);
//aに1を足す
a = a + 1;
}
このプログラムを動かすと、1つ目の円だけが右に動いて見えるはずです。
画面に描いてある図形を全部まとめて動かしたい場合は
「２．translate()を使って座標をズラす」を使います。
例えば、こんな感じですφ（－－）
void setup(){
background(255);
size(800,400);
}
int a = 0;
void draw(){
background(255);
//座標をズラす
translate(a,0);
//説明文
fill(0);
text("円を2つ描く",10, 10);
//円1を描く
ellipse(100, 100, 100, 100);
//円2を描く
ellipse(100, 200, 100, 100);
//aに1を足す
a = a + 1;
}
background(255);
size(800,400);
}
int a = 0;
void draw(){
background(255);
//座標をズラす
translate(a,0);
//説明文
fill(0);
text("円を2つ描く",10, 10);
//円1を描く
ellipse(100, 100, 100, 100);
//円2を描く
ellipse(100, 200, 100, 100);
//aに1を足す
a = a + 1;
}
このプログラムを動かすと、2つの円が右に動いて見えるはずです。
「１．微妙に位置をズラして同じ図形を何回も描く」は図形をズラします。
「２．translate()を使って座標をズラす」は画面全体をズラします。
そんなイメージです。
気が向いたら、サンプルを動かしたり、数字を変えたりして遊んでみてください。
「百聞は一見にしかず」です（－－）ノ
そんな感じ＼（－－）／
category:Processing thema:パソコンな日々 - genre:コンピュータ Posted by ササキマコト