Thư Viện Đồ Họa ⋗ Thư Viện Đồ Họa ⋗ Thư Viện, Thư Viện Đồ Họa

Trong một lần tán gẫu với các "giáo sư" mà mình quen biết, mình vô tình biết đến p5.js, một thư viện đồ họa hữu ích trong javascript, nhìn thấy các "giáo sư" ấy so trình với nhau, tạo ra các vật thể rồi di chuyển, thao tác với chúng, nhìn vô cùng thích mắt. Qua một quãng thời gian tìm hiểu, hôm nay mình quyết định sẽ chia sẻ với mọi người về thư viện này! Đừng bỏ lỡ nhé !

p5.js là gì?

Đầu tiên phải nhắc đến chính là nguồn gốc và tác giả của thư viện này, p5.js là một thư viện được tạo ra nằm trong dự án Processing,một môi trường mã hóa sáng tạo ban đầu được phát triển bởi Ben Fry và Casey Reas,nhằm cung cấp cho những người không trong chuyên ngành hay những người mới bắt đầu lập trìnhmột cách tiếp cận dễ dàng nhất để học cách lập trình các ứng dụng đồ họa, tương tác (đồng thời cung cấp các công cụ mạnh mẽ cho các chuyên gia).

Bạn đang xem: Thư Viện Đồ Họa ⋗ Thư Viện Đồ Họa ⋗ Thư Viện, Thư Viện Đồ Họa

Bên cạnh đó, p5.js còn giúp người dùng có thể tương tác trực tiếp với website. Giống như một "cuốn sổ phác họa", p5.js có đầy đủ các bộ chức năng phục vụ cho việc vẽ vời animation trên website. Không chỉ dừng lại ở đó, p5.js còn mang lại cho chúng ta khả năngtương tác siêu tiện lợi với các đối tượng trong HTML5, bao gồm text, input, video, webcam và âm thanh, thông qua cácthư viện add-ons.

Lợi thế của thư viện Javascript này chính là sự hỗ trợ từ mọi trình duyệt web, nguyên nhân là vì gần như toàn bộ trình duyệt web hiện nay đều có trình thông dịch JavaScript tích hợp, nhờ đó mà các chương trìnhp5.jscó thể chạy được trong bất kỳ trình duyệt web nào. Ngoài ra, ngôn ngữ JavaScript được xác định bởi một tiêu chuẩn quốc tế và hầu hết các trình thông dịch JavaScript (bao gồm cả các trình duyệt chạy bên trong trình duyệt web) là mã nguồn mở hoàn toàn miễn phí. Không ai "sở hữu" JavaScript, và bất cứ ai cũng có thể sử dụng nó miễn phí.

Một ưu điểm khác là p5.js giúp chúng ta tạo ra các nguyên mẫu phần mềm cực kỳ nhanh và dễ dàng, để thử một ý tưởng mới hoặc xem một cái gì đó có hiệu quả hay không, p5.js sẽ giúp bạn bằng cách nhanh chóng, tiện lợi nhất có thể. Bởi vậy cho nên lúc nãy tôi mới nói các chương trìnhProcessing (vàp5.js)giống như là một"cuốn sổ phác họa".

Sử dụng p5.js như thế nào?

Về cơ bản, bạn có thể dùng p5.js ở mọi trang web thông thường, hay thực tế hơn là bất cứ nơi nào trên thế giới internet, đồng thời cũng có thể sử dụng song song với các thư viện Javascript khác. Nhưng theo "lý thuyết" thì bạn vẫn nên cài đặt một trình biên dịch có hỗ trợ ngôn ngữ Javascript và tải về thư viện p5.js, sau đó làm việc với mã nguồn p5.js của bạn như bao ngôn ngữ lập trình khác.

NHƯNG, thay vì làm một mớ cài đặt phiền toái, chúng ta có thể sử dụng p5.js web editor, đó là một trình biên dịch, môi trường lập trình hoạt động trên nền tảng web được tạo riêng cho thư viện p5.js, bao gồm tất cả chức năng, "hàm" của thư viện. Cơ bản là nó sẽ hoạt động trên mọi trình duyệt, nên cứ quất ngay em nó ở bất cứ đâu nhé!

Cấu trúc và hàm của p5.js web editor

*

Thiết kế trực quan của p5.js web editor

