デバイスを縦にしてください。
当サイトは縦画面での閲覧を推奨しています。

Please rotate your device.
This site is best viewed in portrait mode.

Tonami Komuro - Web Creator Portfolio

portfolio tonami komuro

portfolio tonami komuro

project

shadered sketches

2025

Visit the Website (opens in new tab)

[ information ]

Genre:
Creative Coding
Technologies:
JavaScript, Three.js, WebGL, GLSL, Lottie
Tools:
Photoshop, AfterEffects

[ description ]

- English -

Overview

This experimental work was created by combining multiple knowledge areas and techniques I have acquired. To bring hand-drawn effect animations from my animation studies into web expression, I achieved this through the approach of incorporating them as WebGL textures using Lottie.

About the Title

"Shadered sketches" is a neologism combining WebGL shader technology and hand-drawn sketches. It represents the hand-drawn world "shaded" by digital technology, with a wordplay between "shaded" and "shader."

Core Concept

The fusion of analog's imperfect, organic movements with digital's infinite possibilities creates new visual expressions that neither could produce alone. This work achieves a unique expression where technical precision and human warmth perform together, with analog and digital elements enhancing each other's characteristics.

Interactive Element

Activating the Snoise (Simplex noise) checkbox in the upper right overlays algorithmically generated noise onto the hand-drawn animations. The encounter between regular digital noise and irregular analog drawings makes both characteristics more prominent, creating beautiful visual contrasts.

Animation Expression

Two types of animations are prepared, each expressing different organic movements:

  • Organic, life-filled movements like an amoeba stretching and eventually dispersing
  • Fluid and ephemeral expressions resembling water splashing and disappearing

Discovery Through Creation

Through creating this work, I strongly realized the expressive possibilities born from crossing different domains and fields. This has become an important milestone that opens doors to further experimentation and exploration in my future creative endeavors.

- Japanese -

概要

これまで習得した複数の知識や技術を組み合わせて制作した実験的作品です。 アニメーション学習の一環で制作した手書きエフェクトアニメーションをWeb表現として活かすため、Lottieを使用してWebGLにテクスチャとして取り込むというアプローチで実現しました。

作品タイトルについて

「shadered sketches」は、WebGLのシェーダー技術(shader)と手書きスケッチ(sketches)を組み合わせた造語です。 デジタル技術によって「陰影づけられた(shaded)」手書きの世界を表現しており、「shaded」と「shader」の言葉遊びも込められています。

コンセプトの核心

アナログの持つ不完全で有機的な動きと、デジタルの持つ無限の可能性が融合することで、どちらか単体では生み出せない新しい視覚表現が生まれました。 この作品では、技術的な精密性と人間的な温かみが共演し、アナログとデジタルが互いの特性を引き立て合う独特な表現を実現しています。

インタラクティブな仕掛け

画面右上のチェックボックスでSnoise(シンプレックスノイズ)をONにすると、アルゴリズムによって生成されたノイズが手書きアニメーションに重なります。 規則的なデジタルノイズと不規則なアナログの絵が出会うことで、両者の特性がより際立ち、美しい視覚的コントラストが生まれます。

アニメーション表現

2種類のアニメーションを用意しており、それぞれ異なる有機的な動きを表現しています:

  • アメーバが伸縮し最後は散っていくような有機的で生命感あふれる動き
  • 水がはじけて消えていく流動的で儚い表現

制作を通じた発見

本作品の制作を通じて、異なる領域や分野を横断することで生まれる表現の可能性を強く実感しました。 今後の創作活動において、さらなる実験と探求への扉を開く重要なマイルストーンとなりました。

shadered sketches screenshot1

[ images ]

  • shadered sketches screenshot2
  • shadered sketches screenshot3
  • shadered sketches screenshot4
  • shadered sketches screenshot5
  • shadered sketches screenshot6
©2025 Created by Tonami Komuro