Polylineテクスチャ

アルちゃん

直線や曲線に座標群を張り付けて、直線曲線に沿った自由自在な装飾や模様、あるいはタッチを目指す。

スプラインはこちらへん。

ベクトル系のメソッドはこちらへん。

Drawなんちゃら系のメソッドの基本パターン。他に可変長引数のものを使ったりしますが、ここでは省略。なのでDrawLinerClose(v0,v1,v2)みたいな使い方はコピペするとエラーでます。

void DrawLiner(ArrayList<PVector> vertices)
{
 for(int i = 0; i<vertices.size()-1; i++)
 {
   PVector sv = vertices.get(i);
   PVector ev = vertices.get(i+1);
   line(sv.x, sv.y, ev.x, ev.y);
 }
}
//index[end]-index[0]区間を閉じる
void DrawLinerClose(ArrayList<PVector> vertices)
{  
 if(vertices==null){return;} 
 for(int i = 0; i<vertices.size(); i++)
 {      
   PVector sv = vertices.get(i);
   PVector ev = vertices.get((i+1)%vertices.size());
   line(sv.x, sv.y, ev.x, ev.y);
 }  
}

void DrawTriangleClose(ArrayList<PVector> triangles)
{
 for(int i = 0; i<triangles.size(); i+=3)
 {
   PVector v0 = triangles.get(i+0);
   PVector v1 = triangles.get(i+1);    
   PVector v2 = triangles.get(i+2);  
   DrawLinerClose(v0,v1,v2);
 }
}

void DrawPaths(ArrayList<ArrayList<PVector>> paths)
{
 for(ArrayList<PVector> path : paths)
 {    
   DrawLiner(path);
 } 
}

void DrawPathsClose(ArrayList<ArrayList<PVector>> paths)
{
 for(ArrayList<PVector> path : paths)
 {    
   DrawLinerClose(path);
 } 
}


Zig

Polylineを構成する線分ごとに、線分の長さに応じた三角形を形成していく。三角形は線分を底辺とし、線分からみて左手方向に新たな頂点を生成する。


ArrayList<PVector> MakeZig(ArrayList<PVector> polyline, float t, int step)
{
 ArrayList<PVector> ret = new ArrayList<PVector>();
 
 for(int i = 0; i<polyline.size()-step; i+=step)
 {
   PVector sv = polyline.get(i);
   PVector ev = polyline.get(i+step);    
   PVector lv = ev.copy().sub(sv);
   PVector mv = PVector.lerp(sv,ev,0.5);    
   
   PVector triangle_apex = mv.copy().add(TurnL(lv.copy().mult(t)));
   
   ret.add(sv.copy());
   ret.add(triangle_apex );
 }
 ret.add(polyline.get(polyline.size()-1));
 return ret;
}
 ArrayList<PVector> base_spline = CalcuOpenSpline(base_sv,base_cp1,base_cp2,base_ev,0.1);    
 stroke(0,255,0);
 DrawLiner(base_spline);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);
 
 ArrayList<PVector> output = MakeZig(base_spline,1,1); 
 DrawLiner(output);

画像1

生成される三角形の高さは底辺である線分の長さを１とし、引数tによって制御できる。

 ArrayList<PVector> output = MakeZig(base_spline,0.2,1); 
 DrawLiner(output);

画像2

引数stepを用いることで三角形の底辺を大きくすることができる。

  ArrayList<PVector> output = MakeZig(base_spline,1,2); 
 DrawLiner(output);

画像3


splineの精度をあげた場合

  
 ArrayList<PVector> base_spline = CalcuOpenSpline(base_sv,base_cp1,base_cp2,base_ev,0.01);    
 stroke(0,255,0);
 DrawLiner(base_spline);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);
 
 ArrayList<PVector> output = MakeZig(base_spline,1,1); 
 DrawLiner(output);

画像4

※注意

ここで作っているArrayList<PVector>は、ソースにある通り、ループ毎に座標を２つずつ格納している。このように形成した座標に対して、リストから座標を３つずつ取り出して三角とみなす、というような使い方をすると意図と異なる出力となる場合がある。

例えば取り出された座標群に対し、

