ตามติดชีวิตเด็กทุนของ KBTG in London — EP.3 เรียน Design ต้องเรียน Coding ด้วยหรอเนี่ย

szmania
KBTG Life
Published in
3 min readOct 3, 2020

แอ๊ด แอ๊ด แอ๊ด แอ๊ดดดดด — เสียงนาฬิกาปลุกไอโฟน เวลา 7.30

ที่กด Snooze แล้ว 5–6 ที ก็ยังไม่ตื่น เท่ากับที่แม่ต่อสายตรง Video Call จากไทยมาปลุก พร้อมถามไถ่สารทุกข์สุขดิบก่อนไปเรียนในแต่ละวัน โอเค ต้องลุกละแมะ ไปเรียนกันทุกคน

วันนี้มีเรียนที่ Imperial และจะเริ่ม Module ใหม่ที่ชื่อว่า “GIZMO” ที่ทุกคนต่างก็พูดถึง เพราะมีความท้าทายมากทีเดียว คือให้ออกแบบสิ่งประดิษฐ์บางอย่างที่เราสามารถมี Interaction ด้วยได้ โดยเราต้องเรียนรู้การใช้ Coding, Mechanics กลไก, วงจรอิเล็กทรอนิกส์ และการออกแบบ รวมทั้งหมดนี้เข้าด้วยกันเพื่อก่อให้เกิด Magic ขึ้นมา ซึ่งธีมปีนี้คือการดึงแรงบันดาลใจจากธรรมชาติ หรือการเคลื่อนไหวของสัตว์และพืชต่างๆ

GIZMO Project Brief

จบการบรีฟของอาจารย์ที่แสนสั้นเสมอ ทุกคนรู้ แฟนคลับรู้ ว่าแมนนั้นเป็น UX/UI Designer ที่ไม่ประสีประสากับ Programming หรือ Coding เลย เรียกว่าไม่มีพื้นฐานใดๆ เลยดีกว่าา (กุมมือถามใจตัวเองว่าจะรอดมั้ย) จากนั้นอาจารย์ก็แจกถุงใบน้อยๆ ที่ข้างในมีอุปกรณ์ต่างๆ ให้เราได้ Explore กัน

Toolkit ต่างๆ ที่ให้เราลองมาเล่น

พระเอกหลักก็คงหนีไม่พ้น Arduino (อาดุอิโน่) ผมไม่ลงลึกทางด้านเทคนิคมากนะ 555 เชื่อว่าพี่ๆ น้องๆ น่าจะเชี่ยวชาญมากกว่าผม เอาเป็นว่าสิ่งนี้เป็นชิ้นส่วนหลักที่ไว้ต่อกับอุปกรณ์อิเล็กทรอนิกส์อื่นๆ ได้ เช่น สายไฟ หลอดไฟ มอเตอร์ สวิทซ์ ต่างๆ โดยจะทำหน้าที่เป็นสมองของสิ่งที่เราประดิษฐ์ขึ้นมา เราจะสามารถเชื่อมต่อ Arduino ตัวนี้เข้ากับแล็บท็อปที่เราเขียนโค้ดเอาไว้ พอเรากด Play ก็จะเคลื่อนไหวได้ ทำให้ไฟสว่าง หรืออะไรก็ว่าไป สุดแล้วแต่เราจะโค้ด

หน้าตาของ Arduino

หนอนไชแอปเปิ้ล

โปรเจคเดี่ยวนี้มีเวลา 3 อาทิตย์เหมือนเดิม เหมือนจะยาวแต่ว่าสั้นมาก พอหลังจากบรีฟเสร็จ วันรุ่งขึ้นเราก็ต้องคิดมาเลยว่าอยากจะทำอะไร เพื่อนำไปคุยกับ Tutor ที่คอยแนะนำในการแปลงเปลี่ยนไอเดียสู่ของจริง เราอยากทำอะไรสนุกๆ เลยปิ๊งไอเดีย นึกถึงหนอนในแอปเปิ้ล ก็เลยเอามาเป็นคอนเซ็ปต์ “Let’s Catch the Worms in Apple! ” ไอเดียประมาณว่า มีเจ้าหนอนคอยชอนไชชอบแอบกินแอปเปิ้ลของเรา หนอนตัวนี้มันจะผุบๆ โผล่ๆ ในลูกแอปเปิ้ล ซึ่งเราต้องหยุดมันให้ได้ แต่ยิ่งเราพยายามจับ มันก็ยิ่งหนีและมุดลงไปในแอปเปิ้ลเร็วขึ้นเท่านั้น จับยังไงก็จับไม่ได้ซะที 🐛🐛🍎🍎

Idea Sketch

