🏢 Office Evolution Sim
เมื่อออฟฟิศขยับเองได้ — บอท 28 ตัว ย้ายโต๊ะทุกวัน
📅 18 มิถุนายน 2569
เคยสงสัยไหมว่า ถ้าออฟฟิศสามารถจัดตัวเองใหม่ได้ทุกวันตาม Cosine Similarity ของวัตถุ — มันจะหน้าตาเป็นยังไง? Cos-Sim Office คือ Simulation 3D ที่วัตถุทุกชิ้น (โต๊ะ เก้าอี้ คอมพิวเตอร์ โซฟา ตู้กดน้ำ) มี Feature Vector 5 มิติ ของตัวเอง เหมือน Word Embedding ใน NLP!
🧮 ทุกวัตถุคือเวกเตอร์
แนวคิดหลัก: เช่นเดียวกับที่คำศัพท์ใน NLP มี Cosine Similarity บอกว่าคำไหน "คล้าย" หรือ "ต่าง" กัน วัตถุทุกชิ้นในออฟฟิศก็มี feature vector 5 มิติ:
| วัตถุ | [work, social, energy, privacy, formality] |
|---|---|
| 🪑 โต๊ะทำงาน | [0.90, 0.20, 0.35, 0.70, 0.80] |
| 🖥️ คอมพิวเตอร์ | [0.95, 0.10, 0.50, 0.60, 0.50] |
| 🛋️ โซฟา | [0.10, 0.85, 0.10, 0.80, 0.10] |
| 💧 ตู้กดน้ำ | [0.15, 0.70, 0.30, 0.05, 0.15] |
| 🤝 โต๊ะประชุม | [0.80, 0.95, 0.55, 0.10, 0.75] |
🌈 ภาพรวม: ออฟฟิศที่ "มีชีวิต"
Simulation นี้รันบน Three.js ใน Browser ไม่ต้องติดตั้งอะไรเลย เปิด /3d/office.html ก็เล่นได้ทันที คุณสามารถ:
- 🖱️ ลากเมาส์หมุนมุมกล้อง — ดูจากด้านบน ด้านข้าง หรือมุมสูง
- 🔄 Scroll ซูม — ดูใกล้ๆที่บอทเดิน หรือซูมออกดูทั้ง office
- 👀 ดูพฤติกรรม — บอทแต่ละตัวมีสี สปีด และอารมณ์ต่างกัน
⏰ 1 วันในออฟฟิศ = 600 Ticks
ทุกๆ 600 รอบการอัปเดต (ประมาณ 10 วินาทีในเวลาจริง) จะครบ 1 วันใน Simulation แต่ละวันแบ่งเป็น 5 ช่วง:
| ช่วง | พฤติกรรม |
|---|---|
| 🌅 MORNING | บอทเดินจากจุดเกิดไปยังโต๊ะที่ได้รับมอบหมาย |
| 💼 WORK | บอททำงานที่โต๊ะ บางตัวไปประชุม หรือพักเบรก |
| 🍕 LUNCH | บอทเดินไปโซนพักผ่อน โซฟา ตู้กดน้ำ |
| 💼 WORK | กลับมาทำงานรอบบ่าย |
| 🧹 CLEANUP | 📌 โต๊ะถูกย้าย! บอทที่โต๊ะไม่ค่อยได้ใช้จะถูกย้ายไปใกล้คลัสเตอร์ที่บอทมีความสุข |
🧠 การตัดสินใจของบอท: Cosine Similarity
บอทแต่ละตัวมี state vector ที่เปลี่ยนทุก tick ตาม mood, energy, social need:
- workNeed = พลังงานต่ำ → อยากทำงานน้อย
- socialNeed = อยากเข้าสังคม
- energy = พลังงานปัจจุบัน
- privacyWant = อารมณ์ไม่ดี → อยากอยู่คนเดียว
- formalityWant = ความเป็นทางการ
ทุกครั้งที่บอทต้องการตัดสินใจว่าจะไปไหน — มันคำนวณ cosine similarity ระหว่าง state vector ของตัวเอง กับ feature vector ของวัตถุทุกชิ้นที่ตรงกับ phase ปัจจุบัน แล้วเลือกไปยังวัตถุที่ คล้ายกับมันมากที่สุด เหมือน Token ใน NLP ที่หา Token ที่ใกล้เคียงที่สุดใน Embedding Space
🪑 การจัดเรียงวัตถุ: Force-Directed Layout
ทุกสิ้นวัน (🌙 จัดเรียง) ระบบจะคำนวณความสัมพันธ์ระหว่างวัตถุทุกคู่ด้วย Cosine Similarity:
- 📊 วัตถุที่มี vector คล้ายกัน (cos·sim สูง) → ดึงดูดกัน → อยู่ใกล้กัน
- 📊 วัตถุที่มี vector ต่างกัน (cos·sim ต่ำ) → ผลักกัน → อยู่ห่างกัน
- 🔄 คลัสเตอร์ของวัตถุที่ "ความหมายใกล้เคียงกัน" จะรวมกลุ่มกันเอง
- 🧮 HUD แสดงค่า cluster cos·sim % — ความคล้ายเฉลี่ยของวัตถุที่อยู่ใกล้กัน
นี่คือหลักการของ Force-Directed Graph Layout แบบเดียวกับที่ใช้จัดเรียง Word Embedding ใน 2D — แต่ในกรณีนี้ วัตถุกำลังจัดเรียงตัวเองในพื้นที่ออฟฟิศจริงๆ!
🤖 บอทพนักงาน 28 คน
บอทแต่ละตัวมี:
- 🎨 สีประจำตัว — 16 สี แตกต่างกัน
- 🏃 สปีด — 0.6–1.1 หน่วย/รอบ สุ่มตอนเกิด
- 😊 Mood — 0.3–0.7 ตอนเกิด มีผลต่อการแวะพัก
- ⚡ Energy — 0.6–1.0 ตอนเกิด ลดลงเมื่อทำงาน
- 🦵 Animation — แขนแกว่ง ขาก้าว สะเทือนเล็กน้อยเวลาเดิน
🖥️ เทคโนโลยีที่ใช้
- Three.js r128 — 3D Engine ผ่าน CDN (ไม่ต้องติดตั้ง)
- WebGL — Shadow mapping, PCF Soft Shadows, ACES Tone Mapping
- JavaScript (ES6) — เขียนด้วย IIFE ไม่ต้องใช้ bundler
- ไฟล์เดียว ~17KB — เบามาก โหลดเร็ว
🎮 วิธีเล่น
เปิด /3d/office.html (ไม่ต้องล็อกอิน)
- ลากหมุน — กดเมาส์ค้างแล้วลาก
- ซูม — ใช้ scroll wheel
- รอดู phase เปลี่ยนทุก 100-250 ticks
- สิ้นวัน (600 ticks) → โต๊ะขยับ!
📸 ภาพประกอบ