点線を描画するには

◆PROCESSING 逆引きリファレンス

 カテゴリー:図形描画

点線を描画するには

【解説】

PROCESSINGで普通に線(連続線)を引くには、「直線を描画するには」記事で紹介したように line() 命令を利用します。

その一方で、点線(や破線)を簡単に描画する命令は用意されていません。

PROCESSINGで点線(や破線)を描画するには

  • OpenGLの機能を用いて描く
  • 2つの座標を結ぶ直線上にある点の座標を計算して、自分で描く

の、どちらかの処理を行う事になります。この記事では、自分で座標を計算しながら線を引く方法を紹介します。

2つの座標間にある直線上の点は、lerp()命令で計算可能です。
lerp説明1

【構文】

float   f   =  lerp( int  x,       int   y,       float  amt );
float   f   =  lerp( float  x,   float   y,   float  amt );

【パラメータ】

x  :1つ目の点。float または int 値。
y  :2つ目の点。float または int 値。
amt :xとyの間にある点を求める間隔。

amtが 0.5 なら、xとyの中間点を求めます。0.25なら x と y の距離を4等分して、xに近い方から1/4進んだ位置にある点を求めます。

lerp説明2

【戻り値】

f    :計算結果

【注意】

amtが 0.0 の場合、戻り値( f )は最初の点 x と同じになります。amt が 1.0 の場合、戻り値( f )は2番目の点 y と同じになります。

amtが 1.0 より大きい場合は、x と y の距離を amt 倍した直線上の位置が戻されます。例えば amt が 2.0 の場合は、x と y の長さと同一距離をx->y方向に進めた点 z が戻されます。

lerp説明3

【関連記事】


サンプルプログラム

点線を描画する例1:

座標 x1 , y1 から x2, y2 に掛けて、点を打つ事で点線に見せかけています。
ぞれぞれの座標を結ぶ中間点は、lerp() 命令で計算しています。

<出力サンプル>
lerpサンプル1

 

点線を描画する例2:

ポイントは hasen で定義している破線パターン文字列です。この文字列を先頭から1文字づつ取り出し、1 の場合は直前の座標と線で結び、0 の場合は結ばない処理を行っています。

本例ではパターンが “0101” なので、1つおきに線を引いたり空けたりして、出力サンプル1にあるような点線を描画しています。

パターンを “0110” にすると、出力サンプル2のような破線が描画されます。

<出力サンプル1>
lerpサンプル2

<出力サンプル2>
lerpサンプル3

 


PROCESSING逆引きリファレンス一覧 へ戻る

本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)