การจะทำให้หนอนผุบๆ โผล่ๆ ได้เนี่ย เราต้องอาศัยกลไกบางอย่าง ก็ลองมาสารพัดครับ ทั้งสปริงเอย รอกเอย สุดท้ายมาจบที่ฟันเฟือง เลยลองขึ้น Mock up ดูไวๆ เรื่องเศร้าก็คือเสาร์อาทิตย์ Workshop ที่มหาลัยปิด ก็เลยต้องมาตัดฟันเฟืองจิ๋วๆ จากกระดาษแข็ง (สงสารนิ้วตัวเอง) ด้านหลังเราจะติดมอเตอร์ตัวเล็กๆ ไว้ให้เฟืองหมุนได้ เสร็จแล้วลองต่อกับ Arduino มาเทสกัน

โคร้มมมม! โอเค ชีวิตนี้ไม่เป็นดั่งเราฝัน ลองใหม่กัน
เย้ หนอนน้อยเคลื่อนไหวได้เองประมาณนี้ (อย่าเพิ่งโฟกัสปฏิทินกสิกรข้างหลังที่หอบไปอังกฤษด้วย ฮ่าๆ)

Let’s Make Magic!

แม้ว่าจะเคลื่อนไหวได้แล้ว แต่ยังไม่ใช่ Interaction ที่เราต้องการ เพราะตอนนี้หนอนยังไม่สามารถโต้ตอบใดๆ กับเราได้ มันแค่ขึ้นๆ ลงๆ หมุนตามฟันเฟืองจากพลังของมอเตอร์ ดังนั้นเราต้องใช้อุปกรณ์เสริมคือ Touch Sensor เป็นเหมือนชิปตัวเล็กๆ ทำงานเหมือนหน้าจอ Smart Phone ของพวกเรานี่แหละ ตอบสนองกับลายนิ้วมือเวลาเราจับโดน

แผ่นสีน้ำเงินเล็กๆ นั่นแหละ Touch Sensor ทีเด็ดของงานนี้

ได้ของมาครบแล้ว ก็มาถึง Coding ส่วนที่เป็นหัวใจของงาน เราพยายามทำให้ตัวหนอนสามารถเร่งสปีดตัวเองได้ ให้ตอบสนองไวมากๆ ประมาณว่าเราจับปุ๊บ หนอนมุดกลับทันที ซึ่งความสนุกคือสิ่งที่เราเขียน พอกด Run ก็จะแสดงออกมาตามที่เราต้องการ บางที Code ถูก แต่สายไฟที่บัดกรีไว้พัง ต้องซ่อมบ้าง หรือลืมเสียบปลั๊กบ้าง… การเรียนรู้ด้าน Coding ก็จากกูเกิ้ลนี่ละครับ การเรียนที่นี่ไม่ได้แบบว่า “อ่ะวันนี้มาเรียน วิชา Coding กันนะนักเรียน” แต่ให้เราค้นคว้าเอง ถ้าติดปัญหาก็ไปปรึกษากับ Tutor ก็เรียกว่างมเอง ปรับเอง เพื่อนช่วยบ้าง Tutor ช่วยบ้าง ลองผิดลองถูก ก็รอดมาได้แบบปาดเหงื่อ แก้ Code รายวันรายอาทิตย์ เข้าใจหัวอกพี่ๆ Developer ขึ้นมาเลย

Arduino Coding

อีกหนึ่งปัญหาก็คือเจ้าหนอนน้อยของเราที่ทำจากโฟม ซึ่งโฟมไม่นำไฟฟ้านะ เวลาคนมาเล่นต้องจับที่สายไฟ แต่เราอยากให้คนจับที่ตัวหนอน เราเลย Adapt เอาของใกล้ตัวมาใช้ ก็คือ ฟอยล์ห่ออาหารจาก Supermarket หน้าบ้าน โดยเราจะเอาสายไฟแปะไว้ที่ตัวหนอน แล้วเอาฟอยล์มาห่มตัวน้องทั้งอันเลย เพราะว่าฟอยล์ทำมาจาก Aluminum นำไฟฟ้าได้นั่นเอง เลยจะ Sensitive เวลาเราแตะโดนมากๆ (ดูเป็นวิศวะขึ้นมามะ ไม่หรอ อืมๆ)

น้องมาแล้ว ไฉไลกว่าเดิม
เวลาเราจับโดน หนอนจะเร่ง Speed ชักตัวกลับไปอย่างรวดเร็วแล้ว ✨✨

ประกอบร่างแอปเปิ้ลกับหนอนกัน

