B1. Cú Chạm Đầu Tiên

📌 Mục tiêu

Sau buổi học này, học sinh sẽ:

• Tạo được tài khoản và sử dụng được trang https://editor.p5js.org.
• Diễn tả được p5.js là gì và những gì p5.js làm được.
• Diễn tả được function là gì và cách dùng function.
• Nắm được hệ toạ độ trong p5.js.
• Dùng được các lệch của p5 để:
  • Vẽ cách hình đơn giản.
  • Sử dụng màu sắc.
  • Tạo các tương tác với chuột.

🌞 Khởi động

Trước khi bắt đầu, tất cả mọi người nên đăng ký tài khoản https://editor.p5js.org.

Giới thiệu sơ lược về khoá học:

• Chủ đề và tinh thần của khoá.
• Chương trình học và phân bổ thời gian.
• Kho tài liệu (trang web này) và cách dùng tài liệu.

Thảo luận

Bắt đầu buổi học bằng thảo luận về 3 dự án sáng tạo có sử dụng lập trình.

👨🏻‍🏫 NHẮN NHỎ:

• Cho giáo viên: Giáo viên có thể tuỳ chọn các dự án theo ý mình để giới thiệu cho học sinh. Nếu được, ưu tiên chọn các dự án mà học sinh có thể chơi thử, dùng thử; các dự án mang đậm tính tương tác giữa máy tính và người dùng.
• Cho học sinh: Các bạn có thể tham khảo thêm nhiều dự án ví dụ tại trang p5 examples.

Suggestions:

Clappy Bird - The Coding Train

Music Follows Hand Gestures - Rebecca Fiebrink

Deep Swamp - Tega Brain

CÂU HỎI GỢI Ý THẢO LUẬN

• Những dự án trên được xây dựng trên chất liệu sáng tác nào?
• Người xem tương tác với tác phẩm bằng (những) cách nào?
• Theo bạn, lập trình được sử dụng trong tác phẩm để làm gì? (Ví dụ: để ghi nhận giọng người dùng)

👨🏻‍🏫 NHẮN NHỎ:

Cho giáo viên: Thảo luận này dành cho cả lớp. Nhưng nếu thời gian có hạn, giáo viên có thể hỏi trực tiếp học sinh và dẫn vào bài.

Ý nghĩa của lập trình

• Lập trình chủ yếu xoay quanh concept về input → code → output. Tưởng tượng đoạn “code” là một cái máy nấu ăn. Cái máy nhận vào nhiều nguyên liệu và làm ra nhiều món ăn.
• Cả 3 tác phẩm trên đều sử dụng code để “xào nấu” input thành output. Tuy nhiên mỗi tác phẩm sử dụng code một cách khác nhau.
  • Clappy Bird: vỗ tay (âm thanh) → hiệu ứng chuyển động (thị giác).
  • Music by Hand: chuyển động tay (thị giác) → thay đổi về cao độ (âm thanh).
  • Deep Swamp: thay đổi về môi trường (cảm biến) → thay đổi dữ liệu dẫn tới thay đổi môi trường của bể (physical computing).
• Trong mỗi tác phẩm, người dùng tương tác với máy bằng mỗi cách khác nhau.
  • Clappy Bird: microphone nhận được tín hiệu tiếng vỗ tay (thay đổi về độ lớn) → code → chim bay thấp hay cao. (thay độ vị trí của hình chim trên màn hình).
  • Music by Hand: cảm biến thị giác nhận được sự thay đổi cử động bàn tay → code → điều chỉnh cao độ của âm thanh.
• Lập trình là một loạt các lệnh (thuật toán) nhằm chuyển hoá các thông tin đầu vào thành sản phẩm đầu ra. Hay trong các ví dụ trên, chúng ta sử dụng lập trình để điều chỉnh đầu ra theo các thay đổi đầu vào.
• Xuyên suốt khoá học này, chúng ta sẽ sử dụng lập trình để lắng nghe những tín hiệu đầu vào xung quanh môi trường mình đang sống. Đồng thời cũng sử dụng lập trình để chuyển hoá những thông tin đó thành tác phẩm.

Lập trình là gì?

• Máy chỉ chung cho các thiết bị điện tử bao gồm máy tính, laptop, điện thoại di động, …
• Lập trình là một loạt các lệnh để điều khiển máy. Lập trình chuyển hoá các thông tin đầu vào thành sản phẩm đầu ra.
• Các lệnh trên được viết bằng “code”. Bởi vậy, quá trình viết ra các lệnh đó được gọi là nôm na là “coding”.
• Mục tiêu chính của lập trình là tự động hoá, kết nối, và nhân rộng.

