pict12055

Processingのライブラリで「Handy」というものを見つけました。
いつものスケッチがあっという間にマーカーペンでぐしゃぐしゃに落書きしたような
ポップな絵柄に生まれ変わります。

ダウンロードはこちらから。
giCentre: Handy
Processingへはマニュアルでインストールします。
Processingのスケッチが保存されているフォルダ(Documentsフォルダの下のProcessingフォルダがデフォルトのはずです)の中に、
「libraries」というフォルダをつくり、そこに上記サイトからダウンロードしてきたzipを解凍します。

使い方はこちらに書いてあります。
giCentre | Using the HandyRenderer
今回は上記ページを翻訳し、まとめたものを以降に書こうと思います。

--

使い方
上記のようにインストールした後、Processingを再起動し、
Sketch>Import Library>handyを選択してください。
すると、スケッチに以下のように一行挿入されると思います。
import org.gicentre.handy.*;

あとは、HandyRendererをsetup()内で定義すれば
point()、line()、triangle()、rect()、quad()、ellipse()といった基本的な図形描画に適用できるようになります。
また、beginShape()、vertex()、endShape()を利用した任意の図形にも適用できます。
pict142759
import org.gicentre.handy.*;

HandyRenderer h;

void setup() {
size(350, 200);
background(255);
smooth();
h = new HandyRenderer(this);
noLoop();
}

void draw() {
h.rect(50, 50, 100, 100);
h.ellipse(250, 100, 100, 100);
}

noLoop()を書くことで上の画像のような静止画を描くことができますが、
Loopさせている状態では、図形が細かく震えているようなアニメーションを作ることができます。
例えるならウゴツールみたいな動きです。なつかしい。
また、Loopさせている時でも、以下のようにrandomSeedを設定することで静止画を生成できます。
なお、この設定はdraw()の中に書いてください。
h.setSeed(1234);


通常の線と塗りつぶしの設定
Processingでいつも書くとおりにfill()やstroke()、strokeWeight()などを設定すると、
その設定のとおりにHandyが手書き風に変換してくれます。
fill()は斜線で塗りつぶす、いわゆるハッチングのような感じになります。
この斜線は、デフォルトではstrokeWeight()の設定に依存します。
pict14484
import org.gicentre.handy.*;

HandyRenderer h;

void setup() {
size(350, 200);
background(255);
smooth();
h = new HandyRenderer(this);
noLoop();
}

void draw() {
strokeWeight(0.5);
fill(0, 0, 255);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

strokeWeight(2);
fill(255, 0, 0);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}

