プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
Processing、座標の倍率を変更する「scale()」を使ってみる
scale()は座標の倍率を変更するときに使う命令です。

scale(2.0);

とかやると座標の倍率が2倍になります。

「座標の倍率が2倍」とか言われても分かりにくいかもしれませんが
実際に使ってみると「あぁ、こーゆーことか」と分かるはずです。

例えば、最初の時点で横位置が「100」縦位置が「100」のところに
直径が「100」の円を描いたとしましょう。
以下のような処理です。

void setup(){
    background(255);
    size(800,800);
}

void draw(){
  //円を描く
  ellipse(100, 100, 100, 100);

}

次に、座標の倍率を2倍にした後で横位置が「100」縦位置が「100」のところに
直径が「100」の円を描いてみてください。
以下のような処理です。

void setup(){
    background(255);
    size(800,800);
}

void draw(){
  //座標の倍率を2倍にする
  scale(2.0);


  //座標の倍率を2倍にしたところに円を描く
  ellipse(100, 100, 100, 100);

}

そうすると、1回目よりも大きな円が中央寄りに描かれるはずです。

これは座標の倍率を2倍にした後で横位置が「100」縦位置が「100」のところに
直径が「100」の円を描いたからです。

元の倍率では横位置が「200」縦位置が「200」だったところに
直径が「200」の円が描かれています。

次に、座標の倍率を0.5倍にした後で横位置が「100」縦位置が「100」のところに
直径が「100」の円を描いてみてください。
以下のような処理です。

void setup(){
    background(255);
    size(800,800);
}

void draw(){
  //座標の倍率を0.5倍にする
  scale(0.5);


  //座標の倍率を0.5倍にしたところに円を描く
  ellipse(100, 100, 100, 100);

}

そうすると、1回目よりも小さな円が左上寄りに描かれるはずです。

これは座標の倍率を0.5倍にした後で横位置が「100」縦位置が「100」のところに
直径が「100」の円を描いたからです。

元の倍率では横位置が「50」縦位置が「50」だったところに
直径が「50」の円が描かれています。

これが基本です。

この性質を利用して、いろいろと遊べます(-m-)

例えば、以下の処理を実行してみてください。

void setup(){
    background(255);
    size(800,800);
}

float a = 0.1;//倍率

void draw(){
  //座標の倍率をa倍にする
  scale(a);


  //円を描く
  ellipse(100, 100, 100, 100);

  //倍率に0.1足す
  a = a + 0.1;
  
  //2倍を超えたら0.1倍に戻す
  if(a > 2){
    a = 0.1;
  }


}

そうすると、円が大きくなりながら右下に伸びるはずです。
これは

1.横位置「100×0.1」縦位置「100×0.1」大きさ「100×0.1」の円を描く
2.横位置「100×0.2」縦位置「100×0.2」大きさ「100×0.2」の円を描く
3.横位置「100×0.3」縦位置「100×0.3」大きさ「100×0.3」の円を描く
   ・
   ・
   ・
20.横位置「100×2.0」縦位置「100×2.0」大きさ「100×2.0」の円を描く

を何回もやっているからです。

ちなみに、円の位置をズラしたくないのであれば
横位置、縦位置を倍率で割ってあげればOKです。

例えば、以下のようにすると
円の中心は変わらないで、円の大きさのみが変わります。

void setup(){
    background(255);
    size(800,800);
}

float a = 0.1;//倍率

void draw(){
  //座標の倍率をa倍にする
  scale(a);

  //円を描く
  ellipse(100/a, 100/a, 100, 100);

  //倍率に0.1足す
  a = a + 0.1;
  
  //2倍を超えたら0.1倍に戻す
  if(a > 2){
    a = 0.1;
  }

}

これは

1.横位置「100×0.1÷0.1」縦位置「100×0.1÷0.1」大きさ「100×0.1」の円を描く
2.横位置「100×0.2÷0.2」縦位置「100×0.2÷0.2」大きさ「100×0.2」の円を描く
3.横位置「100×0.3÷0.3」縦位置「100×0.3÷0.3」大きさ「100×0.3」の円を描く
   ・
   ・
   ・
20.横位置「100×2.0÷2.0」縦位置「100×2.0÷2.0」大きさ「100×2.0」の円を描く

を何回もやっているからです。

使い方さえ覚えてしまえば、工夫次第で、いろいろ遊べます。
気が向いたら、いろいろ試してみてください。

そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:Processing  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事