Thử làm 1 editor tương tác (Phần 1)
Javascript
297
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.
313 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
86 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 4 năm trước
86 8
White
48 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 hơn 3 năm trước
48 7
White
38 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 hơn 3 năm trước
38 0
Bài viết liên quan
White
0 1
Bài này do bạn Phan Anh Vũ chia sẻ, khi còn là sinh viên BKHN, nay bạn sắp lấy vợ. Thuật toán sử dụng là quay tất cả các điểm quanh điểm trên cù...
Ngoc Dao viết hơn 3 năm trước
0 1
White
2 0
Có bạn trẻ bảo: nghe các anh lớn bảo muốn giỏi xử lí ảnh phải học bằng MATLAB. Quả vậy, muốn giỏi phải học nhiều, muốn học được nhiều phải học nhan...
Ngoc Dao viết hơn 3 năm trước
2 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
59 bài viết.
313 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á!