また、setIsHandy()をtrue/falseで設定することで、
Handyの変換のon/offを設定することができます。
falseに設定すると、通常の線、塗りつぶしの設定で描画されます。
サンプルコードはdraw()しか載せていませんが、setup()は上のコードと同じです。
pict145442
void draw() {
h.setIsHandy(true);
strokeWeight(0.5);
fill(0, 0, 255);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

h.setIsHandy(false);
strokeWeight(2);
fill(255, 0, 0);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


Handy独自の設定
Handy独自の設定を書くことで、細かな部分も指定できます。

setBackgroundColour()を指定することで、ハッチング間の背景色を設定できます。
なお、以降でHandyの独自の設定で色を指定する場合は、
color()を使用してください。
pict154238
void draw() {
h.setBackgroundColour(color(0, 255, 0));
strokeWeight(0.5);
fill(0, 0, 255);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

h.setBackgroundColour(color(255, 255, 0));
strokeWeight(2);
fill(255, 0, 0);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


setup()内でsetUseSecondaryColour(true)と設定しておくことで、
draw()内でsetSecondaryColour()が指定できるようになります。
これを指定することで、塗りつぶしのハッチングにもう一つ色をミックスすることができます。
pict154628
void setup() {
size(350, 200);
background(255);
smooth();
h = new HandyRenderer(this);
noLoop();

h.setUseSecondaryColour(true);
}

void draw() {
h.setSecondaryColour(color(255, 0, 255));
strokeWeight(0.5);
fill(0, 0, 255);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

h.setSecondaryColour(color(0, 0, 255));
strokeWeight(2);
fill(255, 0, 0);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


setOverrideFillColour(true)とsetOverrideStrokeColour(true)をsetup()内で設定することによって、
setFillColour()とsetStrokeColour()が使用できるようになります。
これは塗りつぶしの色や線の色を指定できるのですが、
サンプルコードのとおり、通常のfill()やstroke()とは独立して動作します。
pict16138
void setup() {
size(350, 200);
background(255);
smooth();
h = new HandyRenderer(this);
noLoop();

h.setOverrideFillColour(true);
h.setOverrideStrokeColour(true);
}

void draw() {
h.setFillColour(color(255, 100, 100));
h.setStrokeColour(color(255, 255, 0));
strokeWeight(0.5);
fill(0, 0, 255);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

h.setFillColour(color(0, 255, 100));
h.setStrokeColour(color(0, 0, 255));
strokeWeight(2);
fill(255, 0, 0);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


setFillWeight()でハッチングの線の太さを指定することができます。
pict161947
void draw() {
strokeWeight(0.5);
h.setFillWeight(1);
fill(0, 0, 255);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

strokeWeight(2);
h.setFillWeight(0.5);
fill(255, 0, 0);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


setFillGap()でハッチングの線の間隔を指定することができます。
pict163014
void draw() {
strokeWeight(0.5);
h.setFillGap(10);
fill(0, 0, 255);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

strokeWeight(2);
h.setFillGap(2);
fill(255, 0, 0);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


setHachureAngle()でハッチングの線の方向を指定することができます。
pict163845
void draw() {
h.setHachureAngle(radians(90));

strokeWeight(0.5);
fill(0, 0, 255);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

strokeWeight(2);
fill(255, 0, 0);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


setIsAlternating(true)と設定することによって、ハッチングの斜線をジグザグな線に変更できます。
より落書きらしくなりますね。
pict164159
void draw() {
h.setIsAlternating(true);

strokeWeight(2);
fill(0, 0, 255);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

strokeWeight(2);
fill(255, 0, 0);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


setHachurePerturbationAngle()を指定することにより、ハッチングの角度をランダムにすることができます。
これにより、斜線の方向が変わり、重なりあったオブジェクトもわかりやすくなります。
(この辺は訳に自信がないので、もし間違っていればご連絡ください。修正します)
pict165637
void draw() {
h.setHachurePerturbationAngle(radians(360));

strokeWeight(2);
noStroke();

fill(0, 0, 255);
h.rect(50, 50, 200, 200);
fill(0, 0, 255);
h.rect(100, 100, 100, 100);
}


setRoughness()は「不完全さの度合い」で0~10の間で指定できます。
0は通常どおりのまっすぐな線で、数字が大きくなるほどぐしゃぐしゃになっていきます。
pict17630
void draw() {
h.setRoughness(5);

strokeWeight(0.5);
fill(0, 0, 255);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

strokeWeight(2);
fill(255, 0, 0);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


また、Handyにプリセットされている各種描画モードを使用することもできます。
描画モードはsetup()内で定義してください。

こちらは、鉛筆のような描画に変換するモードです。
色や線の太さの指定を無視し、灰色の細い線で描画します。
pict183343
void setup() {
size(350, 200);
background(255);
smooth();
h = HandyPresets.createPencil(this);
noLoop();
}

void draw() {
strokeWeight(0.5);
fill(0, 0, 255);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

strokeWeight(2);
fill(255, 0, 0);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


こちらは、色鉛筆で塗りつぶしたような描画に変換するモードです。
線の太さの指定は無視されるようです。
また、noStroke()の状態で描画されるので、fill()を指定していないと何も描画されません。
濃ゆく塗りつぶされるので、アルファ値を調整して少し透明度を上げると良いかもしれません。
pict184015
void setup() {
size(350, 200);
background(255);
smooth();
h = HandyPresets.createColouredPencil(this);
noLoop();
}

void draw() {
strokeWeight(0.5);
fill(0, 0, 255, 80);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

strokeWeight(2);
fill(255, 0, 0, 80);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


こちらは、色水とインクのような描画に変換されるモードです。
ハッチングではなく、均等に塗りつぶされます。
fill()のアルファ値を調整して、透明度を上げるときれいに発色されると思います。
また、stroke()の設定は無視され、黒で描画されるようです。
pict185336
void setup() {
size(350, 200);
background(255);
smooth();
h = HandyPresets.createWaterAndInk(this);
noLoop();
}

void draw() {
strokeWeight(0.5);
fill(0, 0, 255, 80);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

strokeWeight(2);
fill(255, 0, 0, 80);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


最後に、マーカーペンで塗りつぶしたような描画になるモードです。
むらのあるハッチングで塗りつぶされ、ところどころ線が枠からとびでたようになります。
stroke()の設定は無視され、黒で描画されるようです。
pict19924
void setup() {
size(350, 200);
background(255);
smooth();
h = HandyPresets.createMarker(this);
noLoop();
}

void draw() {
strokeWeight(0.5);
fill(0, 0, 255);
stroke(0, 255, 255);
h.rect(50, 50, 100, 100);

strokeWeight(2);
fill(255, 0, 0, 80);
stroke(255, 0, 255);
h.ellipse(250, 100, 100, 100);
}


なお、これらのモードでは、先ほどのsetFillColour()とsetStrokeColour()で色を指定すれば、
自由に指定の色で描画することができます。
ここでは、例としてマーカーペンのモードを掲載しておきます。
pict191524
void setup() {
size(350, 200);
background(255);
smooth();
h = HandyPresets.createMarker(this);
noLoop();
h.setOverrideFillColour(true);
h.setOverrideStrokeColour(true);
}

void draw() {
strokeWeight(0.5);
//fill(0, 0, 255);
//stroke(0, 255, 255);
h.setFillColour(color(0, 0, 255));
h.setStrokeColour(color(0, 255, 255));
h.rect(50, 50, 100, 100);

strokeWeight(2);
//fill(255, 0, 0, 80);
//stroke(255, 0, 255);
h.setFillColour(color(255, 0, 0, 80));
h.setStrokeColour(color(255, 0, 255));
h.ellipse(250, 100, 100, 100);
}


--

長くなりましたが、Handyはとても面白いツールだと思うので、
どんどん活用してポップでかわいいスケッチをたくさん描いていきたいです!

[追記]
0920111449
Handyを利用していくつかスケッチを作成してみました。
具体的な作例として参考にしていただければうれしいです。
Processingライブラリ「Handy」を使った作品集