Lập trình cho sáng tạo

• Lập trình mở rộng tiềm năng sáng tác thông qua mở rộng chất liệu, cách thức, và tăng tính tương tác.
• Lập trình cũng có thể dùng để kết nối các thực hành khác nhau, tạo ra các tác phẩm đa nền tảng.

Lập trình với p5.js

• Xuyên suốt khoá học này, chúng ta sẽ code với p5.js. p5.js là một thư viện lập trình được viết trên ngôn ngữ Javascript. p5.js được thiết kế chuyên dụng cho mục đích sáng tạo, đặc biệt là dành cho các bạn có nhu cầu sử dụng code để tạo ra các sáng tác mang tính tương tác về mặt thị giác. p5.js sinh ra để là cầu nối giữa nghệ thuật và kỹ thuật.
• Cùng tham khảo thêm một số ví dụ có sử dụng lập trình, cụ thể là sử dụng p5.js, tại p5 Showcase.
• Thông qua các ví dụ trong trang này, học sinh có thể mường tượng được lập trình, và cụ thể là p5.js, có thể làm được gì.

Điểm mạnh của p5.js

• Thiết kế chuyên dụng cho việc sáng tác.
• Có thể kết nối với các nền tảng khác nhau.
• Dễ dàng chia sẻ và cùng làm việc.
• Dễ dàng sử dụng với sự hỗ trợ của p5 editor và hệ thống hướng dẫn sử dụng hoàn thiện.
• Miễn phí.
• Cộng đồng người dùng rộng khắp với nhiều chương trình hợp tác, hỗ trợ.

🏄🏻‍♂️ Làm: “Human Fax Machine”

• Chia học sinh thành cặp. Mỗi cặp được đưa một bức vẽ. Tuy nhiên, chỉ có một bạn trong cặp đó thấy được bức vẽ này, và phải diễn tả lại bằng lời để đồng đội vẽ.
• Các bức vẽ là các hình dạng đơn giản từ dễ đến khó. Ví dụ:

CHIÊM NGHIỆM

• Hoạt động vừa rồi thật ra chính là mô phỏng lại công việc lập trình với người vẽ là chiếc máy tính, người hướng dẫn vẽ là lập trình viên, còn việc hướng dẫn vẽ chính là lập trình.
• Để việc vẽ được hiệu quả, giữa người hướng dẫn và người vẽ phải có một số đồng thuận về câu lệnh và về hệ toạ độ.
  • Câu lệnh: người hướng dẫn và người vẽ nên có một số “giao kèo” về cách sử dụng từ ngữ. Chẳng hạn như khi nói “hình tam giác”, thì bạn đang muốn nói tới hình tam giác dạng nào?. Từ sự đồng ý trong cách sử dụng từ ngữ, người vẽ và người hướng dẫn sẽ xây dựng được một hệ thống các lệnh hướng dẫn quy củ. Hay trong lập trình, chúng ta sẽ gọi các lệnh trên là syntax. Mỗi ngôn ngữ lập trình có syntax riêng của nó để người dùng có thể sử dụng để viết các lệnh hướng dẫn cho máy tính. Các syntax mang tính khuôn mẫu, và bắt buộc người dùng phải sử dụng chính xác. Ví dụ như, để vẽ hình tròn trong p5.js, chúng ta phải dùng cú pháp circle(), chứ không phải CIRCLE hay draw_circle.
  • Hệ toạ độ: giúp chúng ta định hướng trên không gian vẽ - canvas, tương tự như cách mình dùng bản đồ. Mỗi điểm toạ độ bao gồm thông số x - đo lường chiều ngang, và thông số y - đo lường chiều dọc. Trong p5, toạ độ gốc (0, 0) nằm ở điểm trên cùng bên trái.
• Để hoàn thành một bức vẽ lớn, chúng ta có thể chia nhỏ bức vẽ ra thành nhiều tác vụ nhỏ. Hoàn thành tất cả tác vụ nhỏ là chúng ta xong bức vẽ lớn. Đây cũng là một trong những cách làm việc phổ biến trong lập trình. Để hoàn thành một dự án lớn, chúng ta sẽ viết các cụm code nhỏ với nhiệm vụ hoàn thành các tác vụ nhỏ. Những cụm code nhỏ đó được gọi là function. Mỗi function có một nhiệm vụ riêng. Ví dụ, để vẽ một con robot, chúng ta viết nhiều function vẽ các bộ phận khác nhau của con robot: eye(), nose(), face(), … Cách làm này giúp phân tích một dự án lớn thành những công việc nhỏ và dễ để hoàn thành hơn. Ngoài ra, cách làm này cũng giúp mình có thể sử dụng lại các đoạn code sau này. Chúng ta sẽ bàn luận vấn đề này trong các phần sau của bài.

