ShaderToy用のVSCode拡張機能
はじめに Shaderの作成は始めたばかりですが、環境はVSCodeでプレビューとしてp5.js経由で行っていました。 ただShaderToyではGLSL ES 3.0が使用可能にもかかわらず、p5.jsはGLSL ES 1.0しかサポートしていないので不自由...
2022
セグメンテーション情報から写真画像生成(SPADE/GauGAN)
はじめに セマンティックセグメンテーションにより画像からクラスごとのセグメンテーションマスク画像を生成するネットワークモデルは 以前 に前景抽出の検討を行う際にDeepLabV3モデルなどとして紹介しましたが、 今回はセグメンテーション情報から写真画像...
画像変換系のGANを使用して別の特徴を持つ画像に変換
はじめに 通常のGANは潜在変数から画像を生成するというものですが、 今回は異なった特徴を持つ画像ペア間での変換(Image to image translation)が可能なGANについて見ていきます。 こういったGANの敵対的ネットワークは基本的に...
C++標準ライブラリのみを使用してProcessingやp5.jsのような描画
はじめに 今回はProcessingやp5.jsのような画像生成ソフトウェアやライブラリを使用せずに、 プログラミング言語の標準ライブラリのみを使用してビジュアルアート的な画像を生成します。 いわゆるジェネラティブアートやクリエイティブコーディングのよ...
OpenCVとscikit-imageでの画像セグメンテーション
はじめに 近年はディープラーニングで画像のセグメンテーションを行うのがメジャーかもしれませんが、 訓練データの準備や訓練かかるコストなどを考えると、適用が難しい場面もあるかと思います。 今回はディープラーニングなしのセグメンテーション手段を紹介します。...
GANを使っていくつかのデータセットの学習と画像生成
はじめに 深層学習に関する知識が一昔前で止まってしまっているので、少しずつ追っていこうと思います。 今回はGANに関する内容です。 GAN(Generative Adversarial Network)を使用したモデルに対する敵対的なデータの生成は...
便利そうなシェーダーを作成してp5.jsで描画する
はじめに 前回 でp5.jsからシェーダーを使用することができるようになったので、 よく使用しそうなシェーダーをいくつか作成しました。 どのようなシェーダーを作成するかを考えるにあたって、 出来るだけあまり同じようなテクニックを使用することがな...
p5.js + Parcelで自作シェーダを作成してファイルを呼び出す
はじめに p5.jsなどで3Dレンダリングを行う際はシェーダーが必要になりますが、 実際に頂点シェーダーファイルとフラグメントシェーダーファイルを作成してみようと思います。 前記二つのファイルはGLSLで記述されたC言語風のテキストソースファイルで...
p5.js, nannou, @types/p5 + Parcelで速度比較を行う
はじめに creative coding(クリエイティブコーディング)に興味を持ち手を出し始めたのですが、 いろいろ環境を探っていきうちに、Rustでもクリエイティブコーディングのフレームワーク nannou があることに気づきました。 nannouは...
p5.js + TypeScriptで描画と動画変換を行う
はじめに 前回までp5.jsを使用する際はそのままJavaScriptを使用していましたが、実装中に型付け出来ないのが不便だったので TypeScriptへの切り替えを行いました。その際p5.createloopのtypesが見つからなかったので、動画変換用の...
p5.jsでParticle Systemを実装する
はじめに 前回はGenerative Artの一環としてL-systemを実装しましたが、今回はParticle System(パーティクルシステム)を実装しようと思います。 Particle SystemはL-systemと同じく自然現象を描画する手法の一つ...
p5.jsからL-systemを用いてGenerative Artを作成
はじめに Generative Artの一環として、今回はL-systemモデルを利用してオブジェクトを描画してみようと思います。 L-systemは植物の成長過程をモデル化を目的として開発されたものですが、 このモデルを利用して植物以外にも様々な疑似的な自然物を構築するため...
p5.jsでGenerative Artを作る
はじめに 数学的な計算やアルゴリズムを利用したアートの分野 "Generative Art" というもの存在することを最近知ったので、 自分で開発環境を設定し、実際にGenerative Art画像を作成してみました。 環境 開発環境はProces...