void DrawLiner(ArrayList<PVector> vertices)
{
 for(int i = 0; i<vertices.size()-1; i++)
 {
   PVector sv = vertices.get(i);PVector ev = vertices.get(i+1);line(sv.x, sv.y, ev.x, ev.y);
 }
}

に引っ掛けた時の出力は

画像52

対して

void DrawTriangle(ArrayList<PVector> triangles)
{
 for(int i = 0; i<triangles.size(); i+=3)
 {
   PVector v0 = triangles.get(i+0);
   PVector v1 = triangles.get(i+1);    
   PVector v2 = triangles.get(i+2);  
   DrawLinerClose(v0,v1,v2);
 }
}

のようなメソッドに引っ掛けた時の出力は

画像51

これが正しいか否かは、最初になにを意図していたかによる。

ArrayList<PVector>を形成する時に３点ずつ格納すると

ArrayList<PVector> MakeZig3(ArrayList<PVector> polyline, float triangle_h, int step)
{
 ArrayList<PVector> ret = new ArrayList<PVector>(); 
 for(int i = 0; i<polyline.size()-step; i+=step)
 {
   PVector sv = polyline.get(i);
   PVector ev = polyline.get(i+step);    
   PVector lv = ev.copy().sub(sv);
   PVector mv = PVector.lerp(sv,ev,0.5);    
   
   PVector triangle_apex = mv.copy().add(TurnL(lv.copy().mult(triangle_h)));
   
   ret.add(sv.copy());
   ret.add(triangle_apex);
   ret.add(ev.copy());
 }
 return ret;
}

DrawLinerによる出力は

画像54

DrawTriangleは

画像55

これは結局、ArrayList<PVector>には三角形を区切るための情報が足りていないために起こる。この区切り情報に対して考えることを止めたければ出力を

ArrayList<ArrayList<PVector>> MakeZigD(ArrayList<PVector> polyline, float triangle_h, int step)
{
 ArrayList<ArrayList<PVector>> ret = new ArrayList<ArrayList<PVector>>(); 
 for(int i = 0; i<polyline.size()-step; i+=step)
 {    
   PVector sv = polyline.get(i);
   PVector ev = polyline.get(i+step);    
   PVector lv = ev.copy().sub(sv);
   PVector mv = PVector.lerp(sv,ev,0.5);       
   PVector triangle_apex = mv.copy().add(TurnL(lv.copy().mult(triangle_h)));
   
   ArrayList<PVector> temp = new ArrayList<PVector>();
   temp.add(sv.copy());
   temp.add(triangle_apex);
   temp.add(ev.copy());
   ret.add(temp);
 }
 return ret;
}

のようにする。


Zigzag

Polylineに対し、左右に交互に三角形を形成する。

ArrayList<PVector> MakeZigzag(ArrayList<PVector> polyline, float t, int step)
{
 ArrayList<PVector> ret = new ArrayList<PVector>();
 
 for(int i = 0; i<polyline.size()-step; i+=step)
 {
   PVector sv = polyline.get(i);
   PVector ev = polyline.get(i+step);    
   PVector lv = ev.copy().sub(sv);
   PVector mv = PVector.lerp(sv,ev,0.5);    
   
   PVector triangle_apex ;
   if((i/step)%2==0)
   {
     triangle_apex = mv.copy().add(TurnL(lv.copy().mult(t)));
   }
   else
   {
     triangle_apex = mv.copy().add(TurnR(lv.copy().mult(t)));
   }
   
   ret.add(sv.copy());
   ret.add(triangle_apex );
 }
 ret.add(polyline.get(polyline.size()-1));
 return ret;
}
  ArrayList<PVector> base_spline = CalcuOpenSpline(base_sv,base_cp1,base_cp2,base_ev,0.1);    
 stroke(0,255,0);
 DrawLiner(base_spline);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);
 
 ArrayList<PVector> output = MakeZigzag(base_spline,1,1); 
 DrawLiner(output);

splineの精度が荒いと継ぎ目が見える。

画像5

