Bài giảng Lập trình nâng cao: Đồ hoạ với SDL - Trần Quốc Long

Bài giảng Lập trình nâng cao: Đồ hoạ với SDL cung cấp cho người học các kiến thức: Thư viện SDL, xây dựng API vẽ, vẽ hình bằng bút vẽ, vẽ hình fractal. Mời các bạn cùng tham khảo nội dung chi tiết.

Graphics 7&8 - Đồ hoạ với SDL https://github.com/tqlong/advprogram Nội dung ● Thư viện SDL ○ Cài đặt, khởi tạo, sử dụng, giải phóng ● Xây dựng API vẽ ○ Lớp Painter ● Vẽ hình bút vẽ ○ Đường thẳng, hình vng, tam giác … ○ Phối hợp tạo thành hình tuyệt đẹp ○ Vẽ ảnh JPG, PNG ● Vẽ hình fractal ○ Kỹ thuật đệ quy Đồ họa với SDL ● https://www.libsdl.org/ ● ● ● ● Hướng dẫn: http://wiki.libsdl.org/FrontPage SDL phát triển trị chơi chun nghiệp SDL dễ dàng kết nối với CodeBlocks SDL chạy nhiều tảng (Windows, Linux, Android, iOS …) / 15 Lựa chọn thư viện ● Phát triển phần mềm thực tế ○ Thường cần thư viện (bên thứ - third party library) ngồi tính ngơn ngữ thư viện chuẩn C++ ○ Lựa chọn thư viện cho dự án: cần thiết quan trọng ● Trong khóa học này, dùng SDL ○ Chỉ dùng tính đồ họa đơn giản ○ Đa tảng (cross-platform) - dễ cho sinh viên ● Để phát triển game thực thụ ○ Thường dùng Game Engine ○ https://en.wikipedia.org/wiki/List_of_game_engines Các tính SDL https://wiki.libsdl.org/Introduction ● Video (2D, 3D) ● Threads ● Input events ● CPU Detection ● Force Feedback ● Timer ● Audio ● Endian independence ● File I/O ● Power Management ● Shared objects Cài đặt SDL với CodeBlocks-MinGW ● Tải https://www.libsdl.org/release/SDL2-devel-2.0.5-mingw.tar.gz ● Giải nén vào thư mục đó, có thư mục ○ Bản 32bit: i686-w64-mingw32 ○ Bản 64bit: x86_64-w64-mingw32 ● Ở ta dùng 32 bit (vì CodeBlock dùng mingw32), thư mục có thư mục bin, include, lib, share ● Thư mục bin chứa SDL2.dll (liên kết chạy, copy file vào thư mục mã nguồn project) ● Thư mục include chứa file h (như stdio.h) khai báo hàm SDL ● Thư mục lib chứa thư viện (mã đối tượng) để liên kết chương trình / 15 Cấu hình CodeBlocks Settings / Compiler / 15 Cấu hình CodeBlocks Liên kết thư viện: ● Linker settings: -lmingw32 -lSDL2main -lSDL2 / 15 Cấu hình CodeBlocks Vị trí thư mục include lib: Search directories | Compilers Đường dẫn đến thư mục chứa SDL / 15 Cấu hình CodeBlocks Vị trí thư mục include lib: Search directories | Linker 10 / 15 Bảng màu http://stackoverflow.com/questions/16500656/which-color-gradient-is-used-to-color-mandel brot-in-wikipedia st SD L_C olor PALLETTE[] = { SD L_Color({66,30, 15}), SD L_Color({25 , 7,26}), SD L_Color({9, 1, 47}),SD L_C olor({4,4,73}), SD L_Color({0, 7, 00 }), SD L_Color({12,44, 138 }), SD L_Color({24,8 2, 177}), SD L_Color({5 7, 125 ,209}), SD L_Color({134, 181 ,229}), SD L_Color({21 1, 236, 248}), SD L_Color({241, 233, 191}), SD L_Color({248 ,201, 95 }), SD L_Color({25 , 170 ,0 }), SD L_Color({204,1 28, 0}), SD L_Color({15 3, 87, 0}), SD L_C olor({1 06, 52,3}) }; st in t PALETTE_CO U N T = sizeof(PALLETTE) / sizeof(SD L_Color); https://github.com/tqlong/advprogram/archive/9d8e1a0d5aed0f94 e1095d89813cf0b2ee99bb21.zip Zoom in (0, 0, 2*0.5, 1.5*0.5) (2*0.17, 1.5*0.17, 2*0.25,1.5*0.25) Fractal đệ quy ● Khái niệm đệ quy tốn học / lập trình ○ Một đối tượng (có tham số) định nghĩa thơng qua với tham số khác (thường nhỏ hơn) ○ Tổng số tự nhiên từ đến n: s(n) = n + s(n-1) ○ Giai thừa: factorial(n) = n * factorial(n-1) ○ Fibonaci: fibo(n) = fibo(n-1) + fibo(n-2) ● Hình fractal đệ quy ○ http://natureofcode.com/book/chapter-8-fractals/ ○ Self-similarity: each part is a “reduced-size copy of the whole.” (Mandelbrot) Tính giai thừa in t factorial(in t n) { if (n = = ) { retu rn 1; } else { retu rn n * factorial(n-1 ); } } Điều kiện dừng đệ quy Vẽ hình trịn lồng void d raw R ecu rsiveC ircle(Painter& painter, f l o at radius = 40 ); case 8: painter.jum pBackw ard(40 ); draw RecursiveCircle(painter, 40 ); b reak; void draw RecursiveC ircle(Painter& painter, f l o at radius) { Điều kiện đệ painter.createCircle(radius); quy (bán kính if(radius > 2) { lớn 2) painter.jum pForw ard(radius*0 25 f); draw RecursiveCircle(painter, radius*0.75f); painter.jum pBackw ard(radius*0.25f); } } Vẽ hình trịn bên trái, phải void d raw R ecu rsiveC ircle2(Painter& painter, f l o at radius) { painter.createCircle(radius); if(radius > 2) { painter.jum pBackw ard(radius / 2); draw RecursiveCircle2(painter, radius / 2); painter.jum pForw ard(radius * 2); draw RecursiveCircle2(painter, radius / 2); painter.jum pBackw ard(radius*3/2); } } Thêm hình trịn trên, void d raw R ecu rsiveC ircle4 (Painter& painter, f l o at radius) { painter.createCircle(radius); if(radius > ) { fl o at x = painter.getX(), y = painter.getY(); painter.setPosition(x-radius/2,y); draw RecursiveCircle4(painter, radius / 2); painter.setPosition(x+ radius/2,y-radius); draw RecursiveCircle4(painter, radius / 2); painter.setPosition(x+ radius*3/2,y); draw RecursiveCircle4(painter, radius / 2); painter.setPosition(x+ radius/2,y+ radius); draw RecursiveCircle4(painter, radius / 2); painter.setPosition(x,y); } } Đường Koch void d raw K och (Painter& painter, f l o at len, in t levels) { if (levels = = 1) { painter.m oveForw ard(len); } else { draw Koch(painter, len/3, levels-1); painter.turnLeft(60); draw Koch(painter, len/3, levels-1); painter.turnRight(120 ); draw Koch(painter, len/3, levels-1); painter.turnLeft(60); draw Koch(painter, len/3, levels-1); } } https://github.com /tqlong/advprogram /archive/ bf6e82b1c9465dc78b3c2a9bdcdf2d79b83a584c.zip Bài tập ● Viết thêm hàm Painter ○ Vẽ hình chữ nhật ○ Vẽ bánh (trong khí) ● Vẽ tập hợp Julia ○ https://en.wikipedia.org/wiki/Julia_set ● Tìm kiếm vẽ loại fractal đệ quy ● Tìm hiểu cách ghi ảnh thành tệp JPG, PNG ● Thử sức: phát triển phần mềm quản lý ảnh máy: xem ảnh, slideshow, thumbnails ... đặt SDL với CodeBlocks-MinGW ● Tải https://www.libsdl.org/release /SDL2 -devel-2.0.5-mingw.tar.gz ● Giải nén vào thư mục đó, có thư mục ○ Bản 32bit: i686-w64-mingw32 ○ Bản 64bit: x86_64-w64-mingw32... thuật đệ quy Đồ họa với SDL ● https://www.libsdl.org/ ● ● ● ● Hướng dẫn: http://wiki.libsdl.org/FrontPage SDL phát triển trị chơi chuyên nghiệp SDL dễ dàng kết nối với CodeBlocks SDL chạy nhiều... LO R; Nên đặt đoạn mã đâu ? http://stackoverflow com/questions/23870 83/where-should-youput-global-constants -in-a-c-program Lớp Painter: Hàm khởi tạo Painter::Painter(SD L_W indow * w indow ,SD