myicon2 SpinnerEddy's Record

BlazingLineGraph


概要

様々な形状のポイントを結んだグラフを導火線とし、炎が伝播する表現をテーマとした作品。 p5.jsとGLSLで構成。

デモ

使用言語: p5.js, GLSL

技術解説

作品のポイント

  • ブルームを実装し、グラフが発光して見えるように表現
  • ブルームの結果に対してfbmノイズの乗算とUVスクロールを組み合わせることで、グラフ上に炎が伝播していくような表現を実現
  • 画面上下で色反転を行い視覚的変化を付与

工夫

  • ブルームとノイズの組み合わせにより、炎の揺らぎと発光感を両立した。
  • リアルタイム展示を想定し、グラフにランダム性を持たせた変化を加えることで単調にならないようにした。
  • どのタイミングで見ても、一連の表現として成立するような構成を意識した。

担当範囲

p5.jsスケッチ実装 / シェーダー実装 / 演出設計 / 作品テーマ設計

出展情報

Processing Community Days Tokyo 2023 で展示。PCD2023の後アフタートークがあり、そこで少しお話させていただいております。

コード

OpenProcessing