精度を上げるとZigとの差異がほとんどなくなるが、それでも微妙な継ぎ目の違いにより効果が異なる。

  ArrayList<PVector> base_spline = CalcuOpenSpline(base_sv,base_cp1,base_cp2,base_ev,0.01);    
 stroke(0,255,0);
 DrawLiner(base_spline);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);
 
 ArrayList<PVector> output = MakeZigzag(base_spline,1,1); 
 DrawLiner(output);

画像6


ArrayList<PVector> output = MakeZigzag(base_spline,0.2,1); 
 DrawLiner(output);

画像7

  ArrayList<PVector> output = MakeZigzag(base_spline,1,2); 
 DrawLiner(output);

画像8

四角

三角形を２つ組み、四角とする。この時、４つの座標を用いた三角形の組方はいっぱいあるので注意を要する。自由度を求めるならIndexを用いてどの座標を用いた三角なのか指定できるようにする必要がある。

ArrayList<PVector> MakeKite(ArrayList<PVector> polyline, float t, int step)
{
 ArrayList<PVector> ret = new ArrayList<PVector>();
 
 for(int i = 0; i<polyline.size()-step; i+=step)
 {
   PVector sv = polyline.get(i);
   PVector ev = polyline.get(i+step);    
   PVector lv = ev.copy().sub(sv);
   PVector mv = PVector.lerp(sv,ev,0.5);    
   
   PVector l = mv.copy().add(TurnL(lv.copy().mult(t)));
   PVector r = mv.copy().add(TurnR(lv.copy().mult(t)));
   
   ret.add(sv.copy());
   ret.add(l);
   ret.add(ev.copy());
   ret.add(ev.copy());
   ret.add(r);
   ret.add(sv.copy());    
 }
 return ret;
}
   //例えばこのように座標を取得しても、
   //のちの（描画時とかの）解釈で三角に分解すれば問題ない
   ret.add(sv.copy());
   ret.add(l);
   ret.add(ev.copy());
   ret.add(r);
   
   //こんなんでも良い
   ret.add(sv.copy());
   ret.add(l);
   ret.add(r);
   ret.add(l);
   ret.add(r);
   ret.add(ev.copy());
   
   
  ArrayList<PVector> base_spline = CalcuOpenSpline(base_sv,base_cp1,base_cp2,base_ev,0.1);    
 stroke(0,255,0);
 DrawLiner(base_spline);
 //DrawPoints(spline);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);
 
 ArrayList<PVector> output = MakeKite(base_spline,1,1); 
 DrawLiner(output);

画像9

  ArrayList<PVector> output = MakeKite(base_spline,0.2,1); 
 DrawLiner(output);

画像10

  ArrayList<PVector> output = MakeKite(base_spline,1,2); 
 DrawLiner(output);

画像11

Lineテクスチャ

3点からなるsource領域内にある座標群をPolylineに形成した三角領域にへばりつける。

  
 ArrayList<PVector> base_spline = CalcuOpenSpline(base_sv,base_cp1,base_cp2,base_ev,0.01);    
 stroke(0,255,0);
 DrawLiner(base_spline);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);
   
 //Source Polylineの形成と表示
 ArrayList<PVector> source_spline1 = CalcuOpenSpline(source_cp1,source_cp2,source_cp3,0.1);
 DrawLiner(source_spline1);  
 DrawPoints(source_cp1,source_cp2,source_cp3);
 
 //Source領域の形成と表示
 stroke(255,0,0);
 DrawLinerClose(source_v1,source_v2,source_v3);  
 DrawPoints(source_v1,source_v2,source_v3);
 stroke(DefaultStrokeColor);
 ArrayList<PVector> source_region = 
   new ArrayList<PVector>(Arrays.asList(source_v1,source_v2,source_v3));

 //描画
 ArrayList<PVector> output = MakeTriTexture(MakeZigzag(base_spline,1,1),source_spline1,source_region);
 DrawLiner(output);
 
