ねこでじ(Nekodigi)

Nekodigi’s diary

学習中の気づきをまとめています。応援よろしくお願いします

2020-07-01から1ヶ月間の記事一覧

【Processing】暗闇の中から現れてくるアニメーションを作る。

成果物 www.youtube.com 今回は、黒、白1色の中から白黒画像が少しずつ現れてくるアニメーションを作ってみました。画像の色が変わっているように見えますが、色の対比によるものです。 仕組み 画素の色が閾値より小さい(大きいときは)ときは、閾値で塗り…

【Weekly Graphics】ハーフティンバーの家を作るーPlanet Coaster方式が便利!

成果物 今回は、THE STORY OF BUILDINGSという本の挿絵を参考にして、農家を作ってみました。Planet Coasterで使われていた、壁を作って貼り付けるように部品を配置していく方法が思いのほかうまくいきました。Planet Coasterの建築練習も今後取り入れていく…

【Processing】画像を分割して並べ替えて、別の画像を作る

成果物 モナリザ仙人爆誕! 今回は、前回の画像のタイル状(塊)ソートを利用して、さらに別の画像を作ってみました。今回は、例として、モナリザでかえる仙人を作ってみました。偶然にもモナリザは緑要素があるので、いい感じにかえる仙人が表現できています…

【Processing】画像を塊でソートする

成果物 www.youtube.com 普通画像はピクセル単位でソートするのですが、試しに塊でソートしてみたところ、部分的な特徴が明らかになって面白かったので、アニメーションも作ってみました。 仕組み PImage.getで塊に分割し、塊の色の平均値を求めます。そして…

【Processing】Stream Graphを積み重ねるアニメーションを作る

成果物 www.youtube.com 前回Perlinノイズを積み重ねてAgateを作ったのですが、今回は、それを平らにしてStream Graphを作ってみました。しかし、そのままでは面白みが足りないので、Stacked Grouped Barというものを組み合わせてさらにそれを加算して表示し…

【Weekly Illustration#1】新しいシリーズを始めますーフォトリアルな毛皮を描く

成果物 しばらく、デザイン技術を高めるためにイラストをWeekly Illustration、CGをWeekly Graphicsとして、毎週1時間程度を目標に行っていこうと思います。(余裕があればたくさん投稿します)今回は、Weekly Illustration第一弾として、猫をリアルに描くため…

【Processing】磁力線を使ってVoronoi図を模倣する

成果物 www.youtube.com 磁石が同じ力の時、磁力線はちょうど二等分するところで(ぶつかります)この性質を利用して、Voronoi図を描けないかということでやってみました。今回のコードでは他の磁石の影響も受けるので、少し曲がったようになっていますが、味…

【Processing】魚眼レンズを実装する。

成果物 D3.jsのサンプルで魚眼レンズが紹介されていたので、早速実装してみました。部分的に拡大できるのが特徴です。円形に拡大するものと、軸を拡大するものがあります。座標変換の結果を利用すれば、画像変形などもできそうです。※軸を変形させる方は、ま…

【Processing】正多角形のトンネルを作る

成果物 www.youtube.com AviUtlのスクリプトでトンネルを作るものがあったので、回転角度を変えられるようにしてProessingでも作ってみました。ただ、P3DでblendMode ADDがうまく動かないので、また対策を考えようと思います。 仕組み 1段づつ角度を変えて、…

【Processing】テキストの輪郭を取得して、変形させる。

成果物 www.youtube.com テキストの輪郭を取得する方法を見つけたので、カーブの制御点を動かして変形してみました。 www.youtube.com ただし、変形する際は均一に頂点がある方がきれいな結果が得られるので、そちらのコードも作成しました。変形した後も自…

【Processing】ベジエ曲線を等間隔でサンプリングする。

成果物 テキストのアウトラインをカーブで取得したのですが、Perlinノイズに沿って変形させようと思うと、等間隔にサンプリングされた点に変換した方が便利なので実装してみました。 仕組み 基本的にはSebastian Lagueさんのベジエ曲線を十分細かく分割し、…

【Processing】ドットマトリクス風の表示をする

成果物 www.youtube.com 過去にドットマトリクスLEDを2回ぐらいショートさせてしまっているので、Processingで作ってみました。 仕組み PGraphicsに出力して、間隔をあけてピクセルの状態をチェックして、円を使って表示しています。 コード Dot Matrixとい…

【レビュー】勉強にもパソコン作業にも使える。AKRACING Nitro V2 緑を使ってみた。

選んだ理由 クッションの質がいいのと、180度リクライニングができるというポイントでAKRACINGを選びました。AKRACINGは、Wolf,Nitro V2,Overture,ONE PIECE,Pro-X V2,極座 V2,Premiumがあるのですが、デザイン面、機能面からWolf,Overture,ONE PIECEは極座 …

【レビュー】動き出しが滑らかなRazer Sphex V2 Miniを使ってみた。

きっかけ CGなどのパラメーター(スライダー)調整をしている時、静止摩擦力が大きすぎて、狙った数値に調節できないことがあったので、静止摩擦力が小さいマウスパッドを求めて、これにたどり着きました。 レビュー 期待していたとうり、なかなか軽い動き方…

【Processing】永遠に終わらない拡散、収束を、黄金角を使って実装する。

成果物 www.youtube.com 3Dプリントデータでよくある、回転させて、ストロボ撮影するだけで花が咲き続けるように見えるものの仕組みを調べてみると。どうやら、黄金角を使って簡単に実装できることがわかったので、さっそく実装してみました。 参考にしたサ…

