🎙️ เรื่องเล่าจากเส้นสั่น: เมื่อภาพนิ่งกลายเป็นภาพเคลื่อนไหวด้วยฟิลเตอร์ SVG Camillo ได้แรงบันดาลใจจากสารคดี ARTE ที่ใช้ภาพประกอบแบบเรียบง่าย แต่มี “การสั่นเบา ๆ” ที่ทำให้ดูเหมือนภาพเคลื่อนไหวแบบวาดมือ เขาจึงทดลองสร้างเอฟเฟกต์นี้ขึ้นมาโดยไม่ต้องวาดหลายเฟรม แต่ใช้เทคนิคการบิดเบือนภาพผ่านฟิลเตอร์ SVG แทน หลักการมี 2 ส่วน: 1️⃣. Distortion: ทำให้ขอบของภาพไม่เรียบตรง แต่มีความสั่นแบบสุ่ม 2️⃣. Animation: เปลี่ยนค่าการสั่นทุก ๆ 100–200 ms เพื่อให้เกิดการเคลื่อนไหวต่อเนื่อง โดยใช้ฟิลเตอร์ SVG 2 ตัว: ✅ feTurbulence: สร้าง noise texture แบบ procedural ✅ feDisplacementMap: ใช้ noise นั้นเพื่อบิดเบือนพิกเซลของภาพ จากนั้นใช้ JavaScript เปลี่ยนค่าพารามิเตอร์ เช่น baseFrequency และ scale เพื่อให้เกิดการสั่นแบบมีชีวิตชีวา ✅ เอฟเฟกต์ “boiling” คือการทำให้ภาพนิ่งดูเหมือนเคลื่อนไหวด้วยการสั่นเบา ๆ ➡️ ใช้ในงานอนิเมชันเพื่อให้ฉากนิ่งดูมีชีวิต เช่นตัวละครยืนเฉย ๆ ✅ เทคนิคดั้งเดิมคือวาดหลายเฟรมด้วยมือแล้ววนซ้ำ ➡️ แต่ในเว็บสามารถใช้ SVG filter แทนได้โดยไม่ต้องวาดหลายภาพ ✅ ใช้ฟิลเตอร์ feTurbulence เพื่อสร้าง noise และ feDisplacementMap เพื่อบิดภาพ ➡️ noise จะบิดพิกเซลของภาพให้ดูเหมือนเส้นสั่น ✅ JavaScript ใช้เปลี่ยนค่าพารามิเตอร์ทุก 100ms เพื่อให้เกิดการเคลื่อนไหว ➡️ เช่นปรับ baseFrequency แบบสุ่มเล็กน้อยในแต่ละเฟรม ✅ มีเดโมให้ทดลองปรับค่าต่าง ๆ เช่น scale, frequency, และ animation intensity ➡️ สามารถควบคุมระดับการสั่นได้ตั้งแต่เบา ๆ ไปจนถึงสั่นแรงจนภาพบิดเบี้ยว ✅ เทคนิคนี้ใช้ได้ทั้งกับภาพ SVG และภาพ raster (.jpg, .png) ➡️ ทำให้สามารถนำไปใช้กับภาพประกอบทั่วไปได้หลากหลาย https://camillovisini.com/coding/simulating-hand-drawn-motion-with-svg-filters