最近、Blenderでモーショングラフィックスを作っています。 まだまだわからないこともあるんですが、簡単な図形の動きとかを動画にしてます。 これは丸を動かす練習で作ってみました。 背景には丸とか四角を散りばめてみたり。 色合いは気に入ってるので、こ…

課題 以前から、 p5.jsのWEBGLモードでのアルファ値を使った時の挙動に悩んでいました。 gin-graphic.hatenablog.com WEBGLモードでアルファ値を持ったカラーを使って描画すると、ブラウザの背景（白）がみてるんですよね。 p5.jsのbackgroundでセットした色…

p5.jsで3D図形のBoxにシェーダーを適用させてみます。 Boxの法線 Boxの各面を塗り分ける まとめ 参考文献 Boxの法線 Box（立方体）は面を6面持つ3D図形です。 それぞれの面に対して垂直方向を表すのが法線になります。 6面の面はxyzの3方向に向いており、そ…

以前から気になっていたBlenderに入門してみました。 少し前に触り始めて、最近ようやく慣れてきて形になるものを作れるようになってきました。 特にBlenderでのモーションというか、動画の作成はキーフレームによる制御になるので、その感覚に慣れる時間が…

p5.jsで自作したShapeにシェーダーを適用していきます。 自作Shapeは前回の記事で扱った正多角形を使います。 gin-graphic.hatenablog.com 自作図形にシェーダー適用 textureModeの設定 テクスチャ座標の設定 正多角形（外周）へシェーダー適用 作例 参考文…

p5.jsで正多角形を描画する関数を作成していきます。 自分でShapeを作るにはbeginShape()とvertex()とendShape()を使えば自作図形を描くことができます。 正多角形 正多角形（外周） 描画例 参考文献 正多角形 正多角形は一つの円周上に等しい角度間隔で点を…

前回までフラグメントシェーダーを中心に、p5.js で書いた図形の描画を変化させてきました。 gin-graphic.hatenablog.com 今回は頂点シェーダー（バーテックスシェーダー）を利用して、図形の位置や形を変えてみます。 GLSLで図形の変形 図形の移動 図形の拡…

p5.jsでネオンモーションを作りました。 かなり良い出来。 ずっと見てられる。 www.youtube.com

前回までは静止した描画を行ってきました。 gin-graphic.hatenablog.com 今回はp5.jsから変数を渡すことで、動的にGLSLでの描画を変化させ、動画を作りたいと思います。 シェーダー描画を動かす まとめ 参考文献 p5.jsでのシェーダー（GLSL）入門 シェーダー…

前回はp5.jsからシェーダーを呼び出して、画面全体にGLSLで描画を行いました。 gin-graphic.hatenablog.com 今回はシェーダーの適応範囲を変え、p5.jsで描画した図形を対象にしていきます。 シェーダーを図形に適用 図形を一色で塗りつぶす 図形内にGLSLで描…

「数学から創るジェネラティブアート - Processingで学ぶかたちのデザイン」という参考書を購入しました。 数学から創るジェネラティブアート ―Processingで学ぶかたちのデザイン作者:巴山 竜来発売日: 2019/04/17メディア: Kindle版 数学と芸術のつながりに…

この記事はp5.jsは知っている、使ったことがあるけど、シェーダーとかGLSLは扱ったことがないという人に向けて書いていきます。 p5.jsを知らないという方は、調べてみて下さい。 p5.jsはクリエイティブ・コーディング用のJavaScriptライブラリで、様々なコン…

自分の性格的にわかっているが、段々クリエイティブコーディングに対してモチベーションが下がりつつある。 理由はわかっている。 別の趣味に興味が移っている。（カメラ熱が出てる） 趣味の中でもローテーションみたいなものがあるんですよね。 3，4個の趣…

9月中頃にデスクトップPCがなくなりました。 gin-graphic.hatenablog.com そんなわけでデスクトップPCを組み替えました。 グラフィックボードとSSD,HDDは今まで使っていたものをそのまま流用。 新規購入したのはCPU、マザーボード、メモリ、電源、ケースです…

p5.jsのP2DとWebGLの透過度によって描写が異なっている様な気がします。 ブラウザ上では違いが分からないのですが、画像として保存した時に差異が顕在化しました。 比較のために半透明の四角形を明度、彩度を変えて描写したものを見てみましょう。 保存形式…

露伴先生のイメージをp5.jsで形にしました。 ヘアバンドとピアス。 ジョジョの奇妙な冒険第4部のスピンオフである、岸辺露伴は動かないがドラマ化されるみたいですね。 ドラマは12月28～30日午後10時に3夜連続で放送ということで、年末楽しみです。 ドラマ「…

ここ最近p5.jsで作った作品たち。 ジェネラティブアートというかクリエイティブコーディングという部類に当てはまる。 特に動画を作るのが面白い。 作品の中でカラフルな色使いをするのが好きみたい。 はじめはモノクロのジェネラティブアートとかを作ってみ…

モノクロと赤緑青で作って見てるけど、その内面倒になるかも

Processingで作った作品 正確にはp5jsですが No.001

一昨日のこと、デスクトップのパソコンが壊れました。 この一、二ヶ月の間電源スイッチが不調でした。 押したときに戻らない。押し込んだままになることがたまにありました。 良くないと思いながらも、面倒で放置していたところ、一昨日も同じように電源スイ…

「ジェネラティブ・アートーProcessingによる実践ガイド」の4章「円を描く間違った方法」を実践しました。 三角関数を用いて円を描くところから始まり、ノイズを加えた円描きます。 最後には線分を用いて中心、半径、回転角にノイズを加えて描く「Wave Clock…

「ジェネラティブ・アートーProcessingによる実践ガイド」の3章「線を引く間違った方法」を実践しました。 直線を引くところから始まり、何種類かノイズを扱い、ノイズを加えた線を描きます。 参考書の図3.1～図3.11までを手元で再現した結果になります。 表…

先日、「[普及版]ジェネラティブ・アート―Processingによる実践ガイド」というProcessingの参考書を購入しました。 Processingというのは電子アートとビジュアルデザインのためのプログラミング言語です。 数年前に出会って存在は認識しており、軽く触ってみ…

本ブログは管理者であるギンによるブログです。 クリエイティブ・コーディング ジェネラティブアート デジタルアート このあたりに関する記事を書いていく予定です。 簡単に自己紹介 名前：ギン 仕事：エンジニア 趣味でクリエイティブ・コーディングに取り…