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

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)
天下一プログラマーコンテスト2014予選B C問題「天下一王国の歴史」にでてくるセルオートマトンのシュミレーター作ったので、せっかくだから遊んでみた。

ソースはここです。

振動子の発見

World全体を使ってるので、振動子と呼べるのか、そこら辺詳しくないですが・・・(汗)






  • 周期が4のもの



automata003.png


automata004.png


automata005.png


automata006.png


automata007.png




  • 周期が2のもの その1



automata2000.png


automata2001.png




  • 周期が2のもの その2



automataa000.png


automataa001.png
2014/08/27 03:01 processing TB(0) CM(0)
seccon2014 onlineソーシャルハック?の罠にハマったすつーか氏。
今後ミスリードを踏んでしまっても引き返せるような人間になりたい。

...とその前に
omoi.png
競技開始直後、問題画面やランキング画面にアクセスするとこんな画面が表示されてた。

ひょっとしてこれが問題なのか・・・?

と思ったりもした。(ほんのちょっとだけ。


さて、「ソーシャルハック?」のミスリードについてだ。

top.png

ソースを見るとひどい。改行もない。
topsrc.png

jsbeautifierにかけて整形してソースを読む。
定型文が予め定数でセットされていることがわかるが、ここに記述されている文章以外もunknownは発言している。
なぜだろうか?

とりあえずjsの難読化packerがかかっているのでunpackする。
unpack前↓
packer.png


unpack後↓
message.png

ソースを見ると、stageという変数で、今どのセリフをいうかorゲームオーバー(退席とか)を管理していることがわかる
こちらが発言をしたときに、ChromeのConsoleをみると何かエラー出たりする。
ので、Consoleで何かできないか探ってみると、
post("はつげん")とかするとブラウザの方には表示されないがGET通信で発言をサーバーに送信してることがわかる。
posthack.png
あと、post()メソッドを直接実行すると、英数字の正規表現に引っかからないため、ふつーにサーバーに英語の文字列送信できる。(フォーム使って、英語のみだったらjsのせいで、サーバーに一切リクエスト飛ばさない。
english.png


実はbogus()メソッドを使うと乗っ取りアカウントで発言できたりする。
bogus.png

あとscroll()メソッドを実行すると画面の最下部に自動でスクロールする(そんなことよりフラグくれ



GETメソッドで発言をサーバーに投げると、サーバーからはjsonが送られてくる
kaiwaCallback({"kaiwa":"ctf"})

kaiwaCallbackでkaiwaが帰ってくるんだからflagCallbackでflagが返ってくるのでは?とかテキトーに考えてリクエスト飛ばすもkaiwaしか返ってこない(つらい

URLからOSコマンドインジェクションとか出来んじゃね?とか思ってリクエスト投げまくってたら「ソーシャルハック?」鯖のレスポンスが悪くなってきて、気がついたらスコアサーバー落ちてたりした。(ぼ、ぼくのせいじゃないと思いたい・・・
で、ttp://chat.quals.seccon.jp/index.cgi?   にアクセスすると、なんかフォーム出てきたのでここからでもダイレクトに発言をサーバーに飛ばせれる。ソースを見るとこんな感じ。
keigo.png


なやみに悩んだ挙句、unknownが「画像を送信しろ」的なことを言ってるので
「DataURISchemeで送信してやるよ!!! ほらよ!!!」
ってやると「500 Internal Server Error」が発生した。
500error.png

メールアドレスが書いてあったので、チームの一人が「keigoアカウントでsshログインとか?」と提案。
しかし、パスワードで弾かれてしまう。

( ˘⊖˘) 。o(待てよ?「ソーシャルハック?」ってタイトルだし、keigoさんにメール送信してsshパスワードとか聞くのでは?)
と思ってラブレター送信!!!!

loveletter.png

・・・しかし、keogoさんからお返事が返ってくることはありませんでした・・・(´・ω:;.:...
(文面めっちゃ適当だったからかな・・・




WriteUpみると、
正解はホントに画像を見せる。。だった。。
画像を貼り付けたURL(というか画像の拡張子を含んだURL)
を発言すると、そのURLを踏みに行ってくれる。
しかも、ご丁寧に「見たよ」といってくれる。

画像の拡張子を貼らなかったら「画像のURLを教えてよ。」ってヒントくれたりする。

で、アクセスログとか見ると、UserAgentのところらへんが「」
access.png
あとはnmapしてサーバーに会いているポート調べてVNC開いてるのがわかるからそこにさっき手に入れたパスワード入れる。と、デスクトップにメモ帳が開いてて、フラグが書いてあるそうな。
追い詰めるとはこの事だったのか。


ジャンルがネットワークってなってるのを、もっと尊重するべきでした_(:3」∠)_

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