Với giao diện này thì chắc cũng không cần nói cũng đoán ra được rồi đúng không ạ ?

Đây là nơi bạn thao tác, cài đặt cho môi trường lập trình của mình thuận tiện hơn, chẳng hạn như tìm kiếm một từ khóa nào đó, tạo mới file, lưu file lại, thêm file vào, cài đặt phím tắt, ...Thanh này là thanh trạng thái khung làm việc của bạn, bao gồm trạng thái đang chạy (►), có thể nhấp vào để chạy chương trình, tạm dừng (∎), nhấp vào để dừng chương trình, hoặc là Auto-refresh để chọn chức năng tự động chạy code mỗi khi có thay đổi,bên cạnh đó chính là khung hiển thị tên của chương trình hiện tại, chúng ta có thể nhấp vào để đổi tên (Khi bạn tạo một môi trường làm việc mới, một tên ngẫu nhiên được tạo cho bạn. Trình soạn thảo web sử dụng thư viện này để tạo tên, nếu bạn tò mò!).Đây chính là phần quan trọng nhất, không gian làm việc của bạn, nơi bạn thoải mái "táy máy" và trình biên dịch sẽ biên dịch và chạy code của bạn, còn cho ra kết quả gì thì sang phần tiếp theo sẽ biết.Hàm setup(): Hàm này chỉ chạy duy nhất một lần, mặc định thì hàm này sẽ có công dụng là tạo ra màn hình đồ họa có kích thước 400x400 cho bạn, bạn có thể tùy chỉnh, thêm thắt code vào để phục vụ cho mục đích của mình cũng được.Đây chính là khung hiển thị màn hình đồ họa của bạn, toàn bộ thao tác với đồ họa của bạn sẽ được hiển thị tại đây.Đúng như tên của nó, console là để hiển thị lỗi, và hiển thị nội dung bạn muốn in ra trong console thông qua cú pháp console.log("something that you want to display in to console");

Thử làm bouncing ball game với p5.js !

Thật ra thì cái trò bouncing ball này cũng chẳng có gì hay ho cho lắm, chỉ là ngồi nhìn mấy quả bóng chạy qua chạy lại thôi. Nhưng mà thôi kệ, mình lười :)))

Đầu tiên, mình sẽ setup một vài thứ như sau:

*

Cái dòng console.log(); chỉ để cho vui thôi

Màu sắc được chỉ định theo màu RGB nhé :))

Tiếp đó, mình sẽ tạo ra một quả bóng nho nhỏ, tại vị trí giữa màn hình:

Xem thêm: giai vo bai tap toan lop 5 tap 2 bai 152

*

Lúc này bóng vẫn chưa thể di chuyển, mình sẽ thử làm cho bóng di chuyển theo một hướng bất kỳ, sau đó đụng vào thành thì bật trở lại:

function setup() { createCanvas(width, heigh);}//screen size let width = 700; let heigh = 300;//background colorlet SKY_BLUE = ;//ball sizelet x = width/2;let y = heigh/2;//moving speedlet speed = //ballfunction render_ball(x, y, size) { circle(x, y, size);}//movingfunction move(x, y, size) { radius = size/2 x += speed; y += speed; if (x + radius >= width || x - radius = heigh || y - radius Tới đây thì có vẻ xong phần cơ bản rồi, có một số bạn sẽ thắc mắc? Tại sao phải trừ đi cho radius (bán kính) để xác định bóng có chạm vào thành không? Thật ra cũng không phức tạp gì lắm, cơ bản là hàm circle();sẽ vẽ ballcủa chúng ta từ tâm của vòng tròn ra, cho nên vị trí của balllà bằng a, b chẳng hạn, thì "thành" trái phải của ball sẽ bằng a - radius, và "thành" trên dưới của ball sẽ làb - radius. Nếu "thành" của ball chạm vào "thành" màn hình thì ball sẽ bật lại.

Nhưng hình như vẫn có gì đó sai sai đúng không? Khi chạy chương trình, đầu tiên bóng sẽ luôn đi về phía Đông Nam, nếu muốn ball bắt đầu di chuyển theo hướng ngẫu nhiên thì chúng ta có thể làm như sau:

function setup() { createCanvas(width, heigh);}//screen size let width = 700; let heigh = 300;//background colorlet SKY_BLUE = ;//ball sizelet x = width/2;let y = heigh/2;//moving speedlet speed = //ballfunction render_ball(x, y, size) { circle(x, y, size);}//movingfunction move(x, y, size) { radius = size/2 x += speed; y += speed; if (x + radius >= width || x - radius = heigh || y - radius