【Processing】葉序の半径の乗数を変更し爆発するようなアニメーションを作る。

成果物 www.youtube.com 黄金角の、乗数を変更して、偏り方を変更しているのを見て、負の数でべき乗すれば、反転すると思ったので早速実装してみました。軌跡を表示すると、よりきれいな結果が得られました。 参考にしたサイト https://www.youtube.com/watc…

【Processing】部分ごとに硬さを変えて、ピクセルの浸食のシュミレーションをする。

成果物 白いところが固い部分です。固い部分を避けるように浸食されているのがわかります。これを応用すると、狙った形を残して侵食することもできそうです。 仕組み 明るさが明るいほど、削れる確率を下げることでこの様な結果が得られます。 それ以外は前…

【Processing】機織りのアニメーションを作る

成果物 www.youtube.com 今回は、昔よく作っていた機織りのアニメーションを作ってみました。平織、綾織を作ってみました。後ろの糸を表示するかどうかで、見た目が全く変わって見えるのも面白いところです。単色だと千鳥模様なども表現できないので、今後ア…

【Processing】Perlin Noiseと線のオフセットを使ってリボンや、滝のようなものを作る

成果物 www.youtube.com 2本の間を補完したものがこちらです。非常にシンプルなのですが、リボンのような模様を得ることができました。 www.youtube.com Perlin Noiseのオフセットを変えて複数本表示したものがこちらです。滝のような荒々しいイメージの線が…

【Processing】Pixel SortingをMaskをかけて行う。

成果物 www.youtube.com Pixel Sortingを明るいところや暗いところだけ行って、まるで溶けているような画像を作り出しているTutorialがあったので、それを発展させて、MaskをかけてPixel Sortingを行ってみました。 参考にしたTutorial https://www.youtube.…

【Processing】非常にシンプルな方法で抽象的な星の爆発のアニメーションを作る。

成果物 www.youtube.com TED Talkのイントロのようなものを作りたいなと思ってよく観察してみると、内側から爆発しているように感じたので、Processingで簡単に再現してみたところ、なかなかリアリティのあるアニメーションを作ることができました。 仕組み …

【Processing】Curl Noiseを使ってGenerative Art

成果物 www.youtube.com 前回作ったCurlノイズが3Dなのでどう視覚化しようかと思っていたら、ほんのわずかな変更でまるで透明標本のような美しい結果を得ることができました。 仕組み 過去に実装したCurlノイズの軌跡を表示し、彩度を一つ一つ微妙に変えて、…

【Processing】パーティクルでピクセルを削り取る

成果物 www.youtube.com Perlinノイズに沿ってパーティクルを動かし、ぶつかったらピクセルを削除するということを繰り返すとこの様な結果が得られます。いい速度で動くと、まるで羽のような模様が出来て綺麗です。Perlinノイズを使うと、下の画像のように、…

【Processing】ブロックを置いて速度を競うブロック崩し?を作る

成果物 www.youtube.com 今までたくさん粒子を移動させる系のネタを扱ってきたのですが、その粒子を使って削り取るということは行ったことがなかったので、そのための練習もかねて、ブロック崩しを作ってみることにしました。ただし、下の動かすバーは使わな…

【Processing】シンプルなVoronoi Treemapを実装する

成果物 www.youtube.com ようやく、Power DiagramもCircle in Convex hullも実装できたので、目的のVoronoi Treemapを作ることができました。再帰的呼び出しに対応させるのに少しシステムを変更しました。 仕組み Power DiagramはConvex hullの中で動作する…

【Processing】泡のアニメーションをPower DiagramとCircle in Convex hullで実装する

成果物 www.youtube.com 面積をきっちり決めてグラフとして使われることが多いのですが、あまり必要性がなかったので、シンプルな形に留めておきました。 仕組み Power Diagramの円をCircle in Convex hullに従って動かすと、この様な結果が得られます。円を…

【Processing】円をConvex hullの中に閉じ込める

成果物 www.youtube.com Power Diagramで狙った大きさの図を作るにあたって円をConvex Hullの中に閉じ込めて動かす必要があったので実装してみました。Convex Hullに限定することで、処理を単純化しました。 仕組み Convex hullでは調べたい点が各辺のどちら…

【Batch】今まで作ったProcessingのファイル数をカウントする。

成果物 祝1000ファイル超え! リポジトリが70を超えてきたので、今までどれだけのpdeファイルを作ったのか調べてみたところ、なんと1133を超えていることが判明しました!Processingでファイルの視覚化をしてみるのも面白いかもしれないと思いました。 仕組…

【Processing】MW(Multiplicatively Weighted) Voronoiを実装して、距離関数の乗数を変えて実験する。

成果物 www.youtube.com AW Voronoiについて調べていたら MW Voronoiというものも見つけたので、そちらも実装してみました。ただ、辺が湾曲しすぎていて、成長アニメーションが出来なかったので、各Pixelを地道に計算して表示させることにしました。ただ表示…

【Processing】Additively Weighted (AW) Voronoiの成長アニメーションを作る。

成果物 www.youtube.com AW VoronoiをApollonius Graphを使って厳密に計算しよう思うと大変なのですが、実はアニメーションを作るのは非常に簡単です。 参考 PyOpenGL で Voronoi 描画 (2): 加法重み - さてもちブログ 仕組み AW Voronoiは、Voronoi図の成長…