AI translation
The flowers in Tokihana were PNGs generated one at a time. They were cute, but I didn't have the method to create them myself. So I removed the images and recreated them from scratch using code based on watercolor mechanics.
Try the app
時花 Hanatoki
Enjoyed this article?
Support MajiWtf
Tokihana is an app where pressing the "Bloom Now" button causes a single flower to bloom from that location at that moment.
Which flower blooms is determined by information derived from dividing your current location into coarse grid cells. The same location always produces the same species, and the time you pressed becomes the pale color of the bouquet. Nothing is input, no explanation is shown—only the bloomed result remains in your garden.
The first flowers were watercolor PNGs, each created individually through image generation.
I managed to display them on screen. But every time I wanted to add more varieties, I had to bring in images from outside. What I had was finished artwork, not the mechanism for generating flowers.
I considered automating image generation, and I considered training on existing flowers.
What I ultimately chose was to stop drawing and instead paint with code. The reason was simple: I wanted to own the generation mechanism myself.
I created flower petal outlines with paths, layering thin colors gradually. Flowers that radiate from the center, flowers with overlapping petals, flowers that form clusters or spikes. Rather than storing these as images, I gave each a skeleton and color recipe.
Finally, when I layered paper texture with Metal shaders, the uniform vector shapes of the flowers gained the trembling quality of watercolor.
When I saw the first display on the actual device, I thought, "The roots are messy" and "The overlapping isn't beautiful."
The backs of petals were transparent, showing the stem behind them. Flowers were cut off at the image edges. The stem spread too wide, and the ribbon was floating in places that weren't even the stem.
I placed a thin paper-colored base behind the flowers to create layering depth. I made the stem thinner and gathered the base into the width of the bouquet. I moved the cut edge below the ribbon, fixing it so the band actually wraps around the stem.
Making a single cute flower and creating a mechanism for beautiful overlapping as a bouquet were two different things.
Tokihana doesn't save images of bloomed flowers.
It only saves the time pressed, a short string created from location, the flower species, and a seed for varying the arrangement. Every time you open a bouquet, it draws again from that information.
So when I change how flowers are drawn, not just today's flowers but past bouquets are reborn in new watercolor. Even if I remove the PNG, the time left in the garden doesn't disappear.
When adding new flower species, what's needed next isn't an image file, but a recipe for a new way of blooming.
Rather than simply replacing drawing with code, it feels like Tokihana has become able to bloom flowers on its own. That's how I feel about it now.
時花は、「今を咲かせる」ボタンを押すと、その時その場所から一輪の花が咲くアプリです。
どの花が咲くかは、現在地を粗いマスに分けた情報から決まります。同じ場所では同じ種類が咲き、押した時刻は花束の淡い色味になる。何も入力せず、説明も出さず、咲いた結果だけを庭に残します。
最初の花は、画像生成で一枚ずつ作った水彩のPNGでした。
画面には置けました。でも、種類を増やすたびに、また外から画像を持ってくる構成です。自分が持っているのは完成した絵で、花を生む仕組みではありませんでした。
画像生成を自動化する案も、既存の花を学習させる案も考えました。
最後に選んだのは、絵をやめてコードで描くことでした。理由は単純で、生成の仕組みを自分で持ちたかったからです。
花びらの輪郭をパスで作り、薄い色を少しずつ重ねる。中心から放射状に開く花、花びらが重なる花、房や穂になる花。それぞれを画像ではなく、骨格と色のレシピとして持たせました。
最後にMetalのシェーダーで紙の目を重ねると、均一なベクター図形だった花に、水彩らしい揺らぎが出てきました。
最初の実機表示を見たとき、「根っこが雑」「重なりが美しくない」と思いました。
花びらの裏が透けて、後ろの茎が見える。画像の端で花が切れる。茎が広がりすぎて、リボンも茎ではない場所に浮いていました。
花の裏に紙色の薄い下地を置き、前後の重なりを作りました。茎を細くして、根元を束の幅へ集める。切り口をリボンの下へ出して、帯が本当に茎へ巻かれている形に直しました。
かわいい花を一枚作ることと、花束として美しく重なる仕組みを作ることは別でした。
時花は、咲いた花の画像を保存していません。
保存するのは、押した時刻、場所から作った短い文字列、花の種類、配置を揺らすための種だけです。花束を開くたびに、その情報からもう一度描きます。
だから描き方を変えると、今日の花だけでなく、過去の花束も新しい水彩で蘇ります。PNGを外しても、庭に残した時間は消えません。
花の種類を増やすときも、次から必要なのは画像ファイルではなく、新しい咲き方のレシピです。
絵をコードへ置き換えたというより、時花が自分で花を咲かせられるようになった。今はそんな感覚です。
