Overview
Demonstrated how color and light generate perceptual illusions, offering design frameworks that link computation, interaction, and human perception.
Temporal Disparity Illusion
This project demonstrates how mathematical algorithms and geometric arrangements can be translated into perceptible motion patterns. By drawing on the CIELAB color space, the work highlights how color and lightness sculpt perception and reveal hidden flows of motion.
- ✦ Focus: Transforming math sequences into visual patterns
- ✦ Tools: Processing, CIELAB color space
- ✦ Effect: Emergent motion perception from static images
- ✦ Interaction: Live demo linked above
Interpretation note: This visualization is exploratory; it illustrates illusory motion triggered by alternating background phases, not actual movement or physical causation.
> Explanation
1) Layout & Math
\[ \theta_i = i\,\Delta\theta,\quad r_i = r_{\text{start}} + i\,\Delta r,\quad x_i = x_c + r_i\cos\theta_i,\quad y_i = y_c + r_i\sin\theta_i. \]
\[ \theta_i^{(\mathrm{golden})} = i \cdot 137.5^\circ,\quad r_i^{(\mathrm{golden})} = r_{\text{start}} + 1.5\,i \]
\[ \mathrm{dir}_i=\begin{cases}+1&i\ \text{even}\\-1&i\ \text{odd}\end{cases},\quad \theta_i^{(\mathrm{double})}=i\,\Delta\theta\,\mathrm{dir}_i \]
2) Wave Layout
\[ k=\frac{2\pi\cdot 4}{\text{cols}},\quad y_{\text{offset}}=A\sin(k\cdot \text{col}) \]
3) Lightness Mapping
\[ t=\frac{\text{col}}{\text{cols}-1},\quad L= \begin{cases} 30 & t<0.25\\ 50 & 0.25\le t<0.50\\ 70 & 0.50\le t<0.75\\ 90 & 0.75\le t\le 1 \end{cases} \]
4) Shadow Phase & Flip
\[ \text{shadowShiftPhase} \leftarrow \mathrm{lerp}(\text{shadowShiftPhase},\ \pm 1,\ \text{shadowShiftSpeed}) \]
Flips polarity when fadeDirection reverses.
5) Layout + Shadow Modes
Layout (spiralModeIndex) decides positions (Linear, Golden, Double, Wave).
Shadow (shadowModeIndex) decides black/white sides
(Horizontal, Angular, Rotation-based, Eye-based, Wave).
- Wave + Wave: synchronized shadows → smooth flow.
- Wave + Horizontal: horizontal stripes across wavy layout.
- Linear + Angular: radial flips by polar angle.
Tip: Pair Wave layout with Wave shadow for the cleanest illusion.
Pumpkin Illusion
Pumpkin Illusion explores how parametric variations in color, lightness, and contour geometry can trigger emergent motion within a static image. By embedding bicolor patterns into Kusama’s iconic pumpkin and synchronizing them with oscillating background phases, the work demonstrates a perceptual transformation: from fixed form to dynamic flow, governed by mathematical rhythm and visual computation.
- ✦ Focus: Motion illusion from parametric variations in static imagery
- ✦ Tools: Processing, CIELAB color space
- ✦ Effect: Transformation of fixed forms into dynamic perceptual flows
- ✦ Interaction: Live demo linked above
Interpretation note: This visualization is exploratory; it illustrates illusory motion triggered by alternating background phases, not actual movement or physical causation.
> Explanation
1) Mask → Binary
\[ M(x,y)= \begin{cases} 1 & \text{if } \max(r,g,b)<\tau\\ 0 & \text{otherwise} \end{cases} \]
2) Connected Components
\[ (\bar x,\bar y)=\left(\frac{1}{n}\sum x,\ \frac{1}{n}\sum y\right) \]
3) Placement Modes
- Label centers: one glyph per region.
- Dense sampling: Poisson-disk–like with min-dist \(d_{\min}\).
4) Orientation
\[ \theta = \operatorname{atan2}(y-y_c,\,x-x_c) \]
5) Shadow Phase
\[ s(\varphi)=\tfrac{1}{2}\bigl(1+\cos\varphi\bigr) \]
6) Size & Color
Glyph size ∝ area, color in LAB space: \(L=\mathrm{lerp}(L_c,L_e)\).
Toolkit
✦ Processing (Java) ✦ Unity