Canvas 2D · text pixel sampling · spring physics
ตัวอักษรมีชีวิต
พิมพ์คำลงไป แล้วตัวอักษรจะถูก "วาด" จากอนุภาคหลายพันตัว. เทคนิคคือ render ข้อความลง canvas ที่มองไม่เห็น แล้วอ่านพิกเซลทุกช่อง — ช่องไหนทึบก็ตั้งเป็น "เป้าหมาย" ให้อนุภาคหนึ่งตัววิ่งไปเกาะด้วยสปริง. กวนเมาส์เพื่อดันให้กระจาย แล้วมันจะดีดกลับมาประกอบเป็นคำเดิม. รองรับภาษาไทยด้วย
— fps ·
ข้อความ
พฤติกรรม
สีไล่ตามแนวนอนของคำ · ความสว่างของจุดเพิ่มตามความเร็วที่มันวิ่ง
วิธีทำงาน: วาดข้อความด้วย
fillText() ลง canvas ชั่วคราว แล้วใช้ getImageData()
อ่านค่า alpha ทุกพิกเซล (เว้นช่วงตาม "ความหนาแน่น"). พิกเซลที่ทึบ = เป้าหมายของอนุภาคหนึ่งตัว.
แต่ละเฟรมอนุภาคถูกเร่งเข้าหาเป้าด้วยสปริง v += (target - pos) * k + แรงหน่วง (damping)
ทำให้ดีดกลับนุ่ม ๆ. แรงผลักจากเมาส์เป็นแรงผกผันกับระยะ ดันอนุภาคที่อยู่ใกล้ให้กระเด็น.