Vậy là chúng ta đã tạo được một trò boucing ball cơ bản rồi, nói thật thì mình định làm thêm mấy quả bóng nữa, cho nó đụng nhau chơi. NHƯNG MÀ, có một lý do vô cùng quan trọng, nói văn vở một chút là mình rất bận, còn nói thẳng ra là mình lười :)) Thế nên là... thôi nhé

Tương tác với chuột và cảm ứng thế nào?

p5.js có một tập hợp các hàm cho phép bạn thao tác với các sự kiện chuột trên máy tính, dưới đây là bảng các sự kiện (có kèm link để các bạn tìm hiểu):

mousetouch
mouseXtouchX
mouseYtouchY
touches
mouseIsPressed
mousePressed()touchStarted()
mouseMoved()touchStarted()
mouseDragged()touchMoved()
mouseReleased()touchEnded()
mouseClicked()
mouseScrolled()

Một ví dụ đơn giản sau:

function setup() { createCanvas(400, 400);}function draw() { ellipse(height/2, height/2, 50, 50); fill(255,0,0); if(mouseIsPressed) { //nếu chuột được ấn thì hình tròn sẽ đổi màu từ đỏ sang xanh. và ngược lại khi nhả chuột fill(0,255,0); }}

Xử lý bất đồng bộ và load file

JavaScript vốn chỉ có 1 luồng và xử lý đồng bộ, có nghĩa là 1 dòng code thực hiện xong thì mới chạy câu tiếp theo. Tuy nhiên có một số hàm bất đồng bộ được sử dụng nhằm tăng tốc độ của chương trình. Load ảnh, file ngoài hoặc URL về cơ bản là được xử lý bất đồng bộ.Callback

Tất cả các hàm load của p5.js đều chấp nhận một callback function như một tham số optional cuối cùng. Ở ví dụ sau, ảnh sẽ được hiển thị ra thì toàn bộ đã load thành công

function setup() { createCanvas(400, 240); loadImage("con-meo.jpg", drawImage); //drawImage là một hàm callback}function drawImage(img) { image(img, 0, 0);}So sánh ví dụ trên với việc gọi image() ngay sau loadImage() sẽ dẫn đến ko có ảnh do ảnh chưa kịp load

function setup() { createCanvas(400, 240); var img = loadImage("con-meo.jpg"); image(img, 0, 0);}PreloadNgoài ra, chúng ta có thể sử dụng hàmpreload().Nếu có hàmpreload()tồn tại thì nó luôn chạy đầu tiên, và hàmsetup()sẽ chờ đến khi tất cả mọi thứ trong hàmpreload()chạy xong thì nó mới chạy, cho nên chúng ta có thể sử dụng hàm này nhằm preload hết mọi thứ cần thiết và dùng lại chúng trongsetup()vàdraw(). Nên chú ý rằng chỉ nên dùng các hàm load ở trongpreload(), mọi thứ khởi tạo nên ở trongsetup(), và không cần dùng callback ở đây.

Các functions liên quan đến trình duyệt và native JavaScript

Có một số biến và hàm giúp việc tương tác với trình duyệt dễ dàng hơn.

Xem thêm: cấu tạo hình ống nan xương ở đầu xương xếp vòng

Các function của JavaScript đều có thể sử dụng trong p5.js hoàn toàn bình thường.

Thư viện

Kết luận

Với góc nhìn của một người mới, tôi đánh giá cao thiết kế trực quan của p5.js, cùng với đó là sự quan tâm đến người dùng thể hiện qua tính dễ đọc, dễ hiểu, dễ viết của thư viện. Bên cạnh đó, p5.js cũng mang lại cho chúng ta tới hàng chục "hàm" tích hợp, giúp thao tác với vật thể, vẽ đồ họa và thậm chí là làm một số game với nó. Ngoài ra, p5.js cũng là một công cụ hỗ trợ cho các chuyên gia trong nhiều lĩnh vực có liên quan.

Qua những điều trên, rõ ràng p5.js là một thư viện Javascript rất đáng học, không chỉ đối với những người mới, mà nhiều chuyên gia cũng đã đánh giá cao và sử dụng nó.