minikoro

Yasuhide Yamashita mini webblog.

Processingで諸々学習 その6

2015.Jan.11 Sun

明けましておめでとうございます。本年もどうぞよろしくお願いいたします。

ということで書き初めProcessing。年末はswiftごりごり書いていたのでコンパイラから「セミコロン無いんとちゃう?何回言ったらわかるん?ん?」と怒られまくりながらヴィクトル・ヴァザルリ先生の作品をProcessingに落とし込んでみました。

昨年末、神戸のだまし絵Ⅱ展を見に行く機会があったのですが作品の印象としては芸術よりもロジカルな感じが大部強かった(絵の中心に鉄の円柱立ててその回りに円形に歪んだ絵を描いて円柱ごしに見える絵画とか、横に引き延ばした絵画を壁際の斜め前から見るとちゃんと鑑賞できるとか)ので、どうせ年末年始は移動やら実家やらでじっくりお仕事関連の作業は出来ないだろうなということで、書き初めがてら何かヒントは得れないかという視点で鑑賞。で、ヴィクトル・ヴァザルリ先生の作品をピックアップさせて頂きました。

平面表現なのに立体的な錯覚を起こさせてくれる本作品ですが、ロジックの読み解きの際も着目点間違えて、2重に騙されたがなと1人突っ込みをしつつ、三角関数もしっかり多用されていてほんとロジカルに表現されてるなーと感動しつつ制作。

お正月期間内でロジックが思いつかずどハマりしたのですが、先日電車乗ってる際に「ああ、そういうことか。」って閃いた時は顔のニヤケが抑えられない的な状態も発生しつつなんとか落とし込めました。

シンプルなロジックでこういう美しい表現になるのかーと改めて。計算って奥深い…。このロジックの制作はなかなか面白かったのでまた改めて別エントリーで書こうかしら。

とりあえずそんな感じでいい感じにらりらり出来る完成版貼っておきます。

Tags : Creative Javascript

Processingで諸々学習 その5

2014.Nov.30 Sun

目玉のおやじ。碇シンジ君調でいくと、

「目玉の父さん。目玉は父さん。目玉が父さんっ。父さんが目玉っっ。父さんは目玉っっ!父さんはっ目玉ぁぁぁっっ!うわぁぁぁぁあああっっっ!!!」

という具合でサードインパクト起こしてくれると思われます。

そんな超絶意味の無いお話しは置いておいて、前回で三角関数入門したもののびびっとくるイメージも無く、もうちょいロジカルな思考鍛えたほうが良いかも的なまやかしにとらわれて色々調べている内に脱線。

Boids(ボイド/人工生命)ロジックなるものの存在を知り「ラブリー!」ってなって、三角関数でまだまとまったもの作っていないのに次の技術にいくのはどうかと思う。限定された技術で解決していくのも大事なことだよ。とささやく木陰の自分をスルーし、Boidsの読み解き開始。嗚呼、意志薄弱。

Boidsとはなんぞやというと1987年に、グレイグ・レイノルズというキレッキレの人(推定)が鳥やら虫やらの集団行動から

  • 多くの個体がいる方向に動く
  • 近くの個体と近づきすぎたらぶつからないように離れること
  • 近くのもの同士で動くスピードや方向を合わせる

Qiita より引用

という条件を読み出し作成されたプログラムとのこと。飛んでる鳥見て条件をそこまでシンプルに落とし込めるとか、僕的には変態の領域にどっぷり浸かってる感じで好印象、惚れる。

ということで模写どころかロジックも全然検討つかずということで先程のQiitaからソース拝借し、こんなロジック思いつかんがなとブツブツ言いつつなんとか修正しつつ写経。ロジックは理解、多分、だいたい。んでもってまんまのビジュアルだと流石に芸がないのでちょっと思案。

オブジェクトの形が丸だし、とりあえず目玉のおやじにしてみるか、ってことで冒頭の文章にいたる。「かっこよくも無い+かわいくも無い=もっさい」という感じで仕上げ。

Tags : Creative Javascript

Processingで諸々学習 その4

2014.Nov.24 Mon

予定の勘違いで小一時間ほど時間が出来たので集中して学習。前回でランダム処理ネタは一旦置いといて更に三角関数に挑戦だってばよ、ってことでまずは@fladdict氏の宇宙の標本を1点模写。

それっぽくなったと思われる。っていうか「宇宙の標本」って名付けられた理由をなんとなく理解。やっぱりビジュアルもそうだけどネーミングもセンスあるなー。脱帽。

Tags : Creative Javascript

Processingで諸々学習 その3

2014.Nov.22 Sat

てってっ、ててー、てってっ、ててー、てってっ、ててー、てってっ、ててー。
てーてーて、てーてーた、てーてーてたー。ちゃんちゃらんっ、ちゃんちゃらんっ。
てーてーて、てーてーた、てーてーてたー。ちゃんちゃらんっ、ちゃんちゃらんっ。

ということで古畑任三郎のテーマが流れている訳ですが、テーマ曲の通り(んなもん文章ではわからんがな) 前回言っていた「1案頭の中にある」というのが古畑任三郎のOPだったのでそいつをイメージしてランダム処理学習。このイメージのおかげで今週は頭の中でOPの音楽がずっと流れておりました。

古畑任三郎のOPは作ってから改めて見たのですがなんか思ってたのとちょっと違ってたというのはここだけのお話。

スキル的には地味に回転処理が中心軸でしてくれないものだから、なんかよく理解せずにsin、cosを使うハメに。三角関数は次回以降がっつり学習予定なので足がかりとしてはまあよかったのかなぁと。しかし変に時間かかった割にはランダム処理ならではの面白さであり、美味しさってのはそんなに出ず、すんごいイメージ通りでちょっと残念。

とりあえず複数種類出来たので名前つけようかなということで、前回のは「Borders」。今回のは「Ninzaburou Line」に命名。「Ninzaburou Line」を見て頂く時は古畑任三郎のOPを口ずさみながら見て頂けるといい感じになります、多分。(処理の都合上描画始まる迄に最初ちょっと間が空くやもです。)

ということでちまちま続けている学習ですが、こんな感じのスローペースで良いので地道に数を増やしていきたいなー。がんばろ。

Tags : Creative Javascript

Processingで諸々学習 その2

2014.Nov.16 Sun

前回に引続きProcessingを使用して学習。学習ペースとしてはそんなに早くなく、というかのんびりと、ということで引続きランダム処理を学習。前回の「これじゃ無い。」感を脱する為ちょっとファッショナブルに出来まいかと模索。

処理概要としては画面をランダムに分割、分割内でボーダーをランダムに生成、ボーダーの進行方向はランダム、色もランダム、俺がガンダムだ、という感じ。あと、文字部分はsvg画像を使用。svgはソースがごちゃっとするので嫌厭してたけど、そんなに扱いにくいものでもなかった。食わず嫌いはだめですな。

分割画面を正方形では無い形で分割出来ればベストだったんだけど、ロジックが落ちてる水底までは潜れず断念。むむぅ、もっと勉強せねば。

そんな感じでなかなかキュートに出来たしどうせコンテンツ空なんだしということで koron.jp に設置。ウインドウリサイズ or リロードで再描画してくれます。クロスブラウザやら低スペックのマシンだとどうなる的なチェックはしてませんが多分問題無いかと。

ランダムの処理はもう1案頭の中にあるので、とりあえずアウトプットしてみて次のステップ行こうかしら。

koron.jp
Tags : Creative Javascript