見出し画像

GENUARY 2023 スケッチ まとめ

かに

こんにちは、AQUARING かに です。
今年初めてGENUARYに参加したので、今回の記事ではGENUARYで作ったスケッチを一言ずつコメントを添えながら紹介していきます！

GENUARYは１月に１日１テーマずつ取り組むコーディングチャレンジみたいなもので、公式サイトの PROMPTS のページに各日のテーマが載っています。


DAY 1 : "Perfect loop / Infinite loop / endless GIFs"

今年の年賀スケッチです。
GSAPでタイムラインアニメーションを組んで、ミラーリピートさせることで無限ループのアニメーションにしています。
雲のつなぎ目をコードで表現するのが難しかったです。


DAY 2 : "Made in 10 minutes"

10分のタイムアタックコーディングです！
つぶやきProcessingで青海波を描きました。
タイムアタックはコード量の少ないつぶやきProcessingと相性が良さそうなので、今後もたまにやってみようかな〜と思いました。

タイムアタックコーディングの様子の録画もあるのでよかったらあわせてこちらも御覧ください〜。


DAY 3 : "Glitch Art"

大昔にCodePenで作っていた SVG Filter のグリッチエフェクト↓をp5.jsに移植してみました。


DAY 4 : "Intersections"

"Intersections" は交差点という意味なので、つぶやきProcessingで円をクルマに見立ててぶつからないようにアニメーションさせてみました。


DAY 5 : "Debug view"

つぶやきProcessingで円周運動のXYをline()とtext()で可視化してデバッグ表示っぽくしてみました。


DAY 6 : "Steal Like An Artist"

自分の好きなアーティスト「Vera Molnár」の作品をつぶやきProcessingで真似してみました。密度やランダム感を似せるのがむずかしかったです。


DAY 7 : "Sample a color palette from your favorite movie/album cover"

推しアイドルグループの「MIGMA SHELTER」の「TOKYO SQUARE - Dubscribe Remix」のジャケットから、Color Tief でカラーパレットを抽出して、矩形（SQUARE…!）のアニメーションを作りました。

p5.js で Color Thief を使うサンプルスケッチ↓もつくったので、気になる方は使ってみてください〜！


DAY 8 : "Signed Distance Functions"

距離関数はGLSLでの実装経験はありますが、p5.jsではやったことがなかったので、GENUARYの参考リンクにあったYouTube↓を参考に、距離関数でモンスターボールを描いてみました。


DAY 9 : "Plants"

bezierVertex()で枝葉を描いて円状に並べてみました。
（なぜかTwitterからセンシティブ判定されてしまって、異議申し立てしても改善されないようです…）


DAY 10 : "Generative music"

効果音ライブラリの SND を使って、バウンスすると音が出るスケッチを描いてみました。


DAY 11 : "Suprematism"

円形と矩形のサイズは固定で、位置と色と重なり順が毎回ランダムになるようにしました。重なり順をランダムにするコードが面白い感じになったのでコードもあわせて見てほしいです。
美大卒でありながら美術史よわよわ人間なのでシュプレマティスムという単語すら知りませんでしたが、プリミティブ大好きマンとしては惹かれるものがあります… !


DAY 12 : "Tessellation"

delaunay-fast をつかって、円形の内部にランダムに配置した頂点でドロネー分割をしてみました。emissiveMaterial()に背景と同じ色を渡すと空間に消えるようなライティングになっておもしろいですね。


DAY 13 : "Something you’ve always wanted to learn"

『Designing Math. 数学とデザインをむすぶプログラミング入門』のChapter 6 にある矩形の敷き詰めをやってみました。本を買ったはいいもの積ん読していたので再び読む機会ができてよかったです。


DAY 14 : "Asemic"

文字っぽいものを書くのが面倒だったので、つぶやきProcessingでrect()だけで書類フォーマットのようなものを作ったら意図せず社会風刺的（黒塗り）になってしまいました…😂


DAY 15 : "Sine waves"

つぶやきProcessingでsin波を合成していたらたまたま紐を引っ張るような表現ができました。


DAY 16 : "Reflection of a reflection"

チュートリアルでよくある壁で跳ね返るボールのスケッチを上下左右にミラーリピートさせてみました。


DAY 17 : "A grid inside a grid inside a grid"

矩形分割の再帰表現と手書き風の線描画を組み合わせてみました。
線を細めにして重ねてみたら鉛筆やシャーペンで上書きしたような質感になりました。


DAY 18 : "Definitely not a grid"

なんと DAY 17 のスケッチを１行変えただけです！
手書き風の線に与えているノイズの量を極端に大きくしたら、グリッド配置を元に描画しているとは思えないような画ができました。


DAY 19 : "Black and white"

白黒といえばオセロ！ということでつぶやきProcessingでcylinder()を重ねてオセロを描きました。完全に重ねてしまうとバッティングしてしまうので、ちょっとだけずらすのがポイントです。


DAY 20 : "Art Deco"

つぶやきProcessingでアールデコ風の壁紙を描いてみました。
正方形から柄がはみ出さないように描画順を工夫しています。


DAY 21 : "Persian Rug"

つぶやきProcessingでペルシャ絨毯のお守りのシンボルを描きました。
↓こちらのサイトを参考にしました。BirdとSnakeのシンボルがかわいくて好きです。


DAY 22 : "Shadows"

drop-shadowの重ねがけで空気感のある影を描きました。この表現はお気に入りなので何度でもやってしまいます。
以前drop-shadowの記事も書いたのでこちらも合わせてどうぞ〜。


DAY 23 : "More Moiré"

つぶやきProcessingでモアレで「Moiré」の文字が浮かび上がるスケッチをつくりました。


DAY 24 : "Textile"

DAY 13 のタイリングと手書き風線描画を組み合わせてみたら想像以上に繊維感がでてお気に入りのスケッチです。


DAY 25 : "Yayoi Kusama"

つぶやきProcessingで黄色いかぼちゃのドット柄をテクスチャにしてbox()に貼り付けてみました。createGraphics()ではなく一度描画してget()したものをテクスチャとして渡しているのがポイントです。


DAY 26 : "My kid could have made that"

つぶやきProcessingでacos(cos())で作った三角波にnoise()を加えて、子供の手書きっぽくしてみました。


DAY 27 : "In the style of Hilma Af Klint"

ヒルマ・アフ・クリントのWikiに載っている「De Tio Största, n°10 Alderdomen」という作品をつぶやきProcessingで真似してみました。ちゃんと外側のstroke()を消しているのがポイントです。見た目はシンプルですが結構悩みました。


DAY 28 : "Generative poetry"

茨木のり子の「自分の感受性ぐらい」という詩を1,2,3行単位で分割してシャッフルして再構築してみました。行を入れ替えても成立しちゃうのがおもしろいですね。


DAY 29 : "Maximalism"

DAY 1 - 28 までのスケッチを一枚の横長テクスチャにまとめて、それをシェーダー側でUVスクロールさせています。box()の面ごとにUVの向きが変わるので、面白い動きになりました。


DAY 30 : "Minimalism"

以前つくったスケッチをちょっと改変してミニマリストのなにもない部屋（それか美術館のホワイトキューブ、？）を描きました。


DAY 31 : "Deliberately break one of your previous images, take one of your previous works and ruin it.　Alternatively, remix one of your previous works."

DAY 1 で作ったスケッチ画像の色情報を元に、DAY 24 の繊維風の描画をしてみました。
最終日を初日のリミックスで締めくくるのはエモいですね…！

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