お絵描きやプログラミングやアーマードコアについて綴っていくつもりです。プログラミングは備忘録的に使うつもりだったりする。
プロフィール

typeすつーか

Author:typeすつーか
FC2ブログへようこそ!

最新トラックバック
カウンターです
ついったー

広告とか

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/-- --:-- スポンサー広告 TB(-) CM(-)
このエントリはProcessingAdventCalendar2014 26日目の記事です。

まじめにProcessingでジェネラティブアートをやったことがなかったので、
ベジエ曲線を使って綺麗なアートを描いてみた。
(マウスを使ってる時点でジェネラティブといえるかどうかあやしいけど。。。

ベジエ曲線とマウスを使うだけでなんとなくカッコイイのが描けた。
フリルを描く感じでマウスを動かすとこんなかんじになる。


bezierBlack.png

始点は固定。終点の座標はマウスの座標にしてある。
終点の座標をパーリンノイズなどを用いて描画すると、また変わった雰囲気になるかもしれない。





bezierColorful.png

これはベジエ曲線の引数に与える座標をランダムで指定して描画したもの。
絵筆では表現できないものができた。






ソース


float startx;
float starty;

void setup(){
size(900,900);
startx = 100;
starty = 200;
mouseX = width/2;
mouseY = height/2;
stroke(239,117,188, 50);
}



void draw(){
noFill();
if(keyPressed){
paintLine();
}
}



void keyPressed() {
if (key == 'p'){
stroke(239,117,188, 50);

}else if (key == 'b'){
stroke(0,0,0, 50);//black
}else if (key == 'g'){
stroke(71,234,126, 50);//emerald green.
}else if (key == 'v'){
stroke(142,0,204, 50);
}else if (key == 'r'){
stroke(137,15,101, 50);
}else if (key == 'e'){
strokeWeight(10);
println("ellipse");
ellipse(mouseX, mouseY, 5,5);
strokeWeight(1);
}
}

void paintLine(){
bezier(startx,starty, startx+((mouseX-startx)/3),starty+((mouseY-starty)/3),
startx+(((mouseX-startx)/3)*2),starty+((mouseY-starty)/2)*2,
mouseX, mouseY);
}




ソース2



void setup(){
size(950, 500);
}

void draw(){
pushMatrix();
translate(0, height/2);

stroke(random(255),random(255),random(200,255),random(100,200));
noFill();
beginShape();
vertex(0, 0);
bezierVertex(474, random(700), 616, -216, width, 0);
endShape();

popMatrix();
}



おまけ


花みたいなのを描こうとしたけどなかなかうまくいかない。。。
もうちょっと工夫が必要そう。
Lotus.png




感想


今年のProcessingAdventCalenderはさまざまな分野のネタが取り上げられておりとても視野が広がりました。
P5erの皆様に感謝です。
まだまだProcessingでやりたいことは無くなりそうにありません(笑)




良いお年を!






スポンサーサイト
2014/12/26 03:25 AdventCalender TB(0) CM(0)

DSC01964_s.jpg
これが

















qr0.png
こうなって、














formatInfoが10111110なので、
もし誤り訂正レベルHだとすれば、
マスクは001なので、





















qrmask.png
こうなって、














qrmegrep.png
こうなる。






SECCON{PSwIQ9d9GjKTdD8H}



2014/12/08 22:43 ctf TB(0) CM(0)
このエントリはProcessing Advent Calendar 2014の7日目の記事です。

Processingで使用可能なエフェクト描画のツールを公開しました。

ravencoding/StukaEffect | github
ravencoding/StukaEffect | github wiki

effectProcessing.png
play.png

Stateパターン的なものとリストを使ってエフェクトを描画してみた。

概念的には次の通り。

まず「エフェクト再生中」状態と「エフェクト再生終了」状態を表現できるように、
EffectAnimationクラスを用意。
EffectAnimation.png


で、エフェクトが発生したらEffectAnimationインスタンスを、再生中状態(Effect)でリストに登録して、
effectList.png


リスト内に入ったエフェクトを片っ端から(1フレームずつ)描画していく。
リスト内にあるすべてのエフェクトを1フレームだけ描画するメソッドはeffectPlay()

draw()内でeffectPlay()することでパラパラ漫画になる。
エフェクトの最後のフレームを描画し終わると、エフェクト再生終了状態(NonEffect)になり、
effectReflesh()メソッドでリストから取り除かれる。

■では、次に具体的な例でより詳しくみていこう
爆発エフェクト(15フレーム分の画像)と斬撃のエフェクト(9フレーム分の画像)がゲーム内でいくつか発生し、リストに登録されたとする。
この時の状態は次のとおり。
before_effectList.png

カッコ内の数字はエフェクトのフレーム数。
爆発エフェクトは15のフレームを持ち、
斬撃エフェクトは9のフレームを持つ。
それぞれ15、9フレーム目の画像を描画すれば、エフェクトの再生が終了することになる。
(ここでは単に終了の判定フラグとしてStateパターンを使っているだけ)

で、斬撃エフェクトが9フレームまで描画されて、Effect状態からNonEffect状態に遷移すると、
effectReflesh()メソッドにより、リストから除外される。
listafter.png


あとはEffect関連の便利なメソッドはクラスでまとめたかったので、EffectStukaクラスを用意した。
最終的にはこんな感じに↓
explodeanimation.gif

ちなみに、爆発エフェクトを生成するときは、
effectStuka.setEffect(Const.IMAGE_EXPLODE, 50, 90); //描画したい画像を定数で指定, x座標, y座標
と実行するだけでほぼ済むようにしてある。

effectStuka.setEffect()でエフェクトを生成・リストにセットして、
無限ループ内でeffectStuka.effectPlay()を実行して描画するイメージだ。

エフェクトが発生した順にリストの末尾に追加され、
リストの先頭から描画処理をしているため、
優先度的には、最後に発生したエフェクトがゲーム画面における最上位のレイヤに描画される感じになる。

「爆発エフェクトの後に斬撃エフェクトが発生したとしても、爆発エフェクトをゲーム画面の最上位レイヤに描画したい!」
といった方はForkして優先度順にソートしてくれるようにソースを改修してプルリクエストしてください。

あと思いついたことと言えば、
エフェクトごとにフレームレートを指定できるようになったら、表現の幅が広がるかなと。
これも気が向いたらForkとかして作ってやってください(ぇ


なお、実行時のgif録画にはGifRecorderを使いました。めっちゃお手軽すぎてびっくりしちゃいました!



おまけ
お仕事がおわったあとの貴重な時間と休日を使って、三日で作ってたっぽいです。
commitlogseffect.png



ちなみにRPGツクールと比較すると
StukaEffectRPGツクール
行数自由20以下で任意
列数自由5列固定
ピクセル数自由192固定


とからしいのでStukaEffectの使い勝手は良さそうです(おぃ

あと最後に言うのもなんですが、フレーム依存です。こちらも気が向いたら時間依存で作り直します。(プルリク投げてくれてもいいのよ。



導入例
2012年のアドベントカレンダーで紹介した自作の2Dゲームフレームワークに導入しました。
(まだ公開してないけど...)







Prominenceっていうツールを使えば簡単にエフェクトの画像がつくれるみたいです
Prominence | 藤宮翔流のひきだし

StukaEffectとProminenceがあればProcessing上でも簡単にオリジナルエフェクトが描画できますね!!!



明日は@ProcessingAholicさんです。



2014/12/07 00:00 AdventCalender TB(0) CM(0)
検索フォーム
ブロとも申請フォーム
QRコード
QR
IPv4枯渇時計
linuxコマンド
ぶくろぐ
本棚です
icat
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。