Processing で交わらない三本線を描くには

Processingにて、単純なお絵かきソフトを作ろうと思っております。
一本の線に対して、両側に等幅で線をつけて、３本線を描きたく思っております。

ただ単純に、線を３本描くだけですと、角を曲げた際に、端の線と中央の線が被ってしまいます。
これを被らずに等幅で線を引く方法、ございますでしょうか？
ご教授いただければ幸いです。

イメージはこんな感じになります。↓

Processingにて、単純に線を３本引くだけのコードは下記です。

Processing
1
2void setup() {
3  size(300, 300);
4  background(255);
5  smooth();
6}
7
8void draw() {
9  if (mousePressed) {
10    stroke(0, 0, 0);
11    strokeWeight(10);
12    line(mouseX, mouseY, pmouseX, pmouseY);
13
14    stroke(0, 0, 0);
15    strokeWeight(2);
16    line(mouseX, mouseY +33, pmouseX, pmouseY +33);
17    line(mouseX, mouseY -33, pmouseX, pmouseY -33);
18  }
19}
20
21void keyPressed() {
22  if ( key == ' ' ) {
23    background(255);
24  }
25}
26

行動規範の内容に同意します

回答1件

ご質問のコードは主線に対して垂直方向に一定の距離ずらした線を引いているだけなので、主線と「一定の距離」にはなりませんね？

図1 主線(黒)と一定の距離の線(水色)

まずは図１の水色の線のように「主線の方向と垂直方向に一定の距離で線を引く」というのが第一歩だと思います。図のように水色の線を引くなら主線の方向を意識する必要があります。

主線の一つの線分の開始位置p0と終了位置p1のx,yそれぞれの差がdx, dyなら方向は
dir=Math.atan2(dy, dx)
ということになります。その垂直な方向はdir+Math.PI/2およびdir-Math.PI/2となるので、主線のp0,p1に対して水色の線の開始点、終了点の計算はsin/cosを使うと出せるので水色の線を描画するところまでは比較的簡単です。(なお「垂直」という条件だと三角関数を用いるまでもなくdx,dyの比率で単純に出てくるのですが...)

ただしややこしいのは図の赤線の部分です。主線はどんどん方向が変わるので折れ曲がる部分で水色の線は「不連続」になってしまいます。これをどうやってスムーズに描画するかがドローイングソフトの出来栄えを大きく左右しますが、その具体的方法は回答欄で簡単な説明ができるほど単純ではないと思います。

こうした問題を考えるには解析幾何学の計算についての解説に役立つものがあると思います。まずはそうしたもので背景知識を調べることをお勧めします。

なお、３本の線を引くのではなく太さの違う２本の線を引くと考えると図の赤線の部分は描画ルーチンが良きにはからってくれますので、ややこしい計算に頭を悩ませずに実現できるかも知れません。

投稿2017/06/13 13:39