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

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)
このエントリは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)
こんにちは、すつーかです。
このエントリはProcessing Advent Calender2013 26日目の記事です。
23日目に出題した問題の解答編となります。

「どこらへんがprocessingなんだ?」
と思われてしまうかもしれませんが、パケットを生成する部分にprocessingを用いました。
processingで作った経緯をお話します。

SECCON2012にて、パケットごとにアルファベット一文字ずつdataに入れて送信するという問題が出題されているのを見つけました。
それを知って一つの疑問が浮かびました。


( ˘⊖˘) 。o(こんなパケットって、一体どうやって作るんだろう?)
( ˘⊖˘) 。o(scapyかな? でもscapy使ったことないしなぁ...)

       |
   \  __  /
   _ (m) _ピコーン
      |ミ|
   /  .`´  \
      ∧_∧  / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
    (・∀・∩< そうだprocessingならきっと実現できる!
    (つ  丿 \_____________________
    ⊂_ ノ
      (_)


というわけで作りました。

はてさて、processingがどのようにしてhomuhomu.pngファイルに用いられているのか?
以下、問題の解説になります。


とくとご覧あれ!




問題ファイルを開くと、なにかのキャラクターのアスキーアートを画像にしたものであることがわかります。
homuhomu.png



とりあえず、CTFでよく使用されるfileコマンドを実行すると,

-(stuka@stukaMac)-(0)-<2013/12/22 19:28>---[...tuka/VirtualBox VMs/share/test]-
-[11604] ( ◠‿◠ )☛ % file homuhomu.png
homuhomu.png: PNG image data, 573 x 372, 8-bit/color RGB, non-interlaced


となります。
んー、fileコマンドではPNGファイルと判定されたようですね。


stringsコマンドも試してみましょう。

-(stuka@stukaMac)-(0)-<2013/12/22 19:31>---[...tuka/VirtualBox VMs/share/test]-
-[11605] ( ◠‿◠ )☛ % strings homuhomu.png
IHDR
tEXtComment
looping 10 times!^
IDATx
?{3O"
:
:
:



お、なにやら意味のありそうな文字列がでてきました。

pngのコメント部分であるtEXtチャンクを見てみましょう。
strlingで開きます。
text.png



どうやらstringsコマンドで表示された文字列は、PNGのコメントだったようですね。


せっかくHEXエディタで開いたのでビットイメージも見てみましょうか。
bitimage.png



おっと、なにやら画像ではなさそうなバイナリがみえますね。


pngのENDヘッダよりも下部に付加されているようです。
切り取って保存してみます。
fileコマンドで調べてみます。

-(stuka@stukaMac)-(0)-<2013/12/22 19:05>---[/Users/stuka/VirtualBox VMs/share]-
-[11596] ( ◠‿◠ )☛ % file binary
binary: data



...データ形式と表示されてしまいました。ただのデータのファイルまたはfileコマンドのサポート外のヘッダである可能性があります。

stringsコマンドも試してみましょう.

-(stuka@stukaMac)-(0)-<2013/12/22 19:05>---[/Users/stuka/VirtualBox VMs/share]-
-[11597] ( ◠‿◠ )☛ % strings binary
Linux 3.2.6
Dumpcap 1.8.1 (SVN Rev Unknown from unknown)
Linux 3.2.6
# Zm
# Zm
# Zm
JDWP-Handshakep
JDWP-Handshakep
# Zm
# Zm
# Zm
# Zm
# Zm
# Zm
# Zm
# Zm
# Zm
# Zm
# Zm
# Zm
Counters provided by dumpcap



dumpcapをググると、wiresharkの単語がでてきました。
wiresharkで開くことができるのでは?
と推測してwiresharkで開いてみます。

開けました。
wiresharkprocess.png



ループバックアドレスで、dnpポートと54974ポート間でなにかのやりとりが行われているようです。
ports.png

フィルタをかけてみます。
tcp.srcport == 54974
一層見やすくなりました。

パケットを眺めるとechoサーバー、クライアントのやりとりをキャプチャしたように見えます。
もっと詳しく見てみると、data部にアルファベット一文字ずつ送信されていることがわかります。
packetdatadata.png



一つ一つ文字が送られてきているということは、全てを順番に連結してみれば、何か意味のある文字列になるのでは?

パケットからdataを取り出して一文字ずつ繋げてみましょう.
手動でやってもいいですが、全部で460文字あるので、一文字3秒かかると計算しても23分ですね。
手動でも無理ではないですが、打ち間違えなどを考えるとあまりスマートではないかもしれません。
というかFollowTCPStreamで一発ですね。でもそれじゃぁ面白く無いのでスクリプト書きました。

今回はpythonを使いました。
なお、dpktを使用する際は、pcapng形式からpcap形式に変換する必要があります。


root@bt:/media/sf_share/test# editcap -F libpcap binary.pcap out.pcap






dpktextract.png


実行します


root@bt:/media/sf_share/test# python getBase64.py

Vm0wd2QyUXlWa1pOVldSWVYwZDRWRll3Wkc5WFZsbDNXa1JTVjFKdGVGWlZNakExVmpKS1NHVkVRbUZXVmxsM1ZtMTRTMk15U2tWVWJHUnBWMFpHTTFkV1pEUlRNbEpJVm10c2FsSnRhRzlVVmxwV1pVWmtWMWR0ZEZSTlZUVllWVzAxUzFsV1NuUmhSemxWVmpOT00xcFZXbXRXTVdSMFVteFNUbFl4U2twV2JURXdXVmRHYzFOdVVsWmhlbXhoVm1wT2IyRkdWbk5YYlVaWFZtczFlRlpYZUZOVWJGcDBaSHBDVjAxdVVuWldha1poVTBaT2NtSkdTbWxTTW1ob1YxZDBhMVV5VW5OWGJrNVlZbGhTY1ZsclpEQk9iR3hXVjJ4a1ZXSlZWalpWVjNCaFZqRmFkRlZVUWxkaGExcFVXWHBHVDJOc1duTlRiR1JUVFRBd01RPT0=




これは54974ポート行きのパケット一つ一つのdata部を結合した結果です。
英数字と末尾に=があることからBase64Encodeと見て間違いないでしょう.

ここでtEXtコメントに書かれていたことを思い出します。

"looping 10 times!"


10回ループせよ!
ですね。

Base64Decodeを10回ループ処理で実行してみます。
pythonなら簡単にかけますね。



pythonbase64flag.png


実行します.


root@bt:/media/sf_share/test# python 10base64.py
Learning the vi Editor



"Learning the vi Editor"
と出てきました。

これが答えです。


パケット生成部分


パケット生成とまで言えるかはわかりませんが、以下のコードをサーバーを起動してからクライアントを起動すればパケットが流れるので、その時にWiresharkなどでキャプチャしました。


友達に解いてもらったのですが、FollowTCPStream機能を知らなかったらしく、data部分を全部テキストファイルに出力して、そこからダブったところを削除するスクリプトつくってBase64のコードをとりだしてました。でもBase64ではない記号が変換途中ででてきてしまい、詰まっていました。

その友達が発見してくれたのですが、パケットごとに1byteのデータ送っているつもりだったのが、まれに2byteのデータを送信しているパケットがありました。
( ˘⊖˘) 。o(1byteずつ送信してるつもりだったのに、どうしてたまに2byteずつ送信してしまっているんだろう...?)

原因がよく分からなかったので、研究室の先輩に聞いたら一発で教えてくれました。
「パケットが送信される前にNICのバッファにたまって、たまった分が送信されるから、その分が2byteになってると思う」
ということでした。

試しにsetup()でframeRate(10)と設定すると、ちゃんと1byteずつ送信してくれました!

適当なfpsでキャプチャしたデータを置いておきます↓
240fpsだと3byteになってたりしました。
homuhomu.pngに埋め込まれてたもの
10fps.pcap
120fps.pcap
240fps.pcap


あとがき


今回、ネットワークに関する問題をprocessingを使用して作成しました。
CTFではジャンル:Networkの問題が少ないので、processingを用いて気軽に作れるようになれば
いろいろな問題がたくさん生まれるのではないでしょうか?
(たとえばprocessingでオンライン対戦のゲームつくって、それを題材に問題作るとか...?)

パケットごとに一文字ずつ送信するといった手法は有名になってきている今、
processingを用いて新たなアイデアを持った問題を作っていきたいと考えています。
良い問題ができたらFlaggersにも投稿したいものです。
それではまた!


参考リンク


「NIC ハードウェアバッファー」

2013/12/22 23:27 AdventCalender TB(0) CM(0)
こんにちは、すつーかです。
昨年のProcessing Advent Calender2012に引き続き、今年も参加させていただきました。
Processing AdventCalender2013 23日目の記事です。

昨年のアドベントカレンダーではprocessingでゲームを作っているエントリを書きましたが、あれからいろいろありまして、セキュリティ界隈に首を突っ込み、ctfに参加したりするようになりました。

そこで、processingを使ってctfの問題を作りました。ジャンルはnetworkです。

homuhomu.zip

興味のある方はぜひ一度チャレンジしてみてください!


26日頃、解答編を公開する予定です!
2013/12/22 18:38 AdventCalender TB(0) CM(0)
いろふ Advent Calendar 17日目を担当することになりました。

さて、今回は何をネタにしようかと思っていましたが、触れてはいけないような疑問に触れようと覚悟を決めました。

いろふさんのアイコンって立体になったらどうなるんだろう?



という疑問が今回の出発点でした。
考えても仕方がないので実際に作ってみたろふ。


丸のインスタンスを生成


2sphereMulti.png






口をつくった


3mouse.png

これは・・・パッ○マン!?









目のインスタンスを生成


4eye.png






ふきだしのインスタンスをつくる


うーん、、、こんな感じ?


5unnn.png






「・・・・」のインスタンスをつくる


6ball.png






目に輪郭を。


6eyeBlack.png






こんなかんじ?


7end.png






3Dでのインスタンス化に成功!!


irof.png






いろいろと描けそうな素材的なナニか


irofDraw.png

壁紙・・・?


irofWallL.jpeg
irofWallMonoL.jpeg











ふぅ・・・







ローポリのいろふさんつくって、

一息ついて気づいたことが・・・












「プログラムつくってないろふ!」

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