HypnoSim: Tarayıcıda Fizik Simülasyonu Video Stüdyosu

Amaç

Reels, TikTok ve Shorts'ta fizik simülasyonu videoları ("oddly satisfying" formatı) çok izleniyor. Bu alandaki araçların çoğu yalnızca 9:16 çıktı veriyor ve tek bir "zıplayan top" fikrine kilitli.

HypnoSim'i şablon eklenebilen genel bir simülasyon video motoru olarak tasarladım: kullanıcı bir şablon seçip ayarları değiştiriyor, aynı senaryodan dikey, yatay ve kare video indiriyor.

Rolüm

Fikirden yayına kadar tek başıma geliştirdim: rakip araştırması, ürün gereksinimleri dokümanı (PRD), fizik motoru, ses sistemi, video kodlama ve arayüz.

Teknik yapı

• React 19, TypeScript ve Vite; Vercel üzerinde statik yayın.
• Fizik Matter.js ile, görüntü Canvas 2D ile çiziliyor.
• Video WebCodecs ile H.264, ses AAC olarak kodlanıyor ve mp4-muxer ile tarayıcıda MP4'e paketleniyor.
• Sesler Web Audio OfflineAudioContext ile sentezleniyor; kullanıcı @tonejs/midi ile kendi MIDI melodisini yükleyebiliyor.
• 8 şablon: dönen halka, plinko, bilye yarışı, müzik merdiveni, arena savaşı, piksel fetih, tuğla kırma ve çekim kuyusu.

Zor kısım

Aynı ayarların her seferinde birebir aynı videoyu üretmesi gerekiyordu. Simülasyon seed'li bir rastgele sayı üreteciyle (mulberry32) ve sabit zaman adımıyla (saniyede 60 kare) çalışıyor; motor kodunda Math.random yasak.

Fizik önce "bake" ediliyor: her karenin durumu ve her çarpışmanın zamanı belleğe alınıyor. Görüntü ve ses bu kayıttan üretildiği için çarpışma notaları kare hassasiyetinde senkron kalıyor; sekme arka plana alınsa bile çıktı bozulmuyor.

Ses miksi için başta ffmpeg.wasm planlanmıştı. AAC kodlamayı WebCodecs AudioEncoder ile yaparak yaklaşık 31 MB'lık wasm indirmesinden kurtuldum. WebCodecs olmayan tarayıcılar için gerçek zamanlı WebM kaydına düşen bir yedek yol var.

Sonuç

Uygulama hypnosim.com adresinde yayında. Kayıt ve sunucu gerektirmiyor; videolar kullanıcının kendi tarayıcısında üretiliyor ve hiçbir dosya sunucuya yüklenmiyor.