PIXEL ART SHOWCASE · PRINSIP ANIMASI

Satu variabel, gerak yang terasa hidup

AI Squish menunjukkan bagaimana satu prinsip animasi klasik — squash & stretch — bisa dibangun dari satu fungsi sinus dan satu variabel skala. Tidak ada sprite sheet, tidak ada frame gambar terpisah, hanya matematika yang bergerak.

Bedah Formulanya Lihat Semua Fitur

DIAGNOSTIK LIVE

skala (s)0.65

lebar (w)33.8

tinggi (h)10.4

w = 22 / s · h = 16 × s
nilai dihitung ulang tiap frame, disinkron dengan blob di layar.

1variabel matematika menggerakkan semuanya

40×40resolusi kanvas asli, discale tajam

0sprite sheet atau file gambar

60fpsloop requestAnimationFrame ringan

KENAPA INI BERBEDA

Kesederhanaan yang disengaja

Setiap elemen visual — dari bayangan hingga highlight — melayani satu tujuan: membuat satu prinsip animasi terasa jelas dan meyakinkan.

◑

Satu variabel mengatur semuanya

Variabel s dipakai terbalik untuk lebar dan tinggi blob (w = 22/s, h = 16*s) — saat tinggi mengecil, lebar otomatis melebar, persis efek benda ditekan.

◐

Bayangan kontak ikut berskala

Ellipse bayangan di lantai melebar dan menyempit mengikuti skala blob, memperkuat ilusi berat dan pijakan di tanah.

✦

Highlight penegas volume

Satu titik cahaya translusen menegaskan bentuk 3D blob meski seluruhnya digambar dalam pixel 2D datar.

▦

Resolusi rendah, tetap tajam

Digambar di grid 40×40 lalu diskalakan dengan image-rendering: pixelated, sehingga tetap tajam di layar berapa pun ukurannya.

∿

Loop matematis murni

Seluruh gerakan berasal dari satu fungsi sinus terhadap waktu — tidak ada frame gambar terpisah yang perlu dimuat atau disinkronkan.

▤

Bingkai TV & scanline kosmetik

Bezel CRT dan garis scan menambah karakter retro murni lewat CSS — tidak membebani perhitungan animasi sedikit pun.

DI BALIK GERAKAN

Membedah formulanya

Tiga baris matematika ini yang membuat blob terasa lentur, berat, dan hidup — tanpa satu pun frame gambar tambahan.

s= 0.65 + 0.35 · |sin(t / 450)|

w= 22 / s

h= 16 × s

Kenapa hanya tiga baris cukup

Prinsip squash & stretch klasik menuntut volume yang terasa konsisten: saat objek memipih, ia harus melebar; saat memanjang, ia harus menyempit.

s berosilasi lembut antara 0.65–1.0 memakai nilai absolut sinus, jadi geraknya selalu satu arah menekan-melepas, bukan bolak-balik penuh.
w = 22 / s membuat lebar pilih membesar tepat saat s mengecil — efek "ditekan" muncul otomatis tanpa variabel lebar terpisah.
h = 16 × s berjalan searah dengan s, sehingga tinggi dan lebar selalu berkompensasi satu sama lain, menjaga kesan volume tetap.

Tempel di proyek Anda

Seluruh animasi berjalan penuh di sisi klien lewat Canvas API — cocok untuk aset promosi, loading state, atau maskot kecil yang hidup di halaman apa pun.

Satu file HTML mandiri — tidak ada proses build atau paket eksternal.
Kanvas menyesuaikan wadahnya secara responsif lewat aspect-ratio dan tetap tajam berkat rendering pixelated.
Warna, ukuran layar, dan kecepatan osilasi mudah disesuaikan lewat beberapa variabel di bagian atas skrip.
Tidak ada permintaan jaringan tambahan dan tidak ada pelacakan pengguna.

<!-- sematkan langsung -->
<canvas id="scene"></canvas>
<script src="ai-squish.js"></script>

// ubah kecepatan osilasi
// ganti pembagi pada Math.sin(t / 450)
// angka lebih kecil = gerak lebih cepat