Study: water surface
Role: GPU simulation / shader / interaction
Pointer hilao — lehrein wahan se failengi, aapas me takraayengi aur apne aap shaant ho jayengi. Click karo to bada chhinta padta hai.
Kaise chalta haiMove the pointer · click to splash
Zyadatar "paani" wale effects bas ek noise texture ko khiskate hain. Wo dikhne me chalta hai, par lehrein na failti hain, na takraati hain, na rukti hain. Yahan har frame ek asli wave equation chalti hai — GPU par, ek height field ke upar.
next = (left + right + up + down) / 2 - previous; next *= 0.9915; // damping
Simulation ko pichhli do haalaton ki zarurat hoti hai, isliye teen render target hain jinke roles har frame ghoomte rehte hain — prev, cur, aur jisme likhna hai wo. Height field negative bhi jaata hai, isliye buffer HalfFloatType ka hai; normal 8-bit texture minus values kaat deta.
Height field poori screen ko cover karta hai, isliye disturbance dono taraf padhi jaati hai. Neeche wo reflection ko mod'ta hai; upar wo tasveer ko khud mod'ta hai — isi se figure pighalta hai jab aap uske upar se pointer kheenchte ho. Upar zor thoda zyada rakha hai, kyunki wahan koi ambient lehar nahi hai jiske upar wo chadh sake.
Koi audio file nahi hai — sab kuch Web Audio se banta hai. Har baar page khulne par key, chord progression, tempo, pluck ka pattern aur timbre — sab naye chune jaate hain, isliye do baar ek jaisa nahi sunai deta. Randomness bandhi hui hai (chords tayshuda progressions se, notes ek hi scale se), to wo bhatakta hai par galat kabhi nahi hota.
Jo cheez ise sabse zyada "music" banati hai wo hai ping-pong delay — dotted-eighth par, echo har baar thoda dhundhla hota hua. Uske bina yahi notes bikhri hui lagti hain.
Asli boond "plop" nahi karti. Pehle satah tootne ki ek chhoti si kadak, phir neeche phansa bulbula sikudte hue baj'ta hai — aur sikudta bulbula upar ki taraf pitch badhata hai, neeche nahi. Ulta kar do to cartoon lagta hai.
Pointer tez chalao to paani ke dhakke ki swish aati hai, raftaar ke hisaab se tez ya halki. Dono wahi pointer chalata hai jo lehrein banata hai, isliye awaaz aur paani kabhi alag jagah nahi hote.
Paani ki height se seedha kuch nahi hota — jo matlab rakhta hai wo hai uska gradient, yaani dhalaan. Wahi surface ka jhukav hai, aur usi se reflection ke texture coordinates hilte hain. Distortion neeche jaakar badhta hai, kyunki door ka paani zyada tirchha dikhta hai.
assets/js/mirror.js me sabse upar IMAGE_URL badal do — bas. Image same-origin honi chahiye, warna WebGL usse padh nahi paata. null kar doge to neeche wala procedural scene chal jayega.
Ek shart: photo me paani nahi hona chahiye. Aise zyadatar hero shots me reflection pehle se baked hota hai — use waterline par kaat do, warna ye page ek reflection ka reflection banata hai aur do alag lehrein aapas me ladti hain.
Yahan lagi photo portrait hai, aur paani ke upar wali patti chaudi. Seedha khinch dete to figure squash ho jaata, aur cover karte to sirf taangein bachti. Isliye photo ke dono taraf ki andheri deewar chaudai me badha di gayi hai — kinare ka rang le kar, halki grain aur vignette ke saath. Us hisse me dekhne layak kuch hai hi nahi, isliye wo pakda nahi jaata.