พอเสร็จสิ้นในส่วนของกลไก และ Coding ต่างๆ แล้ว มาที่การออกแบบกัน เนื่องจากว่าโปรเจคนี้เป็นเกี่ยวกับการเขียนโค้ดและอิเล็กทรอนิกส์เนาะ เราเลยออกแบบให้เจ้าตัวแอปเปิ้ล เป็นแอปเปิ้ล 8-bit เหลี่ยมๆเป็นพิกเซลเหมือนพวกเกมส์ 8-bit สมัยก่อน

พอได้แบบตามต้องการ เราก็ไป Laser Cut แผ่นไม้มาขึ้นเป็นตัวแอปเปิ้ลกัน ซึ่งการจะใช้เครื่องไม้เครื่องมือที่ประเทศนี้มีความแบบต๊ะต่อนยอนอะ ไม่ได้เป็นแบบมหาลัยบ้านเราที่เดินเข้าไปทำเองได้ไวๆ ที่นี่เราต้องไปอบรม ต้องจองคิวก่อนบ้างล่ะ โชคดีหน่อยที่มีเจ้าหน้าที่ Workshop ที่อิมคอยช่วยเหลือ แต่ก็โชคร้ายในเวลาเดียวกันเพราะเป็นช่วงใกล้ส่งงานของทุกคน ต้องต่อคิวล่วงหน้ากันเป็นวันๆ ซึ่งวันพฤหัสฯเป็นวันส่งงาน วันอังคารเลยไปตามงานกับคุณพี่เจ้าหน้าที่ ซึ่งแน่นอน สิ่งที่ไม่คาดฝันก็เกิดขึ้นตลอดเวลา

“งานที่ Laser Cut ไว้เสร็จรึยังนะ”

“เอ่อ.. ตอนนี้งานเยอะมาก เกรงว่าวันนี้จะไม่ได้”

“แล้วจะได้วันไหนนะ… ส่งแบบมาให้หลายวันแล้ว และวันพฤหัสฯต้องส่งแล้ว”

“เราไม่สามารถคอนเฟิร์มให้คุณได้เลยว่าวันนี้จะเสร็จมั้ย แม้แต่พรุ่งนี้ก็ไม่ชัว… ซอรี่”

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

ตัดไปตัดมาจนตี 2 คัตเตอร์บาดนิ้วเลือดกระฉูดดดอีก 😰…แต่ก็ทำจนเสร็จ เลยเล่นมือถือ เช็คเมลซักหน่อย ปรากฏว่าพี่เจ้าหน้าที่ส่งเมลมาบอกว่า แผ่นไม้ที่ Laser Cut เสร็จแล้วตั้งแต่ตอนเย็นหลังจากที่เราไปตาม (พุทโธ ธัมโม สังโฆ.. อยากล้มทั้งยืน) เป็นอะไรที่รู้สึกหาทำมาก อีเมลก็ดันไม่เตือนนะ วันพุธเช้าผมนี่รีบบึ่งไปเอาเลย

Laser Cut หอมไหม้ๆ จากเตา
ประกอบทุกอย่างเข้าด้วยกัน

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

Interaction Video— อยากทุกคนลองดู ลองฟังเสียงฟันเฟืองมากๆ ฟินหู 🐛🍎⚡️

สรุปแล้วที่เราต้องเรียนเขียนโค้ดเพราะโปรเจคนี้เหมือนเป็น Exercise ให้เรารู้จัก Interaction และ Basic Coding ที่เราสามารถนำไปต่อยอดในโปรเจคอื่นๆ ได้ เราเลือกมาเรียนใน Field ด้าน Innovation เป็นเรื่องอนาคต ดังนั้นเครื่องมือพวกนี้ทำให้เราได้แสดงไอเดียออกมาแบบจับต้องได้ เป็นรูปธรรมมากขึ้น ให้คนอื่นสามารถเข้าใจประสบการณ์ที่เราออกแบบได้ดียิ่งขึ้น และมากไปกว่านั้นการที่เรา Get Hands Dirty ได้ลงมือทำสิ่งของขึ้นมาจริง ก็ทำให้เราได้ก้าวข้ามขีดจำกัดของการออกแบบเพียงแค่บนหน้าจอ ดีเหมือนกันนะ

EP นี้ก็ประมาณนี้ครับ อาจจะบ่นเยอะไปบ้าง มีสาระบ้าง ปนๆ กันไปเนาะ ชีวิตจริงก็แบบนี้ เจอกันใหม่ตอนหน้าครับ

Stay tuned & have a good one :)

สำหรับชาวเทคคนไหนที่สนใจเรื่องราวดีๆ แบบนี้ หรืออยากเรียนรู้เกี่ยวกับ Product ใหม่ๆ ของ KBTG สามารถติดตามรายละเอียดกันได้ที่เว็บไซต์ www.kbtg.tech

--

--

szmania
KBTG Life

UX/UI Designer at KBTG. Currently, Master Student at Royal College of Art & Imperial College London