//形成済みの連続した三角領域にsource領域内部の座標を貼り付ける
ArrayList<PVector> MakeTriTexture(
 ArrayList<PVector> triangled_polyline,//三角領域の連続 
 ArrayList<PVector> texture_polyline, 
 ArrayList<PVector> source_region)
{
 ArrayList<PVector> ret = new ArrayList<PVector>();  
 for(int i = 0; i<triangled_polyline.size()-2; i+=2)//i++,i+=3とかでもおもしろい
 {
   PVector target1 = triangled_polyline.get(i);
   PVector target2 = triangled_polyline.get(i+1);   
   PVector target3 = triangled_polyline.get(i+2);
   ArrayList<PVector> target_region = new ArrayList<PVector>();
   target_region.add(target1);target_region.add(target2);target_region.add(target3);
   ArrayList<PVector> temp = TextureTransform(texture_polyline,source_region,target_region);    
   ret.addAll(temp);    
 }  
 return ret;
}
//source領域内部にあるpolyline座標をtargetに移す
ArrayList<PVector> TextureTransform(
 ArrayList<PVector> source_polyline, 
 ArrayList<PVector> source_region,
 ArrayList<PVector> target_region)
{
 ArrayList<PVector> ret = new ArrayList<PVector>();
 for(int i = 0; i<source_polyline.size(); i++)
 {
   PVector v = source_polyline.get(i);
   v = Barycentric(target_region.get(0),target_region.get(1),target_region.get(2),
     InvBarycentric(source_region.get(0),source_region.get(1),source_region.get(2),v));
   ret.add(v);
 }
 return ret;
}

Barycentricとかはこちらへん。


画像12

画像13

画像14

画像15

画像16

画像17

画像18

画像19

画像20

画像21

画像22

Source空間で3次Splineをうろちょろさせた場合

  ArrayList<PVector> base_spline = CalcuOpenSpline(base_sv,base_cp1,base_cp2,base_ev,0.01);      
 stroke(0,255,0);
 DrawLiner(base_spline);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);
 
 //3次Spline
 ArrayList<PVector> source_spline1 = CalcuOpenSpline(source_cp1,source_cp2,source_cp3,source_cp4,0.01);
 DrawLiner(source_spline1);  
 DrawPoints(source_cp1,source_cp2,source_cp3,source_cp4);
 
 //Source領域の表示
 stroke(255,0,0);
 DrawLinerClose(source_v1,source_v2,source_v3);  
 DrawPoints(source_v1,source_v2,source_v3);
 stroke(DefaultStrokeColor);
 
 ArrayList<PVector> source_region = 
   new ArrayList<PVector>(Arrays.asList(source_v1,source_v2,source_v3));

 ArrayList<PVector> output = MakeTriTexture(MakeZigzag(base_spline,1,1),source_spline1,source_region);
 DrawLiner(output);

画像23

画像31

画像24

画像25

画像26

画像27

画像30

画像28

画像29

画像32

画像33

Path入力Paths出力

以下はSource空間で３次周期Splineをうろちょろさせているが、描画が一筆書きなので転写された個々の座標群が線で繋がれてしまっているのが分かる。この効果は上手いこと働く場合もあるがそうでない場合もある。

また、座標群を繋いでる部分を領域対領域を繋ぐ何らかの補間を施せばもう一歩進める。

また、座標群を完全に分離すると色塗りはたいへん容易い。


画像34

出力を繋がないようにしたもの。ただしここまですると当初の予定である”線感”は消える。オブジェクトを平行移動・拡大縮小・回転して張り付けた感が強くなるし、実際その通りである。

画像35

以下はスプラインの精度を下げたもの

画像36

  ArrayList<PVector> base_spline = CalcuOpenSpline(base_sv,base_cp1,base_cp2,base_ev,0.01);    
 stroke(0,255,0);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);
 
 //Cyclic
 ArrayList<PVector> cyclic = new ArrayList<PVector>(Arrays.asList(source_cp1,source_cp2,source_cp3,source_cp4));
 ArrayList<PVector> source_spline1 = CalcuCyclicSpline(cyclic,3,0.01);
 
 DrawLiner(source_spline1);  
 DrawPoints(source_cp1,source_cp2,source_cp3,source_cp4);
 
 //Source領域の表示
 stroke(255,0,0);
 DrawLinerClose(source_v1,source_v2,source_v3);  
 DrawPoints(source_v1,source_v2,source_v3);
 stroke(DefaultStrokeColor);
 
 ArrayList<PVector> source_region = 
   new ArrayList<PVector>(Arrays.asList(source_v1,source_v2,source_v3));
 
 ArrayList<ArrayList<PVector>> output = MakeDTriTexture(MakeZigzag(base_spline,1,1),source_spline1,source_region);
 DrawPathes(output);