🗣️ Giảng

👨🏻‍🏫 Nhắn Nhỏ (Cho giáo viên):

Dù đã quen với syntax của p5, giáo viên vẫn nên thường xuyên tra cứu documentation, để học sinh có thể nhìn và làm theo. Bị bug khi code là thời điểm vàng để hướng dẫn học sinh debug. Đừng ngại!

p5.js editor

• Code dễ dàng hơn trên p5 Web Editor.
  • Trên trang này, các bạn có thể dễ dàng viết và chạy code ngay lập tức để xem kết quả.
  • Tất cả code được chạy trên máy chủ của p5, không phải trên máy tính cá nhân của bạn. Tương tự như là Google Docs.
  • Có thể dễ dàng share file làm việc với người khác bằng cách copy và share link.
  • Tất cả dự án, bản vẽ được lưu lại ngăn nắp trong tài khoản của bạn.
  • p5.js editor chạy cả trên web cho điện thoại.

Dùng function để vẽ các hình cơ bản

• p5.js có nhiều function được viết sẵn cho người dùng sử dụng (built-in function). Chẳng hạn như những function vẽ.
  • Tất cả built-in function của p5 được ghi chú tại trang documentation https://p5js.org/reference/
  • Tra cứu documentation trong khi viết code là một việc làm bình thường và nên làm. Kể cả những tay code lâu năm vẫn phải sử dụng documentation, bởi vì các thư viện code luôn có những thay đổi về syntax qua thời gian.
• Bạn có thể xem function như một chiếc hộp, nhận vào input, biến đổi input, và trả ra output.
  • Mỗi function chỉ nhận một số dạng input nhất định, tuỳ vào thiết kế của người viết function.
  • Mỗi function có thể nhận một input, nhiều input, hoặc không cần input nào.
  • Tương tự, mỗi function có thể trả về một hoặc nhiều output, hoặc không output nào.
  • Các input của một function được gọi là parameter.
• Function có thể là có sẵn của thư viện lập trình (built-in) hoặc được viết thêm bởi lập trình viên - chúng ta. Trong bài ngày hôm nay, mình tạm chỉ sử dụng các built-in function.
• Vừa mới mở p5 editor, chúng ta sẽ có 2 functions setup() và draw() được viết sẵn trong khung code.
• Hiện tại, chỉ cần nhớ là tất cả code để vẽ sẽ được đặt bên trong function draw(). “Đặt bên trong” có nghĩa là tất cả code vẽ sẽ nằm bên trong dấu ngoặc nhọn {} của function và đi vào 1 tab ở lề trái so với dòng function draw().
• Bên trong function setup(), chúng ta sẽ viết tất cả những setup cần thiết cho việc vẽ. Ví dụ như createCanvas() sẽ setup một không gian vẽ canvas để chúng ta có thể vẽ lên. Chúng ta có thể thay đổi parameter của hàm createCanvas() để thay đổi độ lớn của canvas. Ví dụ: createCanvas(300, 300) tạo ra một canvas ở khổ 300px * 300px.

🏄🏻‍♂️ VỌC THỬ:

• Tìm hiểu về lệnh circle() bằng cách sử dụng p5 Documentation
  • Lệnh circle() được sử dụng để làm gì?
  • Các input cần có của lệnh này là gì?
  • Lệnh này trả về output là gì?

• Thêm màu thêm mè:
  • background(): thay đổi màu nền.
  • fill() và noFill(): thay đổi màu bên trong các hình.
  • stroke() và noStroke(): thay đổi màu viền.
  • strokeWeight(): thay đổ độ đậm của viền.
