web analytics

Flutter Project : ทำ The Matrix Wallpaper

cover2

 

สวัสดีครับ ช่วงนี้เหนื่อยๆ เครียดๆ วันนี้เลยหาอะไรทำแก้เครียดเสียหน่อย ไม่รู้อะไรดลใจที่เห็นหน้าจอ Desktop ของผมที่ตั้งเป็นรูป The Matrix เอาไว้  ก็เลยได้ความคิดว่า ลองทำ The Matrix Wallpaper ใน Flutter กันดีกว่า ทำสนุกๆแบบง่ายๆ

ขอแปะรูป Desktop บันทึกไว้หน่อย

j1

 

เริ่มต้น

เริ่มต้นจากแสดง Text เป็นแบบตาราง แสดงให้เต็มจอ โดยลอง fix เลข row , col ไปก่อน
ใส่พื้นหลังสีดำ ตัวหนังสือสีเขียว

 

 

จะได้แบบนี้

1

 

สร้างคลาสสำหรับเก็บค่าแต่ละช่อง ในที่นี้ผมใช้ชื่อว่า Pixel ก็เก็บแค่ตัวหนังสือในช่อง

 

ประกาศให้ Pixel เป็น array 2 มิติ ชื่อ matrixTable

 

ทำการ initMatrixTable ก็คือสร้าง instance ให้กับตารางให้ครบตาม row , col
แล้วก็ผมเพิ่ม method การสุ่มค่าด้วย แล้วกำหนดค่าให้ Pixel

 

จากนั้นที่ build() ก็กำหนด matrixTable ให้กับ Text

 

ได้ผลลัพธ์เป็นแบบนี้

2

 

 

ทำให้เคลื่อนไหว

ต่อมาทำส่วนให้ มีแถวเคลื่อนที่ลงมาจากข้างบนลงด้านล่าง
สร้างคลาส Line โดยจะเก็บตำแหน่งของหัวเอาไว้ โดยหัวจะอยู่ด้านล่างนะ ก็คือ index ของ row จะ +1 เรื่อยๆ จนสิ้นสุด

 

จากนั้นเพิ่ม Timer ให้ทำงานวนไปตามเวลาที่กำหนด ผมลองกำหนด 500 ms ก่อน แล้วก็เพิ่ม ตัวแปร Line
ตอนนี้ราจะลองก่อน 1 แถว โดยทุกๆเวลาที่กำหนดจะรัน method process() ซึ่งจะทำการขยับแถวลงมา พร้อมสุ่มค่าใหม่ให้กับ Pixel

 

ลองรัน แถวเลื่อนลงมาแล้ว

a1

 

เพิ่มแถว

เพิ่มแถวให้มากขึ้น โดยเปลี่ยนเป็น List<Line> แทน

 

เพิ่มการ initLine โดยวนลูปเพิ่ม Line เข้าไปใน list พร้อมสุ่มตำแหน่ง และขนาด

 

 

ดูเหมือน Matrix มากขึ้นอีกนิด

a2

 

เพิ่มเงา

Matrix เรายังไม่เนียนเท่าไหร่ เพราะเรากำหนดสีตัว Text ตายตัว ดังนั้นน่าจะปรับสีไล่เฉดสักหน่อย
เพิ่มตัวแปร color ให้ Pixel

 

กำหนดสีในแต่ละ Index ของแถวไล่สีจากเข้มไปจาง
โดยใน Flutter จะกำหนด Alpha ได้จากค่าหลังตัว x เช่น 0xAARRGGBB

 

ปรับให้ตอน addLineToMatrixTable เพิ่มสีลงไปด้วย

 

จากนั้น ก็เอาสีของ matrixTable ไปใส่ Text ด้วย

 

มาแล้ว Matrix

a3

 

เริ่มแถวใหม่ เมื่อจบ

ตอนนี้แถวเมื่อเลื่อนมาจนสุดก็จะหายไปเลย เพราะ index มันเลยค่าของ ROW
ดังนั้นเรามาปรับให้เมื่อแถวเลื่อนลงมาจนสุดก็ ลบแถวนั้นแล้วสุ่มแถวใหม่ลงมาใน list แทน
แค่นี้ Matrix เราจะรันไปเรื่อยๆแล้ว

 

เพิ่อความสวยงาม ผมชอบสีสดๆ เลยขอปรับเป็นสีสดๆขึ้นหน่อย

 

ได้แบบนี้

a4

ทำให้รองรับทุกขนาดหน้าจอ

ตอนนี้เรากำหนด row ,col ตายตัว ทำให้เมื่อไปรันบนแท็บเลต มันเลยแสดงไม่ถูกต้อง

3

 

ปรับให้ ค่า ROW ,COL มาจากขนาดความกว้าง สูง ของจอ
โดยหารกับ 12 เพราะ ช่องนึงมัน 12×12

~/ คือ การหารแล้ว cast เป็น int 

 

ปัญหาต่อมาคือ ในเมื่อเราไม่รู้ row ,col ทำให้ไม่สามารถ initMatrixTable ใน initState ได้

 

ให้มาทำใน process() แทน

 

มาแล้ว แต่ดูมันโล่งๆ เพราะเรากำหนดจำนวน Line ตายตัว ตอน initLine

4

 

ดังนั้น น่าจะปรับจำนวนตาม ความกว้างของเจอ สัก 2 เท่าของ COL กำลังดี

a5

 

ทำให้เลื่อนไม่เท่ากัน

เพิ่มเติมอีกนิด ตอนนี้แถวทุกแถวมันเลื่อนในอัตราที่เท่ากัน ก็ปรับให้มีการสุ่มการเลื่อน
20% เลื่อน 2 ช่อง
60 % เลื่อน 1 ช่อง
20% ไม่เลื่อน

 

แถวมันเลื่อนไม่เท่ากันก็จริง แต่อัตราการอัพเดทแถวยังเท่ากัน ดังนั้นเลยปรับให้มี process เพื่มอีกตัว ให้เวลามันเหลื่อมๆกันนิดหน่อย

a6

 

 

จบแล้ว

บล็อกนี้เป็นโปรเจคสนุกๆ เล็กๆ ง่ายๆ เกี่ยวกับการสร้าง Matrix Wallpaper ครับ จริงๆแล้ววิธีการนี้น่าจะยังไม่ดีเท่าไหร่ เพราะต้องวนลูปจำนวนมาก แล้วก็จริงๆอยากจะทำ matrixtable ซ้อนไปด้านหลังอีกชั้น แล้วเอา Stack ครอบ จะได้เหมือน 3 มิติ มากขึ้น แต่ว่าดูเหมือนคอมผมจะเอาไม่ไหวแล้ว พอเท่านี้ก่อนละกัน หวังว่าจะเป็นไอเดียให้กับผู้อ่านครับ (:

โค้ดอยู่ที่ Github ครับ
https://github.com/benznest/the-matrix-wallpaper-flutter