#p5js

Real Time 3D Surface Shader in WebGL

はじめに 身体と同化するテクノロジーをテーマにWEBGLのモックアップを作ってみました。 インスピレーション 今でこそ、プロジェクションマッピングや巨大ビジョンが商業的にも有名になっていますが、 そのルーツを探っていくと、彫刻、建築、インスタレーション、 さらには、ライトアートやルミナアートなどのジャンルに触れることができます。 さらにライトアートやルミナアートの世界を覗い

#glsl#p5js#webGL 2020.03.23
VIEW

WEBGLでスペキュラー:水面表現

はじめに 今回は、WEBGLで球体を並べてテクスチャーを動かす表現を作ってみました。 内容 10 x 10で100個の基本的な球体オブジェクトをならべ、 サイン関数・コサイン関数で制御することで、 浮遊感のある波のような表現をさせています。 また、手持ちカメラのようなカメラワークをwebGL で再現するのに 実験的に実装してみました。 ここは改善の余地がまだありそうです

#webGL#p5js 2020.03.17
VIEW

WEBGL with p5.jsで地形メッシュを作る

はじめに 表現系でよくある、プリミティブな地形を作ってみました。 アルゴリズム自体は、シンプルで頂点ごとに、Sin関数で変化させ、 メッシュでつないでいきます。 今回は、WEBGL系の機能を含めバージョンアップした「P5js」 +「 WEBGLでビジュアル」を作ってみました。 P5.jsの実装 以下p5.jsの実装です。 p5jsのWEBGLの安定性・高速化されたということで、

#p5js#glsl#webGL 2020.03.11
VIEW

WebGL – Shader 波エフェクト

はじめに 今回は、GLSLシェーダーで波紋風のイメージエフェクトをかけていきたいと思います。 シェーダーを使いWebページに立体感とリッチな表現を持たせることが期待できます。 開発環境 p5.jsを使ってWebで動く形で波紋風表現を実装していきます。 p5jsはProcessingのJavaScript版といった感じで、WEBGLによる3D表現や映像・音声といったメディアを

#glsl#imageEffect#p5js#shader 2019.12.19
VIEW

ジェネラティブアート x 機械学習

今回は、ジェネラティブアートと機械学習をテーマにモックを作って行きたいと思います。 機械学習の手法の一つであるPix2Pix(GAN)を使って、アルゴリズムで生成した線描画に着色して、 テクスチャ感を加えた表現を実践してみたいと思います。 2019年現在も、機械学習技術(以下ML技術)の革新は目まぐるしく、日々新しい手法や調査結果に関する報告がなされています。 これらのML技術に関する

#GAN#javascript#p5js#pix2pix#TensorFlow 2019.10.03
VIEW