//Path入力Paths出力
ArrayList<ArrayList<PVector>> MakeDTriTexture(
 ArrayList<PVector> triangled_polyline,//三角領域の連続 
 ArrayList<PVector> texture_polyline, 
 ArrayList<PVector> source_region)
{
 ArrayList<ArrayList<PVector>> ret = new ArrayList<ArrayList<PVector>>();  
 for(int i = 0; i<triangled_polyline.size()-2; i+=2)//i++,i+=3とかでもおもしろい
 {
   PVector target1 = triangled_polyline.get(i);
   PVector target2 = triangled_polyline.get(i+1);   
   PVector target3 = triangled_polyline.get(i+2);
   ArrayList<PVector> target_region = new ArrayList<PVector>();
   target_region.add(target1);target_region.add(target2);target_region.add(target3);
   ArrayList<PVector> temp = TextureTransform(texture_polyline,source_region,target_region);    
   ret.add(temp);    
 }  
 return ret;
}

Paths入力Paths出力

 ArrayList<PVector> base_spline = CalcuOpenSpline(base_sv,base_cp1,base_cp2,base_ev,0.1);    
 stroke(0,255,0);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);

 //3次splineを2つ
 ArrayList<PVector> source_spline1 = CalcuOpenSpline(source_cp1,source_cp2,source_cp3,source_cp4,0.01);
 ArrayList<PVector> source_spline2 = CalcuOpenSpline(source_cp5,source_cp6,source_cp7,source_cp8,0.01);
 DrawLiner(source_spline1);  
 DrawPoints(source_cp1,source_cp2,source_cp3,source_cp4);
 DrawLiner(source_spline2);  
 DrawPoints(source_cp5,source_cp6,source_cp7,source_cp8);
 
 //Source領域の表示
 stroke(255,0,0);
 DrawLinerClose(source_v1,source_v2,source_v3);  
 DrawPoints(source_v1,source_v2,source_v3);
 stroke(DefaultStrokeColor);
 ArrayList<PVector> source_region = 
   new ArrayList<PVector>(Arrays.asList(source_v1,source_v2,source_v3));
 
 ArrayList<ArrayList<PVector>> input_pathes = new ArrayList<ArrayList<PVector>>(Arrays.asList(source_spline1,source_spline2));
 ArrayList<ArrayList<PVector>> output = MakeDDTriTexture(MakeZigzag(base_spline,1,1),input_pathes,source_region);
 DrawPathes(output);

画像37

他

Source : 累積2次Spline
Target : Cyclic, Zigzag


 ArrayList<PVector> cyclic = new ArrayList<PVector>(Arrays.asList(base_sv,base_cp1,base_cp2,base_ev));
 ArrayList<PVector> base_spline = CalcuCyclicSpline(cyclic,3,0.1);    
 stroke(0,255,0);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);
 
 ArrayList<ArrayList<PVector>> paths = CalcuStackSpline(source_cp1,source_cp2,source_cp4,0.1,0.1);
 DrawPathes(paths);
 DrawPoints(source_cp1,source_cp2,source_cp4);
 
 //Source領域の表示
 stroke(255,0,0);
 DrawLinerClose(source_v1,source_v2,source_v3);  
 DrawPoints(source_v1,source_v2,source_v3);
 stroke(DefaultStrokeColor);
 
 ArrayList<PVector> source_region = 
   new ArrayList<PVector>(Arrays.asList(source_v1,source_v2,source_v3));
 
 ArrayList<ArrayList<PVector>> output = MakeDDTriTexture(MakeZigzag(base_spline,1,1),paths,source_region);
 DrawPathes(output);
