Moss — ผืนผ้าใบพิกเซลที่ทุกแปรงคือโปรแกรมขนาดเล็ก

 (moss.town)
1 คะแนน โดย GN⁺ 2026-03-06 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เครื่องมือบนผืนผ้าใบพิกเซลขนาด 128×128 ที่ แปรงแต่ละอันทำงานเป็นโปรแกรมอิสระ เพื่อสร้างสีและลวดลาย
  • แปรงสามารถทำงานได้หลากหลายแบบ เช่น ผสม, กระจาย, หยดไหล, เติบโต, กลิทช์ และทั้งหมด ผู้ใช้แก้ไขได้เองโดยตรง
  • แต่ละเซลล์บนผืนผ้าใบถูกประกอบขึ้นเป็นหน่วยข้อมูล ทำให้เกิดโครงสร้างที่ สีสะสมตัวและก่อรูปเป็นลวดลายที่คาดไม่ถึง
  • มีแปรงพื้นฐานให้มากกว่า 50 แบบ และ สามารถแก้โค้ดเพื่อเปลี่ยนวิธีกระจายตัวหรือการตอบสนองของสีได้
  • ภาพที่เสร็จแล้วสามารถบันทึกและแชร์ได้ และ ผู้ใช้อื่นสามารถนำกลับมาทำงานต่อได้ด้วยแปรงและพาเลตเดียวกัน

ภาพรวมของ MOSS

  • MOSS เป็น เครื่องมือวาดภาพแบบพิกเซล ที่แปรงแต่ละอันทำงานเหมือนโปรแกรมขนาดเล็ก
    • แทนที่ผู้ใช้จะระบายสีผ่านแปรงแบบทั่วไป ผู้ใช้สามารถ กำหนดพฤติกรรมของแปรงด้วยโค้ด ได้
    • แปรงจะจัดการข้อมูลบนผืนผ้าใบ และส่งผลให้เกิด ลวดลายภาพที่คาดเดาไม่ได้

คุณลักษณะและการทำงานของแปรง

  • แปรงทำงานได้หลายรูปแบบ เช่น blend, spread, drip, grow, glitch
    • แปรงแต่ละอันมีรูปแบบการทำงานเฉพาะตัว และผู้ใช้สามารถ แก้โค้ดเพื่อเปลี่ยนพฤติกรรมได้เอง
    • ตัวอย่างเช่น สามารถปรับวิธีที่แปรงทำให้สีกระจาย หรือปรับการตอบสนองของสีได้

โครงสร้างและการแสดงผลของผืนผ้าใบ

  • ผืนผ้าใบของ MOSS ประกอบด้วย พิกเซล 128×128 และแต่ละพิกเซลถือเป็น เซลล์ข้อมูล
    • เมื่อแปรงจัดการข้อมูลของเซลล์ สีจะค่อย ๆ สะสม และเกิด ลวดลายที่เป็นธรรมชาติและเอฟเฟกต์ที่เกิดขึ้นโดยบังเอิญ
    • กระบวนการนี้ทำให้เกิด ผลลัพธ์ทางภาพที่คาดไม่ถึง

แปรงที่มีมาให้และการแก้ไขโดยผู้ใช้

  • MOSS มี แปรงพื้นฐานมากกว่า 50 แบบ
    • ครอบคลุมตั้งแต่เอฟเฟกต์สีหรือหมึกแบบเรียบง่าย ไปจนถึง การเติบโตของเถาวัลย์ (vine growth), หยดเปียก (wet drips), ลายสก๊อตเชิงกำเนิด (generative plaid) และรูปแบบอื่น ๆ
    • ผู้ใช้สามารถแก้ไข วิธีกระจายตัว, สีที่ตกค้าง, การตอบสนองของสี ของแปรงได้อย่างอิสระ

