Visualizing Math with Tsubuyaki Processing

A few days ago I discovered #つぶやきProcessing (Tsubuyaki Processing) — a Japanese Twitter/X challenge where people cram a full p5.js or Processing sketch into one 280-character tweet.

Pronunciation: tsu-bu-ya-ki processing
Literal meaning: "Tweet Processing"

It's pure code-golf: fit a compilable, runnable slice of p5.js or Processing into a single tweet, usually posted alongside the image or GIF it generates. The constraint forces extreme brevity and sparks inventive visual tricks.

This tweet caught my attention with its creature-like, breathing organic form. I decided to experiment by asking an LLM to explain the underlying equation, visualize it, and then modify the pattern. What started as simple curiosity became a fascinating design challenge. When you want to change a mathematical visualization, what exactly are you controlling? How do you modify the visual "form" while preserving the organic flow and harmonics that make it feel alive? This exploration is a fork of the original creator's work—a playful way to dive deeper into the math and physics behind these mesmerizing patterns.

Building interactive controls and experimenting with different parameters, it's a surprisingly engaging way to learn about wave mechanics, interference patterns, and coordinate transformations—concepts that might seem abstract in a textbook suddenly become tangible when you can see and manipulate them in real time. Here's what I discovered through experimentation.

Breakdown

Enjoy — it's a fun one!

// The breathing equation at the heart of it all
for(i=0;i<9e3;i++) {
  x = i; y = i*.08;
  point(30*sin(y*.02+t)*cos(x*.015)+y*.3, y/8+20*sin(y*.02+t)*sin(x*.01+t));
}

This simple yet powerful equation weaves four principles into an organic art form.

Closing Thoughts

Tsubuyaki sketches prove that limits spark creativity. In 280 characters you can make math breathe, shimmer, and grow. Viz‑Tsubuyaki lets you pull those whispers apart and play with each parameter. I hope it nudges you to tweet a sketch of your own — and to listen more closely to the quiet voice of equations.

How I Created It

When I stumbled upon that mesmerizing Tsubuyaki Processing tweet, I knew I had to understand what made it tick. What started as a simple "how does this work?" question became a deep dive into mathematical visualization and interactive learning.

I vibe-coded Viz-Tsubuyaki using Cursor and Claude-sonnet-4 (MAX), and uses p5.js for the mathematical rendering and created an adaptive control system that lets you manipulate parameters in real-time. The challenge was making complex wave mechanics and coordinate transformations intuitive — turning abstract mathematical concepts into something you can see, feel, and experiment with through touch and gesture.

The project taught me that the best way to truly understand mathematics isn't just reading equations, but playing with them. Every parameter slider represents a different aspect of wave physics, from turbulence and amplitude to harmonic interference and polar transformations.