ArrayList<ArrayList<PVector>> CalcuStackSpline(PVector sv, PVector cp, PVector ev, float spline_resolution, float resolution)
{
 ArrayList<ArrayList<PVector>> paths = new ArrayList<ArrayList<PVector>>();
 PVector mv = PVector.lerp(sv,ev,0.5);  
 PVector lv = cp.copy().sub(mv);
 
 for(float t = 0; t<1; t+=resolution)
 {
   PVector tv = mv.copy().add(lv.copy().mult(t));
   ArrayList<PVector> path = CalcuOpenSpline(sv,tv,ev,spline_resolution);
   paths.add(path);
 }  
 //最後
 paths.add(CalcuOpenSpline(sv,cp,ev,spline_resolution)); 
 return paths;  
}

画像38


Source : 累積3次Spline
Target : Cyclic, Zigzag

 
 ArrayList<PVector> cyclic = new ArrayList<PVector>(Arrays.asList(base_sv,base_cp1,base_cp2,base_ev));
 ArrayList<PVector> base_spline = CalcuCyclicSpline(cyclic,3,0.1);    
 stroke(0,255,0);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);

 ArrayList<ArrayList<PVector>> paths = CalcuStackSpline(source_cp1,source_cp2,source_cp3,source_cp4,0.1,0.1);
 DrawPathes(paths);
 DrawPoints(source_cp1,source_cp2,source_cp3,source_cp4);

 //Source領域の表示
 stroke(255,0,0);
 DrawLinerClose(source_v1,source_v2,source_v3);  
 DrawPoints(source_v1,source_v2,source_v3);
 stroke(DefaultStrokeColor);
 
 ArrayList<PVector> source_region = 
   new ArrayList<PVector>(Arrays.asList(source_v1,source_v2,source_v3));
 
 ArrayList<ArrayList<PVector>> output = MakeDDTriTexture(MakeZigzag(base_spline,1,1),paths,source_region);
 DrawPathes(output);
ArrayList<ArrayList<PVector>> CalcuStackSpline(PVector sv, PVector cp1, PVector cp2, PVector ev, float spline_resolution, float resolution)
{
 ArrayList<ArrayList<PVector>> paths = new ArrayList<ArrayList<PVector>>();
 PVector mv1 = PVector.lerp(sv,ev,1.0/3.0);  
 PVector mv2 = PVector.lerp(sv,ev,2.0/3.0);  
 PVector lv1 = cp1.copy().sub(mv1);
 PVector lv2 = cp2.copy().sub(mv2);
 
 for(float t = 0; t<1; t+=resolution)
 {
   PVector tv1 = mv1.copy().add(lv1.copy().mult(t));
   PVector tv2 = mv2.copy().add(lv2.copy().mult(t)); 
   ArrayList<PVector> path = CalcuOpenSpline(sv,tv1,tv2,ev,spline_resolution);
   paths.add(path);
 }  
 //最後
 paths.add(CalcuOpenSpline(sv,cp1,cp2,ev,spline_resolution)); 
 return paths;  
}

画像39

画像40

画像41


Source : 累積2次Spline*2
Target : Cyclic, Zigzag

 
 ArrayList<PVector> cyclic = new ArrayList<PVector>(Arrays.asList(base_sv,base_cp1,base_cp2,base_ev));
 ArrayList<PVector> base_spline = CalcuCyclicSpline(cyclic,3,0.1);    
 stroke(0,255,0);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);

 ArrayList<ArrayList<PVector>> paths = CalcuStack2Spline(source_cp1,source_cp2,source_cp3,source_cp4,0.1,0.1);
 DrawPathes(paths);
 DrawPoints(source_cp1,source_cp2,source_cp3,source_cp4);

 //Source領域の表示
 stroke(255,0,0);
 DrawLinerClose(source_v1,source_v2,source_v3);  
 DrawPoints(source_v1,source_v2,source_v3);
 stroke(DefaultStrokeColor);
 
 ArrayList<PVector> source_region = 
   new ArrayList<PVector>(Arrays.asList(source_v1,source_v2,source_v3));
 
 ArrayList<ArrayList<PVector>> output = MakeDDTriTexture(MakeZigzag(base_spline,1,1),paths,source_region);
 DrawPathes(output);
