Anatomi Wave Shader: Sinus, Refraksi, dan Peluang – Beragampengetahuan

Setiap studio kreatif memiliki ritual internal yang aneh.

Milik kita? kami menyebutnya tantangan “12 pena dalam 12 bulan” — Eksperimen bulanan, tanpa aturan, tanpa klien, mainkan saja.

Salah satu pengembang kami menciptakan efek antara kafein dan kekacauan—efek gerakan bergelombang, menghipnotis, seperti jeli yang langsung menjadi favorit tim. Kami tidak mencoba membuat sesuatu yang “serius”, tetapi orang-orang mulai bertanya bagaimana cara kerjanya, dan inilah kami – menulis tentang hal itu di beragampengetahuan!

konsep

Idenya dimulai dengan sederhana:

Bagaimana jika kita bisa membuat gerakan organik—bukan gerakan mekanis, bukan linier, melainkan fluida?

Kami menginginkan perasaan “cairan di antara dua dunia” – sebuah gerakan yang seolah-olah bernapas, meregang, dan rileks.

Pada dasarnya, ini adalah kombinasi dari:

• shader fragmen (Hasilkan sel gelombang geometris)
• Distorsi yang didorong oleh matematika (gelombang sinus, riak dan refraksi)
• Dan Minta bingkai animasi Aktifkan pembaruan GPU yang lancar dan berkelanjutan.

function draw(tms) {
  const t = tms * 0.001;

  // organic motion: a sine wave that gently distorts the grid size over time
  const wave = Math.sin(p.x * 0.01 + p.y * 0.015 + t) * 0.25;
  const localCell = cell * (1.0 + wave * 0.2);

  // ripple effect triggered by user interaction (click)
  float ripple = sin(R * 0.06 - dt * 6.0) * env;

  // blending the glass-like refraction with the base image
  vec3 col = mix(base, glass, inside);

  gl_FragColor = vec4(col, 1.0);
}

requestAnimationFrame(draw);

cara kerjanya

Keajaiban di sini terletak pada cara kita menghitung ulang jalur gelombang setiap frame.

Daripada menganimasikan properti DOM atau CSS, kami secara dinamis merekonstruksi setiap piksel bingkai demi bingkai di shader.

Setiap sel berperilaku seperti permukaan hidup—berdenyut, membias, dan beriak seiring waktu.

Bayangkan menggambar garis dengan karet gelang – setiap titik jangkar mengikuti titik sebelumnya, dengan sedikit penundaan dan melampaui batas. Penundaan ini memberi kita perasaan yang luar biasa berlendir dan hidup bergerak.

Untuk alasan kinerja kami menggunakan:

• requestAnimationFrame untuk pembaruan yang lancar.
• Matematika berbasis GPU — Sinus, refraksi, dan riak dihitung langsung di shader.
• Minta bingkai animasi Sinkronkan frame GPU dengan kecepatan refresh browser.

// find the nearest cell center based on the selected shape
void nearestCenter(int shape, vec2 p, float cell, out vec2 c, out vec2 lp) {
  if (shape == 0) {
    vec2 qr  = hex_pixel_to_axial(p, cell);
    vec2 qrr = hex_axial_round(qr);
    c = hex_axial_to_pixel(qrr, cell);
    lp = p - c;
  } else {
    vec2 g = floor(p / cell + 0.5);
    c = g * cell;
    lp = p - c;
  }
}

Preset dan variasi

Setelah sistem inti berjalan, kami tidak dapat berhenti mengubahnya.

Daripada membuat preset tetap, kami membuat panel kontrol sederhana – empat penggeser yang secara langsung mengontrol parameter shader:

• ukuran sel (uCell) — kepadatan jaring
• amplitudo (uAmp) — intensitas bias
• pergeseran warna (uChrom) — jumlah pemisahan warna
• kecepatan (uSpeed) — seberapa cepat gelombang berevolusi

Mengubah salah satu saja dapat langsung mengubah getaran olahraga Anda – dari lembut dan halus menjadi tajam dan energik.

Setiap frame, aplikasi membaca nilai real-time dari slider dan mengirimkannya langsung ke shader –

Jadi perubahan kecil apa pun akan segera berdampak ke seluruh permukaan.

function draw(tms) {
  const t = tms * 0.001;

  // live parameters from the UI → shader
  gl.uniform1f(uCell,   parseFloat(cellInp.value));
  gl.uniform1f(uAmp,    parseFloat(ampInp.value));
  gl.uniform1f(uChrom,  parseFloat(chromInp.value));
  gl.uniform1f(uSpeed,  parseFloat(speedInp.value));
  gl.uniform1f(uTime,   t);

  // update the video texture (if active)
  if (videoReady) {
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoEl);
  }

  // render + next frame
  gl.drawArrays(gl.TRIANGLES, 0, 6);
  requestAnimationFrame(draw);
}

Tantangan di sepanjang perjalanan

Tentu saja, tidak semuanya berjalan lancar (permainan kata-kata yang dimaksudkan).

Pada satu titik, gelombang menjadi kacau balau—puncak, kilatan cahaya, semuanya hancur.

Ternyata logika penghalusan kami meleset satu piksel (secara harfiah).

Bug menarik lainnya: saat pengujian pada monitor dengan refresh tinggi, tindakannya terlihat terlalu halus – Ini seperti kehilangan tekstur. Oleh karena itu, kami harus menambahkan sedikit ketidaksempurnaan untuk mengembalikan kesan “buatan tangan”.

cobalah sendiri

Seluruh pengaturannya terbuka dan mudah untuk di-remix – cukup bercabang dan mulai bermain dengan parameternya.

Coba ubah:

• Poin
• Kurva evolusi
• gradien warna

Kami ingin melihat jenis gelombang apa yang dapat Anda buat – tandai kami atau kirimkan campuran Anda!

pemikiran terakhir

Terkadang ide terbaik muncul karena tidak berusaha keras.

Ini seharusnya merupakan eksperimen cepat yang dilakukan sendiri – namun ternyata berubah menjadi sesuatu yang sangat memuaskan dan kaya secara visual.

Kami harap Anda menikmatinya sama seperti kami menikmati merusak (dan memperbaikinya).

Dibuat dengan ❤️ oleh Blacklead Studio sebagai bagian dari kami 12 pena selama 12 bulan Tantangan kreatif.