Thử làm 1 editor tương tác (Phần 1)
Javascript
275
Computer Graphics
5
White

Bùi Hồng Hà viết ngày 27/05/2015

Giới thiệu

Mình rất thích học đồ hoạ máy tính nhưng luôn lười vì:

  • Học thư viện đồ hoạ trên native platform tốn thời gian. API khó hiểu khó hình dung kết quả.
  • Mã viết ra phải biên dịch, chạy mới nhìn được kết quả. Thời gian từ lúc viết mã đến lúc nhìn thấy kết quả khá dài. Tốc độ feedback chậm
  • Bắt đầu một project mới khá tốn thời gian. Mình phải cài thư viện, tạo project bằng IDE rất phiền phức.

Gần đây nghe đứa bạn giới thiệu html5 canvas thấy rất hay. Chỉ cần giải quyết được nốt vấn đề cài đặt project nữa là okie. Xem

thấy tool của anh Bret Victor rất cool và là tôl mình cần. Tự nhiên mình nghĩ giá mà có một tool như thế thì hay biết mấy. Nghĩ thôi thì chẳng có gì thay đổi vì vậy mình quyết định thử bắt tay làm một tool giống của anh Bret Victor.

Thành quả

Sau 1 buổi tối đánh vật với JS, CSS mình cũng có được một tool chạy được. Các bạn có thể xem tool tại: http://buiha.com/ijs/container.htm

Về hình ảnh minh hoạ tool các bạn xem ảnh gif dưới đây:

alt text

Bạn viết mã bằng Javascript, sử dụng API của canvas để vẽ hình. Mã sẽ được thực thi online và kết quả vẽ sẽ hiện thị ngay bên ô bên phải!

Về API của canvas, tài liệu dễ hiểu nhất mà mình tìm thấy là Tutoral của Mozilla. Tài liệu giới thiệu rất chi tiết về các API của canvas. Code ví dụ có thể copy và paste thẳng vào app mình là chạy! Do hình ảnh được hiển thị liên tục, bạn có thể thấy ngay được kết quả của mỗi dòng code.

Tương lai

Mã nguồn của tool này mình đặt tại https://github.com/telescreen/ijs

Mình sẽ dùng cái tool này để thử hacking một số kỹ thuật đồ hoạ máy tính đọc được trong sách. Mình sẽ cố gắng chia sẻ kết quả học được trong các bài viết tới. Các bạn hãy dùng tool này hack đồ hoạ máy tính cùng mình nhé!

★ Trong các bài sau, mình sẽ viết cụ thể từng bước cách mình làm tool này. Các bạn đón đọc nhé!

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Bùi Hồng Hà

59 bài viết.
299 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
81 8
Bài viết tổng hợp cơ chế hoạt động của https Chút ít về chữ ký điện tử Chữ ký điện tử là cơ chế bao gồm 3 thuật toán: Thuật toán chọn một khóa...
Bùi Hồng Hà viết hơn 3 năm trước
81 8
White
45 7
Giới thiệu Gần đây thấy bản thân chém gió rất nhiều về MapReduce, Hadoop v.v nhưng chưa thấy có bài viết nào tổng hợp + giải thích cụ thể về MapRe...
Bùi Hồng Hà viết 3 năm trước
45 7
White
37 0
Giới thiệu Google là một công ty dẫn đầu về phần mềm xử lý Big Data. Hầu hết các phần mềm xử lý dữ liệu như Hadoop đều có nguồn gốc ý tưởng từ Goo...
Bùi Hồng Hà viết 3 năm trước
37 0
Bài viết liên quan
White
52 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết 3 năm trước
52 8
White
34 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hà Phạm viết 3 năm trước
34 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
59 bài viết.
299 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!