ArrayList<ArrayList<PVector>> CalcuStack2Spline(PVector sv, PVector cp1, PVector cp2, PVector ev, float spline_resolution, float resolution)
{
 ArrayList<ArrayList<PVector>> paths = new ArrayList<ArrayList<PVector>>();
 PVector mv = PVector.lerp(sv,ev,0.5);  
 PVector lv1 = cp1.copy().sub(mv);
 PVector lv2 = cp2.copy().sub(mv);
 
 for(float t = 0; t<1; t+=resolution)
 {
   PVector tv1 = mv.copy().add(lv1.copy().mult(t));
   PVector tv2 = mv.copy().add(lv2.copy().mult(t));    
   ArrayList<PVector> path1 = CalcuOpenSpline(sv,tv1,ev,spline_resolution);
   ArrayList<PVector> path2 = CalcuOpenSpline(sv,tv2,ev,spline_resolution);
   paths.add(path1);
   paths.add(path2);
 }  
 //最後
 paths.add(CalcuOpenSpline(sv,cp1,ev,spline_resolution)); 
 paths.add(CalcuOpenSpline(sv,cp2,ev,spline_resolution)); 
 return paths;  
}

画像42

画像43

画像44


Source : 累積3次Spline*2
Target : Cyclic, Zigzag

  
 ArrayList<PVector> cyclic = new ArrayList<PVector>(Arrays.asList(base_sv,base_cp1,base_cp2,base_ev));
 ArrayList<PVector> base_spline = CalcuCyclicSpline(cyclic,3,0.1);    
 stroke(0,255,0);
 DrawPoints(base_sv,base_cp1,base_cp2,base_ev);
 stroke(DefaultStrokeColor);
 
 //Source Polyline
 ArrayList<ArrayList<PVector>> paths = CalcuStack2Spline(source_cp1,source_cp2,source_cp3,source_cp4,source_cp5,source_cp6,0.1,0.1);  
 
 DrawPathes(paths);
 DrawPoints(source_cp1,source_cp2,source_cp3,source_cp4,source_cp5,source_cp6);
 
 //Source領域の表示
 stroke(255,0,0);
 DrawLinerClose(source_v1,source_v2,source_v3);  
 DrawPoints(source_v1,source_v2,source_v3);
 stroke(DefaultStrokeColor);
 
 ArrayList<PVector> source_region = 
   new ArrayList<PVector>(Arrays.asList(source_v1,source_v2,source_v3));
 
 ArrayList<ArrayList<PVector>> output = MakeDDTriTexture(MakeZigzag(base_spline,1,1),paths,source_region);
 DrawPathes(output);
 
ArrayList<ArrayList<PVector>> CalcuStack2Spline(
 PVector sv, PVector cp1, PVector cp2, PVector cp3, PVector cp4, PVector ev, 
 float spline_resolution, float resolution)
{
 ArrayList<ArrayList<PVector>> paths = new ArrayList<ArrayList<PVector>>();
 PVector mv1 = PVector.lerp(sv,ev,1.0/3.0);  
 PVector mv2 = PVector.lerp(sv,ev,2.0/3.0);  
 PVector lv1 = cp1.copy().sub(mv1);
 PVector lv2 = cp2.copy().sub(mv2);
 PVector lv3 = cp3.copy().sub(mv1);
 PVector lv4 = cp4.copy().sub(mv2);
 
 for(float t = 0; t<1; t+=resolution)
 {
   PVector tv1 = mv1.copy().add(lv1.copy().mult(t));
   PVector tv2 = mv2.copy().add(lv2.copy().mult(t)); 
   PVector tv3 = mv1.copy().add(lv3.copy().mult(t));
   PVector tv4 = mv2.copy().add(lv4.copy().mult(t)); 
   ArrayList<PVector> path1 = CalcuOpenSpline(sv,tv1,tv2,ev,spline_resolution);
   ArrayList<PVector> path2 = CalcuOpenSpline(sv,tv3,tv4,ev,spline_resolution);
   paths.add(path1);
   paths.add(path2);
 }  
 //最後
 paths.add(CalcuOpenSpline(sv,cp1,cp2,ev,spline_resolution)); 
 paths.add(CalcuOpenSpline(sv,cp3,cp4,ev,spline_resolution)); 
 return paths;  
}


画像46

画像47

画像48

画像49

画像50

画像50

























































この記事が気に入ったらサポートをしてみませんか？