読者です 読者をやめる 読者になる 読者になる

備忘録のためのブログ

読んだ本で紹介されていた本や映画をただ載せてるだけです。


Processingで矢印を描く

Processing

 

vertex(x,y)で点をつなげて、矢印を作ります。


・下向きの矢印

beginShape();
vertex(70,30);
vertex(50,30);
vertex(50,100);
vertex(40,100);
vertex(60,120);
vertex(80,100);
vertex(70,100);
vertex(70,30);
endShape();

 

・上向きの矢印

beginShape();
vertex(70,100);
vertex(50,100);
vertex(50,30);
vertex(40,30);
vertex(60,10);
vertex(80,30);
vertex(70,30);
vertex(70,100);
endShape();

 

・左向きの矢印

beginShape();
vertex(100,70);
vertex(100,50);
vertex(30,50);
vertex(30,40);
vertex(10,60);
vertex(30,80);
vertex(30,70);
vertex(100,70);
endShape();

 

・右向きの矢印

beginShape();
vertex(30,70);
vertex(30,50);
vertex(100,50);
vertex(100,40);
vertex(120,60);
vertex(100,80);
vertex(100,70);
vertex(30,70);
endShape(); 

 

回転させたいときは、回転行列を使えばいい。
元の点(x,y),回転後の点(X,Y),回転させたい角度θ
X=xconθ-xsinθ
Y=ysinθ-ycosθ

上記の式を全ての点に反映すると、矢印が回転する。

Processで色を変える方法

Processing

色を変える方法

引数は0~255の間
引数1つはグレーになる。0は黒、255は白。
引数3つは、RGBの三原色
引数4つは、RGB+透明色


・背景の色を変える。

background(128,128,128,128); 

 

・図形の色を変える。

fill(128,128,128,128);

 

・線の色を変える。

stroke(128,128,128,128);

 

・図形の色を透明にする。

noFill(128,128,128,128);

 

・線の色を消す。

noStroke(128,128,128,128);

 

Processingで点の基準について:Mode()

Processing

Mode()によって点の基準を変える。

(例)

1、一般的
円の基準点を変える

 ellipse(120,60,80,80);

 XY(120,60)を中心に幅80、高さ80の円を描く。

 

2、点の基準を変える。

 ellipseMode(CORNER);

ellipse(120,60,80,80);

 XY(120,60)から幅80、高さ80の四角を描きその中心から円を描く。

Processingにおける線の定義方法

Processing


・線の太さを変える

strokeWeight(5); 

 

・線の形状を変える。(デフォルトは丸くなる。)

strokeCap(SQUARE);
【引数】
SQUARE:直角の端
PROJECT:突き出た端
ROUND:丸い端 

 

・角の形状を変える。(デフォルトは直角になる。) 

strokeJoin(ROUND);
【引数】
MITER:直角の角
BEBEL:斜めの角
ROUND:丸い角

 

Processingの基本図形のコード

Processing

・ウィンドウを開く

size(100,200);

 

・点を書く

(100,200);

 

・2つの点を結ぶ線を描く。(点(100,200)と点(300,400)を結ぶ)

line(100,200,300,400);

 

・三角を描く。(3点を結ぶ)

triangle(50,100,25,200,150,50);

 

・四角を描く。(4点を結ぶ)

quad(50,100,25,200,200,25,100,50);

 

・長方形を描く。(点(180,60)を基準として、幅220,高さ40の長方形を描く。)

rect(180,60,220,40);

 

・円を描く。(点(180,60)を中心に、幅220,高さ40の円を描く。)

ellipse(180,60,220,40);

 

・円の一部を描く。円を描く。(点(180,60)を中心に、幅220,高さ40の円の一部を描く。)

arc(180,60,220,40,PI+HALF_PI,TWO_PI);

arc(180,60,220,40,radians(270),radians(360));

 

以上