ねこでじ(Nekodigi)

Nekodigi’s diary

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

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

【Weekly Illustration#6】ふわふわのきつねを描く。

成果物 Weekly Craftingのドット絵を作りたいのですが、もう下絵がないので、きつねを描いてみました。アニメ風の塗にしたのもそのためです。ただ、今回は、参考作品に似すぎたので、本質的特徴をあえて外しました。バランスが悪くなってしまったので、ドッ…

【Processing】カラオケ風タイピングゲームを作る

成果物 www.youtube.com カラオケでよくある、文字が塗りつぶされていくアニメーションの逆バージョンのようなものです。文字の枠を入れるのもいいかもしれませんが、必要がないので入れていません。また新しいテキストアニメーションが見つかったらタイピン…

【Processing】文字が落ちていくタイピングゲームを作る

成果物 www.youtube.com 前回の溶けていくタイピングゲームに続いて作ってみました。モーショングラフィックスのテクニックがそのまま応用できるので、色々な種類ができそうです。カラオケの文字が塗りつぶされていくアニメーションも使えそうなのでそちらも…

【Weekly Graphics#4】Hypixel Build Battle-優勝作品まとめ

成果物 数百回やってきたのですが、2回しか優勝したことがなく、偶然にも二日連続で優勝したので、どのような点が良かったのか分析してみようと思います。ちなみにLegendaryは一度もなったことがありません(´・ω・`)Build Battleを極めるつもりはありません…

【Processing】モアレを使って、僅かなずれもはっきり表す。

成果物 www.youtube.com 今回は、モアレ図を実装してみました。ほんの数ピクセル分のずれも大きな色の違いとして表れています。 仕組み まずストライプの画像を作成します。そして、Mesh Deformation使って、画像を変形します。そして、変形前と変形後の画素…

【Processing】Perlin Curveでピクセルを削り取る

成果物 www.youtube.com 以前作った、パーティクルでピクセルを削り取るものがなかなか良い出来だったので、先ほど作ったPerlin Curveに置き換えて試してみました。 仕組み Perlin Curve nekodigi.hatenablog.com パーティクルでピクセルを削り取る nekodigi…

【Processing】蛇のようにうねるPerlin Curveを作る。

成果物 www.youtube.com 曲線を画面上で走らせる美しいスクリーンセーバーを見かけたので、それを再現できないかと思って作ってみました。スタートに依存せず、なめらかで、うねるような動きをするのが特徴です。 仕組み Perlinノイズに基づいて角度を決め、…

【Python】FFTを使って、ガウシアンぼかしをかける。

成果物 Computer Shaderで画像のFFTをやっている方がいたので、それを使おうと思ったのですが、失敗したので、Numpyを使って、実験してみることにしました。非常に高速で便利です。ガウシアンフィルタ以外の様々なカーネルが使えるはずなのですが、上手くい…

【Processing】ベジェ曲線のような手法を使ったFree Form Deformationを実装する。

成果物 Free Form Deformationを最近知ったので、さっそく実装してみました。GIMPのGrid Warp的なことができるのかなと期待していましたが、どうやらまた違った動きをするようです。変形する格子にぴったり張り付くように変形するのかと思っていましたが、そ…

【Weekly Crafting#2】クロスステッチーねこでじを作ってみた。

成果物 前回のクロスステッチが非常にうまくできたので、リピートでメインキャラクターも作ってみました。何だか本物よりも可愛さが増しているようで、とっても満足しています。 制作過程 まず、輪郭を作っていきます。この時点でも結構かわいいです。 次に…

【Processing】Plasma Noiseを変形して、大理石風の模様を作る。

成果物 現実の大理石とはかけ離れていますが、雰囲気はあります。どちらかというと、ガス惑星の表面に似ている気がします。 仕組み Plasma NoiseをMesh DeformationでPerlinノイズに従って変形させています。 Plasma Noise nekodigi.hatenablog.com Mesh Def…

【Processing】Delaunay/Voronoi図に穴をあける

成果物 Delaunay www.youtube.com マウス座標から、点を遠ざけ、大きすぎる三角形を消去すれば、簡単に穴をあけることができます。 Voronoi www.youtube.com 先ほどのDelaunay図からVoronoi図も作ることができます。 仕組み マウス座標もDelaunay図の頂点と…

【Processing】Delaunay/Voronoi図を使って、線を間接的に表す。

成果物 Delaunay ただ点を渡しているだけなのですが、文字がきれいに描かれています。まるで、メッシュを張ったようにきれいに描かれています。 Voronoi よくよく見ると、文字が書いてあります。Delaunay図と違い、二等分線の位置に線が引かれるので、少し解…

【Processing】パーティクルをパスに沿って動かす

成果物 Nature of Codeのパスに沿って動かすコードを使って、大量の粒子を動かして、軌道を表示してみました。パスに沿ってきれいな線を引きたいのですが、なかなか難しいです。 参考 The Nature of Code コード gist.github.com

【Processing】Marching Squareで画像を二値化した滑らかな輪郭を求める。

成果物 普通の二値化では輪郭はわかりませんが、Marching Squareを使うと輪郭を調べることができます。さらに、線形補間を行うことで、滑らかになるようにしています。そのままでは、効果が分かりにくいので、ぼかしをかけて、Marching Squareの滑らかさが分…

【Processing】画像をDelaunay/Voronoi図で表示する。

成果物 Delaunay まるで、モザイク画のようなきれいな画像になりました。 Voronoi Voronoi図にすると、丸みを帯びた印象になってまた面白いです。画像を渡すだけで出来るので、PGraphicsをこれで表示すると面白い結果になりそうです。 仕組み Voronoi/Delaun…

【Processing】放射のモーショングラフィックスをProcessingでも作ってみる。

成果物 このモーショングラフィックスは座標を、電卓で計算して手動で入力しなければならず、面倒なので、Processingで作ってみようを思って試してみました。YoutubeではAviUtlの動画が圧倒的に人気がありますが、Processingも優秀なので、所々使っていきた…

【Processing】画像を自由自在にねじる。

成果物 www.youtube.com Generative Desiginという本で、渦巻き状に歪めるコードが紹介されていたので、さっそく画像変形をしてみました。 仕組み Mesh Deformationの頂点を渦巻き状に歪めるコードで移動させると、画像変形ができます。 Mesh Deformationに…

【Processing】3D Voronoi図を使って洞窟のようなものを作る。

成果物 www.youtube.com 非常に時間をかけて作ったもののそこまできれいに見えなかった3D Voronoiですが、部分的に表示するときれいに見えるのではということで洞窟を作ってみました。線の表示だけでは分からなかった立体的な構造がしっかり観察できました。…

【Processing】簡単な万華鏡を作る。

成果物 www.youtube.com Meshに画像を貼り付けていけば万華鏡が作れると思ったので、作ってみました。無限に反射させようとすると、処理が複雑になるので、多角形状の反射で済ませています。 仕組み UVを指定しながら、vertexを使って、多角形を描いていきま…

【Processing】音で揺れ動く膜の様子を再現する。(Chladni Plate)

成果物 www.youtube.com スピーカーの上にラップを貼って塩をまくと、独特なパターンが現れます。今回は、三角関数を使って膜の様子を再現しています。 仕組み paulbourkeで紹介されていたこちらの数式を使うと、計算できます。m,nのパラメーターを変更する…

【Processing】群れを使って、迷路を地道に解いていくアニメーションを作る。

成果物 www.youtube.com Boidsを迷路の中で動かすと面白いのではないかということで作ってみました。衝突回避の部分が難しく、1ステップの速度を下げることでひとまず対応しています。 仕組み Boidsに壁から遠ざかる向きに力を加えることで衝突回避していま…

【Processing】3Dレンダリングエンジンに背景を実装する

成果物 RefrectやGrossyがより綺麗に見えるようになりました。MatCapを見て実装方法を思いつきました。今回は、割愛しましたが、Bicubic補完を使うとさらに滑らかな背景になると思います。 仕組み Rayがどこにもぶつからなかった場合に、Rayの極座標を求め、…

【Weekly Graphics#3】AviUtlーボールが溶けて繋がるアニメーションを作る。

成果物 www.youtube.com 今回は、Apple Motion Graphicsで使われていたConnectionをAviUtlで再現してみました。せっかくのメタボールなのに、動きが速すぎて、ほぼ分からないのが残念です。Weekly Graphicsは負担が重たいので、AviUtlで息抜きでもしながらや…

【Processing】CardioidのString Artを作る。

成果物 糸掛け曼荼羅を調べていたら、数学的にも有名なCardioidが出てきたので、Processingで再現してみました。そのうちリアルでも作ってみたいです。 仕組み 円形にポイントを打ち、1の倍数、2の倍数の点を交互に繋いでいくと、オレンジ色のCardioidができ…

【Processing】複数のSin波、その他の波形を使って、音楽を奏でる。

成果物 前回の動画 www.youtube.com 前回の、一つのSin波で音楽を奏でるプログラムを改良して、複数のSin波で奏でられるようにしました。複数の波形で試していくと、動画を作るのが大変になるので、すみませんがダウンロードして試してみてください。ノコギ…

【Processing】Depth Testを無効にして3Dでも、透過を可能にする。

成果物 前回作ったRainbow Tunnelを半透明で表示して、以前は隠れていた面も見えるようにしました。 仕組み 3Dでは普通、後ろに隠れているものが表示されないようにDepth Testを使いますが、物体が透明の時も、隠されてしまいます。なので、今回は、Depth Te…

【Processing】逃げるウィンドウを作る。

成果物 www.youtube.com Processingのsurface変数?を使うことでウィンドウの設定ができることが分かったので、それを使って、逃げるウィンドウを作ってみました。 仕組み setLocationを使うことでウィンドウを動かすことができます。また、fullScreenとsetRe…

【Weekly Illustration#5】コラージュを作って勝手に美祢市をPRする。

成果物 秋芳洞の売店で500円で買った水晶の原石が余りにもハイクオリティだったので、100円で買った鍾乳石と、秋吉台の写真を組み合わせてコラージュを作ってみました。左が鍾乳石、右が水晶なのですが、思ったよりも山のようになじみました。美祢市はローマ…

【Weekly Crafting#1】久しぶりのクロスステッチーかえる仙人を作ってみた。

成果物 仙人登場!とうとうリアルの世界にもかえる仙人が降臨しました(=゚ω゚)ノ 図案は前回のWeekly Illustrationで作ったものを使用しています。 nekodigi.hatenablog.com 所々ミスや、改変をしながらも何とか完成させることができました。図案は平面的な感じ…