見出し画像

DailyCoding 振り返り 2021

かに

こんにちは、AQUARING かに です。

早いもので2021年もあと数日ですね。
今年の10月から DailyCoding を始めて、OpenProcessing に投稿したスケッチも 100 件を越えようとしています。良い機会なので今まで書いてきたお気に入りのスケッチをこだわりポイントとともに振り返っていこうと思います。

10月

映画「マトリックス」のあのエフェクトをつくりました。
単純に p5.Image からpixels で画像のピクセル色を参照するのではなく、p5.Image を一度 p5.Graphics にレンダリングしてから pixels を取得することで画像側も回転できるようにしています。
よ〜くみるとピコピコしている文字が「P5*JS」になっているのもこだわりポイントです。


WEBGLモードでLEGOブロックをつくりました。
並行投影（パースなしカメラ）に ortho() 、ブロック部分は box() と cylinder() を使っています。
カクカクした上下の動きは noise() に以下の階調制限処理をかけています。

let s = map(noise(nx, nz), 0.3, 1, 0.1, 10, true);
s = floor(s * 4) / 4;// 4倍にしてfloor()で小数点を切り捨てたあとに4で割って元の値の範囲に戻す


p5.Graphics を使って BackBuffer をやってみました。
こんなに簡単に実装できるのか！と感動した記憶があります。
１フレーム前の描画結果をちょっとだけ回転、スケールさせて表示させることでたくさんあるように見せています。
絵文字列の分割にはスプレッド構文をつかうとめちゃめちゃ楽なのでオススメです。

let str = '🍦🍧🍨🍩🍪🍫🍬🍭🍮🍯🍰🫖☕️';
let charArr = [...str, ...str];// 絵文字を１文字ずつに分割して配列に展開


ステンシルフォントと blendMode(ADD) でネオン表現をつくりました。
p5.Font.textToPoints() で任意文字列の輪郭の頂点配列が取得できるのですが、そのまま使うとフラットな配列が帰ってきて文字同士が繋がってしまうため、頂点同士の距離から判断して輪郭ごとの配列に分割してから描画しています。
また、 drawingContext によるドロップシャドウを二重に描画させることで発光の明るさを強めています。


drawingContext の clip() と createRadialGradient() を使って秋の月をつくりました。
書き始めは「円形マスクで何かつくろう〜」くらいにしか考えていませんでしたが、中の模様に noise() をのせたら月っぽく見えたので「Autumn Moon」というタイトルをつけました。
発光表現とグラデーションの相性がよくてお気に入りです。


カメラ位置からビル群をスキャンしているような表現をつくりました。
頂点シェーダーの行列計算後の gl_Position.z の値はカメラ位置から視線方向への奥行き情報になるので、それを uniform 変数でフラグメントシェーダーに渡して描画しています。
カメラアングルを変えるごとに見え方が変わって面白いです。


11月

ポータルエフェクトをつくりました。
こちらの記事を参考にまずthree.jsでつくったものをp5.jsに書き換えました。
p5.js の WEBGL モードだと drawingContext で WebGLRenderingContext にそのままアクセスできるので便利ですね。

ポータルエフェクトと GSAP を使って、キー操作でアニメーションするワープ表現をつくりました。
box() の進行方向に応じて伸縮と回転をかけているのがポイントです。


「.hack//」シリーズのイメージで六角形のパネルを敷き詰めた空間をつくりました。
常時アニメーションでランダムにピックアップされたパネルが飛び上がり、クリックすると中心から外側に向けて波紋のようなアニメーションが再生されます。ふたつのアニメーションのスピードに大幅に差をつけることでシーン全体のメリハリをつけました。このスケッチでも GSAP を使っています。


レーザー表現をつくりました。
擬似ボリュームレンダリングは @satoruhigaさんの実装を参考にして、ちょっとずつ大きさの違う大量の透明な cylinder() を加算合成で重ねて描画しています。
数学が苦手なので、cylinder() を任意の２点間を結ぶように表示させるのに数日悩みました。。
床面のレーザーが当たって発光している部分はフラグメントシェーダーに頂点座標を渡して描画しています。


@senbaku さんのツイートに感化されてグリッターエフェクトをつくりました。
マウス位置から半放射状に六角形のパーティクルを生成して、fill() のアルファ値に荒めの noise() を入れることでキラキラした感じを出しています。
自分で思っていたより綺麗な質感が出せたのでお気に入りです。


11月中旬から つぶやきProcessing をはじめました。
以前書いたスケッチを つぶやきProcessing で再現する試みをやってみました。
11月後半から12月中旬にかけてほぼ毎日 つぶやきProcessing でスケッチをかいていました。文字数制限がある分、毎日書くにはちょうど良いボリュームなのかもしれません。（その分悩む時間は多いですが...）
ちょうどこの時期に「つぶやきProcessing Tips」の記事も書いたのでこちらもご覧ください〜！


12月

つぶやきProcessing で BackBuffer をつくりました。
書き始めはもっとダイナミックに動かそうと思っていましたが、試しに１ピクセルだけ大きく表示するようにしたら面白い画がでたので、これを採用しました。いろんな絵文字を入れてみるとおもしろいかも？


つぶやきProcessing で createShader() を使ってシェーダー表現をつくりました。
とくに下調べもせずにひとりでもくもく書いていたのですが、280文字に収まったときは思わず「やった〜〜！」と心の声が漏れましたw
表現以外の部分でだいぶ文字数を持っていかれてしまうので、複雑な絵作りまでするのは難易度が高そうです。。
ツイートした後に知ったのですが、つぶやきProcessing x GLSL には先人（@gin_graphicさん）がいらっしゃってお互いの記述から文字数削減テクを学び合うことができてよかったです。


cylinder() で蓮の花みたいな表現をつくりました。
三角を内側に回転させるのは最初から考えていましたが、複製して回転とサイズをずらしたら偶然蓮の花みたいになって「おお〜！」っとなったのでそのまま採用しました。
この頃は正三角形モチーフでの表現を探っていましたね。


p5.Geometry をつかってリボンをつくりました。
p5.js側で定義されている3Dプリミティブの種類には限りがありますが、p5.Geometry を使うと独自の3Dメッシュを作ることができます。p5.Geometry については、@_sayo_y さんの記事がわかりやすかったので、ぜひ読んでみてください。
【p5.js】p5.Geometryであのドーナツをつくる


ひとこと

自分はいつも寝る前の自由時間でスケッチを書いていて、以前は帰宅ついでによくコンビニに寄っていたのですが、デイリーコーディングを始めてからは「なるべく早く帰ってコーディング時間を多く取りたい！」と思うようになり、コンビニに寄ることが少なくなったので出費が減った気がします...w

自分は趣味の延長のような感じでデイリーコーディングをしていますが、なにも考えず作っていたものがたまに普段の仕事に繋がることもあるのがおもしろいですね。
2022年も気負わず続けて行けたらいいなとおもいます。

この記事が気に入ったらサポートをしてみませんか？