ฟังก์ชันการบันทึกและแชร์

  • ภาพที่เสร็จแล้วสามารถ บันทึกและแชร์กับผู้ใช้อื่นได้
    • ผู้ใช้ที่ได้รับการแชร์สามารถใช้แปรงและพาเลตชุดเดียวกันเพื่อ ทำงานต่อในสภาพแวดล้อมเดียวกันได้
    • บนเว็บไซต์ยังมีการแนะนำตัวอย่างผลงานหลากหลายแบบที่ผู้ใช้สร้างขึ้น

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2026-03-06
ความคิดเห็นจาก Hacker News

  • ขอบคุณที่แชร์ ฉันชอบ Aseprite, Procreate, Pico8 และเก็บไอเดียเรื่อง programmable brushes ไว้ในหัวมานานแล้ว
    ช่วงหลัง ๆ ระหว่างโปรเจ็กต์เลยหาเวลาทำมันขึ้นมาเอง เป็นของเล่นวาดรูปชื่อ MOSS แต่ละแปรงคือสคริปต์เล็ก ๆ ที่รับรู้พิกเซลทั้งหมดบนแคนวาส และกำหนดวิธีการวาดด้วย noise, pattern, pressure, speed ฯลฯ
    ตัวอย่างเช่น ทำแปรงที่พ่นพิกเซลกระจายเหมือนสเปรย์จริง แปรงแบบตราประทับที่เปลี่ยนรูปร่างทุกครั้งที่ลาก แปรงที่ทำให้เส้น perspective มาบรรจบกันจริง ๆ หรือแม้แต่ เครื่องมือเติมสีอัจฉริยะ ("Fill of my Dreams") ก็ยังได้
    อยากแชร์โค้ดแปรงกันในคอมเมนต์หรือช่วยกันสำรวจไอเดียต่อ ปุ่ม (?) มุมขวาล่างมีเอกสาร API และด้านล่างมีฟังก์ชันคัดลอกพรอมป์ต์สำหรับใช้ API ผ่านเอเจนต์

    • ราว 10 ปีก่อนฉันก็เคยทำโปรแกรม programmable brush เหมือนกัน ต่างจาก MOSS ตรงที่ของฉันใช้พื้นฐานเป็นการจำลองฟิสิกส์แทน shader แต่คิดว่าแนวทางแบบนี้มีศักยภาพมาก
      ความรู้สึกตอนวาดนกด้วย stroke เดียวมันน่าทึ่งจริง ๆ
      เผื่อจะเป็นแรงบันดาลใจได้ เลยแชร์ลิงก์โปรเจ็กต์ของฉัน — Wind by Laura
    • สนุกมากและมีเอกลักษณ์สุด ๆ สัมผัสได้ชัดเลยว่าได้แรงบันดาลใจจาก Pico8 และ Aseprite
      แปรงแบบ procedural generation ก็น่าจะน่าสนใจเหมือนกัน — เช่น แปรงที่สร้าง ทิวทัศน์เมืองแบบสุ่ม ไปพร้อมกับการวาด
      ไอเดียแบบนี้อาจใช้เทคนิค Wave Function Collapse ได้ด้วย
    • ฉันชอบความรู้สึกแบบพิกเซลมาก นี่เป็นครั้งแรกที่เห็น runtime programmable brushes ที่ทำงานแบบเรียลไทม์
      อยากรู้ว่าพอจะแชร์โค้ดแปรงน่าสนใจบางตัวที่ไม่มีในแอปได้ไหม
    • เจ๋งมาก ประทับใจที่มันรับรู้และตอบสนองต่อ แรงกดของ Wacom tablet ของฉันได้ เป็นเครื่องมือบนเว็บที่โดดเด่นมาก
    • อยากรู้ว่าเป็น โอเพนซอร์ส ไหม หรือมี GitHub repository หรือเปล่า

  • เป็นโปรเจ็กต์ที่เจ๋งมาก รู้สึกว่าคนที่สร้างสรรค์กว่าฉันอาจเอาสิ่งนี้ไปใช้ในทางที่ต่างออกไปโดยสิ้นเชิงก็ได้
    ก่อนหน้านี้ฉันเคยเห็นวิดีโอที่มีคนทำแอปวาดรูปง่าย ๆ โดยใช้ ฟอร์แมตซับไตเติลของ YouTube
    ถ้าโค้ดแปรงของ MOSS อ่านสถานะของแคนวาสแล้ววาดได้ ก็เลยสงสัยว่ากลับกันจะทำแปรงที่เรนเดอร์ วิดีโอหรือเกมง่าย ๆ (เช่น Tic-Tac-Toe) ระหว่างที่กดเมาส์ค้างไว้ได้ไหม
    แน่นอนว่าไม่ใช่จุดประสงค์หลัก แต่ก็น่าจะเป็นความท้าทายที่สนุกดี

    • พอจะมีลิงก์ช่อง YouTube นั้นไหม? ค้นด้วยคำว่า “SWEet” แล้วหาไม่ค่อยเจอ

  • น่าทึ่งมาก ช่วยเพิ่มฟังก์ชัน วาดเส้นตรง โดยกด Shift ได้ไหม แบบ MSPaint น่ะ

    • ไอเดียดีมาก เลยเพิ่มให้ทันที ถ้ากด Shift ก่อนเริ่มลากหรือระหว่างลาก จะมีเส้นพรีวิวแสดงขึ้นมา และจะนำไปใช้ตอนปล่อยเมาส์

  • โปรเจ็กต์นี้ทำให้นึกถึง การทดลองฟอร์แมตไฟล์ภาพขนาดจิ๋วมาก ที่ฉันเคยทำไว้เมื่อก่อน
    เคยสรุปไว้ในบทความบน Medium

  • ชอบมาก โดยเฉพาะถ้ามีฟีเจอร์พวกนี้จะดีมาก

    • บันทึกเป็นไทม์แลปส์ ระหว่างที่วาด
    • แสดงรายการแปรง ที่ใช้ในภาพ
      ยิ่งไปกว่านั้น ถ้าบันทึก brush stroke เอาไว้แล้วค่อยแก้โค้ดแปรงทีหลังจากนั้น เล่นซ้ำ ได้ ก็น่าสนใจมากจริง ๆ

  • เพิ่งลองเมื่อกี้ แต่ไม่มีอะไรถูกวาดออกมาเลย เลือกแปรงกับสีได้ แต่แคนวาสไม่ตอบสนองอะไรเลย
    ทดสอบบน Chrome ของ macOS

  • ยอดเยี่ยมมาก สไตลัส Surface Pro ของฉันทำงานได้ดีและอ่านค่าแรงกดได้ด้วย ทั้งหมดนี้ในเบราว์เซอร์เลย!

  • เป็นไอเดียที่เจ๋งมาก เหมือน Shadertoy เวอร์ชันวาดภาพเลย — ลิงก์ Shadertoy
    อยากรู้ว่าในแอปมีฟีเจอร์แชร์แปรงหรือ แกลเลอรีแปรง อะไรทำนองนั้นไหม
    การแชร์ผลงานตามธีมแบบในส่วน “weekly” บนหน้าแรกก็ดูน่าสนุก แต่คนที่ไม่ค่อยเก่งวาดรูปอาจอยากแชร์เฉพาะแปรงอย่างเดียวก็ได้

    • กำลังค่อย ๆ ขยาย ฟีเจอร์การแชร์ อยู่ อยากสร้างชุมชนที่ศิลปินแปรงกับศิลปินพิกเซลมาร่วมงานกันหรือแชร์ของเล่นกันได้
      ตอนนี้ฉันเก็บแปรงของตัวเองเป็นไฟล์ .txt เล็ก ๆ
      อีกอย่าง ไฟล์ png ที่บันทึกจาก MOSS จะเข้ารหัสข้อมูลแปรงไว้ด้วย ดังนั้นถ้าแชร์ไฟล์นั้น คนอื่นก็จะโหลดแปรงและพาเลตเดียวกันได้
      ไอเดียนี้ได้แรงบันดาลใจมาจากวิธีเข้ารหัสข้อมูลเกมของ PICO8

  • เป็นคอนเซปต์ที่ดีมาก บน iOS ถ้าปัด Aquarelle brush เร็ว ๆ จะเห็น อัตราการ polling ของ touch event ชัดเจน
    เส้นยังลื่นอยู่ แต่เพราะแปรงนี้มีลักษณะที่ยิ่งค้างนานสีก็ยิ่งเข้ม เลยเกิด อาการ banding ขึ้นเล็กน้อย

    • ฉันแก้ส่วนนั้นแล้ว อัปเดตเอนจินจัดการการสัมผัสไปบางส่วนเลยดีขึ้นนิดหน่อย ยังไม่สมบูรณ์แต่คิดว่าหาจุดสมดุลได้แล้ว ขอบคุณสำหรับฟีดแบ็ก

  • ฉันยังไม่ค่อยเข้าใจวิธีใช้ ถ้ามี บทช่วยสอน ก็น่าจะดี