• Tất cả các function về màu sắc trên đều nhận parameter là mã màu trong RGB.
  • Ví dụ một mã màu RGB thông thường: (255, 48, 67). Bao gồm các thông số màu ở 3 kênh: Đỏ, Xanh Lá, và Xanh Dương.
  • Ví dụ để đổi màu nền về màu trên, chúng ta sử dụng syntax: background(255, 48, 67)
  • Đọc thêm về màu RGB tại: https://p5js.org/learn/color.html
  • Chọn màu RGB
  • Độ trong suốt: Để thay đổi độ trong suốt, chúng ta có thể thêm channel thứ 4 - alpha. Với thông số thay đổi từ 0 (hoàn toàn trong suốt) cho tới 255 (hoàn toàn đặc). Ví dụ: background(255, 48, 67, 100)

• Cần quan tâm tới thứ tự dòng code trong p5.
  • Tất cả những dòng lệnh styling (ví dụ: màu sắc), cần phải được gọi trước hàm vẽ mà bạn muốn sử dụng những lệnh styling đó cho.

🏄🏻‍♂️ Làm: Vẽ một khung cửa sổ

• Nhìn ra ngoài cửa sổ, bạn thấy gì? Sử dụng các hình cơ bản để vẽ. (Cửa sổ ở đây có thể là cửa sổ phòng bạn, phòng bố mẹ, của lớp học, hoặc một khung cửa sổ trong trí tưởng tượng)
• Code bắt đầu:

• Nhớ tham khảo p5.js Documentation.
• Khám phá một số hàm vẽ khác (rectangle, triangle, ellipse, arc) để vẽ thêm nhiều thứ hay ho.

☕️ Giải lao

🗣️ Giảng

Cấu trúc của một p5 sketch

Khi chạy code:

• Function setup() sẽ được chạy đầu tiên. Và chỉ chạy đúng một lần khi bạn chạy code p5.
• Function draw() được chạy sau function setup(). Và được liên tục lặp lại theo tốc độ của khung hình - frame rate.
  • frameRate: number of frames appear in one second - fps. By default, 60 frames per second.
  • We can adjust the frame rate by adding, for example, frameRate(10) in the setup() to adjust the frame rate to 10 frames per second.
• Trong ví dụ dưới đây:
  • Hàm background được chuyển vào trong setup(). Do đó phần nền chỉ được tô màu đúng một lần khi ta chạy code.
  • Hình tròn được vẽ chồng lên nhau qua các frame. Do đó chúng ta thấy hình tròn càng ngày càng đậm.
  • 🏄🏻‍♂️ Thử chỉnh code để trải nghiệm

Biến, chuyển động, và tương tác với chuột

• Thử làm hình trong di chuyển trên canvas.
• Để làm hình tròn di chuyển, chúng ta cần thay đổi vị trí của hình tròn thay đổi theo thời gian. Ví dụ, để di chuyển hình tròn sang phải, chúng ta tăng thông số x của vị trí thêm 1 ở mỗi frame.
• Thay vì vẽ hình tròn tại 1 vị trí cụ thể, bây giờ chúng ta sẽ sử dụng biến để lưu giá trị x-coord. Chúng ta sẽ thay đổi giá trị biến này qua từng khung hình. Từ đó, khiến hình tròn di chuyển.

Quan sát:

• Dùng let để xác lập biến.
• Dùng = để nhập giá trị cho biến.
• Do hàm draw lặp lại mỗi frame nên dòng x=x+1 lặp lại mỗi frame. Từ đó làm tăng giá trị của x, và làm vị trí của hình tròn thay đổi.

• Ngoài các biến được xác lập bởi người viết, chúng ta còn có các biến có sẵn trong p5.
• Ví dụ, biến mouseX và mouseY là các biến trong hệ thống, dùng để lưu giữ vị trí hiện tại của con trỏ chuột.
• Thử thay đổi vị trí của tâm hình tròn thành mouseX, mouseY để làm hình tròn đi theo con trỏ chuột!

🏄🏻‍♂️ Làm: Động và tương tác

• Chọn một chi tiết trong bài vẽ ô cửa sổ của bạn, và làm chi tiết đó chuyển động.
  • Thử thay đổi opacity của hình vẽ hoặc của hình nền để tạo hiệu ứng mờ mờ.
  • Thay đổi vận tốc chuyển động nhanh chậm.
• Chọn một chi tiết trong bài vẽ, và làm chi tiết đó chuyển động theo chuột.

🌅 Cool-down / Q&A

• Cách đặt tên biến: variable naming convention,
• Trò chuyện về một số ngôn ngữ lập trình khác.
• Trong vòng 1 phút, viết ra 3 điều bạn học được hôm nay.

🤹 Bài tập

• Hoàn thành bức vẽ.

📚 Đọc thêm