├── 10 ├── 10.md ├── Qs.md └── extra │ └── Ch-10-image processing.docx ├── 11 ├── 11.md ├── Qs.md └── extra │ └── Ch-12-Computer vision.docx ├── 12 ├── 12.md ├── Qs.md └── extra │ └── Chapter 08-Game Design Basics.docx ├── .gitattributes ├── .gitignore ├── 01 ├── 01.md ├── Qs.md ├── demo │ ├── 01.py │ ├── 02.py │ ├── 03.py │ └── 04.py └── extra │ ├── Ch-01-introduction.docx │ └── chapter-01-introduction.pptx ├── 02 ├── 02.md ├── Qs.md ├── chapter-02-color theory.pdf └── extra │ ├── Ch-02-Color models and color spaces.docx │ └── chapter-03-color theory.pptx ├── 03 ├── 03.md ├── CGChapterSix.pptx ├── Qs.md └── extra │ ├── Ch-03-Graphics primitives.docx │ └── chapter-03-Scan conversion.pptx ├── 04 ├── 04.md ├── Qs.md ├── Tutorial │ ├── 01.html │ ├── 02.html │ ├── 03.html │ ├── 04.html │ ├── 05.html │ ├── 06.html │ ├── 07.html │ ├── 08.html │ ├── 09.html │ ├── 10.html │ ├── 11.html │ ├── 13.html │ ├── 14.html │ ├── 15.html │ ├── 16.html │ ├── 17.html │ ├── 18.html │ ├── 19.html │ ├── 20.html │ ├── 21.html │ ├── picture.png │ └── sprite.jpg ├── extra │ └── Ch-04-HTML 5 canvas and SVG.docx └── main.md ├── 05 ├── 05.md ├── A-Math for game Developers.pdf ├── Qs.md └── extra │ ├── Ch-05-2D Transformations.docx │ └── chapter-5-2D transformation.pptx ├── 06 ├── 06.md ├── AR-VR-MR introduction-V2.pdf ├── Qs.md └── extra │ ├── Chapter06-Math, Basic Techniques and Animation Basics.docx │ ├── Lecture07-DemoMath.zip │ └── slides │ ├── Chapter 06- Math and Animation for game Developers.pdf │ └── Chapter 06- Math and Animation for game Developers.pptx ├── 07 ├── 07.md ├── Qs.md └── extra │ ├── Chapter 07-3d basics.pptx │ └── Chapter07-Three Dimensional Graphics.docx ├── 08 ├── 08.md ├── Qs.md └── extra │ ├── Chapter-11-Introduction to medical applications.docx │ └── Introduction AR-VR-v6.pptx ├── 09 ├── 09.md ├── Qs.md └── extra │ └── CH-09-Data visualization.docx ├── 99-Lab-Manual ├── Lab 01- Gimp Basics.docx ├── Lab 02- Inkscape Basics -part 1.docx ├── Lab 03- Inkscape case studies-part 2.docx ├── Lab 04- Synfig studio-part 1.docx ├── Lab 05- Synfig studio-part 2.docx ├── Lab 06-Blender 3d Basics - part 1.docx ├── Lab 07-Blender 3d Basics - part 2.docx ├── Lab 08-Html canvas graphics.docx ├── Lab 09- Unity Basics - part 1.docx └── Lab 10- Unity Basics - part 2.docx ├── LICENSE └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Byte-compiled / optimized / DLL files 2 | __pycache__/ 3 | *.py[cod] 4 | *$py.class 5 | 6 | # C extensions 7 | *.so 8 | 9 | # Distribution / packaging 10 | .Python 11 | build/ 12 | develop-eggs/ 13 | dist/ 14 | downloads/ 15 | eggs/ 16 | .eggs/ 17 | lib/ 18 | lib64/ 19 | parts/ 20 | sdist/ 21 | var/ 22 | wheels/ 23 | share/python-wheels/ 24 | *.egg-info/ 25 | .installed.cfg 26 | *.egg 27 | MANIFEST 28 | 29 | # PyInstaller 30 | # Usually these files are written by a python script from a template 31 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 32 | *.manifest 33 | *.spec 34 | 35 | # Installer logs 36 | pip-log.txt 37 | pip-delete-this-directory.txt 38 | 39 | # Unit test / coverage reports 40 | htmlcov/ 41 | .tox/ 42 | .nox/ 43 | .coverage 44 | .coverage.* 45 | .cache 46 | nosetests.xml 47 | coverage.xml 48 | *.cover 49 | *.py,cover 50 | .hypothesis/ 51 | .pytest_cache/ 52 | cover/ 53 | 54 | # Translations 55 | *.mo 56 | *.pot 57 | 58 | # Django stuff: 59 | *.log 60 | local_settings.py 61 | db.sqlite3 62 | db.sqlite3-journal 63 | 64 | # Flask stuff: 65 | instance/ 66 | .webassets-cache 67 | 68 | # Scrapy stuff: 69 | .scrapy 70 | 71 | # Sphinx documentation 72 | docs/_build/ 73 | 74 | # PyBuilder 75 | .pybuilder/ 76 | target/ 77 | 78 | # Jupyter Notebook 79 | .ipynb_checkpoints 80 | 81 | # IPython 82 | profile_default/ 83 | ipython_config.py 84 | 85 | # pyenv 86 | # For a library or package, you might want to ignore these files since the code is 87 | # intended to run in multiple environments; otherwise, check them in: 88 | # .python-version 89 | 90 | # pipenv 91 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. 92 | # However, in case of collaboration, if having platform-specific dependencies or dependencies 93 | # having no cross-platform support, pipenv may install dependencies that don't work, or not 94 | # install all needed dependencies. 95 | #Pipfile.lock 96 | 97 | # poetry 98 | # Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control. 99 | # This is especially recommended for binary packages to ensure reproducibility, and is more 100 | # commonly ignored for libraries. 101 | # https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control 102 | #poetry.lock 103 | 104 | # pdm 105 | # Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control. 106 | #pdm.lock 107 | # pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it 108 | # in version control. 109 | # https://pdm.fming.dev/#use-with-ide 110 | .pdm.toml 111 | 112 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm 113 | __pypackages__/ 114 | 115 | # Celery stuff 116 | celerybeat-schedule 117 | celerybeat.pid 118 | 119 | # SageMath parsed files 120 | *.sage.py 121 | 122 | # Environments 123 | .env 124 | .venv 125 | env/ 126 | venv/ 127 | ENV/ 128 | env.bak/ 129 | venv.bak/ 130 | 131 | # Spyder project settings 132 | .spyderproject 133 | .spyproject 134 | 135 | # Rope project settings 136 | .ropeproject 137 | 138 | # mkdocs documentation 139 | /site 140 | 141 | # mypy 142 | .mypy_cache/ 143 | .dmypy.json 144 | dmypy.json 145 | 146 | # Pyre type checker 147 | .pyre/ 148 | 149 | # pytype static type analyzer 150 | .pytype/ 151 | 152 | # Cython debug symbols 153 | cython_debug/ 154 | 155 | # PyCharm 156 | # JetBrains specific template is maintained in a separate JetBrains.gitignore that can 157 | # be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore 158 | # and can be added to the global gitignore or merged into this file. For a more nuclear 159 | # option (not recommended) you can uncomment the following to ignore the entire idea folder. 160 | #.idea/ 161 | -------------------------------------------------------------------------------- /01/01.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Introduction to Computer Graphics 🎨✨🖥️ 5 | 6 | ## 1. Overview 7 | Computer Graphics (CG) is an interdisciplinary field that encompasses the generation, manipulation, and visualization of visual content through computational methods. It integrates principles from **mathematics, physics, and computer science** to produce graphical representations of data and objects. With applications spanning diverse industries—such as **interactive entertainment, scientific simulation, engineering design, and artificial intelligence**—computer graphics is a fundamental domain within modern computing. Advances in computational power, rendering techniques, and artificial intelligence have significantly expanded its capabilities, enabling real-time rendering, photorealistic simulations, and immersive virtual environments. 🎮🖌️💡 8 | 9 | ## 2. Importance of Computer Graphics 🎥🕹️🖼️ 10 | The study of computer graphics is essential due to its transformative impact on numerous fields: 11 | - **Entertainment and Media:** Feature films, television productions, game development, and virtual production pipelines rely on advanced graphics techniques for realism and immersion. 12 | - **Scientific Visualization:** High-fidelity visual representations of complex scientific phenomena, such as molecular dynamics, astrophysics simulations, and medical imaging. 13 | - **Engineering and Design:** Applications in **Computer-Aided Design (CAD), architectural visualization, and product prototyping** streamline development cycles. 14 | - **Medical Imaging and Bioinformatics:** 3D imaging techniques such as **Magnetic Resonance Imaging (MRI)** and **Computed Tomography (CT)** scans aid in medical diagnostics and research. 15 | - **Artificial Intelligence and Machine Learning:** AI-driven techniques such as **neural rendering, style transfer, and generative adversarial networks (GANs)** are revolutionizing content creation. 16 | - **Virtual and Augmented Reality (VR/AR):** VR simulations enhance training, education, and interactive experiences, while AR applications are increasingly integrated into mobile platforms and smart devices. 🌐🧠📱 17 | 18 | ## 3. Fundamental Concepts 📊🔢🎭 19 | ### 3.1 Definition and Scope 20 | Computer graphics is the computational representation and manipulation of visual data. It is classified into two primary types: 21 | - **Raster Graphics:** Pixel-based images stored in a matrix format (e.g., JPEG, PNG), commonly used for digital images and textures. 22 | - **Vector Graphics:** Resolution-independent graphics defined using mathematical equations (e.g., SVG, PDF), suitable for scalable illustrations and typography. 🖍️🖼️📐 23 | 24 | ### 3.2 Display Parameters 📏🖥️🔍 25 | - **Pixel:** The smallest addressable unit in a digital image, serving as a fundamental building block for raster graphics. 26 | - **Resolution:** Defined as the number of pixels along the width and height of an image (e.g., `1920×1080`). 27 | - **Aspect Ratio:** The proportional relationship between width and height (e.g., `16:9`). 28 | - **Color Depth:** Measured in bits per pixel, dictating the number of colors an image can represent (e.g., 24-bit color supports 16.7 million colors). 🎨📊🌈 29 | 30 | ### 3.3 Rendering and Shading Techniques 🖌️✨💡 31 | Rendering is the process of generating a 2D image from a 3D model through computational algorithms. Key techniques include: 32 | - **Rasterization:** Converting geometric data into pixel data for display. 33 | - **Ray Tracing:** Simulating light behavior for photorealistic shading and reflections. 34 | - **Global Illumination:** Advanced lighting calculations that simulate natural light behavior. 35 | - **Shading Models:** Includes Phong, Gouraud, and physically based rendering (PBR) techniques for accurate material depiction. 🕶️🔦📸 36 | 37 | ## 4. Applications of Computer Graphics 🏗️🎮📺 38 | | Field | Application Examples | 39 | |----------------------|---------------------| 40 | | **Game Development** | Real-time graphics engines (Unity, Unreal Engine), character animation | 41 | | **Cinematic VFX** | CGI effects, motion capture, digital compositing | 42 | | **Virtual Reality** | Immersive simulations, interactive environments | 43 | | **Medical Imaging** | 3D organ modeling, surgical planning, biomedical visualization | 44 | | **Engineering & CAD** | Mechanical modeling, architectural visualization | 45 | | **Artificial Intelligence** | Neural rendering, AI-driven animation, generative design | 46 | 47 | ## 5. Graphics Processing and APIs 🖥️⚡📜 48 | ### 5.1 Graphics Processing Unit (GPU) 49 | The **GPU** is a specialized processor optimized for parallel computation, significantly enhancing rendering performance. Key advancements in GPU technology include: 50 | - **Ray Tracing Acceleration:** NVIDIA RTX series and AMD Radeon RX 6000 series enable real-time ray tracing. 51 | - **AI-Assisted Rendering:** GPUs are increasingly leveraged for deep learning-based content generation and enhancement. 🎮💾🖥️ 52 | 53 | ### 5.2 Graphics APIs 🛠️📜⚡ 54 | Graphics libraries provide an abstraction layer for hardware acceleration. Common APIs include: 55 | - **OpenGL:** A widely used cross-platform graphics API for 2D and 3D rendering. 56 | - **DirectX:** Microsoft’s API suite for gaming and multimedia applications. 57 | - **WebGL:** A JavaScript API enabling GPU-accelerated graphics within web browsers. 58 | - **Vulkan:** A low-overhead API optimized for high-performance graphics workloads. 🌍🖱️🛠️ 59 | 60 | ## 6. Python for Computer Graphics 🐍🎨🖼️ 61 | Python is a versatile language for graphics programming, with extensive support for both 2D and 3D applications: 62 | - **Pygame:** Simple 2D game development framework. 63 | - **PyOpenGL:** Python bindings for OpenGL, facilitating 3D rendering. 64 | - **Matplotlib & Seaborn:** Data visualization libraries for generating plots and heatmaps. 65 | - **Pillow (PIL):** Image processing library for manipulation of raster graphics. 66 | - **TensorFlow/Keras:** Machine learning frameworks supporting AI-driven image generation. 🖥️🐍📊 67 | 68 | ### Example: Drawing a Simple 2D Shape with Pygame 🎨🐍🎮 69 | ```python 70 | import pygame 71 | pygame.init() 72 | 73 | # Set up display 74 | screen = pygame.display.set_mode((500, 500)) 75 | pygame.display.set_caption("Simple Graphics") 76 | 77 | # Define colors 78 | WHITE = (255, 255, 255) 79 | RED = (255, 0, 0) 80 | 81 | # Main loop 82 | running = True 83 | while running: 84 | for event in pygame.event.get(): 85 | if event.type == pygame.QUIT: 86 | running = False 87 | 88 | screen.fill(WHITE) 89 | pygame.draw.circle(screen, RED, (250, 250), 50) 90 | pygame.display.flip() 91 | 92 | pygame.quit() 93 | ``` 94 | 95 | ## 7. Research Directions 🔬📊🖥️ 96 | The evolution of computer graphics continues to be shaped by cutting-edge research in: 97 | - **Real-Time Ray Tracing:** Efficient algorithms for interactive photorealistic rendering. 98 | - **Neural Rendering:** AI-driven techniques that enhance traditional rendering pipelines. 99 | - **Virtual and Augmented Reality:** The next generation of immersive computing. 100 | - **Procedural Content Generation:** Algorithmically generating textures, models, and environments. 101 | - **Holography and Next-Gen Displays:** Novel display technologies that redefine user experience. 🎥🖥️🔍 102 | 103 | Best Wishes 104 | Dr. Haitham El-Ghareeb 105 | 🚀📈💡 106 | 107 | -------------------------------------------------------------------------------- /01/Qs.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Computer Graphics - Multiple Choice Questions (MCQs) 5 | 6 | This set of multiple-choice questions is designed for college-level students studying **Computer Graphics**. 7 | Try to answer the questions before checking the answers at the bottom of the page. 8 | 9 | ## Easy Questions (1-10) 10 | 11 | 1. What is the smallest addressable unit in a raster image? 12 | - a) Voxel 13 | - b) Pixel 14 | - c) Polygon 15 | - d) Triangle 16 | 17 | 2. Which of the following is NOT a graphics API? 18 | - a) OpenGL 19 | - b) DirectX 20 | - c) Vulkan 21 | - d) Python 22 | 23 | 3. The term **rendering** refers to: 24 | - a) The process of creating 3D models 25 | - b) The process of converting 3D models into 2D images 26 | - c) The process of defining colors in a raster image 27 | - d) The process of increasing image resolution 28 | 29 | 4. **RGB** stands for: 30 | - a) Red, Green, Blue 31 | - b) Random Graphic Blend 32 | - c) Raster Graphics Binary 33 | - d) Rendered Graphics Bitmap 34 | 35 | 5. In **2D graphics**, images are represented using: 36 | - a) X and Y coordinates 37 | - b) X, Y, and Z coordinates 38 | - c) Voxels 39 | - d) Triangular Meshes 40 | 41 | 6. **Which of these is a raster graphics format?** 42 | - a) SVG 43 | - b) PNG 44 | - c) PDF 45 | - d) EPS 46 | 47 | 7. Which device is primarily responsible for rendering graphics? 48 | - a) CPU 49 | - b) RAM 50 | - c) GPU 51 | - d) SSD 52 | 53 | 8. **Which of the following shading models provides the most realistic lighting?** 54 | - a) Flat shading 55 | - b) Gouraud shading 56 | - c) Phong shading 57 | - d) Wireframe shading 58 | 59 | 9. What is the primary advantage of **vector graphics** over raster graphics? 60 | - a) They require more storage 61 | - b) They are resolution-independent 62 | - c) They use pixels to store data 63 | - d) They cannot be scaled 64 | 65 | 10. **Which graphics software library is used for 3D rendering in Python?** 66 | - a) NumPy 67 | - b) Matplotlib 68 | - c) PyOpenGL 69 | - d) Pandas 70 | 71 | --- 72 | 73 | ## Medium Questions (11-20) 74 | 75 | 11. The process of converting continuous images into discrete pixels is known as: 76 | - a) Rasterization 77 | - b) Ray tracing 78 | - c) Sampling 79 | - d) Aliasing 80 | 81 | 12. In 3D modeling, what is a **polygonal mesh** composed of? 82 | - a) Points 83 | - b) Lines 84 | - c) Triangles and polygons 85 | - d) Voxels 86 | 87 | 13. Which graphics rendering technique simulates the behavior of light for realism? 88 | - a) Rasterization 89 | - b) Ray tracing 90 | - c) Phong shading 91 | - d) Texture mapping 92 | 93 | 14. What is the primary purpose of **z-buffering**? 94 | - a) To store textures 95 | - b) To handle image resolution 96 | - c) To resolve depth conflicts in rendering 97 | - d) To improve performance of rasterization 98 | 99 | 15. In **real-time graphics**, which factor is crucial for smooth user experience? 100 | - a) High resolution 101 | - b) Low frame rate 102 | - c) High frame rate 103 | - d) Large textures 104 | 105 | 16. **Which of the following is a key feature of Physically Based Rendering (PBR)?** 106 | - a) It ignores light interactions 107 | - b) It uses physically accurate lighting and materials 108 | - c) It applies simple color blending 109 | - d) It renders objects only in wireframe mode 110 | 111 | 17. What does **anti-aliasing** improve in an image? 112 | - a) Performance 113 | - b) Sharpness of edges 114 | - c) Resolution 115 | - d) Storage size 116 | 117 | 18. **Which technique allows real-time rendering by approximating global illumination?** 118 | - a) Ray tracing 119 | - b) Rasterization 120 | - c) Screen space ambient occlusion (SSAO) 121 | - d) Wireframe modeling 122 | 123 | 19. What is **bilinear filtering** used for? 124 | - a) Anti-aliasing 125 | - b) Texture smoothing 126 | - c) Increasing resolution 127 | - d) Depth testing 128 | 129 | 20. **Which property determines how reflective an object is in a 3D scene?** 130 | - a) Diffuse lighting 131 | - b) Ambient lighting 132 | - c) Specular lighting 133 | - d) Shadow mapping 134 | 135 | --- 136 | 137 | ## Hard Questions (21-30) 138 | 139 | 21. Which **acceleration structure** is commonly used in ray tracing for optimization? 140 | - a) Octree 141 | - b) KD-tree 142 | - c) Bounding Volume Hierarchy (BVH) 143 | - d) Quadtree 144 | 145 | 22. **What is the primary challenge of real-time ray tracing?** 146 | - a) Aliasing 147 | - b) High computational cost 148 | - c) Low resolution 149 | - d) Lack of realism 150 | 151 | 23. **Why are shaders important in computer graphics?** 152 | - a) They define how 3D objects are stored 153 | - b) They dictate how pixels and vertices are processed 154 | - c) They control polygon count 155 | - d) They store rendering settings 156 | 157 | 24. **Which of the following is NOT a texture mapping technique?** 158 | - a) Bump mapping 159 | - b) Displacement mapping 160 | - c) Screen space reflection 161 | - d) Parallax mapping 162 | 163 | 25. In **GPU programming**, what is a "fragment"? 164 | - a) A pixel before final color calculation 165 | - b) A part of a 3D model 166 | - c) A section of a mesh 167 | - d) A compressed texture 168 | 169 | 26. **Which data structure is used for spatial partitioning in real-time rendering?** 170 | - a) Hash table 171 | - b) Binary search tree 172 | - c) BSP tree 173 | - d) Linked list 174 | 175 | 27. **Why is tessellation used in 3D graphics?** 176 | - a) To store texture data 177 | - b) To increase polygon count dynamically 178 | - c) To smooth out textures 179 | - d) To speed up rendering 180 | 181 | 28. **Which technique is used to compute realistic soft shadows?** 182 | - a) Shadow mapping 183 | - b) Ambient occlusion 184 | - c) Ray marching 185 | - d) Screen space reflection 186 | 187 | 29. **What is the primary purpose of MIP mapping?** 188 | - a) Reducing texture aliasing 189 | - b) Increasing texture resolution 190 | - c) Applying realistic reflections 191 | - d) Enhancing shadow accuracy 192 | 193 | 30. **What does a Compute Shader primarily do?** 194 | - a) Handles lighting calculations 195 | - b) Runs general-purpose computations on the GPU 196 | - c) Performs physics simulations 197 | - d) Generates 3D models 198 | 199 | 200 | ## Answers 201 | 202 |
203 | Click to reveal answers 204 | 205 | 1. **b** 206 | 2. **d** 207 | 3. **b** 208 | 4. **a** 209 | 5. **a** 210 | 6. **b** 211 | 7. **c** 212 | 8. **c** 213 | 9. **b** 214 | 10. **c** 215 | 11. **c** 216 | 12. **c** 217 | 13. **b** 218 | 14. **c** 219 | 15. **c** 220 | 16. **b** 221 | 17. **b** 222 | 18. **c** 223 | 19. **b** 224 | 20. **c** 225 | 21. **c** 226 | 22. **b** 227 | 23. **b** 228 | 24. **c** 229 | 25. **a** 230 | 26. **c** 231 | 27. **b** 232 | 28. **a** 233 | 29. **a** 234 | 30. **b** 235 | 236 |
237 | 238 | Hope this helps! 🚀😃 239 | -------------------------------------------------------------------------------- /01/demo/01.py: -------------------------------------------------------------------------------- 1 | import pygame 2 | pygame.init() 3 | 4 | # Set up display 5 | screen = pygame.display.set_mode((500, 500)) 6 | pygame.display.set_caption("Simple Graphics") 7 | 8 | # Define colors 9 | WHITE = (255, 255, 255) 10 | RED = (255, 0, 0) 11 | 12 | # Main loop 13 | running = True 14 | while running: 15 | for event in pygame.event.get(): 16 | if event.type == pygame.QUIT: 17 | running = False 18 | 19 | screen.fill(WHITE) 20 | pygame.draw.circle(screen, RED, (250, 250), 50) 21 | pygame.display.flip() 22 | 23 | pygame.quit() -------------------------------------------------------------------------------- /01/demo/02.py: -------------------------------------------------------------------------------- 1 | #Here is a simple Pygame script that introduces the basics of computer graphics concepts like drawing shapes, handling user input, and animating objects. 2 | #The script demonstrates: 3 | #Drawing basic shapes (rectangle, circle, line) 4 | #Changing colors dynamically 5 | #Handling user events (keyboard and mouse interactions) 6 | #Basic animation (moving a shape) 7 | 8 | import pygame 9 | import sys 10 | 11 | # Initialize pygame 12 | pygame.init() 13 | 14 | # Screen dimensions 15 | WIDTH, HEIGHT = 800, 600 16 | # Create the game window 17 | screen = pygame.display.set_mode((WIDTH, HEIGHT)) 18 | # Set the title of the window 19 | pygame.display.set_caption("Computer Graphics Basics with Pygame") 20 | 21 | # Define colors using RGB format 22 | WHITE = (255, 255, 255) # Background color 23 | RED = (255, 0, 0) # Rectangle color 24 | BLUE = (0, 0, 255) # Circle color 25 | GREEN = (0, 255, 0) # Line color 26 | 27 | # Circle properties 28 | circle_x, circle_y = WIDTH // 2, HEIGHT // 2 # Initial position of the circle 29 | circle_radius = 30 # Radius of the circle 30 | circle_dx, circle_dy = 4, 4 # Speed and direction of movement 31 | 32 | # Rectangle properties 33 | rect_x, rect_y = 100, 500 # Initial position of the rectangle 34 | rect_width, rect_height = 100, 50 # Dimensions of the rectangle 35 | rect_speed = 5 # Speed of movement for the rectangle 36 | 37 | # Game loop to keep the window open and handle interactions 38 | running = True 39 | while running: 40 | # Fill the screen with white to clear the previous frame 41 | screen.fill(WHITE) 42 | 43 | # Event handling loop to check for user input 44 | for event in pygame.event.get(): 45 | if event.type == pygame.QUIT: # If the user clicks the close button, exit the loop 46 | running = False 47 | 48 | # Capture the state of the keyboard 49 | keys = pygame.key.get_pressed() 50 | # Move rectangle based on arrow key presses 51 | if keys[pygame.K_LEFT] and rect_x > 0: 52 | rect_x -= rect_speed # Move left 53 | if keys[pygame.K_RIGHT] and rect_x < WIDTH - rect_width: 54 | rect_x += rect_speed # Move right 55 | if keys[pygame.K_UP] and rect_y > 0: 56 | rect_y -= rect_speed # Move up 57 | if keys[pygame.K_DOWN] and rect_y < HEIGHT - rect_height: 58 | rect_y += rect_speed # Move down 59 | 60 | # Move the circle (simulating a bouncing ball) 61 | circle_x += circle_dx 62 | circle_y += circle_dy 63 | 64 | # Bounce the circle off the edges of the screen 65 | if circle_x - circle_radius <= 0 or circle_x + circle_radius >= WIDTH: 66 | circle_dx *= -1 # Reverse horizontal direction 67 | if circle_y - circle_radius <= 0 or circle_y + circle_radius >= HEIGHT: 68 | circle_dy *= -1 # Reverse vertical direction 69 | 70 | # Draw a red rectangle at the updated position 71 | pygame.draw.rect(screen, RED, (rect_x, rect_y, rect_width, rect_height)) 72 | # Draw a blue circle at the updated position 73 | pygame.draw.circle(screen, BLUE, (circle_x, circle_y), circle_radius) 74 | # Draw a green horizontal line across the screen for reference 75 | pygame.draw.line(screen, GREEN, (0, HEIGHT // 2), (WIDTH, HEIGHT // 2), 2) 76 | 77 | # Refresh the screen with the updated drawings 78 | pygame.display.flip() 79 | # Introduce a small delay to control the frame rate 80 | pygame.time.delay(30) 81 | 82 | # Quit pygame when the loop ends 83 | pygame.quit() 84 | sys.exit() 85 | -------------------------------------------------------------------------------- /01/demo/03.py: -------------------------------------------------------------------------------- 1 | import pygame 2 | import sys 3 | 4 | # Initialize pygame 5 | pygame.init() 6 | 7 | # Screen dimensions 8 | WIDTH, HEIGHT = 800, 600 9 | # Create the game window 10 | screen = pygame.display.set_mode((WIDTH, HEIGHT)) 11 | # Set the title of the window 12 | pygame.display.set_caption("Computer Graphics Basics with Pygame") 13 | 14 | # Define colors using RGB format 15 | WHITE = (255, 255, 255) # Background color 16 | RED = (255, 0, 0) # Rectangle color 17 | BLUE = (0, 0, 255) # Circle color 18 | GREEN = (0, 255, 0) # Line color 19 | 20 | # Circle properties 21 | circle_x, circle_y = WIDTH // 2, HEIGHT // 2 # Initial position of the circle 22 | circle_radius = 30 # Radius of the circle 23 | circle_dx, circle_dy = 4, 4 # Speed and direction of movement 24 | 25 | # Rectangle properties 26 | rect_x, rect_y = 100, 500 # Initial position of the rectangle 27 | rect_width, rect_height = 100, 50 # Dimensions of the rectangle 28 | rect_speed = 5 # Speed of movement for the rectangle 29 | 30 | # Game loop to keep the window open and handle interactions 31 | running = True 32 | while running: 33 | # Fill the screen with white to clear the previous frame 34 | screen.fill(WHITE) 35 | 36 | # Event handling loop to check for user input 37 | for event in pygame.event.get(): 38 | if event.type == pygame.QUIT: # If the user clicks the close button, exit the loop 39 | running = False 40 | 41 | # Capture the state of the keyboard 42 | keys = pygame.key.get_pressed() 43 | # Move rectangle based on arrow key presses 44 | if keys[pygame.K_LEFT] and rect_x > 0: 45 | rect_x -= rect_speed # Move left 46 | if keys[pygame.K_RIGHT] and rect_x < WIDTH - rect_width: 47 | rect_x += rect_speed # Move right 48 | if keys[pygame.K_UP] and rect_y > 0: 49 | rect_y -= rect_speed # Move up 50 | if keys[pygame.K_DOWN] and rect_y < HEIGHT - rect_height: 51 | rect_y += rect_speed # Move down 52 | 53 | # Move the circle (simulating a bouncing ball) 54 | circle_x += circle_dx 55 | circle_y += circle_dy 56 | 57 | # Bounce the circle off the edges of the screen 58 | if circle_x - circle_radius <= 0 or circle_x + circle_radius >= WIDTH: 59 | circle_dx *= -1 # Reverse horizontal direction 60 | if circle_y - circle_radius <= 0 or circle_y + circle_radius >= HEIGHT: 61 | circle_dy *= -1 # Reverse vertical direction 62 | 63 | # Check for collision between the ball and the rectangle 64 | if (rect_x < circle_x < rect_x + rect_width) and (rect_y < circle_y + circle_radius < rect_y + rect_height): 65 | circle_dy *= -1 # Reverse the ball's vertical direction 66 | 67 | # Draw a red rectangle at the updated position 68 | pygame.draw.rect(screen, RED, (rect_x, rect_y, rect_width, rect_height)) 69 | # Draw a blue circle at the updated position 70 | pygame.draw.circle(screen, BLUE, (circle_x, circle_y), circle_radius) 71 | # Draw a green horizontal line across the screen for reference 72 | pygame.draw.line(screen, GREEN, (0, HEIGHT // 2), (WIDTH, HEIGHT // 2), 2) 73 | 74 | # Refresh the screen with the updated drawings 75 | pygame.display.flip() 76 | # Introduce a small delay to control the frame rate 77 | pygame.time.delay(30) 78 | 79 | # Quit pygame when the loop ends 80 | pygame.quit() 81 | sys.exit() 82 | -------------------------------------------------------------------------------- /01/demo/04.py: -------------------------------------------------------------------------------- 1 | import pygame 2 | import sys 3 | 4 | # Initialize pygame 5 | pygame.init() 6 | 7 | # Screen dimensions 8 | WIDTH, HEIGHT = 800, 600 9 | # Create the game window 10 | screen = pygame.display.set_mode((WIDTH, HEIGHT)) 11 | # Set the title of the window 12 | pygame.display.set_caption("Computer Graphics Basics with Pygame") 13 | 14 | # Define colors using RGB format 15 | WHITE = (255, 255, 255) # Background color 16 | RED = (255, 0, 0) # Rectangle color 17 | BLUE = (0, 0, 255) # Circle color 18 | GREEN = (0, 255, 0) # Line color 19 | BLACK = (0, 0, 0) # Score text color 20 | 21 | # Font for displaying score 22 | font = pygame.font.Font(None, 36) 23 | 24 | # Circle properties 25 | circle_x, circle_y = WIDTH // 2, HEIGHT // 2 # Initial position of the circle 26 | circle_radius = 30 # Radius of the circle 27 | circle_dx, circle_dy = 4, 4 # Speed and direction of movement 28 | 29 | # Rectangle properties 30 | rect_x, rect_y = 100, 500 # Initial position of the rectangle 31 | rect_width, rect_height = 100, 50 # Dimensions of the rectangle 32 | rect_speed = 5 # Speed of movement for the rectangle 33 | 34 | # Score 35 | score = 0 36 | 37 | # Game loop to keep the window open and handle interactions 38 | running = True 39 | while running: 40 | # Fill the screen with white to clear the previous frame 41 | screen.fill(WHITE) 42 | 43 | # Event handling loop to check for user input 44 | for event in pygame.event.get(): 45 | if event.type == pygame.QUIT: # If the user clicks the close button, exit the loop 46 | running = False 47 | 48 | # Capture the state of the keyboard 49 | keys = pygame.key.get_pressed() 50 | # Move rectangle based on arrow key presses 51 | if keys[pygame.K_LEFT] and rect_x > 0: 52 | rect_x -= rect_speed # Move left 53 | if keys[pygame.K_RIGHT] and rect_x < WIDTH - rect_width: 54 | rect_x += rect_speed # Move right 55 | if keys[pygame.K_UP] and rect_y > 0: 56 | rect_y -= rect_speed # Move up 57 | if keys[pygame.K_DOWN] and rect_y < HEIGHT - rect_height: 58 | rect_y += rect_speed # Move down 59 | 60 | # Move the circle (simulating a bouncing ball) 61 | circle_x += circle_dx 62 | circle_y += circle_dy 63 | 64 | # Bounce the circle off the edges of the screen 65 | if circle_x - circle_radius <= 0 or circle_x + circle_radius >= WIDTH: 66 | circle_dx *= -1 # Reverse horizontal direction 67 | if circle_y - circle_radius <= 0 or circle_y + circle_radius >= HEIGHT: 68 | circle_dy *= -1 # Reverse vertical direction 69 | 70 | # Check for collision between the ball and the rectangle 71 | if (rect_x < circle_x < rect_x + rect_width) and (rect_y < circle_y + circle_radius < rect_y + rect_height): 72 | circle_dy *= -1 # Reverse the ball's vertical direction 73 | score += 1 # Increase score when collision happens 74 | 75 | # Draw a red rectangle at the updated position 76 | pygame.draw.rect(screen, RED, (rect_x, rect_y, rect_width, rect_height)) 77 | # Draw a blue circle at the updated position 78 | pygame.draw.circle(screen, BLUE, (circle_x, circle_y), circle_radius) 79 | # Draw a green horizontal line across the screen for reference 80 | pygame.draw.line(screen, GREEN, (0, HEIGHT // 2), (WIDTH, HEIGHT // 2), 2) 81 | 82 | # Render score text 83 | score_text = font.render(f"Score: {score}", True, BLACK) 84 | screen.blit(score_text, (10, 10)) # Display score at top-left corner 85 | 86 | # Refresh the screen with the updated drawings 87 | pygame.display.flip() 88 | # Introduce a small delay to control the frame rate 89 | pygame.time.delay(30) 90 | 91 | # Quit pygame when the loop ends 92 | pygame.quit() 93 | sys.exit() 94 | -------------------------------------------------------------------------------- /01/extra/Ch-01-introduction.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/01/extra/Ch-01-introduction.docx -------------------------------------------------------------------------------- /01/extra/chapter-01-introduction.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/01/extra/chapter-01-introduction.pptx -------------------------------------------------------------------------------- /02/02.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | **Chapter: Color Models, Color Spaces, and Color Theory** 🎨✨🌈 5 | 6 | ## **Introduction to Color** 🎨🖌️🌟 7 | Color is an essential property of objects, influencing both human perception and computational analysis. It serves as a crucial factor in object recognition, visual communication, and artistic representation. The study of color encompasses various models and spaces that standardize its representation, storage, and transmission across multiple platforms. This chapter delves into color theory, explores different color models, and introduces practical applications using Python for computational color processing. 8 | 9 | ### **The Science of Color Perception** 👁️🌈🔬 10 | Color perception results from the interaction between light, objects, and the human visual system. Light, an electromagnetic wave, varies in wavelength, producing different colors within the visible spectrum (approximately 400-700 nm). The human eye contains photoreceptor cells—rods for low-light vision and cones for color perception. These cones are sensitive to three primary wavelengths: 11 | - **Short (S-cones)**: Detect blue (peak sensitivity at ~420 nm). 12 | - **Medium (M-cones)**: Detect green (peak sensitivity at ~534 nm). 13 | - **Long (L-cones)**: Detect red (peak sensitivity at ~564 nm). 14 | 15 | The brain processes signals from these cones to construct the perception of color, which is influenced by surrounding colors, brightness, and viewing conditions. 16 | 17 | ## **Color Models and Color Spaces** 📊🎨💡 18 | ### **What is a Color Model?** 🖍️📏🎭 19 | A color model is a mathematical framework describing how colors are represented as numerical values. A color space is a specific implementation of a color model, defining the range of colors that can be accurately depicted within a given system. 20 | 21 | ### **Common Color Models** 🎨🖥️🖨️ 22 | #### **1. RGB (Red-Green-Blue) Model** 🔴🟢🔵 23 | The RGB model is an additive system used in digital displays. Colors are generated by combining different intensities of red, green, and blue light. 24 | 25 | #### **2. CMYK (Cyan-Magenta-Yellow-Black) Model** 🖨️🖌️📄 26 | The CMYK model is subtractive, used primarily in printing. Instead of emitting light, it relies on the absorption and reflection of light from printed surfaces. 27 | 28 | #### **3. HSI/HSV/HSL Models** 🌈🔧🎨 29 | These models are designed to align more closely with human color perception by separating chromatic components from brightness. 30 | 31 | #### **4. YIQ Color Model** 📺🎞️🔵 32 | The YIQ model is optimized for television broadcasting, ensuring compatibility with grayscale displays. 33 | 34 | ### **Color Spaces** 🌍🖍️🎨 35 | A color space defines the range of colors that can be represented within a given model. 36 | 37 | ## **Implementing Color Models in Python** 🐍💻🎨 38 | Python provides powerful tools for manipulating and visualizing color models. Libraries such as OpenCV, Matplotlib, and PIL allow for efficient color space conversion and image processing. 39 | 40 | ### **Using OpenCV for Color Model Conversions** 🖼️🔄📷 41 | ```python 42 | import cv2 43 | import numpy as np 44 | 45 | # Load an image 46 | image = cv2.imread('image.jpg') 47 | 48 | # Convert RGB to different color spaces 49 | hsv_image = cv2.cvtColor(image, cv2.COLOR_BGR2HSV) 50 | yiq_image = cv2.cvtColor(image, cv2.COLOR_BGR2YCrCb) 51 | cmyk_image = 255 - image # Approximate CMYK conversion 52 | 53 | # Display images 54 | cv2.imshow('Original', image) 55 | cv2.imshow('HSV', hsv_image) 56 | cv2.imshow('YIQ', yiq_image) 57 | cv2.waitKey(0) 58 | cv2.destroyAllWindows() 59 | ``` 60 | 61 | ### **Visualizing Colors with Matplotlib** 📊🌈📌 62 | ```python 63 | import matplotlib.pyplot as plt 64 | 65 | # Define primary RGB colors 66 | colors = ['red', 'green', 'blue'] 67 | 68 | # Create a bar chart 69 | plt.bar(colors, [1, 1, 1], color=colors) 70 | plt.xlabel('Primary Colors') 71 | plt.ylabel('Intensity') 72 | plt.title('RGB Color Model') 73 | plt.show() 74 | ``` 75 | 76 | ### **Generating a Color Palette with PIL** 🎨📷🖍️ 77 | ```python 78 | from PIL import Image, ImageDraw 79 | 80 | # Create an image with a gradient of colors 81 | img = Image.new('RGB', (300, 100)) 82 | draw = ImageDraw.Draw(img) 83 | for i in range(300): 84 | draw.line([(i, 0), (i, 100)], fill=(i, 100, 200)) 85 | img.show() 86 | ``` 87 | 88 | ## **Conclusion** 🎯📘🎨 89 | A comprehensive understanding of color models and spaces is vital for digital imaging, design, and computational applications. By leveraging Python tools such as OpenCV, Matplotlib, and PIL, professionals can process and visualize color data effectively. Whether for digital display, image processing, or print media, proper color representation ensures consistency and accuracy in visual communication. 🎨✨🔍 90 | 91 | -------------------------------------------------------------------------------- /02/Qs.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | 5 | # **📌 Multiple-Choice Questions on Color Models and Color Theory** 6 | 7 | ## **Easy Level (10 Questions)** 8 | 9 | 1. **Which of the following is an additive color model used in digital displays?** 10 | - [ ] CMYK 11 | - [x] RGB 12 | - [ ] YIQ 13 | - [ ] HSL 14 | 15 | 2. **In the RGB color model, what color is produced by mixing red and green at full intensity?** 16 | - [ ] Blue 17 | - [x] Yellow 18 | - [ ] Cyan 19 | - [ ] White 20 | 21 | 3. **Which color model is primarily used for printing?** 22 | - [x] CMYK 23 | - [ ] RGB 24 | - [ ] HSI 25 | - [ ] YIQ 26 | 27 | 4. **What does the 'K' stand for in the CMYK color model?** 28 | - [ ] Cyan 29 | - [ ] Keyline 30 | - [x] Key (Black) 31 | - [ ] Kelvin 32 | 33 | 5. **Which of these models is used for human color perception?** 34 | - [ ] RGB 35 | - [x] HSI 36 | - [ ] CMYK 37 | - [ ] YIQ 38 | 39 | 6. **What is the main purpose of the YIQ color model?** 40 | - [ ] Web design 41 | - [ ] Printing 42 | - [x] Television broadcasting 43 | - [ ] 3D rendering 44 | 45 | 7. **What is the range of wavelengths for visible light in nanometers (nm)?** 46 | - [ ] 300-500 nm 47 | - [x] 400-700 nm 48 | - [ ] 200-600 nm 49 | - [ ] 500-900 nm 50 | 51 | 8. **Which of the following is NOT a primary color in the RGB model?** 52 | - [ ] Red 53 | - [x] Yellow 54 | - [ ] Green 55 | - [ ] Blue 56 | 57 | 9. **What is the main advantage of the HSL and HSV color models?** 58 | - [x] They better align with human perception 59 | - [ ] They use subtractive mixing 60 | - [ ] They are used for printing 61 | - [ ] They have a larger color gamut than RGB 62 | 63 | 10. **What happens when all RGB values are set to 255?** 64 | - [ ] Black 65 | - [x] White 66 | - [ ] Gray 67 | - [ ] Red 68 | 69 | --- 70 | 71 | ## **Medium Level (10 Questions)** 72 | 73 | 11. **Which of the following is NOT a perceptual property of color?** 74 | - [ ] Hue 75 | - [ ] Saturation 76 | - [ ] Brightness 77 | - [x] Luminance 78 | 79 | 12. **In the CIE chromaticity diagram, what does the white point represent?** 80 | - [ ] Maximum intensity 81 | - [x] A neutral color balance reference 82 | - [ ] Fully saturated color 83 | - [ ] The brightest visible color 84 | 85 | 13. **Which color model is based on the opponent-process theory of vision?** 86 | - [ ] RGB 87 | - [ ] CMYK 88 | - [x] YIQ 89 | - [ ] HSV 90 | 91 | 14. **What is the primary reason for using gamma correction in digital displays?** 92 | - [x] To adjust perceived brightness according to human vision 93 | - [ ] To enhance color saturation 94 | - [ ] To increase contrast 95 | - [ ] To make colors more vivid 96 | 97 | 15. **Which of the following Python libraries is commonly used for color manipulation?** 98 | - [ ] TensorFlow 99 | - [ ] Pandas 100 | - [x] OpenCV 101 | - [ ] NumPy 102 | 103 | 16. **Which function in OpenCV is used to convert an image from BGR to HSV?** 104 | - [ ] `cv2.convertColor(img, cv2.COLOR_RGB2HSV)` 105 | - [x] `cv2.cvtColor(img, cv2.COLOR_BGR2HSV)` 106 | - [ ] `cv2.changeColor(img, cv2.COLOR_BGR2HSV)` 107 | - [ ] `cv2.imageTransform(img, cv2.COLOR_BGR2HSV)` 108 | 109 | 17. **Which color model is often used in photography for a wider gamut than sRGB?** 110 | - [ ] HSI 111 | - [x] Adobe RGB 112 | - [ ] YIQ 113 | - [ ] CMYK 114 | 115 | 18. **In a 24-bit RGB image, how many bits are used to store each pixel?** 116 | - [ ] 8 bits 117 | - [ ] 16 bits 118 | - [x] 24 bits 119 | - [ ] 32 bits 120 | 121 | 19. **What is the difference between subtractive and additive color mixing?** 122 | - [ ] Subtractive mixing starts with black, and additive mixing starts with white 123 | - [ ] Additive mixing is used in printing, and subtractive mixing is used in screens 124 | - [x] Additive mixing adds light, while subtractive mixing removes wavelengths 125 | - [ ] There is no difference 126 | 127 | 20. **Which color model represents colors as cylindrical coordinates instead of a cube?** 128 | - [ ] RGB 129 | - [ ] CMYK 130 | - [ ] YIQ 131 | - [x] HSV 132 | 133 | --- 134 | 135 | ## **Hard Level (10 Questions)** 136 | 137 | 21. **Which of the following is NOT a standard primary color in any color model?** 138 | - [ ] Red 139 | - [ ] Green 140 | - [ ] Blue 141 | - [x] Magenta 142 | 143 | 22. **What is the purpose of the `cv2.COLOR_BGR2YCrCb` conversion in OpenCV?** 144 | - [ ] To enhance image resolution 145 | - [x] To convert an image for YCrCb color space processing 146 | - [ ] To convert the image for printing 147 | - [ ] To apply a black-and-white filter 148 | 149 | 23. **Which color space is most commonly used in video compression?** 150 | - [ ] RGB 151 | - [x] YUV 152 | - [ ] CMYK 153 | - [ ] HSV 154 | 155 | 24. **What does the ‘L’ in HSL stand for, and how does it differ from ‘V’ in HSV?** 156 | - [ ] Luminance, which is brightness; V is saturation 157 | - [ ] Lightness, which is average intensity; V is peak intensity 158 | - [x] Lightness, which is a symmetric scale; V represents max RGB component 159 | - [ ] Luminance, which is contrast; V is a color enhancer 160 | 161 | 25. **Which Python library provides the `ImageDraw` module for creating color gradients?** 162 | - [ ] OpenCV 163 | - [x] PIL (Pillow) 164 | - [ ] Matplotlib 165 | - [ ] NumPy 166 | 167 | 26. **Which of the following color models is device-independent?** 168 | - [ ] RGB 169 | - [ ] CMYK 170 | - [x] CIE XYZ 171 | - [ ] HSV 172 | 173 | 27. **Which mathematical operation best describes gamma correction?** 174 | - [ ] Linear transformation 175 | - [ ] Logarithmic transformation 176 | - [ ] Exponential transformation 177 | - [x] Power-law transformation 178 | 179 | 28. **Which type of color contrast is primarily responsible for the illusion that two identical colors appear different based on their surroundings?** 180 | - [x] Simultaneous contrast 181 | - [ ] Brightness contrast 182 | - [ ] Saturation contrast 183 | - [ ] Hue contrast 184 | 185 | 29. **What is the role of chromatic adaptation in color perception?** 186 | - [ ] Enhances visual acuity 187 | - [ ] Reduces eye strain 188 | - [x] Adjusts perceived color based on light source changes 189 | - [ ] Increases saturation 190 | 191 | 30. **Which of the following color spaces provides the best perceptual uniformity?** 192 | - [ ] RGB 193 | - [ ] CMYK 194 | - [x] LAB 195 | - [ ] YUV 196 | 197 | -------------------------------------------------------------------------------- /02/chapter-02-color theory.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/02/chapter-02-color theory.pdf -------------------------------------------------------------------------------- /02/extra/Ch-02-Color models and color spaces.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/02/extra/Ch-02-Color models and color spaces.docx -------------------------------------------------------------------------------- /02/extra/chapter-03-color theory.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/02/extra/chapter-03-color theory.pptx -------------------------------------------------------------------------------- /03/03.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Chapter 3: Graphics Primitives and Scan Conversion 5 | 6 | ## **Introduction** 🎨📊✨ 7 | Graphics primitives serve as the foundational elements for rendering digital images, encompassing **points, lines, circles, polygons, and curves**. To effectively display these primitives on a raster-based display, they must be transformed from their mathematical representations into a **discrete pixel grid**, a process known as **scan conversion**. 8 | 9 | ## **1. Scan Conversion** 🎯📏🔍 10 | ### **Definition** 11 | Scan conversion involves mapping continuous geometric objects onto a pixel-based display. Since screens use a **discrete coordinate system**, smooth curves and lines must be approximated. 12 | 13 | - **Rasterization**: The process of selecting appropriate pixels to represent a shape. 14 | - **Aliasing**: The visual distortion caused by pixel approximation, often appearing as "stair-stepping" along diagonal lines. 15 | - **Frame Buffer**: A dedicated memory space that stores pixel data, determining what is rendered on the screen. 16 | 17 | ## **2. Points and Pixels** 🖌️🖥️🔢 18 | A **pixel** (short for "picture element") is the smallest unit of a digital image. Each pixel is addressed using **(x, y) coordinates**, with the top-left corner typically being (0,0). 19 | 20 | ### **Point Scan Conversion** 21 | When a floating-point coordinate **(x, y)** is given, the nearest pixel is computed using: 22 | 23 | \[ x' = \lfloor x + 0.5 \rfloor, \quad y' = \lfloor y + 0.5 \rfloor \] 24 | 25 | **Example:** Mapping (2.7, 3.2) to a pixel results in **(3,3)**. 26 | 27 | ## **3. Line Scan Conversion** 📏📐📊 28 | A **line** in 2D space is mathematically represented as: 29 | \[ y = mx + b \] 30 | where **m** denotes the slope and **b** is the y-intercept. 31 | 32 | ### **3.1 Direct Line Equation Method** 33 | For each **x** increment, the corresponding **y** is computed: 34 | \[ y = mx + b \] 35 | 36 | **Limitations**: 37 | - Floating-point calculations increase computational cost. 38 | - Pixel rounding introduces aliasing effects. 39 | 40 | ### **3.2 Digital Differential Analyzer (DDA) Algorithm** 41 | An incremental approach that eliminates floating-point multiplication: 42 | - **For |m| ≤ 1**: Increment **x** and compute **y**. 43 | - **For |m| > 1**: Increment **y** and compute **x**. 44 | 45 | #### **Python Implementation:** 46 | ```python 47 | import matplotlib.pyplot as plt 48 | 49 | def dda_line(x1, y1, x2, y2): 50 | dx, dy = x2 - x1, y2 - y1 51 | steps = max(abs(dx), abs(dy)) 52 | x_inc, y_inc = dx / steps, dy / steps 53 | x, y = x1, y1 54 | points = [(round(x), round(y)) for _ in range(int(steps) + 1)] 55 | return points 56 | 57 | # Example Usage 58 | plt.scatter(*zip(*dda_line(2, 3, 10, 8))) 59 | plt.show() 60 | ``` 61 | 62 | ### **3.3 Bresenham’s Line Algorithm** 63 | A more efficient integer-based method compared to DDA. 64 | 65 | #### **Python Implementation:** 66 | ```python 67 | def bresenham_line(x1, y1, x2, y2): 68 | points = [] 69 | dx, dy = abs(x2 - x1), abs(y2 - y1) 70 | sx, sy = (1 if x1 < x2 else -1), (1 if y1 < y2 else -1) 71 | err = dx - dy 72 | while (x1, y1) != (x2, y2): 73 | points.append((x1, y1)) 74 | e2 = 2 * err 75 | if e2 > -dy: 76 | err -= dy 77 | x1 += sx 78 | if e2 < dx: 79 | err += dx 80 | y1 += sy 81 | points.append((x2, y2)) 82 | return points 83 | 84 | # Example Usage 85 | plt.scatter(*zip(*bresenham_line(2, 3, 10, 8))) 86 | plt.show() 87 | ``` 88 | 89 | ## **4. Circle Scan Conversion** 🔵📏🔄 90 | ### **Midpoint Circle Algorithm** 91 | A rasterization method using integer calculations. 92 | 93 | #### **Python Implementation:** 94 | ```python 95 | def midpoint_circle(cx, cy, r): 96 | points = [] 97 | x, y, p = r, 0, 1 - r 98 | while x >= y: 99 | for dx, dy in [(x, y), (y, x), (-y, x), (-x, y), (-x, -y), (-y, -x), (y, -x), (x, -y)]: 100 | points.append((cx + dx, cy + dy)) 101 | y += 1 102 | p = p + 2 * y + 1 if p <= 0 else p + 2 * (y - x) + 1; x -= 1 if p > 0 else x 103 | return points 104 | 105 | # Example Usage 106 | plt.scatter(*zip(*midpoint_circle(10, 10, 8))) 107 | plt.show() 108 | ``` 109 | 110 | ## **5. Polygon Scan Conversion** 🔳📐📊 111 | Polygons are closed shapes defined by a sequence of line segments. 112 | 113 | ### **Scan-Line Algorithm for Polygon Filling** 114 | - Detects active edges. 115 | - Iterates row by row, filling pixels inside the polygon. 116 | 117 | ## **6. Curves and Splines** 📈🎭🔗 118 | Curves are integral to digital modeling and animation. 119 | 120 | - **Bézier Curves**: Defined using control points. 121 | - **B-Splines**: Provide localized curve control. 122 | 123 | #### **Python Example: Bézier Curve** 124 | ```python 125 | import numpy as np 126 | 127 | def bezier_curve(p0, p1, p2, p3, t_values): 128 | return [(pow(1-t, 3) * p0[0] + 3 * pow(1-t, 2) * t * p1[0] + 3 * (1-t) * pow(t, 2) * p2[0] + pow(t, 3) * p3[0], 129 | pow(1-t, 3) * p0[1] + 3 * pow(1-t, 2) * t * p1[1] + 3 * (1-t) * pow(t, 2) * p2[1] + pow(t, 3) * p3[1]) 130 | for t in t_values] 131 | 132 | # Example Usage 133 | t_values = np.linspace(0, 1, 100) 134 | plt.plot(*zip(*bezier_curve((1, 1), (2, 3), (4, 3), (5, 1), t_values))) 135 | plt.show() 136 | ``` 137 | 138 | ## **Exercises** 📚📝🤓 139 | 1. Implement Bresenham’s algorithm for circles. 140 | 2. Compare the computational efficiency of DDA and Bresenham’s algorithms. 141 | 3. Modify the polygon filling algorithm to handle concave polygons. 142 | 143 | ## **Research Topics** 🔬📖📊 144 | - **Techniques for anti-aliasing in raster graphics.** 145 | - **GPU-based acceleration for scan conversion.** 146 | - **Applications of Bézier curves in CAD and animation.** 147 | 148 | -------------------------------------------------------------------------------- /03/CGChapterSix.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/03/CGChapterSix.pptx -------------------------------------------------------------------------------- /03/Qs.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # **Multiple-Choice Questions: Scan Conversion and Graphics Primitives** 5 | 6 | ## **Easy Questions** 🟢 7 | 8 | ### **1. What is the process of converting geometric objects into pixel representations called?** 9 | - [ ] A) Aliasing 10 | - [ ] B) Rasterization 11 | - [ ] C) Frame buffering 12 | - [ ] D) Vectorization 13 | 14 | ### **2. Which of the following is the smallest addressable unit on a digital display?** 15 | - [ ] A) Bit 16 | - [ ] B) Byte 17 | - [ ] C) Pixel 18 | - [ ] D) Frame 19 | 20 | ### **3. In Bresenham’s Line Algorithm, what type of arithmetic is used?** 21 | - [ ] A) Floating-point arithmetic 22 | - [ ] B) Trigonometric functions 23 | - [ ] C) Integer arithmetic 24 | - [ ] D) Matrix operations 25 | 26 | ### **4. What is the advantage of Bresenham’s algorithm over DDA?** 27 | - [ ] A) Uses floating-point arithmetic 28 | - [ ] B) More accurate but slower 29 | - [ ] C) Uses only integer operations, making it faster 30 | - [ ] D) Requires more memory 31 | 32 | ### **5. Which of the following algorithms is used for circle scan conversion?** 33 | - [ ] A) DDA Algorithm 34 | - [ ] B) Midpoint Circle Algorithm 35 | - [ ] C) Bresenham’s Line Algorithm 36 | - [ ] D) Clipping Algorithm 37 | 38 | ### **6. What is the equation of a line in two-dimensional space?** 39 | - [ ] A) \( y = ax^2 + bx + c \) 40 | - [ ] B) \( y = mx + b \) 41 | - [ ] C) \( x^2 + y^2 = r^2 \) 42 | - [ ] D) \( x = my + b \) 43 | 44 | ### **7. Which term describes the jagged appearance of a rasterized line?** 45 | - [ ] A) Rasterization 46 | - [ ] B) Aliasing 47 | - [ ] C) Quantization 48 | - [ ] D) Dithering 49 | 50 | ### **8. The Midpoint Circle Algorithm is based on which mathematical principle?** 51 | - [ ] A) Trigonometry 52 | - [ ] B) Calculus 53 | - [ ] C) Decision parameters 54 | - [ ] D) Matrix multiplication 55 | 56 | --- 57 | 58 | ## **Medium Questions** 🟡 59 | 60 | ### **9. How does the Digital Differential Analyzer (DDA) algorithm determine the next pixel?** 61 | - [ ] A) Using slope-intercept form 62 | - [ ] B) By rounding the midpoint between two pixels 63 | - [ ] C) By calculating incremental steps 64 | - [ ] D) By comparing absolute differences in x and y coordinates 65 | 66 | ### **10. In raster graphics, what is the primary function of the frame buffer?** 67 | - [ ] A) Store the pixel intensity values 68 | - [ ] B) Control the refresh rate of the screen 69 | - [ ] C) Process 3D transformations 70 | - [ ] D) Store only the black-and-white pixel values 71 | 72 | ### **11. Which of the following statements is true for the Midpoint Circle Algorithm?** 73 | - [ ] A) It uses trigonometric functions to determine pixel positions 74 | - [ ] B) It is slower than the Polynomial Circle Algorithm 75 | - [ ] C) It uses decision parameters for efficiency 76 | - [ ] D) It does not use integer arithmetic 77 | 78 | ### **12. How many octants does the Midpoint Circle Algorithm take advantage of to optimize calculations?** 79 | - [ ] A) 2 80 | - [ ] B) 4 81 | - [ ] C) 6 82 | - [ ] D) 8 83 | 84 | ### **13. Which of the following best describes anti-aliasing in raster graphics?** 85 | - [ ] A) Reducing pixel intensity to increase performance 86 | - [ ] B) A method to smooth edges of primitives by adjusting pixel intensities 87 | - [ ] C) Increasing the number of pixels in a frame buffer 88 | - [ ] D) A compression technique used in image processing 89 | 90 | ### **14. What is a key disadvantage of the DDA algorithm?** 91 | - [ ] A) It cannot be implemented using integer operations 92 | - [ ] B) It is significantly slower than Bresenham’s Algorithm 93 | - [ ] C) It does not work for steep slopes 94 | - [ ] D) It only works with vertical lines 95 | 96 | ### **15. What happens if the decision parameter in the Midpoint Circle Algorithm is negative?** 97 | - [ ] A) The pixel remains unchanged 98 | - [ ] B) The next pixel is chosen in the same horizontal row 99 | - [ ] C) The next pixel is chosen from a lower row 100 | - [ ] D) The next pixel is chosen from the upper row 101 | 102 | --- 103 | 104 | ## **Hard Questions** 🔴 105 | 106 | ### **16. Which of the following algorithms uses the concept of error accumulation?** 107 | - [ ] A) DDA Algorithm 108 | - [ ] B) Midpoint Circle Algorithm 109 | - [ ] C) Bresenham’s Line Algorithm 110 | - [ ] D) Both B and C 111 | 112 | ### **17. What modification must be made to Bresenham’s Line Algorithm for it to handle all quadrants?** 113 | - [ ] A) Change the slope calculation 114 | - [ ] B) Adjust step increments based on sign values of dx and dy 115 | - [ ] C) Use floating-point calculations 116 | - [ ] D) Introduce additional memory buffers 117 | 118 | ### **18. Which of the following is a key challenge in scan conversion of a polygon?** 119 | - [ ] A) Identifying active edges 120 | - [ ] B) Calculating midpoint coordinates 121 | - [ ] C) Finding pixel intensity values 122 | - [ ] D) Converting floating-point values to integers 123 | 124 | ### **19. How is scan conversion different for concave and convex polygons?** 125 | - [ ] A) Concave polygons may require special handling to avoid incorrect filling 126 | - [ ] B) Convex polygons require more processing time 127 | - [ ] C) Concave polygons can only be rendered using midpoint algorithms 128 | - [ ] D) There is no difference in scan conversion 129 | 130 | ### **20. What is the primary purpose of the scan-line algorithm?** 131 | - [ ] A) To fill the interior of a polygon efficiently 132 | - [ ] B) To detect overlapping pixels 133 | - [ ] C) To compute 3D projections 134 | - [ ] D) To remove hidden surfaces 135 | 136 | # **Answers** 137 | 138 | **Easy Questions:** 139 | 1. **B** 140 | 2. **C** 141 | 3. **C** 142 | 4. **C** 143 | 5. **B** 144 | 6. **B** 145 | 7. **B** 146 | 8. **C** 147 | 148 | **Medium Questions:** 149 | 9. **C** 150 | 10. **A** 151 | 11. **C** 152 | 12. **D** 153 | 13. **B** 154 | 14. **A** 155 | 15. **D** 156 | 157 | **Hard Questions:** 158 | 16. **D** 159 | 17. **B** 160 | 18. **A** 161 | 19. **A** 162 | 20. **A** 163 | 164 | 🚀 -------------------------------------------------------------------------------- /03/extra/Ch-03-Graphics primitives.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/03/extra/Ch-03-Graphics primitives.docx -------------------------------------------------------------------------------- /03/extra/chapter-03-Scan conversion.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/03/extra/chapter-03-Scan conversion.pptx -------------------------------------------------------------------------------- /04/04.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | ### Chapter 4: HTML5 Canvas and SVG 🎨🖥️✨ 5 | 6 | #### Introduction 🚀💡📊 7 | With the advent of HTML5, developers gained access to new tools for creating interactive and visually rich web applications. Two critical technologies, **Canvas** and **SVG**, offer distinct approaches to rendering graphics in web environments. Understanding their functionalities, advantages, and use cases is essential for any web developer working on graphical content. 8 | 9 | --- 10 | 11 | ### HTML5 Canvas 🖌️📜🕹️ 12 | The **Canvas API** in HTML5 enables the real-time rendering of 2D graphics using JavaScript. The `` element serves as a drawing surface where developers can create dynamic images, animations, and interactive graphics through script-based commands. 13 | 14 | #### Defining the HTML5 Canvas Element 📐🎨📝 15 | The `` element requires width and height attributes but relies on JavaScript for content generation. Unlike the `` tag, which references static images, `` enables the dynamic construction of graphical elements. 16 | 17 | #### Canvas Rendering Contexts 🔍⚙️🔢 18 | To render graphics, the `` element requires a **context** that defines its drawing methods. The `2d` context is used for two-dimensional graphics, while WebGL (based on OpenGL ES) enables three-dimensional rendering. 19 | 20 | ##### Example HTML: 21 | ```html 22 | 23 |

Your browser does not support HTML5 Canvas.

24 | 25 | ``` 26 | ##### Example JavaScript: 27 | ```javascript 28 | var canvas = document.getElementById('exampleCanvas'); 29 | var context = canvas.getContext('2d'); 30 | ``` 31 | 32 | By default, `` dimensions are **300x150 pixels**, but these can be modified via attributes or CSS. 33 | 34 | #### Coordinate System in Canvas 📏📊🔢 35 | The Canvas API follows a coordinate system where the **origin (0,0) is located at the top-left corner**. The X-axis extends to the right, and the Y-axis extends downward. 36 | 37 | #### Fundamental Drawing Operations 🎭✏️🖍️ 38 | ##### Drawing Rectangles 🟧🔲🔳 39 | Canvas provides three essential rectangle drawing functions: 40 | - `fillRect(x, y, width, height)`: Draws a filled rectangle. 41 | - `strokeRect(x, y, width, height)`: Draws an outlined rectangle. 42 | - `clearRect(x, y, width, height)`: Clears a specified area. 43 | 44 | ##### Creating Paths 🚶‍♂️🔄🛤️ 45 | Paths define complex shapes composed of multiple points and segments: 46 | - `beginPath()`: Starts a new path. 47 | - `moveTo(x, y)`: Moves the cursor without drawing. 48 | - `lineTo(x, y)`: Draws a line from the current position. 49 | - `stroke()`: Outlines the defined path. 50 | - `fill()`: Fills the path with color. 51 | 52 | ##### Drawing Circles and Arcs ⚪🎯🔵 53 | The `arc()` method is used to create circles and arcs: 54 | ```javascript 55 | context.arc(x, y, radius, startAngle, endAngle, anticlockwise); 56 | ``` 57 | 58 | ##### Applying Colors and Styles 🎨🖍️🌈 59 | Canvas supports solid colors, gradients, and patterns: 60 | - `fillStyle = color;` (Fill color) 61 | - `strokeStyle = color;` (Outline color) 62 | - `createLinearGradient()` (Gradient fills) 63 | - `createPattern()` (Pattern fills) 64 | 65 | ##### Implementing Shadows 🌑💡🔦 66 | Shadows can be added to elements using: 67 | - `shadowOffsetX, shadowOffsetY` (Positioning) 68 | - `shadowBlur` (Blur intensity) 69 | - `shadowColor` (Shadow color) 70 | 71 | ##### Rendering Text 📝✍️🔠 72 | Text can be drawn on the canvas using: 73 | - `fillText(text, x, y [, maxWidth])` (Fills text) 74 | - `strokeText(text, x, y [, maxWidth])` (Outlines text) 75 | 76 | ##### Drawing Images 🖼️📸🖊️ 77 | The `drawImage()` method places images onto the canvas: 78 | ```javascript 79 | context.drawImage(image, x, y); 80 | ``` 81 | 82 | --- 83 | 84 | ### SVG (Scalable Vector Graphics) 🖊️📐🖼️ 85 | **SVG** is an XML-based format for rendering two-dimensional graphics. Unlike Canvas, SVG elements remain in the DOM, making them accessible for CSS styling and JavaScript manipulation. 86 | 87 | #### Key Features of SVG ⚡🔎📊 88 | - **Scalability**: No pixelation when resizing. 89 | - **DOM Integration**: Elements are modifiable via JavaScript and CSS. 90 | - **Event Handling**: SVG elements support standard DOM events. 91 | - **Animation Support**: SVG can be animated using CSS or SMIL. 92 | 93 | #### Embedding SVG in HTML 🖍️🔤💻 94 | SVG elements can be embedded inline within HTML documents: 95 | ```html 96 | 97 | 98 | 99 | ``` 100 | 101 | #### Common SVG Drawing Techniques 🎨🔶🔷 102 | ##### Drawing a Line 📏📊📈 103 | ```html 104 | 105 | 106 | 107 | ``` 108 | ##### Drawing a Circle 🔵🔘⚪ 109 | ```html 110 | 111 | 112 | 113 | ``` 114 | ##### Drawing Text 📝🔤🔠 115 | ```html 116 | 117 | SVG Text Example 118 | 119 | ``` 120 | 121 | --- 122 | 123 | ### Comparative Analysis: SVG vs. Canvas 🔬📊⚖️ 124 | | Feature | SVG | Canvas | 125 | |---------|-----|--------| 126 | | **Rendering Model** | Vector-based | Pixel-based | 127 | | **DOM Integration** | Accessible and modifiable | Not part of the DOM | 128 | | **Manipulation** | Controlled via JavaScript/CSS | Controlled via JavaScript only | 129 | | **Performance** | Optimal for fewer elements, larger surfaces | Efficient for real-time, dynamic rendering | 130 | | **Scalability** | No pixelation, ideal for high-resolution graphics | May pixelate when scaled | 131 | 132 | --- 133 | 134 | ### Conclusion 🎯📚✅ 135 | Both **Canvas** and **SVG** serve essential roles in web graphics. **Canvas** is ideal for real-time visualizations, animations, and gaming applications. **SVG**, on the other hand, excels in scalable graphics such as charts, maps, and illustrations. Understanding the distinctions between these technologies allows developers to choose the most suitable approach for their projects. 136 | 137 | This chapter provided an in-depth exploration of **Canvas** and **SVG**, their features, and practical applications. The following sections will introduce more advanced use cases and implementation techniques. 🚀📜💡 138 | 139 | -------------------------------------------------------------------------------- /04/Qs.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # 📘 **HTML5 Canvas and SVG - Multiple Choice Questions** 5 | 6 | ## **Easy Questions** 7 | 8 | ### 1. What is the primary purpose of the `` element in HTML5? 9 | - A) To display static images 10 | - B) To create vector graphics 11 | - C) To draw graphics dynamically via JavaScript 12 | - D) To embed videos 13 | 14 | ### 2. Which method is used to obtain the 2D rendering context of a canvas? 15 | - A) `canvas.getContext('3D')` 16 | - B) `canvas.get2DContext()` 17 | - C) `canvas.getContext('2d')` 18 | - D) `canvas.createContext()` 19 | 20 | ### 3. What is the default width and height of an HTML5 `` element? 21 | - A) 400x400 pixels 22 | - B) 500x500 pixels 23 | - C) 150x150 pixels 24 | - D) 300x150 pixels 25 | 26 | ### 4. Which of the following statements about `` is true? 27 | - A) Canvas content is part of the DOM 28 | - B) Canvas graphics can be modified using CSS 29 | - C) Canvas is a pixel-based drawing API 30 | - D) Canvas automatically resizes graphics when scaled 31 | 32 | ### 5. What does the `fillRect(x, y, width, height)` function do? 33 | - A) Draws an outlined rectangle 34 | - B) Draws a filled rectangle 35 | - C) Draws a transparent rectangle 36 | - D) Clears a rectangle 37 | 38 | ### 6. Which of the following is NOT a valid transformation method in the Canvas API? 39 | - A) `rotate()` 40 | - B) `translate()` 41 | - C) `resize()` 42 | - D) `scale()` 43 | 44 | ### 7. What does `strokeText("Hello", 50, 50);` do? 45 | - A) Fills text with color 46 | - B) Creates an outline of the text 47 | - C) Clears the canvas at (50, 50) 48 | - D) Moves the text to (50,50) 49 | 50 | ### 8. What type of coordinate system does the HTML5 Canvas use? 51 | - A) Cartesian coordinate system with origin at the center 52 | - B) Cartesian coordinate system with origin at the top-left corner 53 | - C) Polar coordinate system 54 | - D) Cylindrical coordinate system 55 | 56 | --- 57 | 58 | ## **Medium Questions** 59 | 60 | ### 9. Which of the following is **NOT** an advantage of SVG over Canvas? 61 | - A) Scalability without pixelation 62 | - B) DOM manipulation via JavaScript 63 | - C) Higher performance for rendering many elements 64 | - D) Better text rendering capabilities 65 | 66 | ### 10. How do you add a new color stop in a linear gradient on canvas? 67 | - A) `gradient.setColorStop(0.5, "blue")` 68 | - B) `gradient.addColorStop(0.5, "blue")` 69 | - C) `gradient.newColorStop(0.5, "blue")` 70 | - D) `gradient.changeColorStop(0.5, "blue")` 71 | 72 | ### 11. In SVG, which element is used to group multiple shapes together? 73 | - A) `` 74 | - B) `` 75 | - C) `` 76 | - D) `` 77 | 78 | ### 12. What happens if you do not call `beginPath()` before drawing a new shape on a canvas? 79 | - A) The new shape overwrites the previous one 80 | - B) The new shape will be drawn separately 81 | - C) The new shape is appended to the existing path 82 | - D) Nothing happens 83 | 84 | ### 13. Which method is used to clear part of a canvas? 85 | - A) `removeRect()` 86 | - B) `clearCanvas()` 87 | - C) `clearRect(x, y, width, height)` 88 | - D) `deleteCanvas()` 89 | 90 | ### 14. How do you draw a circle in SVG? 91 | - A) `` 92 | - B) `` 93 | - C) `` 94 | - D) `` 95 | 96 | ### 15. What is the purpose of the `closePath()` function in the Canvas API? 97 | - A) Deletes the current path 98 | - B) Closes the current sub-path by drawing a straight line back to the start 99 | - C) Clears the canvas 100 | - D) Fills the current path 101 | 102 | ### 16. Which SVG element is used to define reusable components? 103 | - A) `` 104 | - B) `` 105 | - C) `` 106 | - D) `` 107 | 108 | --- 109 | 110 | ## **Hard Questions** 111 | 112 | ### 17. What is the difference between `stroke()` and `fill()` in Canvas? 113 | - A) `stroke()` fills the shape, `fill()` only outlines it 114 | - B) `fill()` fills the shape, `stroke()` only outlines it 115 | - C) Both fill the shape 116 | - D) Both outline the shape 117 | 118 | ### 18. What does `globalAlpha = 0.5` do in the Canvas API? 119 | - A) Sets the transparency of the entire canvas 120 | - B) Changes the blending mode 121 | - C) Modifies the alpha value of future drawings 122 | - D) Disables transparency 123 | 124 | ### 19. Which Canvas function allows you to draw an image at a specific position? 125 | - A) `drawImage()` 126 | - B) `setImage()` 127 | - C) `paintImage()` 128 | - D) `renderImage()` 129 | 130 | ### 20. In SVG, how do you apply a gradient fill to a rectangle? 131 | - A) Use `fill="gradient"` 132 | - B) Define a `` inside `` and reference it using `fill="url(#id)"` 133 | - C) Apply `style="gradient: linear"` 134 | - D) Use `gradientFill="blue, red"` 135 | 136 | ### 21. What is the purpose of `shadowBlur` in the Canvas API? 137 | - A) Sets the shadow's color 138 | - B) Controls the softness of the shadow 139 | - C) Moves the shadow horizontally 140 | - D) Moves the shadow vertically 141 | 142 | ### 22. What does `arcTo()` do in the Canvas API? 143 | - A) Draws a perfect circle 144 | - B) Creates a curved path between two points 145 | - C) Converts an arc into a line 146 | - D) Closes the current path 147 | 148 | --- 149 | 150 | # ✅ **Answers** 151 | 152 | 1. C 153 | 2. C 154 | 3. D 155 | 4. C 156 | 5. B 157 | 6. C 158 | 7. B 159 | 8. B 160 | 9. C 161 | 10. B 162 | 11. B 163 | 12. C 164 | 13. C 165 | 14. C 166 | 15. B 167 | 16. C 168 | 17. B 169 | 18. C 170 | 19. A 171 | 20. B 172 | 21. B 173 | 22. B 174 | 175 | 🚀🎨 -------------------------------------------------------------------------------- /04/Tutorial/01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 22 | 23 | -------------------------------------------------------------------------------- /04/Tutorial/02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 29 | 30 | -------------------------------------------------------------------------------- /04/Tutorial/03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 31 | 32 | -------------------------------------------------------------------------------- /04/Tutorial/04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 36 | 37 | -------------------------------------------------------------------------------- /04/Tutorial/05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 31 | 32 | -------------------------------------------------------------------------------- /04/Tutorial/06.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 26 | 27 | -------------------------------------------------------------------------------- /04/Tutorial/07.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 27 | 28 | -------------------------------------------------------------------------------- /04/Tutorial/08.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 33 | 34 | -------------------------------------------------------------------------------- /04/Tutorial/09.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 39 | 40 | -------------------------------------------------------------------------------- /04/Tutorial/10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 25 | 26 | -------------------------------------------------------------------------------- /04/Tutorial/11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 30 | 31 | -------------------------------------------------------------------------------- /04/Tutorial/13.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 36 | 37 | -------------------------------------------------------------------------------- /04/Tutorial/14.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 47 | 48 | -------------------------------------------------------------------------------- /04/Tutorial/15.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 54 | 55 | -------------------------------------------------------------------------------- /04/Tutorial/16.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | Your browser does not support the <canvas> element. 12 | 13 | 34 | 35 | -------------------------------------------------------------------------------- /04/Tutorial/17.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | Your browser does not support the <canvas> element. 11 | 12 | 40 | 41 | -------------------------------------------------------------------------------- /04/Tutorial/18.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | Your browser does not support the <canvas> element. 11 | 12 | 39 | 40 | -------------------------------------------------------------------------------- /04/Tutorial/19.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | Your browser does not support the <canvas> element. 11 | 12 | 26 | 27 | -------------------------------------------------------------------------------- /04/Tutorial/20.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | Your browser does not support the <canvas> element. 11 | 12 | 32 | 33 | -------------------------------------------------------------------------------- /04/Tutorial/21.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ball Dodger Game 7 | 19 | 20 | 21 |

Ball Dodger Game

22 | 23 | 118 | 119 | -------------------------------------------------------------------------------- /04/Tutorial/picture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/04/Tutorial/picture.png -------------------------------------------------------------------------------- /04/Tutorial/sprite.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/04/Tutorial/sprite.jpg -------------------------------------------------------------------------------- /04/extra/Ch-04-HTML 5 canvas and SVG.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/04/extra/Ch-04-HTML 5 canvas and SVG.docx -------------------------------------------------------------------------------- /05/05.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Chapter 5: 2D Transformations 🎨📐✨ 5 | 6 | ## Introduction 🎭📊🖥️ 7 | 2D transformations modify the position, shape, size, or orientation of objects within a two-dimensional plane. These fundamental operations play a crucial role in computer graphics, supporting applications such as animation, image processing, and coordinate system modifications. 8 | 9 | A **transformation** is a mathematical function that maps a point or vector to another point or vector. These transformations allow objects to be repositioned, resized, or rotated within different coordinate systems, enabling diverse graphical applications. 10 | 11 | ## Categories of 2D Transformations 🏗️🔄📝 12 | 1. **Translation** - Displacing an object by a specified distance. 13 | 2. **Scaling** - Adjusting the dimensions of an object. 14 | 3. **Rotation** - Rotating an object about a specific point. 15 | 4. **Reflection** - Mirroring an object across an axis. 16 | 5. **Shearing** - Distorting an object by shifting its points. 17 | 18 | ### Fundamental Transformations 🚀📈🔬 19 | The three primary transformations are: 20 | - **Translation** 21 | - **Rotation** 22 | - **Scaling** 23 | 24 | All other transformations can be derived from these fundamental operations. 25 | 26 | ## 1. Translation 🚗➡️📌 27 | Translation moves an object in a straight line by adding a constant displacement to its coordinates. A point \((x, y)\) is translated to \((x', y')\) as follows: 28 | \[ x' = x + T_x \] 29 | \[ y' = y + T_y \] 30 | where \(T_x\) and \(T_y\) are the translation distances. 31 | 32 | Matrix representation: 33 | \[ \begin{bmatrix} x' \\ y' \end{bmatrix} = \begin{bmatrix} x \\ y \end{bmatrix} + \begin{bmatrix} T_x \\ T_y \end{bmatrix} \] 34 | 35 | **Example:** Translate the triangle \(A(10,10), B(15,15), C(20,10)\) by 2 units along the x-axis and 1 unit along the y-axis. 🎯📏✍️ 36 | 37 | Solution: 38 | \[ P' = P + T \] 39 | Final coordinates: \(A'(12,11), B'(17,16), C'(22,11)\). 40 | 41 | ## 2. Rotation 🔄🧭⚙️ 42 | Rotation modifies the orientation of an object around a fixed pivot point \((x_r, y_r)\). The rotation equations for an angle \(\theta\) are: 43 | \[ x' = x_r + (x - x_r) \cos \theta - (y - y_r) \sin \theta \] 44 | \[ y' = y_r + (x - x_r) \sin \theta + (y - y_r) \cos \theta \] 45 | 46 | For rotation about the origin \((0,0)\): 47 | \[ x' = x \cos \theta - y \sin \theta \] 48 | \[ y' = x \sin \theta + y \cos \theta \] 49 | 50 | Matrix representation: 51 | \[ \begin{bmatrix} x' \\ y' \end{bmatrix} = \begin{bmatrix} \cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} \] 52 | 53 | **Example:** Rotate the triangle \(A(5,4), B(8,3), C(8,8)\) by 90° clockwise about the origin. 🏹🔄📐 54 | Solution: 55 | \[ P' = R \cdot P \] 56 | Final coordinates: \(A'(4,-5), B'(3,-8), C'(8,-8)\). 57 | 58 | ## 3. Scaling 📏📊🔍 59 | Scaling adjusts the size of an object by multiplying each coordinate by a scaling factor \(S_x, S_y\): 60 | \[ x' = x \cdot S_x \] 61 | \[ y' = y \cdot S_y \] 62 | 63 | Matrix representation: 64 | \[ \begin{bmatrix} x' \\ y' \end{bmatrix} = \begin{bmatrix} S_x & 0 \\ 0 & S_y \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} \] 65 | 66 | **Example:** Scale a square \(A(2,2), B(6,2), C(6,6), D(2,6)\) by 0.5. 📐🔬✏️ 67 | Solution: 68 | \[ P' = S \cdot P \] 69 | Final coordinates: \(A'(1,1), B'(3,1), C'(3,3), D'(1,3)\). 70 | 71 | ## 4. Reflection 🪞🔄💡 72 | Reflection generates a mirror image of an object relative to a given axis. 73 | - **Reflection across the x-axis:** \( y' = -y \) 74 | - **Reflection across the y-axis:** \( x' = -x \) 75 | - **Reflection about the origin:** \( x' = -x, y' = -y \) 76 | 77 | **Example:** Reflect the triangle \(A(10,10), B(15,15), C(20,10)\) across the x-axis. 🏹📏🔄 78 | Final coordinates: \(A'(10,-10), B'(15,-15), C'(20,-10)\). 79 | 80 | ## 5. Shearing ⚡📐🚀 81 | Shearing distorts an object by shifting its layers. Defined as: 82 | \[ x' = x + h_x y \] 83 | \[ y' = y + h_y x \] 84 | where \( h_x \) and \( h_y \) are shear factors. 85 | 86 | Matrix representation: 87 | \[ \begin{bmatrix} x' \\ y' \end{bmatrix} = \begin{bmatrix} 1 & h_x \\ h_y & 1 \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} \] 88 | 89 | **Example:** Apply shear \( h_x = 4, h_y = 1 \) to a triangle \(A(1,1), B(0,0), C(1,0)\). 🚀📏⚡ 90 | 91 | ## Composite Transformations 🔗🔢💡 92 | Multiple transformations can be combined using matrix multiplication. 93 | 94 | **Example:** Perform a translation \((T_x=4, T_y=3)\) followed by scaling \((S_x=2, S_y=2)\): 95 | \[ P' = S \cdot (T \cdot P) \] 96 | 97 | ## Python Implementation 🐍💻🖥️ 98 | Python can be used to apply these transformations efficiently using **NumPy**: 99 | ```python 100 | import numpy as np 101 | 102 | def translate(point, tx, ty): 103 | T = np.array([[1, 0, tx], [0, 1, ty], [0, 0, 1]]) 104 | P = np.array([point[0], point[1], 1]) 105 | return np.dot(T, P)[:2] 106 | 107 | point = (5, 7) 108 | translated_point = translate(point, 3, 4) 109 | print(translated_point) 110 | ``` 111 | 112 | ## Exercises 🎯✏️📚 113 | ## Research Topics 📖🔍🚀 114 | This chapter provides a rigorous foundation for understanding and applying 2D transformations, preparing students for advanced computer graphics concepts. 115 | 116 | -------------------------------------------------------------------------------- /05/A-Math for game Developers.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/05/A-Math for game Developers.pdf -------------------------------------------------------------------------------- /05/Qs.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Chapter 5: 2D Transformations 🎨📐✨ 5 | 6 | ## Multiple Choice Questions 7 | 8 | ### Easy Questions 🎯 9 | 10 | 1. What is the primary purpose of 2D transformations in computer graphics? 11 | - A) Enhancing colors 12 | - B) Modifying object properties such as position, size, and orientation 13 | - C) Increasing resolution 14 | - D) Reducing file size 15 | 16 | 2. Which of the following is NOT a basic 2D transformation? 17 | - A) Translation 18 | - B) Rotation 19 | - C) Scaling 20 | - D) Blurring 21 | 22 | 3. In translation, which mathematical operation is performed on the coordinates? 23 | - A) Addition 24 | - B) Subtraction 25 | - C) Multiplication 26 | - D) Division 27 | 28 | 4. What happens when a 2D object is rotated counterclockwise by 90 degrees? 29 | - A) The x-coordinates and y-coordinates swap, with the new x-coordinates negated 30 | - B) The x-coordinates and y-coordinates swap, with the new y-coordinates negated 31 | - C) The object mirrors across the y-axis 32 | - D) The object moves to the right 33 | 34 | 5. Reflection across the y-axis changes the sign of which coordinate? 35 | - A) x-coordinate 36 | - B) y-coordinate 37 | - C) Both x and y coordinates 38 | - D) Neither coordinate 39 | 40 | ### Medium Questions 📊 41 | 42 | 6. What is the effect of a scaling factor of less than 1 on an object? 43 | - A) The object enlarges 44 | - B) The object shrinks 45 | - C) The object rotates 46 | - D) The object remains the same 47 | 48 | 7. Which matrix operation is used to apply multiple transformations at once? 49 | - A) Matrix addition 50 | - B) Matrix subtraction 51 | - C) Matrix multiplication 52 | - D) Matrix division 53 | 54 | 8. When performing a composite transformation that includes scaling and translation, in what order should the operations be applied? 55 | - A) Scaling first, then translation 56 | - B) Translation first, then scaling 57 | - C) Order does not matter 58 | - D) Apply them simultaneously 59 | 60 | 9. Which of the following correctly represents a shear transformation matrix? 61 | - A) \[ \begin{bmatrix} 1 & h_x \\ h_y & 1 \end{bmatrix} \] 62 | - B) \[ \begin{bmatrix} 0 & 1 \\ -1 & 0 \end{bmatrix} \] 63 | - C) \[ \begin{bmatrix} 1 & 0 \\ 0 & -1 \end{bmatrix} \] 64 | - D) \[ \begin{bmatrix} \cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \end{bmatrix} \] 65 | 66 | 10. In homogeneous coordinates, what is the additional component added to the 2D point representation? 67 | - A) Zero 68 | - B) One 69 | - C) Two 70 | - D) Infinity 71 | 72 | ### Hard Questions 🔬 73 | 74 | 11. Which transformation does NOT preserve the shape of the object? 75 | - A) Translation 76 | - B) Rotation 77 | - C) Shearing 78 | - D) Reflection 79 | 80 | 12. How can you achieve rotation about an arbitrary point instead of the origin? 81 | - A) Rotate first, then translate 82 | - B) Translate to the origin, rotate, then translate back 83 | - C) Apply scaling, then rotate 84 | - D) Apply a reflection first 85 | 86 | 13. What is the determinant of a pure rotation transformation matrix? 87 | - A) 0 88 | - B) 1 89 | - C) -1 90 | - D) It depends on the rotation angle 91 | 92 | 14. If a triangle is reflected about the line \( y = x \), how are its coordinates transformed? 93 | - A) The x and y coordinates are swapped 94 | - B) The x and y coordinates are negated 95 | - C) The x-coordinate is negated while y remains unchanged 96 | - D) The y-coordinate is negated while x remains unchanged 97 | 98 | 15. What happens when a transformation matrix has a determinant of zero? 99 | - A) The transformation has no effect 100 | - B) The transformation is irreversible 101 | - C) The transformation results in a reflection 102 | - D) The transformation scales the object 103 | 104 | ## Answers 105 | 106 | 1. **B** 107 | 2. **D** 108 | 3. **A** 109 | 4. **A** 110 | 5. **A** 111 | 6. **B** 112 | 7. **C** 113 | 8. **A** 114 | 9. **A** 115 | 10. **B** 116 | 11. **C** 117 | 12. **B** 118 | 13. **B** 119 | 14. **A** 120 | 15. **B** 121 | 🚀📘✨ -------------------------------------------------------------------------------- /05/extra/Ch-05-2D Transformations.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/05/extra/Ch-05-2D Transformations.docx -------------------------------------------------------------------------------- /05/extra/chapter-5-2D transformation.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/05/extra/chapter-5-2D transformation.pptx -------------------------------------------------------------------------------- /06/06.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Chapter 6: Mathematical Foundations of Game Animation and Physics 🎮📊🕹️ 5 | 6 | ## 1. Introduction 📚🔢🎮 7 | Mathematics is a cornerstone of modern game development, providing the foundation for realistic physics, motion, and animation. This chapter delves into essential mathematical principles used in graphics and animation, including **vectors, transformations, coordinate systems, parametric curves, and animation techniques**. 8 | 9 | --- 10 | ## 2. Linear Algebra in Game Development 🧮🖥️⚡ 11 | ### 2.1 Understanding Vectors 📏🔄📐 12 | A **vector** is a mathematical entity characterized by both **magnitude and direction**. In game development, vectors play crucial roles in defining: 13 | - **Object positions** in a virtual space. 14 | - **Directional movement** and aiming. 15 | - **Velocity and acceleration** for dynamic simulations. 16 | 17 | For example, a position vector **(3,5,2)** indicates an object's placement: 18 | - **3 meters east**, 19 | - **5 meters upward**, 20 | - **2 meters north**. 21 | 22 | ### 2.2 Position Representation via Vectors 🌍📌🎯 23 | Vectors serve as coordinate descriptors in **2D** and **3D spaces**, helping define object positions relative to a chosen reference point. 24 | 25 | ### 2.3 Vector Operations ➕➖✖️ 26 | #### **Vector Addition & Subtraction** ➕➖📉 27 | Vectors are added or subtracted component-wise: 28 | $$ A + B = (a_x + b_x, a_y + b_y, a_z + b_z) $$ 29 | $$ A - B = (a_x - b_x, a_y - b_y, a_z - b_z) $$ 30 | Example in **Python**: 31 | ```python 32 | import numpy as np 33 | A = np.array([3, 5, 2]) 34 | B = np.array([1, -2, 4]) 35 | C = A + B # Vector addition 36 | D = A - B # Vector subtraction 37 | print("C:", C, "D:", D) 38 | ``` 39 | 40 | #### **Scalar Multiplication** ✖️💡🎛️ 41 | Scaling a vector by a scalar modifies its magnitude: 42 | $$ kV = (k \cdot v_x, k \cdot v_y, k \cdot v_z) $$ 43 | 44 | #### **Dot Product** 🎯⚡📏 45 | A measure of directional similarity between two vectors: 46 | $$ A \cdot B = a_x b_x + a_y b_y + a_z b_z $$ 47 | 48 | #### **Cross Product (3D Only)** ➗📌🔀 49 | The cross product yields a vector perpendicular to two given vectors: 50 | $$ A \times B = (a_y b_z - a_z b_y, a_z b_x - a_x b_z, a_x b_y - a_y b_x) $$ 51 | 52 | ### 2.4 Coordinate Systems in Games 🌐🖥️📊 53 | - **Model Space**: Defines an object’s local coordinate system. 54 | - **World Space**: Represents the global coordinate frame. 55 | - **View Space**: Defines coordinates relative to the camera. 56 | - **Screen Space**: Represents the 2D projection of 3D elements. 57 | 58 | --- 59 | ## 3. Parametric Curves 🔄📈🌀 60 | ### 3.1 Bezier Curves 🎨✏️📐 61 | Bezier curves facilitate smooth interpolations between points. 62 | 63 | --- 64 | ## 4. Game Programming Fundamentals 🎮💾📜 65 | ### 4.1 Game Loop Mechanism 🔄💡🕹️ 66 | A conventional game loop executes continuously: 67 | ```python 68 | while game_running: 69 | process_inputs() 70 | update_game_logic() 71 | render_graphics() 72 | ``` 73 | 74 | ### 4.2 Frame Rate Independence with Delta Time ⏳🎞️🔄 75 | Maintaining consistent movement across different frame rates: 76 | ```python 77 | delta_time = current_time - previous_time 78 | position += velocity * delta_time 79 | ``` 80 | 81 | --- 82 | ## 5. Animation Techniques 🎥🎬🖌️ 83 | ### 5.1 Frame Rate & Keyframing 🎞️📸🎭 84 | - **Standard FPS**: 24 FPS is commonly used. 85 | - **Keyframes**: Define major motion states. 86 | - **Inbetweens**: Fill intermediate frames between key states. 87 | 88 | ### 5.2 Linear Interpolation (LERP) 🔀📍💫 89 | LERP facilitates smooth transitions: 90 | ```python 91 | def lerp(A, B, t): 92 | return A + t * (B - A) 93 | 94 | pos = lerp(0, 10, 0.5) 95 | print("Interpolated Position:", pos) 96 | ``` 97 | 98 | --- 99 | ## 6. Collision Detection 🚀🎯💥 100 | ### 6.1 Bounding Box Intersection 📦🔄📍 101 | Detects whether two rectangular objects overlap: 102 | ```python 103 | def is_colliding(rect1, rect2): 104 | return not (rect1.right < rect2.left or rect1.left > rect2.right or rect1.top > rect2.bottom or rect1.bottom < rect2.top) 105 | ``` 106 | 107 | --- 108 | ## 7. Research Directions in Game Development 🤖📊🚀 109 | - **AI-Driven Physics Simulation**: Machine learning applications in game physics. 110 | - **Procedural Animation**: Algorithms generating real-time animations. 111 | - **Physically-Based Rendering (PBR)**: Advanced shading techniques for realism. 112 | 113 | --- 114 | ## 8. Assessment 📜🧠🎯 115 | ### Multiple Choice Questions 🎮📝🧐 116 | 1. Which operation quantifies the similarity between two vectors? 117 | - A) Cross Product 118 | - B) Dot Product ✅ 119 | - C) Scalar Multiplication 120 | - D) Vector Normalization 121 | 122 | ### True/False Statements 🤔✔️❌ 123 | 1. **Vectors solely store positions in a game.** ❌ (They also encode directions and velocities.) 124 | 2. **The cross product is defined exclusively in 3D space.** ✅ 125 | 3. **Dot product assists in angle calculations between vectors.** ✅ 126 | 127 | --- 128 | ## 9. Practical Exercises 🏋️‍♂️🎮🔧 129 | - **Physics Simulation**: Implement basic motion physics using NumPy. 130 | - **Game Animation Project**: Develop a bouncing ball animation. 131 | - **Discussion Topic**: Explore real-world applications of game mathematics. 132 | 133 | --- 134 | ## 10. Conclusion 🎯📢📚 135 | Mathematics plays an integral role in game development, influencing physics, movement, and animation. Mastering vector algebra, transformations, and procedural techniques enhances realism and efficiency in game mechanics. 136 | 137 | --- 138 | 139 | -------------------------------------------------------------------------------- /06/AR-VR-MR introduction-V2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/06/AR-VR-MR introduction-V2.pdf -------------------------------------------------------------------------------- /06/Qs.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Mathematical Foundations of Game Animation and Physics 🎮📊🕹️ 5 | 6 | ## 1. Introduction 📚🔢🎮 7 | Mathematics is a cornerstone of modern game development, providing the foundation for realistic physics, motion, and animation. This chapter delves into essential mathematical principles used in graphics and animation, including **vectors, transformations, coordinate systems, parametric curves, and animation techniques**. 8 | 9 | --- 10 | ## 2. Linear Algebra in Game Development 🧮🖥️⚡ 11 | ### 2.1 Understanding Vectors 📏🔄📐 12 | A **vector** is a mathematical entity characterized by both **magnitude and direction**. In game development, vectors play crucial roles in defining: 13 | - **Object positions** in a virtual space. 14 | - **Directional movement** and aiming. 15 | - **Velocity and acceleration** for dynamic simulations. 16 | 17 | For example, a position vector **(3,5,2)** indicates an object's placement: 18 | - **3 meters east**, 19 | - **5 meters upward**, 20 | - **2 meters north**. 21 | 22 | ### 2.2 Position Representation via Vectors 🌍📌🎯 23 | Vectors serve as coordinate descriptors in **2D** and **3D spaces**, helping define object positions relative to a chosen reference point. 24 | 25 | ### 2.3 Vector Operations ➕➖✖️ 26 | #### **Vector Addition & Subtraction** ➕➖📉 27 | Vectors are added or subtracted component-wise: 28 | $$ A + B = (a_x + b_x, a_y + b_y, a_z + b_z) $$ 29 | $$ A - B = (a_x - b_x, a_y - b_y, a_z - b_z) $$ 30 | Example in **Python**: 31 | ```python 32 | import numpy as np 33 | A = np.array([3, 5, 2]) 34 | B = np.array([1, -2, 4]) 35 | C = A + B # Vector addition 36 | D = A - B # Vector subtraction 37 | print("C:", C, "D:", D) 38 | ``` 39 | 40 | #### **Scalar Multiplication** ✖️💡🎛️ 41 | Scaling a vector by a scalar modifies its magnitude: 42 | $$ kV = (k \cdot v_x, k \cdot v_y, k \cdot v_z) $$ 43 | 44 | #### **Dot Product** 🎯⚡📏 45 | A measure of directional similarity between two vectors: 46 | $$ A \cdot B = a_x b_x + a_y b_y + a_z b_z $$ 47 | 48 | #### **Cross Product (3D Only)** ➗📌🔀 49 | The cross product yields a vector perpendicular to two given vectors: 50 | $$ A \times B = (a_y b_z - a_z b_y, a_z b_x - a_x b_z, a_x b_y - a_y b_x) $$ 51 | 52 | ### 2.4 Coordinate Systems in Games 🌐🖥️📊 53 | - **Model Space**: Defines an object’s local coordinate system. 54 | - **World Space**: Represents the global coordinate frame. 55 | - **View Space**: Defines coordinates relative to the camera. 56 | - **Screen Space**: Represents the 2D projection of 3D elements. 57 | 58 | --- 59 | ## 3. Multiple Choice Questions 🎮📝🧐 60 | 61 | ### Easy Questions 🎯 62 | 1. What is a vector composed of? 63 | - A) Only magnitude 64 | - B) Only direction 65 | - C) Both magnitude and direction ✅ 66 | - D) Neither magnitude nor direction 67 | 68 | 2. What does the dot product measure? 69 | - A) The perpendicularity of two vectors 70 | - B) The similarity in direction between two vectors ✅ 71 | - C) The area spanned by two vectors 72 | - D) The sum of vector components 73 | 74 | ### Medium Questions 🧠 75 | 3. Which operation results in a vector perpendicular to two given vectors? 76 | - A) Dot product 77 | - B) Scalar multiplication 78 | - C) Cross product ✅ 79 | - D) Vector addition 80 | 81 | 4. What is the formula for calculating vector normalization? 82 | - A) \( \frac{V}{|V|} \) ✅ 83 | - B) \( V \times |V| \) 84 | - C) \( V + |V| \) 85 | - D) \( V^2 / |V| \) 86 | 87 | ### Hard Questions 🚀 88 | 5. If a vector A = (3,4,0), what is its magnitude? 89 | - A) 5 ✅ 90 | - B) 7 91 | - C) 4 92 | - D) 3 93 | 94 | 6. Given two normalized vectors, what does their dot product represent? 95 | - A) The cosine of the angle between them ✅ 96 | - B) The sine of the angle between them 97 | - C) The distance between them 98 | - D) The sum of their components 99 | 100 | ## 4. Answers ✅ 101 | 102 | 1. **C** (Both magnitude and direction) 103 | 2. **B** (The similarity in direction between two vectors) 104 | 3. **C** (Cross product) 105 | 4. **A** (\( \frac{V}{|V|} \)) 106 | 5. **A** (5) 107 | 6. **A** (The cosine of the angle between them) 108 | -------------------------------------------------------------------------------- /06/extra/Chapter06-Math, Basic Techniques and Animation Basics.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/06/extra/Chapter06-Math, Basic Techniques and Animation Basics.docx -------------------------------------------------------------------------------- /06/extra/Lecture07-DemoMath.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/06/extra/Lecture07-DemoMath.zip -------------------------------------------------------------------------------- /06/extra/slides/Chapter 06- Math and Animation for game Developers.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/06/extra/slides/Chapter 06- Math and Animation for game Developers.pdf -------------------------------------------------------------------------------- /06/extra/slides/Chapter 06- Math and Animation for game Developers.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/06/extra/slides/Chapter 06- Math and Animation for game Developers.pptx -------------------------------------------------------------------------------- /07/07.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | 5 | # Chapter 7: Advanced Concepts in Three-Dimensional Graphics 🎨🖥️🔺 6 | 7 | ## Introduction 🎭📐🕶️ 8 | Three-dimensional (3D) graphics extend two-dimensional (2D) representations by incorporating depth, enabling realistic simulations and visualizations in fields such as gaming, scientific modeling, and virtual reality. Unlike 2D graphics, 3D graphics use three coordinates (x, y, z) to define objects in space, allowing for intricate transformations, lighting, and rendering techniques. 9 | 10 | ## Coordinate Systems 🏗️📊🧭 11 | 3D graphics utilize two primary Cartesian coordinate systems: 12 | - **Left-handed coordinate system:** The positive z-axis extends away from the viewer. 13 | - **Right-handed coordinate system:** The positive z-axis extends toward the viewer. 14 | 15 | To determine the orientation of the z-axis: 16 | 1. Point the fingers of your **left or right hand** in the positive x direction. 17 | 2. Curl them in the positive y direction. 18 | 3. The direction of your thumb indicates the positive z-axis. 19 | 20 | ## Objects and Mesh Structures 🏗️🧩🖌️ 21 | ### **Vertices, Faces, and Meshes** 22 | - A **vertex** is a single point in 3D space defined by (x, y, z) coordinates. 23 | - A **face** is a polygonal surface that connects multiple vertices. 24 | - A **mesh** is a structured set of vertices, edges, and faces that defines the geometry of a 3D object. 25 | - The **triangle mesh** is the most common representation due to its computational efficiency in rendering and processing. 26 | 27 | ### **Normals and Shading** ✨💡🔦 28 | - **Face normals** are perpendicular vectors to a polygonal surface, crucial for shading calculations. 29 | - **Vertex normals** are interpolated values that allow for smooth shading transitions across connected polygons. 30 | 31 | ## 3D Transformations 🔄📍🌀 32 | Transformations enable object manipulation within a 3D scene. These are mathematically represented using matrices. 33 | 34 | ### **Translation** 📌📏🔼 35 | Moves an object along the x, y, and z axes: 36 | \[ T = \begin{bmatrix} 1 & 0 & 0 & T_x \\ 0 & 1 & 0 & T_y \\ 0 & 0 & 1 & T_z \\ 0 & 0 & 0 & 1 \end{bmatrix} \] 37 | 38 | ### **Scaling** 📊🔍📈 39 | Adjusts the size of an object relative to the origin: 40 | \[ S = \begin{bmatrix} S_x & 0 & 0 & 0 \\ 0 & S_y & 0 & 0 \\ 0 & 0 & S_z & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \] 41 | 42 | ### **Rotation** 🔁🔄⏳ 43 | Defines rotation about an axis: 44 | - **X-axis rotation:** 45 | \[ R_x = \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos(\theta) & -\sin(\theta) & 0 \\ 0 & \sin(\theta) & \cos(\theta) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \] 46 | - **Y-axis rotation:** 47 | \[ R_y = \begin{bmatrix} \cos(\theta) & 0 & \sin(\theta) & 0 \\ 0 & 1 & 0 & 0 \\ -\sin(\theta) & 0 & \cos(\theta) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \] 48 | 49 | ## Rendering Pipeline 🖼️🚀🔲 50 | The rendering pipeline is the process of converting 3D models into 2D images through: 51 | 1. **Vertex Processing:** Applying transformations to vertices. 52 | 2. **Clipping:** Eliminating elements outside the view frustum. 53 | 3. **Rasterization:** Converting vector representations into raster images. 54 | 4. **Fragment Processing:** Assigning colors and textures. 55 | 5. **Output Merging:** Compositing the final image. 56 | 57 | ## Texture Mapping 🎨🖌️🧩 58 | Textures enhance realism by overlaying 2D images onto 3D surfaces. 59 | 60 | ## Light Sources in 3D Graphics 💡🔦🌟 61 | Lighting models simulate real-world illumination: 62 | 1. **Ambient Light:** Uniform, non-directional light. 63 | 2. **Diffuse Light:** Scattered light producing soft shading. 64 | 3. **Specular Light:** Reflective highlights on surfaces. 65 | 4. **Point Light:** Radiates light from a single point. 66 | 5. **Spotlight:** Emits light in a cone-shaped direction. 67 | 68 | ## 3D Modeling Techniques 🏗️🎭🔍 69 | 1. **Polygonal Modeling:** Constructing objects using polygonal meshes. 70 | 2. **NURBS (Non-Uniform Rational B-Splines):** Employs control points for smooth surfaces. 71 | 3. **Voxel Modeling:** Represents objects using volumetric pixels. 72 | 4. **Boolean Operations:** Uses union, intersection, and subtraction to manipulate shapes. 73 | 74 | ## Python Example: Creating a 3D Cube Using Matplotlib 🐍📊🎲 75 | ```python 76 | import numpy as np 77 | import matplotlib.pyplot as plt 78 | from mpl_toolkits.mplot3d.art3d import Poly3DCollection 79 | 80 | fig = plt.figure() 81 | ax = fig.add_subplot(111, projection='3d') 82 | 83 | # Define cube vertices 84 | vertices = np.array([[0, 0, 0], [1, 0, 0], [1, 1, 0], [0, 1, 0], 85 | [0, 0, 1], [1, 0, 1], [1, 1, 1], [0, 1, 1]]) 86 | faces = [[vertices[j] for j in [0,1,2,3]], [vertices[j] for j in [4,5,6,7]], 87 | [vertices[j] for j in [0,1,5,4]], [vertices[j] for j in [2,3,7,6]], 88 | [vertices[j] for j in [0,3,7,4]], [vertices[j] for j in [1,2,6,5]]] 89 | ax.add_collection3d(Poly3DCollection(faces, alpha=.5, edgecolor='r')) 90 | plt.show() 91 | ``` 92 | 93 | ## Assessment Questions 🎯📜🧐 94 | ### **Multiple-Choice Questions** 95 | 1. Which polygon type is most commonly used in 3D meshes? 96 | - A) Quadrilateral 97 | - B) Triangle ✅ 98 | - C) Pentagon 99 | - D) Hexagon 100 | 101 | 2. Which transformation alters an object's size? 102 | - A) Rotation 103 | - B) Scaling ✅ 104 | - C) Translation 105 | - D) Clipping 106 | 107 | ### **True/False Questions** 108 | 1. **A normal map physically deforms the geometry of a model.** (False) 109 | 2. **Perspective projection simulates human depth perception.** (True) 110 | 111 | ## Suggested Activities 📚🎮🛠️ 112 | - Implement 3D transformations using Python. 113 | - Design a 3D model in Blender and apply texture mapping. 114 | - Analyze the impact of different light sources in a 3D scene. 115 | 116 | ## Research Topics 📖🔍🧠 117 | - Real-time rendering optimizations in modern graphics engines. 118 | - AI-assisted procedural texture generation. 119 | - The evolution of ray tracing for photorealistic rendering. 120 | 121 | -------------------------------------------------------------------------------- /07/Qs.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Advanced Concepts in Three-Dimensional Graphics 🎨🖥️🔺 5 | 6 | ## Introduction 🎭📐🕶️ 7 | Three-dimensional (3D) graphics extend two-dimensional (2D) representations by incorporating depth, enabling realistic simulations and visualizations in fields such as gaming, scientific modeling, and virtual reality. Unlike 2D graphics, 3D graphics use three coordinates (x, y, z) to define objects in space, allowing for intricate transformations, lighting, and rendering techniques. 8 | 9 | ## Coordinate Systems 🏗️📊🧭 10 | 3D graphics utilize two primary Cartesian coordinate systems: 11 | - **Left-handed coordinate system:** The positive z-axis extends away from the viewer. 12 | - **Right-handed coordinate system:** The positive z-axis extends toward the viewer. 13 | 14 | To determine the orientation of the z-axis: 15 | 1. Point the fingers of your **left or right hand** in the positive x direction. 16 | 2. Curl them in the positive y direction. 17 | 3. The direction of your thumb indicates the positive z-axis. 18 | 19 | ## Objects and Mesh Structures 🏗️🧩🖌️ 20 | ### **Vertices, Faces, and Meshes** 21 | - A **vertex** is a single point in 3D space defined by (x, y, z) coordinates. 22 | - A **face** is a polygonal surface that connects multiple vertices. 23 | - A **mesh** is a structured set of vertices, edges, and faces that defines the geometry of a 3D object. 24 | - The **triangle mesh** is the most common representation due to its computational efficiency in rendering and processing. 25 | 26 | ### **Normals and Shading** ✨💡🔦 27 | - **Face normals** are perpendicular vectors to a polygonal surface, crucial for shading calculations. 28 | - **Vertex normals** are interpolated values that allow for smooth shading transitions across connected polygons. 29 | 30 | ## 3D Transformations 🔄📍🌀 31 | Transformations enable object manipulation within a 3D scene. These are mathematically represented using matrices. 32 | 33 | ### **Translation** 📌📏🔼 34 | Moves an object along the x, y, and z axes: 35 | \[ T = \begin{bmatrix} 1 & 0 & 0 & T_x \\ 0 & 1 & 0 & T_y \\ 0 & 0 & 1 & T_z \\ 0 & 0 & 0 & 1 \end{bmatrix} \] 36 | 37 | ### **Scaling** 📊🔍📈 38 | Adjusts the size of an object relative to the origin: 39 | \[ S = \begin{bmatrix} S_x & 0 & 0 & 0 \\ 0 & S_y & 0 & 0 \\ 0 & 0 & S_z & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \] 40 | 41 | ### **Rotation** 🔁🔄⏳ 42 | Defines rotation about an axis: 43 | - **X-axis rotation:** 44 | \[ R_x = \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos(\theta) & -\sin(\theta) & 0 \\ 0 & \sin(\theta) & \cos(\theta) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \] 45 | - **Y-axis rotation:** 46 | \[ R_y = \begin{bmatrix} \cos(\theta) & 0 & \sin(\theta) & 0 \\ 0 & 1 & 0 & 0 \\ -\sin(\theta) & 0 & \cos(\theta) & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \] 47 | 48 | ## Multiple-Choice Questions (MCQs) 🎯📜🧐 49 | 50 | ### Easy Questions ✅ 51 | 1. Which coordinate system is commonly used in 3D graphics? 52 | - A) Polar 53 | - B) Cartesian 54 | - C) Cylindrical 55 | - D) Spherical 56 | 57 | 2. What is the primary shape used in a triangle mesh? 58 | - A) Square 59 | - B) Triangle 60 | - C) Hexagon 61 | - D) Circle 62 | 63 | 3. Which transformation is used to change the size of an object? 64 | - A) Translation 65 | - B) Scaling 66 | - C) Rotation 67 | - D) Reflection 68 | 69 | ### Medium Questions ⚖️ 70 | 4. What is the purpose of a normal in 3D graphics? 71 | - A) Defines the color of an object 72 | - B) Determines shading and lighting behavior 73 | - C) Represents object motion 74 | - D) Stores texture information 75 | 76 | 5. What does a displacement map do in 3D graphics? 77 | - A) Changes the texture of an object 78 | - B) Alters the geometry by moving vertices 79 | - C) Controls surface reflectivity 80 | - D) Adds shadow effects 81 | 82 | 6. Which of the following is NOT a type of transformation matrix in 3D? 83 | - A) Translation 84 | - B) Rotation 85 | - C) Shearing 86 | - D) Scaling 87 | 88 | ### Hard Questions 🏆 89 | 7. Which rendering stage converts 3D objects into 2D pixels? 90 | - A) Rasterization 91 | - B) Vertex Processing 92 | - C) Clipping 93 | - D) Shading 94 | 95 | 8. How does ray tracing improve realism in 3D rendering? 96 | - A) By increasing polygon count 97 | - B) By simulating light reflection and refraction 98 | - C) By reducing the number of light sources 99 | - D) By using simplified shading algorithms 100 | 101 | 9. What is the computational complexity of voxel-based rendering in an NxNxN grid? 102 | - A) O(N) 103 | - B) O(N^2) 104 | - C) O(N^3) 105 | - D) O(log N) 106 | 107 | ## Answers 📝 108 | 109 | 1. **B) Cartesian** 110 | 2. **B) Triangle** 111 | 3. **B) Scaling** 112 | 4. **B) Determines shading and lighting behavior** 113 | 5. **B) Alters the geometry by moving vertices** 114 | 6. **C) Shearing** 115 | 7. **A) Rasterization** 116 | 8. **B) By simulating light reflection and refraction** 117 | 9. **C) O(N^3)** 118 | 119 | 🚀 -------------------------------------------------------------------------------- /07/extra/Chapter 07-3d basics.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/07/extra/Chapter 07-3d basics.pptx -------------------------------------------------------------------------------- /07/extra/Chapter07-Three Dimensional Graphics.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/07/extra/Chapter07-Three Dimensional Graphics.docx -------------------------------------------------------------------------------- /08/08.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Advanced Medical Applications of Augmented and Virtual Reality 🎭🩺🖥️ 5 | 6 | ## Table of Contents 7 | 1. Introduction 🎯📌📝 8 | 2. Computational Applications in Medicine 🏥💻📊 9 | 3. Role of Computer Graphics in Healthcare 🎨🖥️👨‍⚕️ 10 | 4. Medical Imaging Techniques and Innovations 📷🩻🔬 11 | 5. Advanced Algorithms and Techniques in Medical Imaging 🧠📊🔍 12 | 6. Emerging Applications and Innovative Research 🌟📚🔬 13 | 7. Virtual Reality (VR) and Future Healthcare Trends 🎮🧑‍⚕️🚀 14 | 8. Augmented Reality (AR) in Modern Medicine 👓🛠️💡 15 | 9. Mixed Reality (MR) and Extended Reality (XR) 🌍🔄🖥️ 16 | 10. Key Enabling Technologies in AR/VR 🖥️🔧🚀 17 | 11. Conclusion 🔚📌🎉 18 | 12. Multiple-Choice Questions (MCQs) 🏆📜🤔 19 | 13. True/False Questions ✅❌💡 20 | 14. Research Trends and Future Directions 🔬📖🚀 21 | 22 | --- 23 | 24 | ## 1. Introduction 🎭🩺🖥️ 25 | The integration of computer graphics, visualization, and virtual environments into medical applications has significantly enhanced healthcare services. These technologies facilitate diagnosis, surgical planning, therapeutic interventions, and medical training. Augmented Reality (AR) and Virtual Reality (VR) offer immersive and interactive solutions that optimize medical procedures, improve patient outcomes, and transform traditional methodologies. 🎯📌📝 26 | 27 | --- 28 | 29 | ## 2. Computational Applications in Medicine 🏥💻📊 30 | Computers serve as indispensable tools in the medical field, contributing to: 31 | - **Hospital Information Systems:** Efficient management of patient records, resource allocation, and clinical workflow automation. 32 | - **Data Analytics in Medicine:** Leveraging machine learning and big data for predictive analysis and evidence-based medicine. 33 | - **Automated Laboratory Systems:** Enhancing diagnostic accuracy and processing speed in clinical tests. 34 | - **Computer-Assisted Diagnosis (CAD):** AI-powered decision-support systems that augment physician expertise. 35 | - **Intelligent Critical Care Monitoring:** Real-time analysis of patient vitals for precision interventions. 36 | - **Optimized Pharmacotherapy:** AI-driven medication planning to individualize drug regimens. 📈📊💊 37 | 38 | --- 39 | 40 | ## 3. Role of Computer Graphics in Healthcare 🎨🖥️👨‍⚕️ 41 | Computer graphics play a transformative role in modern medicine through: 42 | - **Medical Training Enhancements:** High-fidelity simulators enable hands-on practice for medical professionals. 43 | - **Advanced 3D Anatomical Models:** Interactive digital twins assist in anatomy education and preoperative planning. 44 | - **Immersive Medical Simulations:** Virtual patient interactions provide realistic scenarios for clinical skill development. 45 | - **Telemedicine and Remote Surgery:** Real-time visualization tools facilitate distant consultations and surgical collaborations. 🏥🔬👨‍⚕️ 46 | 47 | --- 48 | 49 | ## 4. Medical Imaging Techniques and Innovations 📷🩻🔬 50 | Advanced imaging technologies enable detailed visualization of internal structures, improving diagnosis and treatment planning. Key modalities include: 51 | - **X-Ray Radiography:** Conventional imaging for assessing skeletal structures and lung conditions. 52 | - **Computed Tomography (CT):** Multi-slice 3D imaging providing detailed cross-sectional views. 53 | - **Magnetic Resonance Imaging (MRI):** Non-invasive imaging for soft tissue evaluation using magnetic fields and radio waves. 54 | - **Ultrasonography (U/S):** Real-time imaging leveraging acoustic wave propagation. 55 | - **Positron Emission Tomography (PET):** Functional imaging for metabolic and oncological studies. 🔍🔬🧠 56 | 57 | --- 58 | 59 | ## 5. Advanced Algorithms and Techniques in Medical Imaging 🧠📊🔍 60 | ### Image Processing and Computational Techniques 61 | - **Filtering and Segmentation:** Pre-processing methodologies for noise reduction and feature extraction. 62 | - **Volume Rendering and Visualization:** Techniques for generating intuitive 3D reconstructions. 63 | - **Multimodal Image Fusion:** Integrating different imaging modalities for comprehensive assessment. 64 | - **Biomechanical Soft Tissue Modeling:** Simulating organ and tissue properties for surgical applications. 📊📡📌 65 | 66 | --- 67 | 68 | ## 6. Emerging Applications and Innovative Research 🌟📚🔬 69 | ### Education and Training Technologies 70 | - **Virtual Cadaver Exploration:** Interactive 3D anatomy study for medical students. 71 | - **Augmented Reality Surgical Simulators:** Hands-on practice with real-time feedback. 72 | 73 | ### Diagnostic and Interventional Advances 74 | - **AI-Augmented Medical Imaging:** Machine learning algorithms enhance diagnostic precision. 75 | - **Virtual Endoscopy Techniques:** Non-invasive visualization of internal organs and structures. 🚀🔍🧑‍⚕️ 76 | 77 | ### Surgical and Therapeutic Innovations 78 | - **Image-Guided Robotic Surgery:** Real-time augmented visualization enhances surgical accuracy. 79 | - **Rehabilitative VR Therapy:** Motion-tracking and gamified therapy for patient recovery. 🏆🦾📈 80 | 81 | --- 82 | 83 | ## 7. Virtual Reality (VR) and Future Healthcare Trends 🎮🧑‍⚕️🚀 84 | VR technologies provide transformative solutions in: 85 | - **Surgical Skill Training:** Simulated operating environments for procedural mastery. 86 | - **Patient Pain Management:** Distraction therapy via immersive virtual environments. 87 | - **Cognitive and Psychological Interventions:** VR-based treatment for PTSD and neurorehabilitation. 🎭🧠🏆 88 | 89 | --- 90 | 91 | ## 8. Augmented Reality (AR) in Modern Medicine 👓🛠️💡 92 | AR augments physical environments with digital overlays, impacting: 93 | - **Telemedicine and Remote Consultation:** Enhanced visualization for patient examinations. 94 | - **Augmented Surgery:** Real-time holographic overlays for precision-guided operations. 95 | - **Medical Education:** Interactive content enriches learning and comprehension. 🏥📚📈 96 | 97 | --- 98 | 99 | ## 9. Mixed Reality (MR) and Extended Reality (XR) 🌍🔄🖥️ 100 | ### Mixed Reality (MR) 101 | - **Seamless Integration of Physical and Digital Elements:** Used in surgical simulations and interactive medical training. 102 | 103 | ### Extended Reality (XR) 104 | - **Encompasses VR, AR, and MR Technologies:** Facilitates complex medical visualizations and procedural planning. 🏆🎭🔄 105 | 106 | --- 107 | 108 | ## 10. Key Enabling Technologies in AR/VR 🖥️🔧🚀 109 | - **SLAM (Simultaneous Localization and Mapping):** Fundamental for markerless AR applications. 110 | - **Eye-Tracking and Gaze-Based Interaction:** Enhances realism and user engagement in VR. 111 | - **Haptic Feedback Mechanisms:** Improves tactile simulation and surgical training. 112 | - **AI-Powered Medical Simulations:** Intelligent systems for predictive diagnostics and personalized treatment. 🤖📡📊 113 | 114 | --- 115 | 116 | ## 11. Conclusion 🔚📌🎉 117 | The intersection of AR, VR, and MR with medicine is revolutionizing clinical practice, education, and research. The continued integration of AI and immersive technologies will drive future advancements, enhancing patient care and medical training. 📚🛠️🚀 -------------------------------------------------------------------------------- /08/Qs.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Advanced Medical Applications of Augmented and Virtual Reality 🎭🩺🖥️ 5 | 6 | ## Table of Contents 7 | 1. Introduction 🎯📌📝 8 | 2. Computational Applications in Medicine 🏥💻📊 9 | 3. Role of Computer Graphics in Healthcare 🎨🖥️👨‍⚕️ 10 | 4. Medical Imaging Techniques and Innovations 📷🩻🔬 11 | 5. Advanced Algorithms and Techniques in Medical Imaging 🧠📊🔍 12 | 6. Emerging Applications and Innovative Research 🌟📚🔬 13 | 7. Virtual Reality (VR) and Future Healthcare Trends 🎮🧑‍⚕️🚀 14 | 8. Augmented Reality (AR) in Modern Medicine 👓🛠️💡 15 | 9. Mixed Reality (MR) and Extended Reality (XR) 🌍🔄🖥️ 16 | 10. Key Enabling Technologies in AR/VR 🖥️🔧🚀 17 | 11. Conclusion 🔚📌🎉 18 | 12. Multiple-Choice Questions (MCQs) 🏆📜🤔 19 | 13. True/False Questions ✅❌💡 20 | 14. Research Trends and Future Directions 🔬📖🚀 21 | 22 | --- 23 | 24 | ## Multiple-Choice Questions (MCQs) 🏆📜🤔 25 | 26 | ### Easy Questions 27 | 1. What does VR stand for? 28 | - a) Virtual Radiology 29 | - b) Virtual Reality 30 | - c) Vision Rendering 31 | - d) Visual Recognition 32 | 33 | 2. Which of the following is a common use of AR in medicine? 34 | - a) Playing video games 35 | - b) Enhancing surgical precision 36 | - c) Watching movies 37 | - d) Listening to music 38 | 39 | 3. Which imaging technique is best suited for examining soft tissues? 40 | - a) X-Ray 41 | - b) CT Scan 42 | - c) MRI 43 | - d) PET Scan 44 | 45 | 4. Augmented Reality (AR) ______ real-world environments. 46 | - a) Replaces 47 | - b) Enhances 48 | - c) Ignores 49 | - d) Destroys 50 | 51 | 5. What is the function of SLAM in AR? 52 | - a) Storing patient records 53 | - b) Environment mapping and spatial tracking 54 | - c) Generating holographic interfaces 55 | - d) Video compression 56 | 57 | ### Medium Questions 58 | 6. Which of the following is NOT a benefit of using VR in medical training? 59 | - a) Reduced need for cadavers 60 | - b) Improved patient care 61 | - c) Enhanced motor skills 62 | - d) Increased radiation exposure 63 | 64 | 7. How does haptic feedback improve VR simulations? 65 | - a) By reducing processing speed 66 | - b) By providing tactile sensations 67 | - c) By increasing video resolution 68 | - d) By decreasing system latency 69 | 70 | 8. What is the key advantage of AI-powered medical imaging? 71 | - a) Reduced hospital costs 72 | - b) Enhanced diagnostic accuracy 73 | - c) Increased reliance on manual interpretation 74 | - d) Elimination of all human involvement 75 | 76 | 9. Which AR device is primarily used for medical applications? 77 | - a) Microsoft HoloLens 78 | - b) PlayStation VR 79 | - c) Google Chromecast 80 | - d) Oculus Quest 81 | 82 | 10. In medical imaging, PET scans are primarily used for: 83 | - a) Bone fractures 84 | - b) Soft tissue injuries 85 | - c) Cancer detection 86 | - d) Measuring blood pressure 87 | 88 | ### Hard Questions 89 | 11. What does the term "image fusion" refer to in medical imaging? 90 | - a) The combination of multiple images from different modalities 91 | - b) The enhancement of a single image 92 | - c) The elimination of redundant data 93 | - d) The automatic deletion of faulty images 94 | 95 | 12. Which of the following best describes volumetric visualization in medical imaging? 96 | - a) Creating 2D images from 3D scans 97 | - b) Producing high-resolution X-ray images 98 | - c) Rendering 3D representations of anatomical structures 99 | - d) Enhancing low-resolution CT scans 100 | 101 | 13. What is a primary limitation of VR-assisted surgery? 102 | - a) High costs and required infrastructure 103 | - b) Lack of available surgical tools 104 | - c) No impact on surgical outcomes 105 | - d) Reduced visualization capabilities 106 | 107 | 14. Which of these technologies is essential for markerless AR? 108 | - a) QR codes 109 | - b) SLAM 110 | - c) RFID tags 111 | - d) Barcodes 112 | 113 | 15. The main purpose of eye-tracking in VR is to: 114 | - a) Detect motion sickness 115 | - b) Improve field of view rendering 116 | - c) Track user head position 117 | - d) Reduce power consumption 118 | 119 | ## **Answers** ✅❌💡 120 | 121 | 1. b) Virtual Reality 122 | 2. b) Enhancing surgical precision 123 | 3. c) MRI 124 | 4. b) Enhances 125 | 5. b) Environment mapping and spatial tracking 126 | 6. d) Increased radiation exposure 127 | 7. b) By providing tactile sensations 128 | 8. b) Enhanced diagnostic accuracy 129 | 9. a) Microsoft HoloLens 130 | 10. c) Cancer detection 131 | 11. a) The combination of multiple images from different modalities 132 | 12. c) Rendering 3D representations of anatomical structures 133 | 13. a) High costs and required infrastructure 134 | 14. b) SLAM 135 | 15. b) Improve field of view rendering 136 | 137 | 🚀📖 -------------------------------------------------------------------------------- /08/extra/Chapter-11-Introduction to medical applications.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/08/extra/Chapter-11-Introduction to medical applications.docx -------------------------------------------------------------------------------- /08/extra/Introduction AR-VR-v6.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/08/extra/Introduction AR-VR-v6.pptx -------------------------------------------------------------------------------- /09/09.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | 5 | # Chapter 9: Data Visualization 6 | 7 | ## Introduction 🎨📊✨ 8 | 9 | Data visualization is an essential discipline in modern data science, enabling analysts and decision-makers to interpret complex datasets effectively. With the exponential growth of digital information, the ability to present data in a meaningful and visually compelling manner has become indispensable. The proliferation of big data, artificial intelligence, and digital transformation necessitates advanced visualization techniques to extract insights and facilitate communication across various domains. 10 | 11 | Scientific visualization, particularly in 3D modeling and real-time analytics, has been instrumental in disciplines such as medical imaging, geospatial analysis, and computational simulations. As technology evolves, so does the field of data visualization, expanding its applications beyond traditional business intelligence to domains such as cybersecurity, machine learning, and IoT analytics. 12 | 13 | ## Defining Data Visualization 📈🔍🎯 14 | 15 | **Data visualization** is the process of transforming raw data into graphical formats that allow for better understanding, pattern recognition, and decision-making. This field combines principles of statistics, design, and cognitive psychology to create effective representations of information. 16 | 17 | Key advantages of data visualization include: 18 | - Enhancing the comprehension of complex datasets. 19 | - Identifying correlations, anomalies, and trends. 20 | - Facilitating storytelling and persuasive data-driven arguments. 21 | - Supporting decision-making in scientific, financial, and business contexts. 22 | 23 | ## The Data Visualization Workflow ⚙️📑💡 24 | 25 | ### 1. Data Processing and Refinement 26 | Before visualization, data must be preprocessed to ensure integrity and relevance. This involves: 27 | - Cleaning inconsistencies and handling missing values. 28 | - Structuring data into meaningful formats. 29 | - Applying transformations to derive new insights. 30 | 31 | ### 2. Mapping Data to Visual Encodings 32 | The selection of an appropriate visualization depends on: 33 | - The nature of the dataset (categorical, temporal, geospatial, etc.). 34 | - The intended audience and level of expertise. 35 | - The need for interactivity and real-time updates. 36 | 37 | ### 3. Human Perception and Cognitive Load 38 | Effective visualization takes into account how humans process visual information. Considerations include: 39 | - Using Gestalt principles to structure visual elements logically. 40 | - Avoiding cognitive overload by minimizing unnecessary details. 41 | - Emphasizing key takeaways through color, contrast, and positioning. 42 | 43 | ## Selecting Effective Visualizations 🧐📌📊 44 | According to **Stephen Few (2009)**, effective visualizations should: 45 | - Immediately capture the audience’s attention. 46 | - Communicate insights clearly and accurately. 47 | - Facilitate comparisons and highlight relationships. 48 | - Follow best practices in readability and accessibility. 49 | 50 | ## Categories of Data Visualizations 🏷️📊📜 51 | 52 | ### 1. Explanatory Visuals 53 | Designed to clarify specific insights, answer questions, and support arguments in reports, presentations, and dashboards. 54 | 55 | ### 2. Exploratory Visuals 56 | Enable users to interact with data, identify patterns, and uncover hidden relationships through dynamic interfaces. 57 | 58 | ### 3. Analytical Visuals 59 | Assist in deriving predictions and strategic conclusions by modeling and simulating complex datasets. 60 | 61 | ## Data Relationships and Visualization Techniques 🔗📊📉 62 | 63 | 1. **Ranking**: Ordering data based on magnitude (e.g., sales leaderboards). 64 | 2. **Deviation**: Measuring variance from expected values (e.g., performance deviations). 65 | 3. **Time Series**: Observing trends over time (e.g., stock market movements). 66 | 4. **Distribution**: Understanding frequency and spread (e.g., histograms, box plots). 67 | 5. **Nominal Comparison**: Comparing categorical datasets (e.g., grouped bar charts). 68 | 6. **Correlation**: Identifying relationships between variables (e.g., scatter plots). 69 | 7. **Part-to-Whole Relationships**: Representing proportions (e.g., pie charts, treemaps). 70 | 71 | ## Visualization Techniques 🎨📈📊 72 | 73 | ### Common Chart Types 74 | - **Bar Charts**: Compare discrete values with clarity. 75 | - **Histograms**: Display frequency distributions. 76 | - **Pie Charts**: Represent proportions (best with limited categories). 77 | - **Scatter Plots**: Reveal correlations between variables. 78 | - **Heat Maps**: Visualize data intensity using color variations. 79 | - **Line Charts**: Showcase trends over time. 80 | - **Bubble Charts**: Represent multidimensional data with size and position. 81 | - **Radar Charts**: Compare multiple metrics across categories. 82 | - **Waterfall Charts**: Illustrate cumulative effects in sequential data. 83 | - **Tree Maps**: Display hierarchical structures. 84 | - **Area Charts**: Show trends with volume emphasis. 85 | 86 | ## Visual Encoding and Semantics 🖌️📐📏 87 | Visual representation is influenced by fundamental elements: 88 | - **Points**: Representing individual data values. 89 | - **Lines**: Depicting relationships and trends. 90 | - **Planes**: Indicating spatial hierarchies. 91 | 92 | ## The Role of Color in Visualization 🌈🎨👀 93 | Color enhances comprehension but should be used strategically. Consider: 94 | - **Hue**: Differentiates categories. 95 | - **Brightness**: Highlights intensity variations. 96 | - **Saturation**: Adjusts clarity and emphasis. 97 | 98 | ### Choosing the Right Color Scheme 99 | 1. **Sequential Palettes**: Best for gradient-based, ordinal data. 100 | 2. **Diverging Palettes**: Highlight positive and negative deviations. 101 | 3. **Qualitative Palettes**: Differentiate categorical values. 102 | 103 | ### Accessibility Considerations 104 | - Use high contrast for readability. 105 | - Incorporate colorblind-friendly palettes. 106 | - Supplement color distinctions with patterns or annotations. 107 | 108 | ## Data Storytelling 📖📊🎭 109 | **Data storytelling** integrates analytical findings with narrative techniques to enhance engagement. Effective storytelling involves: 110 | - **Data**: Extracting and validating meaningful insights. 111 | - **Visualization**: Structuring visuals to support comprehension. 112 | - **Narrative**: Creating a logical progression of insights to persuade and inform. 113 | 114 | ## Infographics: A Visual Communication Medium 🖼️📝📢 115 | Infographics merge data visualization, text, and design elements to simplify complex information. They are particularly useful for: 116 | - Summarizing research findings and surveys. 117 | - Comparing and contrasting datasets. 118 | - Educating diverse audiences on technical topics. 119 | 120 | ### Types of Infographics 121 | 1. **Statistical**: Focused on numerical representation. 122 | 2. **Informational**: Providing structured explanations. 123 | 3. **Timeline-Based**: Depicting chronological events. 124 | 4. **Process-Oriented**: Outlining step-by-step workflows. 125 | 5. **Geographic**: Visualizing spatial data. 126 | 6. **Comparison**: Highlighting differences between entities. 127 | 7. **Hierarchical**: Organizing data into nested relationships. 128 | 8. **List-Based**: Presenting key takeaways effectively. 129 | 9. **Resume Infographics**: Visually summarizing professional experience. 130 | 131 | ## Typography in Data Visualization 🔠🔡✍️ 132 | Typography impacts the readability and effectiveness of visual representations. Considerations include: 133 | - **Serif Fonts**: Suitable for formal, print-based applications. 134 | - **Sans-Serif Fonts**: Optimal for digital screens and UI design. 135 | - **Font Size & Weight**: Ensuring clarity and emphasis in labels and annotations. 136 | 137 | ## Conclusion 🏁🔎🎯 138 | Data visualization serves as a critical tool for translating raw data into actionable insights. By leveraging principles of design, cognitive science, and statistical analysis, professionals can create impactful visual narratives that enhance decision-making, improve communication, and drive innovation across industries. 139 | 140 | -------------------------------------------------------------------------------- /09/Qs.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Data Visualization 5 | 6 | ## Multiple Choice Questions (MCQs) 📚📝 7 | 8 | ### Easy Questions 9 | 10 | 1. What is the primary purpose of data visualization? 11 | - A) To store data efficiently 12 | - B) To enhance the appearance of data 13 | - C) To communicate data insights effectively 14 | - D) To replace statistical analysis 15 | 16 | 2. Which chart type is best suited for showing trends over time? 17 | - A) Bar Chart 18 | - B) Pie Chart 19 | - C) Line Chart 20 | - D) Scatter Plot 21 | 22 | 3. What does a pie chart primarily represent? 23 | - A) Trends over time 24 | - B) Distribution of a dataset 25 | - C) Part-to-whole relationships 26 | - D) Data correlations 27 | 28 | 4. Which of the following is NOT a common data visualization technique? 29 | - A) Scatter plot 30 | - B) Heatmap 31 | - C) Line chart 32 | - D) Blockchain 33 | 34 | 5. Which visual encoding element represents relationships and trends? 35 | - A) Points 36 | - B) Lines 37 | - C) Planes 38 | - D) Tables 39 | 40 | ### Medium Questions 41 | 42 | 6. What is the primary advantage of using a heatmap in data visualization? 43 | - A) It helps track time-series data 44 | - B) It highlights data intensity through color variations 45 | - C) It replaces numerical data completely 46 | - D) It simplifies all types of datasets 47 | 48 | 7. What is the key difference between bar charts and histograms? 49 | - A) Histograms use categories, bar charts use continuous data 50 | - B) Histograms represent frequency distributions, while bar charts compare categorical data 51 | - C) Bar charts can only have vertical bars 52 | - D) Bar charts require numerical labels 53 | 54 | 8. Which color scheme is best for representing sequential numerical data? 55 | - A) Monochromatic 56 | - B) Diverging 57 | - C) Qualitative 58 | - D) Complementary 59 | 60 | 9. What principle of human perception should be considered when designing a visualization? 61 | - A) Using as many colors as possible 62 | - B) Structuring elements using Gestalt principles 63 | - C) Avoiding interactivity in visualizations 64 | - D) Making every element the same size 65 | 66 | 10. In data storytelling, which element is responsible for making insights engaging? 67 | - A) Visualization 68 | - B) Data processing 69 | - C) Narrative 70 | - D) Annotation 71 | 72 | ### Hard Questions 73 | 74 | 11. What type of data relationship does a scatter plot primarily depict? 75 | - A) Nominal comparisons 76 | - B) Correlation 77 | - C) Ranking 78 | - D) Distribution 79 | 80 | 12. What visualization technique is most effective for hierarchical data? 81 | - A) Line chart 82 | - B) Tree map 83 | - C) Bubble chart 84 | - D) Radar chart 85 | 86 | 13. Which of the following is NOT a key component of an effective data visualization? 87 | - A) Clarity 88 | - B) Interactivity 89 | - C) Aesthetic embellishments 90 | - D) Accessibility 91 | 92 | 14. What is a major limitation of using pie charts? 93 | - A) They cannot display percentages 94 | - B) They are ineffective for comparing multiple categories 95 | - C) They require numerical values only 96 | - D) They work best for time-series data 97 | 98 | 15. What is a key benefit of using a diverging color palette? 99 | - A) It helps distinguish between extreme values 100 | - B) It provides a single-color gradient 101 | - C) It makes charts more visually appealing 102 | - D) It simplifies categorical data representation 103 | 104 | ## Answers 105 | 106 | 1. C 107 | 2. C 108 | 3. C 109 | 4. D 110 | 5. B 111 | 6. B 112 | 7. B 113 | 8. A 114 | 9. B 115 | 10. C 116 | 11. B 117 | 12. B 118 | 13. C 119 | 14. B 120 | 15. A 121 | -------------------------------------------------------------------------------- /09/extra/CH-09-Data visualization.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/09/extra/CH-09-Data visualization.docx -------------------------------------------------------------------------------- /10/10.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | ## Chapter 10: Digital Image Processing 🎨📷🖥️ 5 | 6 | ### 10.1 Introduction to Digital Image Processing 🌟📊🔍 7 | 8 | Digital image processing is a specialized field within signal processing that involves the manipulation and analysis of digital images using computational techniques. It serves various applications, including medical imaging, satellite image analysis, and artificial intelligence-driven image recognition. 📡🧠📈 9 | 10 | Image processing can be broadly classified into: 11 | - **Analog Image Processing**: This involves processing analog signals, such as those found in television broadcasts and X-ray films. 12 | - **Digital Image Processing (DIP)**: This focuses on processing digital images, where image data is stored and manipulated using discrete numerical values. 13 | 14 | A digital image is typically represented as a two-dimensional array of pixels, with each pixel containing specific intensity or color information. 🖼️🧩🎨 15 | 16 | ### 10.2 Digital Image Processing vs. Computer Graphics 🤖💾📡 17 | 18 | | **Field** | **Description** | 19 | |----------|---------------| 20 | | **Image Processing** | Focuses on modifying and analyzing existing images (e.g., noise reduction, feature extraction). 🖌️🔍🖼️ | 21 | | **Computer Vision** | Extracts meaningful information from images for decision-making (e.g., facial recognition, object detection). 👀🧠📸 | 22 | | **Computer Graphics** | Concerned with the creation and rendering of images from mathematical models (e.g., 3D rendering in simulations and games). 🎮📐🖥️ | 23 | 24 | ### 10.3 Key Stages in Digital Image Processing 📷🔬💡 25 | 26 | 1. **Image Acquisition**: Capturing an image using sensors and converting it into a digital format. 📸📡📊 27 | 2. **Preprocessing**: Removing noise, enhancing contrast, and adjusting colors for better analysis. 🎚️🎨🔍 28 | 3. **Image Enhancement**: Improving visual quality by sharpening, smoothing, or adjusting brightness levels. ✨🖌️🎛️ 29 | 4. **Image Restoration**: Correcting distortions or artifacts using mathematical modeling. 🔧📉🔄 30 | 5. **Segmentation**: Partitioning an image into meaningful regions (e.g., separating objects from the background). 🗂️✂️📷 31 | 6. **Feature Extraction**: Identifying critical features, such as edges, textures, and patterns. 🔍📊📏 32 | 7. **Classification & Recognition**: Using AI techniques to categorize and identify objects within an image. 🤖🧠✅ 33 | 34 | ### 10.4 Types of Digital Images 🖼️🎨🔢 35 | 36 | #### **Binary Image** ⚫⚪🟦 37 | - Each pixel is either black (0) or white (1). 38 | - Example: QR codes, fingerprint scans. 🔳📄👆 39 | 40 | #### **Grayscale Image** ⚫⚪📸 41 | - Each pixel has an intensity value ranging from 0 (black) to 255 (white). 42 | - Example: X-ray images, thermal imaging. 🔬📡👁️ 43 | 44 | #### **RGB Color Image** 🌈🖌️🖼️ 45 | - Utilizes a 24-bit depth, with 8 bits assigned to each of the Red, Green, and Blue channels. 46 | - Example: Digital photographs, computer-generated imagery (CGI). 📷🎭🎞️ 47 | 48 | #### **Indexed Color Image** 🎨💾📊 49 | - Uses a lookup table (LUT) to reference color values, reducing memory consumption. 50 | - Example: GIF images, low-memory graphics. 🖼️🔍🗂️ 51 | 52 | ### 10.5 Analog to Digital Conversion (ADC) 🔄📡📊 53 | 54 | Converting an analog image to a digital format involves two main steps: 55 | 1. **Sampling**: Capturing image intensity at discrete intervals. 📏🎚️📊 56 | 2. **Quantization**: Assigning discrete numerical values to sampled intensities. 🔢🖼️🎛️ 57 | 58 | ### 10.6 Applications of Digital Image Processing 🏥🛰️🛡️ 59 | 60 | #### **Medical Imaging** 🏥🩺📡 61 | - Enhancing X-rays, CT scans, and MRI images. 62 | - AI-powered diagnostic tools for disease detection. 🧠🔍💊 63 | 64 | #### **Remote Sensing** 🛰️🌍📡 65 | - Satellite image analysis for environmental monitoring and land classification. 66 | - Disaster prediction and damage assessment. 🌪️🌎📉 67 | 68 | #### **Machine Vision & Robotics** 🤖🔍📷 69 | - Object recognition in self-driving cars. 70 | - Automated quality control in manufacturing. 🚗⚙️🛠️ 71 | 72 | ### 10.7 Fundamental Concepts in Image Processing 📏🎨🖥️ 73 | 74 | #### **Image Resolution** 📸📏📈 75 | - The number of pixels in an image; higher resolution provides more detail but increases file size. 🖼️🔍📊 76 | 77 | #### **Aspect Ratio** 📐🖼️🔢 78 | - The proportional relationship between an image’s width and height. 📏📊🔄 79 | 80 | #### **Color Depth** 🎨🔢📷 81 | - The number of bits used per pixel: 82 | - **8-bit**: 256 colors. 83 | - **24-bit**: 16.7 million colors (True Color). 84 | - **32-bit**: 16.7 million colors + Alpha channel (for transparency). 🎭🎨💾 85 | 86 | ### 10.8 Noise in Digital Images 📡🔊🖼️ 87 | 88 | Noise introduces unwanted variations in an image, often caused by limitations in sensors, transmission errors, or data compression. 🚨🔍📉 89 | 90 | ### 10.9 Image Processing Techniques 🖌️🎨🔬 91 | 92 | #### **Image Enhancement** ✨📊🔍 93 | - **Sharpening**: Using edge detection techniques such as Laplacian filters. 94 | - **Smoothing**: Reducing noise through Gaussian blur or bilateral filtering. 🖼️🧼🔄 95 | 96 | ### 10.10 Emerging Trends in Image Processing 🚀📡🖼️ 97 | 98 | - **Deep Learning for Image Recognition**: CNNs power applications like facial recognition and autonomous driving. 🧠📸🤖 99 | - **AI-based Image Super-Resolution**: Converts low-quality images into high-resolution images using neural networks. 📊📈🎨 100 | - **3D Image Processing**: Used in CT scans, 3D modeling, and holographic displays. 🖥️📏🕶️ 101 | 102 | --- 103 | 104 | ## 📌 **Exercises** 🎯📖📝 105 | 106 | ### **Multiple Choice Questions (MCQs)** 107 | 108 | 1. Which of the following is NOT an image processing technique? 109 | - A) Edge detection 110 | - B) Histogram equalization 111 | - C) Sorting algorithms 112 | - D) Noise removal 113 | **✔ Answer:** C) Sorting algorithms 🎯 114 | 115 | 2. What is the standard bit depth for true color images? 116 | - A) 8-bit 117 | - B) 16-bit 118 | - C) 24-bit 119 | - D) 32-bit 120 | **✔ Answer:** C) 24-bit 📸 121 | 122 | 3. What is the purpose of image segmentation? 123 | - A) Enhancing colors 124 | - B) Compressing the image 125 | - C) Dividing an image into meaningful parts 126 | - D) Reducing file size 127 | **✔ Answer:** C) Dividing an image into meaningful parts ✂️ 128 | 129 | ### **True/False Questions** ✅❌ 130 | 131 | 1. Image quantization reduces the number of intensity levels in an image. **(True)** 🎨 132 | 2. JPEG is a lossless image compression technique. **(False)** 📂 133 | 3. Convolutional Neural Networks (CNNs) are widely used in image recognition. **(True)** 🤖 134 | 135 | -------------------------------------------------------------------------------- /10/Qs.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | --- 5 | 6 | # 📌 Multiple Choice Questions: Digital Image Processing 7 | 8 | ## 🟢 Easy Level 9 | 10 | 1. What does "DIP" stand for in the context of image processing? 11 | - A) Digital Information Processing 12 | - B) Digital Image Processing 13 | - C) Data Image Projection 14 | - D) Dynamic Image Processing 15 | 16 | 2. Which of the following is a key step in digital image processing? 17 | - A) Sorting 18 | - B) Compression 19 | - C) Image Enhancement 20 | - D) Both B and C 21 | 22 | 3. What is the smallest unit of a digital image? 23 | - A) Pixel 24 | - B) Voxel 25 | - C) Bit 26 | - D) Byte 27 | 28 | 4. What is the standard bit depth for true color images? 29 | - A) 8-bit 30 | - B) 16-bit 31 | - C) 24-bit 32 | - D) 32-bit 33 | 34 | 5. What is the purpose of image segmentation? 35 | - A) Enhancing colors 36 | - B) Compressing the image 37 | - C) Dividing an image into meaningful parts 38 | - D) Reducing file size 39 | 40 | 6. What is an indexed color image? 41 | - A) An image that uses a lookup table for colors 42 | - B) A grayscale image 43 | - C) A 3D image 44 | - D) A high-resolution image 45 | 46 | 7. Which of the following is an example of a binary image? 47 | - A) A colorful sunset photo 48 | - B) A black and white QR code 49 | - C) An infrared satellite image 50 | - D) An X-ray scan 51 | 52 | 8. What type of image processing technique is used to remove noise from an image? 53 | - A) Sharpening 54 | - B) Smoothing 55 | - C) Edge Detection 56 | - D) Segmentation 57 | 58 | 9. Which of the following file formats uses lossless compression? 59 | - A) JPEG 60 | - B) PNG 61 | - C) GIF 62 | - D) Both B and C 63 | 64 | 10. What is an application of digital image processing in security? 65 | - A) Crop Rotation 66 | - B) Facial Recognition 67 | - C) Weather Forecasting 68 | - D) Stock Market Analysis 69 | 70 | --- 71 | 72 | ## 🟡 Medium Level 73 | 74 | 11. What is the primary advantage of digital image processing over analog image processing? 75 | - A) It is cheaper 76 | - B) It avoids noise accumulation 77 | - C) It uses less power 78 | - D) It doesn’t require algorithms 79 | 80 | 12. In image restoration, what is the primary difference from image enhancement? 81 | - A) Image restoration is objective and based on models 82 | - B) Image restoration is purely subjective 83 | - C) Image restoration applies only to color images 84 | - D) Image restoration is faster 85 | 86 | 13. What type of noise is characterized by random variations in brightness and color? 87 | - A) Salt and Pepper Noise 88 | - B) Gaussian Noise 89 | - C) Poisson Noise 90 | - D) Speckle Noise 91 | 92 | 14. What is the purpose of histogram equalization in image processing? 93 | - A) Reduce file size 94 | - B) Improve image contrast 95 | - C) Convert to grayscale 96 | - D) Remove motion blur 97 | 98 | 15. Which of the following is NOT a morphological operation? 99 | - A) Erosion 100 | - B) Dilation 101 | - C) Filtering 102 | - D) Closing 103 | 104 | 16. What technique is used in AI-based image recognition to detect patterns? 105 | - A) Fourier Transform 106 | - B) Convolutional Neural Networks (CNNs) 107 | - C) Edge Detection 108 | - D) Thresholding 109 | 110 | 17. What is the role of a lookup table (LUT) in image processing? 111 | - A) To store color information 112 | - B) To segment an image 113 | - C) To compress an image 114 | - D) To restore a damaged image 115 | 116 | 18. Which algorithm is commonly used for edge detection in images? 117 | - A) Sobel 118 | - B) Fourier 119 | - C) Huffman 120 | - D) PCA 121 | 122 | 19. What is a key application of remote sensing in image processing? 123 | - A) Digital Painting 124 | - B) Land Use Classification 125 | - C) Face Detection 126 | - D) QR Code Scanning 127 | 128 | 20. Which format supports high dynamic range (HDR) images? 129 | - A) BMP 130 | - B) PNG 131 | - C) EXR 132 | - D) GIF 133 | 134 | --- 135 | 136 | ## 🔴 Hard Level 137 | 138 | 21. In an 8-bit grayscale image, how many possible intensity levels exist? 139 | - A) 128 140 | - B) 256 141 | - C) 512 142 | - D) 1024 143 | 144 | 22. What technique is used in frequency domain filtering? 145 | - A) Convolution 146 | - B) Fourier Transform 147 | - C) Gaussian Blur 148 | - D) Bitwise Operations 149 | 150 | 23. In image sampling, increasing the sampling rate results in: 151 | - A) Lower resolution 152 | - B) Higher resolution 153 | - C) No change in resolution 154 | - D) Image distortion 155 | 156 | 24. Which compression technique discards image data permanently? 157 | - A) Huffman Coding 158 | - B) JPEG 159 | - C) PNG 160 | - D) Run-Length Encoding 161 | 162 | 25. Which of the following is a real-world application of AI-based image processing? 163 | - A) Oil Refining 164 | - B) Self-Driving Cars 165 | - C) Quantum Computing 166 | - D) Weather Forecasting 167 | 168 | 26. What is the primary goal of feature extraction in image processing? 169 | - A) Reduce noise 170 | - B) Extract meaningful patterns 171 | - C) Convert grayscale to color 172 | - D) Increase file size 173 | 174 | 27. What is an important feature of convolutional neural networks (CNNs) in image processing? 175 | - A) They use edge detection 176 | - B) They process images through layers of convolution 177 | - C) They apply only to grayscale images 178 | - D) They require no training 179 | 180 | 28. What is the key disadvantage of lossy compression in image processing? 181 | - A) It reduces file size too much 182 | - B) It permanently removes image data 183 | - C) It only applies to black-and-white images 184 | - D) It increases noise in an image 185 | 186 | 29. What is the role of dilation in morphological processing? 187 | - A) Shrinks objects in an image 188 | - B) Expands objects in an image 189 | - C) Removes color from an image 190 | - D) Enhances contrast 191 | 192 | 30. In digital image processing, what is the effect of applying a Gaussian blur? 193 | - A) Sharpens edges 194 | - B) Reduces noise and smoothens an image 195 | - C) Increases contrast 196 | - D) Enhances brightness 197 | 198 | 199 | 200 | # ✅ **Answers** 201 | 202 | 1. B 203 | 2. D 204 | 3. A 205 | 4. C 206 | 5. C 207 | 6. A 208 | 7. B 209 | 8. B 210 | 9. D 211 | 10. B 212 | 213 | 11. B 214 | 12. A 215 | 13. B 216 | 14. B 217 | 15. C 218 | 16. B 219 | 17. A 220 | 18. A 221 | 19. B 222 | 20. C 223 | 224 | 21. B 225 | 22. B 226 | 23. B 227 | 24. B 228 | 25. B 229 | 26. B 230 | 27. B 231 | 28. B 232 | 29. B 233 | 30. B 234 | 235 | 🚀 -------------------------------------------------------------------------------- /10/extra/Ch-10-image processing.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/10/extra/Ch-10-image processing.docx -------------------------------------------------------------------------------- /11/11.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Computer Vision 🚀📸🤖 5 | 6 | ## Introduction to Computer Vision 🎯📷🧠 7 | 8 | Computer vision is a rapidly evolving interdisciplinary field that focuses on developing algorithms and systems that enable computers to interpret and analyze digital images and videos. It integrates concepts from computer science, electrical engineering, mathematics, and artificial intelligence to extract meaningful insights from visual data. By leveraging advanced techniques such as deep learning, machine learning, and image processing, computer vision aims to replicate and even surpass human visual perception in various applications. 🔍🖥️📊 9 | 10 | ### Core Components of a Computer Vision System 🏗️📡🔢 11 | A computer vision system consists of two primary elements: 12 | 1. **Sensing Device** – A camera or image sensor that captures visual data. 13 | 2. **Processing Algorithm** – Software that interprets, classifies, and extracts meaningful information from images or video sequences. 14 | 15 | ## Key Concepts in Computer Vision 🤖🖼️📡 16 | - **Interdisciplinary Nature** – Combines AI, image processing, and mathematical modeling. 17 | - **Automation** – Enables systems to perform tasks that traditionally require human vision. 18 | - **Feature Extraction** – Identifies key patterns such as edges, textures, and motion. 19 | - **Algorithm Development** – Creates robust models for recognition, classification, and analysis. 20 | 21 | ## Hierarchical Structure of Computer Vision 📊🎯🔍 22 | Computer vision tasks can be categorized into three levels: 23 | 1. **Low-Level Vision** – Detects and extracts basic image features such as edges and texture. 24 | 2. **Mid-Level Vision** – Includes object detection, motion analysis, and 3D reconstruction. 25 | 3. **High-Level Vision** – Focuses on scene understanding, activity recognition, and interpretation of visual data. 🔬🖥️🎭 26 | 27 | ## Interdisciplinary Connections 🔗🤝💡 28 | Computer vision draws from various fields, including: 29 | - **Artificial Intelligence (AI)** – For decision-making and learning-based vision models. 30 | - **Deep Learning** – Enhances feature extraction and recognition capabilities. 31 | - **Image Processing** – Improves image quality and reduces noise for better analysis. 32 | - **Pattern Recognition** – Identifies repetitive structures and classifications within images. 33 | - **Neuroscience** – Provides insights into biological vision mechanisms. 34 | - **Signal Processing** – Analyzes and refines multi-dimensional visual data. 🎓📡📊 35 | 36 | ## Distinctions Between Related Fields 🤔📚🔍 37 | | **Field** | **Primary Focus** | 38 | |-----------|-----------------| 39 | | **Computer Graphics** | Synthesizing images from 3D models. | 40 | | **Computer Vision** | Deriving 3D models and understanding images. | 41 | | **Image Processing** | Modifying images for clarity and enhancement. | 42 | | **Machine Vision** | Industrial applications for automated inspection. | 43 | | **Pattern Recognition** | Statistical and AI-driven classification of visual elements. | 44 | 45 | ## Applications of Computer Vision 🚗🏥📊 46 | Computer vision has widespread applications, including: 47 | - **Healthcare** – Medical image analysis for disease detection. 🏥🔬🧬 48 | - **Manufacturing** – Automated defect detection and quality control. 🏭🔎✅ 49 | - **Autonomous Systems** – Self-driving cars and robotic navigation. 🚗🤖🗺️ 50 | - **Security & Surveillance** – Facial recognition and anomaly detection. 🕵️‍♂️📷🚓 51 | - **Agriculture** – Monitoring crop health using drone imagery. 🌾📡🚜 52 | - **Retail & Marketing** – Customer behavior analysis and automated checkout. 🛍️🧾🎥 53 | 54 | ## The Computer Vision Pipeline 🔄📷🖥️ 55 | A structured approach to processing visual data includes: 56 | 1. **Image Acquisition** – Capturing data using cameras and sensors. 📸🔍🖼️ 57 | 2. **Pre-Processing** – Enhancing images by removing noise and adjusting contrast. 🎨📊🎭 58 | 3. **Feature Extraction** – Identifying edges, key points, and motion patterns. ✏️🔬🔍 59 | 4. **Segmentation** – Dividing images into meaningful regions for further analysis. 🏗️📏🎭 60 | 5. **High-Level Processing** – Recognizing objects and classifying visual content. 🎯📡🔍 61 | 6. **Decision Making** – Applying algorithms for tasks like anomaly detection and recognition. 🎲✅📊 62 | 63 | ## Recognition and Analysis Tasks 🎭🔍📊 64 | - **Object Recognition** – Identifies and labels specific objects in an image. 📦🔎🖼️ 65 | - **Facial Recognition** – Matches facial features for identification. 👤📷🧑‍💻 66 | - **Optical Character Recognition (OCR)** – Converts printed or handwritten text into digital format. 📝🖥️📚 67 | - **Pose Estimation** – Determines an object's orientation within an image. 🏋️‍♂️📊📷 68 | - **Motion Analysis** – Tracks objects and predicts movement patterns. 🏃‍♂️🎥🔍 69 | - **3D Scene Reconstruction** – Generates 3D representations from 2D images. 🏗️📡🖥️ 70 | - **Image Restoration** – Enhances image quality by reducing noise and artifacts. 🎭📸📊 71 | 72 | ## Challenges in Computer Vision 🎢🛠️🔍 73 | Despite advancements, several challenges remain: 74 | - **Lighting Variability** – Changes in illumination can affect recognition accuracy. 💡🌒📷 75 | - **Occlusion** – Objects may be partially hidden, leading to incomplete recognition. 🚧🔍📸 76 | - **Scale Variability** – Objects appear different at varying distances. 📏📊🎥 77 | - **Complex Backgrounds** – Unwanted elements can interfere with analysis. 🏙️🖥️🔍 78 | - **Real-Time Constraints** – Some applications require instantaneous processing. ⏳📡🚀 79 | 80 | ## Emerging Trends in Computer Vision 🔮📊💡 81 | - **Edge Computing for Vision** – Running vision algorithms directly on edge devices for efficiency. 📱🖥️📡 82 | - **3D Vision Enhancement** – Advancements in LiDAR and depth sensing for accurate 3D modeling. 📏📸🖥️ 83 | - **Augmented Reality (AR) and AI Integration** – Creating immersive, interactive experiences. 🕶️🧠📷 84 | - **Self-Supervised Learning** – Reducing reliance on labeled datasets. 🤖📖📊 85 | - **Neural Rendering** – Combining AI and graphics for ultra-realistic visual synthesis. 🎥🖥️✨ 86 | 87 | ## Conclusion 🎯🔍📚 88 | Computer vision is a transformative field that continues to redefine how machines interact with and interpret visual data. With advances in AI, deep learning, and computational power, vision-based systems are becoming more accurate and efficient. Researchers and engineers must stay ahead of emerging trends and address ongoing challenges to further enhance the capabilities of computer vision applications. 🚀📡🔬 89 | 90 | -------------------------------------------------------------------------------- /11/Qs.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | --- 5 | 6 | # Computer Vision - Multiple Choice Questions 7 | 8 | ## Easy Questions 9 | 10 | 1. What is the primary goal of computer vision? 11 | - A) To generate 3D models from text 12 | - B) To enable computers to interpret and analyze visual data 13 | - C) To enhance audio signals 14 | - D) To replace human intuition 15 | 16 | 2. Which of the following is NOT a core component of a computer vision system? 17 | - A) Sensing device 18 | - B) Processing algorithm 19 | - C) Sound processing unit 20 | - D) Feature extraction method 21 | 22 | 3. What is a common task in low-level vision? 23 | - A) Object recognition 24 | - B) Scene understanding 25 | - C) Edge detection 26 | - D) Activity recognition 27 | 28 | 4. Which discipline is closely related to computer vision? 29 | - A) Neuroscience 30 | - B) Quantum physics 31 | - C) Sociology 32 | - D) Literature 33 | 34 | 5. What is an example of a real-world application of computer vision? 35 | - A) Weather forecasting 36 | - B) Optical Character Recognition (OCR) 37 | - C) Soundwave analysis 38 | - D) Wi-Fi signal processing 39 | 40 | 6. In the context of image processing, what is the purpose of pre-processing? 41 | - A) To enhance image features before analysis 42 | - B) To remove objects from images 43 | - C) To generate a new image from scratch 44 | - D) To convert 2D images into 3D models 45 | 46 | 7. Which of the following is a major challenge in computer vision? 47 | - A) Lack of digital cameras 48 | - B) Lighting variability 49 | - C) Overuse of printed documents 50 | - D) Limited computer storage 51 | 52 | 8. Which of these technologies is most commonly used in modern computer vision applications? 53 | - A) Deep Learning 54 | - B) Spreadsheet analysis 55 | - C) Classical physics 56 | - D) Genetic engineering 57 | 58 | ## Medium Questions 59 | 60 | 9. What is the primary difference between computer vision and image processing? 61 | - A) Image processing modifies images, while computer vision extracts meaningful information 62 | - B) Image processing requires AI, while computer vision does not 63 | - C) Image processing is only used in medical applications 64 | - D) Computer vision focuses only on 2D images 65 | 66 | 10. What is the role of feature extraction in computer vision? 67 | - A) Convert images to text format 68 | - B) Identify important patterns like edges, textures, and motion 69 | - C) Create new image filters 70 | - D) Improve battery life of sensors 71 | 72 | 11. Which of these best describes object recognition in computer vision? 73 | - A) Identifying the presence and location of objects in an image 74 | - B) Extracting random shapes from images 75 | - C) Filtering out colors from an image 76 | - D) Reducing image resolution 77 | 78 | 12. Which of the following is NOT an interdisciplinary field contributing to computer vision? 79 | - A) Artificial Intelligence 80 | - B) Deep Learning 81 | - C) Poetry Writing 82 | - D) Signal Processing 83 | 84 | 13. What is the purpose of optical flow in motion analysis? 85 | - A) To generate new colors in images 86 | - B) To determine the movement of objects within a video sequence 87 | - C) To enhance facial recognition accuracy 88 | - D) To remove occlusions from images 89 | 90 | 14. How does Hough Transform contribute to computer vision? 91 | - A) It identifies specific geometric shapes like lines and circles 92 | - B) It removes noise from images 93 | - C) It converts images into text 94 | - D) It translates 2D images into 3D models 95 | 96 | 15. What role does segmentation play in computer vision? 97 | - A) Blurring the background of an image 98 | - B) Dividing an image into meaningful regions for analysis 99 | - C) Increasing the resolution of an image 100 | - D) Reducing the size of image files 101 | 102 | 16. Why is real-time processing a challenge in computer vision? 103 | - A) It requires instantaneous analysis of visual data 104 | - B) It cannot be implemented in modern computers 105 | - C) It requires physical interaction with an object 106 | - D) It depends on handwritten programming only 107 | 108 | 17. Which method is commonly used for facial recognition? 109 | - A) Neural networks 110 | - B) Polynomial regression 111 | - C) Bayesian networks 112 | - D) Quantum mechanics 113 | 114 | 18. In which industry is LiDAR commonly used to enhance computer vision applications? 115 | - A) Automotive 116 | - B) Textile manufacturing 117 | - C) Oil drilling 118 | - D) Cooking 119 | 120 | ## Hard Questions 121 | 122 | 19. What is a common approach for 3D scene reconstruction? 123 | - A) Using multiple 2D images to estimate depth information 124 | - B) Converting grayscale images into colored images 125 | - C) Using augmented reality overlays 126 | - D) Adjusting image brightness 127 | 128 | 20. What is the primary advantage of using deep learning in computer vision? 129 | - A) Reduces the need for feature engineering 130 | - B) Eliminates the need for image acquisition 131 | - C) Requires fewer computing resources 132 | - D) Avoids training on large datasets 133 | 134 | 21. Which type of neural network is most commonly used for image classification? 135 | - A) Convolutional Neural Networks (CNNs) 136 | - B) Recurrent Neural Networks (RNNs) 137 | - C) Generative Adversarial Networks (GANs) 138 | - D) Bayesian Networks 139 | 140 | 22. How does edge computing improve computer vision applications? 141 | - A) By processing data closer to the source rather than relying on cloud computing 142 | - B) By eliminating noise in image data 143 | - C) By enhancing image segmentation 144 | - D) By reducing the need for pre-processing 145 | 146 | 23. What is the main challenge of self-supervised learning in computer vision? 147 | - A) Lack of labeled data for training 148 | - B) Overfitting due to excess data 149 | - C) Limited applications in real-world scenarios 150 | - D) High reliance on feature extraction 151 | 152 | 24. What is the purpose of neural rendering in computer vision? 153 | - A) To combine AI and graphics for realistic image synthesis 154 | - B) To remove distortions from digital photos 155 | - C) To increase contrast in image processing 156 | - D) To detect edges more accurately 157 | 158 | 25. What is pose estimation used for in computer vision? 159 | - A) Determining the position and orientation of an object in an image 160 | - B) Enhancing the brightness of an image 161 | - C) Reducing file size of visual data 162 | - D) Automatically detecting objects in medical scans 163 | 164 | 26. Which of the following techniques is crucial for real-time object detection? 165 | - A) YOLO (You Only Look Once) 166 | - B) K-Means Clustering 167 | - C) Principal Component Analysis (PCA) 168 | - D) Fourier Transform 169 | 170 | 27. How do generative adversarial networks (GANs) contribute to computer vision? 171 | - A) By creating synthetic images that look real 172 | - B) By enhancing low-resolution images 173 | - C) By extracting edges from images 174 | - D) By improving object segmentation 175 | 176 | 28. Which type of machine learning is commonly used in image segmentation? 177 | - A) Supervised learning 178 | - B) Unsupervised learning 179 | - C) Reinforcement learning 180 | - D) Rule-based learning 181 | 182 | 29. What is the primary function of attention mechanisms in computer vision? 183 | - A) To focus on relevant regions of an image for improved analysis 184 | - B) To remove unnecessary image details 185 | - C) To perform image segmentation faster 186 | - D) To automate labeling of datasets 187 | 188 | 30. Which major challenge remains unsolved in computer vision research? 189 | - A) Perfect real-time scene understanding 190 | - B) Lack of computational power 191 | - C) Noisy image detection 192 | - D) Basic feature extraction techniques 193 | 194 | ## Answers: 195 | 196 | 1. B) To enable computers to interpret and analyze visual data 197 | 2. C) Sound processing unit 198 | 3. C) Edge detection 199 | 4. A) Neuroscience 200 | 5. B) Optical Character Recognition (OCR) 201 | 6. A) To enhance image features before analysis 202 | 7. B) Lighting variability 203 | 8. A) Deep Learning 204 | 9. A) Image processing modifies images, while computer vision extracts meaningful information 205 | 10. B) Identify important patterns like edges, textures, and motion 206 | 11. A) Identifying the presence and location of objects in an image 207 | 12. C) Poetry Writing 208 | 13. B) To determine the movement of objects within a video sequence 209 | 14. A) It identifies specific geometric shapes like lines and circles 210 | 15. B) Dividing an image into meaningful regions for analysis 211 | 16. A) It requires instantaneous analysis of visual data 212 | 17. A) Neural networks 213 | 18. A) Automotive 214 | 19. A) Using multiple 2D images to estimate depth information 215 | 20. A) Reduces the need for feature engineering 216 | 21. A) Convolutional Neural Networks (CNNs) 217 | 22. A) By processing data closer to the source rather than relying on cloud computing 218 | 23. A) Lack of labeled data for training 219 | 24. A) To combine AI and graphics for realistic image synthesis 220 | 25. A) Determining the position and orientation of an object in an image 221 | 26. A) YOLO (You Only Look Once) 222 | 27. A) By creating synthetic images that look real 223 | 28. A) Supervised learning 224 | 29. A) To focus on relevant regions of an image for improved analysis 225 | 30. A) Perfect real-time scene understanding 226 | -------------------------------------------------------------------------------- /11/extra/Ch-12-Computer vision.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/11/extra/Ch-12-Computer vision.docx -------------------------------------------------------------------------------- /12/12.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Chapter 8: Game Design Fundamentals 🎮✨🎨 5 | 6 | ## Introduction 🚀📚🎮 7 | 8 | With advancements in software development and game engines, the barrier to entry for game development has significantly lowered. However, a deep understanding of game design principles remains essential for creating engaging and commercially successful games. This chapter explores the foundational aspects of game design, covering ideation, development, testing, and deployment. 9 | 10 | ## Core Stages of Game Development 🏗️🕹️🔍 11 | 12 | ### 1. Conceptualization and Ideation 💡🎭🖌️ 13 | 14 | The first step in game development is formulating a unique and engaging concept. Developers must determine key aspects such as genre (e.g., RPG, FPS, puzzle), narrative structure, core gameplay mechanics, and visual style. A structured approach to organizing these components facilitates an efficient development process. 15 | 16 | ### 2. Crafting a Game Design Document (GDD) 📖📝🎯 17 | 18 | A **Game Design Document (GDD)** serves as a comprehensive guide that aligns all development stakeholders. A well-structured GDD includes: 19 | 20 | - **Game Concept and Genre Definition** 21 | - **Narrative Structure and Character Development** 22 | - **Core Gameplay Mechanics and Features** 23 | - **Level Design and Environmental Layouts** 24 | - **Monetization Strategies** 25 | - **Audio-Visual Style and User Interface Guidelines** 26 | 27 | The GDD ensures consistency, minimizes development risks, and facilitates effective collaboration. 28 | 29 | ### 3. Essential Game Design Principles 🎯🎨🕹️ 30 | 31 | #### Centering Around a Core Mechanic 🔄⚙️🎮 32 | 33 | A well-designed game revolves around a compelling core mechanic. Examples include: 34 | - **Pac-Man**: Navigating a maze while consuming pellets and evading enemies 35 | - **Clash of Clans**: Strategic base-building and resource management 36 | 37 | Iterative refinement of the core mechanic ensures sustained player engagement. 38 | 39 | #### Simplifying Player Onboarding 🎓🎮👨‍🏫 40 | 41 | Effective onboarding helps players quickly grasp game mechanics. Introducing mechanics gradually prevents cognitive overload, allowing players to build familiarity before encountering complex interactions. 42 | 43 | #### Implementing Reward Systems 🏆🎁✨ 44 | 45 | Incorporating incentives enhances player retention. Common strategies include: 46 | - **Milestone-based rewards** 47 | - **Unlockable achievements and collectibles** 48 | - **Dynamic progression systems** 49 | 50 | ### 4. Selecting Development Tools and Programming Languages 🔧💻🎮 51 | 52 | The complexity and scope of the game dictate the choice of development tools and programming languages. Popular game engines include: 53 | 54 | #### **Game Engines:** 55 | - **Unity (C#)** – Versatile for both 2D and 3D games 56 | - **Unreal Engine (C++)** – Industry-standard for high-fidelity graphics 57 | - **Godot (GDScript)** – Open-source engine ideal for indie developers 58 | - **GameMaker Studio** – Beginner-friendly, suited for 2D development 59 | - **Phaser** – Optimized for browser-based and mobile games 60 | 61 | #### **Programming Languages:** 62 | - **C++** – Preferred for high-performance game applications 63 | - **C#** – Predominantly used with Unity 64 | - **JavaScript** – Common for web-based games 65 | - **Python** – Ideal for rapid prototyping and educational games 66 | 67 | ### 5. Prototyping and Iteration 🛠️🔄🕹️ 68 | 69 | Prototyping enables early testing of game mechanics before full-scale development. Key steps include: 70 | - **Wireframing user interfaces** 71 | - **Building interactive gameplay prototypes** 72 | - **Conducting iterative user testing** 73 | 74 | ### 6. Quality Assurance and Optimization ✅⚙️🎯 75 | 76 | Rigorous testing ensures a polished final product. Testing methodologies include: 77 | - **Unit Testing** – Verifying individual components 78 | - **Playtesting** – Gathering qualitative feedback from players 79 | - **Performance Optimization** – Enhancing frame rates and responsiveness 80 | 81 | ## Game Genres and Design Considerations 🎭🎮🔍 82 | 83 | Games fall into distinct genres, each requiring unique design approaches: 84 | 85 | ### **Action** 🎯🔫💥 86 | - **Stealth** (e.g., Metal Gear Solid) 87 | - **Survival Horror** (e.g., Resident Evil) 88 | - **Shooter** (e.g., Call of Duty) 89 | - **Platformer** (e.g., Super Mario Bros.) 90 | 91 | ### **Adventure** 🏔️📜🔎 92 | - **Graphic Adventures** (e.g., Monkey Island) 93 | - **Interactive Storytelling** (e.g., Life is Strange) 94 | - **Open-World Exploration** (e.g., The Legend of Zelda) 95 | 96 | ### **Role-Playing Games (RPGs)** 🏹🎭🕹️ 97 | - **Turn-Based RPGs** (e.g., Final Fantasy) 98 | - **Action RPGs** (e.g., The Witcher) 99 | - **Massively Multiplayer Online RPGs (MMORPGs)** (e.g., World of Warcraft) 100 | 101 | ### **Simulation** 🚜🎮🛫 102 | - **Life Simulation** (e.g., The Sims) 103 | - **Farming Simulation** (e.g., Stardew Valley) 104 | - **Vehicle Simulation** (e.g., Microsoft Flight Simulator) 105 | 106 | ### **Strategy** 🏰⚔️🧠 107 | - **Turn-Based Strategy (TBS)** (e.g., Civilization) 108 | - **Real-Time Strategy (RTS)** (e.g., StarCraft) 109 | - **Tower Defense** (e.g., Plants vs. Zombies) 110 | 111 | ### **Sports and Racing** ⚽🏎️🏀 112 | - **Sports Simulations** (e.g., FIFA, NBA 2K) 113 | - **Racing Games** (e.g., Need for Speed, Forza Horizon) 114 | 115 | ### **Educational Games** 🎓📖🧠 116 | - **Skill-Based Learning Games** (e.g., Brain Age, Duolingo) 117 | 118 | ## Project Management and Business Considerations 📊📈🕹️ 119 | 120 | ### The Project Management Triangle 📐💰⏳ 121 | 122 | Game development operates within three key constraints: 123 | 1. **Budget** – Available financial resources 124 | 2. **Time** – Development deadlines and milestones 125 | 3. **Scope** – The planned features and content 126 | 127 | Balancing these constraints ensures project feasibility and efficiency. 128 | 129 | ### Trade-offs in Quality Assurance ⚖️🏗️🕹️ 130 | 131 | Teams must prioritize two of the three constraints while making trade-offs in the third: 132 | - **Adhering to Budget & Timeline** → Potential compromises in quality 133 | - **Ensuring High Quality & Budget Efficiency** → Extended development time 134 | - **Delivering High Quality & Timely Completion** → Increased financial investment 135 | 136 | ### Monetization Strategies 💰🕹️🎯 137 | 138 | A well-planned revenue model enhances a game's commercial success. Common approaches include: 139 | - **Premium Model** – One-time purchase pricing 140 | - **Freemium Model** – Free-to-play with in-game microtransactions 141 | - **Subscription Model** – Recurring payments for premium access 142 | - **Ad-Based Model** – Revenue generation through in-game advertisements 143 | 144 | ## Conclusion 🎮🚀🏆 145 | 146 | Game design is an interdisciplinary field requiring creativity, technical expertise, and strategic business planning. By leveraging structured design methodologies, selecting appropriate tools, and embracing iterative development, developers can maximize their chances of producing engaging and commercially successful games. 147 | 148 | -------------------------------------------------------------------------------- /12/Qs.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # Game Design Fundamentals - Multiple Choice Questions 5 | 6 | ## Questions 7 | 8 | ### Easy Level 9 | 10 | 1. What is the primary purpose of a Game Design Document (GDD)? 11 | - A) To serve as a marketing tool 12 | - B) To outline and guide the development of a game 13 | - C) To act as a financial report for investors 14 | - D) To provide legal documentation 15 | 16 | 2. Which of the following is a widely used game engine? 17 | - A) Python 18 | - B) Unity 19 | - C) Excel 20 | - D) Photoshop 21 | 22 | 3. What is an example of a core game mechanic in **Pac-Man**? 23 | - A) Collecting power-ups 24 | - B) Running and jumping 25 | - C) Eating pellets while avoiding ghosts 26 | - D) Building structures 27 | 28 | 4. What does the **Project Management Triangle** consist of? 29 | - A) Budget, Players, Levels 30 | - B) Budget, Time, Scope 31 | - C) Code, Graphics, Sound 32 | - D) Story, Mechanics, Monetization 33 | 34 | 5. In **role-playing games (RPGs)**, what typically defines the player's experience? 35 | - A) Fast-paced shooting 36 | - B) Open-world exploration and character progression 37 | - C) Multiplayer battles only 38 | - D) Strict linear level progression 39 | 40 | ### Medium Level 41 | 42 | 6. Which programming language is predominantly used with Unity? 43 | - A) C++ 44 | - B) JavaScript 45 | - C) Python 46 | - D) C# 47 | 48 | 7. What is a primary characteristic of a **sandbox RPG**? 49 | - A) Strict mission-based gameplay 50 | - B) Predefined paths with limited player choice 51 | - C) Freedom to explore and interact with the world 52 | - D) Fixed camera angles 53 | 54 | 8. Which of the following is an example of **turn-based strategy (TBS)** gameplay? 55 | - A) StarCraft 56 | - B) Civilization 57 | - C) FIFA 58 | - D) Call of Duty 59 | 60 | 9. What is a key advantage of **prototyping** in game development? 61 | - A) Ensures the game is fully monetized before development 62 | - B) Helps developers test core mechanics early 63 | - C) Increases game size without additional testing 64 | - D) Guarantees the final product will be successful 65 | 66 | 10. Which monetization model involves free-to-play access with in-game purchases? 67 | - A) Subscription model 68 | - B) Premium model 69 | - C) Freemium model 70 | - D) One-time purchase model 71 | 72 | 11. In **first-person shooter (FPS)** games, what is the player's typical perspective? 73 | - A) Third-person view 74 | - B) Top-down perspective 75 | - C) First-person view 76 | - D) Isometric view 77 | 78 | 12. What is a key characteristic of **MOBA (Multiplayer Online Battle Arena)** games? 79 | - A) Single-player mode only 80 | - B) Turn-based combat 81 | - C) Team-based competitive matches 82 | - D) Open-world exploration 83 | 84 | 13. Which of the following is **NOT** a game development constraint in the Project Management Triangle? 85 | - A) Budget 86 | - B) Scope 87 | - C) Time 88 | - D) Art Style 89 | 90 | ### Hard Level 91 | 92 | 14. Why is **performance optimization** critical in game development? 93 | - A) To increase the number of assets in a game 94 | - B) To reduce load times and improve frame rates 95 | - C) To make the game more difficult 96 | - D) To eliminate all player interactions 97 | 98 | 15. What differentiates **procedural generation** from traditional level design? 99 | - A) Levels are crafted manually by designers 100 | - B) Randomized content is generated algorithmically 101 | - C) All players experience the same fixed layout 102 | - D) It eliminates all level variation 103 | 104 | 16. Which of the following factors primarily affects **game balancing**? 105 | - A) Art style and graphics quality 106 | - B) Character power progression and difficulty scaling 107 | - C) Music and sound effects 108 | - D) Game launch marketing campaigns 109 | 110 | 17. In **game economy design**, what is a potential downside of a poorly balanced in-game currency system? 111 | - A) Players feel too rewarded 112 | - B) Inflation or lack of meaningful rewards 113 | - C) The game becomes too short 114 | - D) The game’s art style becomes irrelevant 115 | 116 | 18. Which of the following is an example of **real-time strategy (RTS)** gameplay? 117 | - A) Civilization 118 | - B) StarCraft 119 | - C) Dark Souls 120 | - D) Final Fantasy 121 | 122 | 19. What does **frame rate (FPS)** in a video game refer to? 123 | - A) First-Person Shooter genre 124 | - B) The speed at which the game levels are loaded 125 | - C) The number of frames rendered per second 126 | - D) The total storage size of a game 127 | 128 | 20. What is a **game loop**? 129 | - A) A sequence of events in a game that continuously repeats 130 | - B) A single-use function in game design 131 | - C) A monetization strategy 132 | - D) A tutorial feature 133 | 134 | 21. Why do game designers implement **chunking** in tutorials? 135 | - A) To introduce multiple mechanics simultaneously 136 | - B) To break information into manageable pieces for better learning 137 | - C) To increase the difficulty immediately 138 | - D) To make the tutorial feel overwhelming 139 | 140 | 22. Which game engine is **open-source** and ideal for indie developers? 141 | - A) Unity 142 | - B) Unreal Engine 143 | - C) Godot 144 | - D) GameMaker Studio 145 | 146 | 23. What is an essential element of a **successful player onboarding experience**? 147 | - A) Overloading the player with information upfront 148 | - B) Gradually introducing mechanics through progressive challenges 149 | - C) Making the game impossible to lose early on 150 | - D) Removing tutorials entirely 151 | 152 | 24. In **level design**, what is the purpose of a **bubble diagram**? 153 | - A) To define the core game mechanic 154 | - B) To visually map out areas and player flow 155 | - C) To finalize the game's monetization strategy 156 | - D) To represent game scripts 157 | 158 | 25. Why is **AI pathfinding** important in modern games? 159 | - A) It ensures NPCs move naturally in the environment 160 | - B) It improves graphics quality 161 | - C) It determines sound effects 162 | - D) It manages in-game transactions 163 | 164 | ## Answers 165 | 166 | 1. B 167 | 2. B 168 | 3. C 169 | 4. B 170 | 5. B 171 | 6. D 172 | 7. C 173 | 8. B 174 | 9. B 175 | 10. C 176 | 11. C 177 | 12. C 178 | 13. D 179 | 14. B 180 | 15. B 181 | 16. B 182 | 17. B 183 | 18. B 184 | 19. C 185 | 20. A 186 | 21. B 187 | 22. C 188 | 23. B 189 | 24. B 190 | 25. A 191 | 192 | 🎮 -------------------------------------------------------------------------------- /12/extra/Chapter 08-Game Design Basics.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/12/extra/Chapter 08-Game Design Basics.docx -------------------------------------------------------------------------------- /99-Lab-Manual/Lab 01- Gimp Basics.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/99-Lab-Manual/Lab 01- Gimp Basics.docx -------------------------------------------------------------------------------- /99-Lab-Manual/Lab 02- Inkscape Basics -part 1.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/99-Lab-Manual/Lab 02- Inkscape Basics -part 1.docx -------------------------------------------------------------------------------- /99-Lab-Manual/Lab 03- Inkscape case studies-part 2.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/99-Lab-Manual/Lab 03- Inkscape case studies-part 2.docx -------------------------------------------------------------------------------- /99-Lab-Manual/Lab 04- Synfig studio-part 1.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/99-Lab-Manual/Lab 04- Synfig studio-part 1.docx -------------------------------------------------------------------------------- /99-Lab-Manual/Lab 05- Synfig studio-part 2.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/99-Lab-Manual/Lab 05- Synfig studio-part 2.docx -------------------------------------------------------------------------------- /99-Lab-Manual/Lab 06-Blender 3d Basics - part 1.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/99-Lab-Manual/Lab 06-Blender 3d Basics - part 1.docx -------------------------------------------------------------------------------- /99-Lab-Manual/Lab 07-Blender 3d Basics - part 2.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/99-Lab-Manual/Lab 07-Blender 3d Basics - part 2.docx -------------------------------------------------------------------------------- /99-Lab-Manual/Lab 08-Html canvas graphics.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/99-Lab-Manual/Lab 08-Html canvas graphics.docx -------------------------------------------------------------------------------- /99-Lab-Manual/Lab 09- Unity Basics - part 1.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/99-Lab-Manual/Lab 09- Unity Basics - part 1.docx -------------------------------------------------------------------------------- /99-Lab-Manual/Lab 10- Unity Basics - part 2.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/helghareeb/GFX/a301172d3d838aa2eeff1bde00741054b87aaff7/99-Lab-Manual/Lab 10- Unity Basics - part 2.docx -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Mozilla Public License Version 2.0 2 | ================================== 3 | 4 | 1. Definitions 5 | -------------- 6 | 7 | 1.1. "Contributor" 8 | means each individual or legal entity that creates, contributes to 9 | the creation of, or owns Covered Software. 10 | 11 | 1.2. "Contributor Version" 12 | means the combination of the Contributions of others (if any) used 13 | by a Contributor and that particular Contributor's Contribution. 14 | 15 | 1.3. "Contribution" 16 | means Covered Software of a particular Contributor. 17 | 18 | 1.4. "Covered Software" 19 | means Source Code Form to which the initial Contributor has attached 20 | the notice in Exhibit A, the Executable Form of such Source Code 21 | Form, and Modifications of such Source Code Form, in each case 22 | including portions thereof. 23 | 24 | 1.5. "Incompatible With Secondary Licenses" 25 | means 26 | 27 | (a) that the initial Contributor has attached the notice described 28 | in Exhibit B to the Covered Software; or 29 | 30 | (b) that the Covered Software was made available under the terms of 31 | version 1.1 or earlier of the License, but not also under the 32 | terms of a Secondary License. 33 | 34 | 1.6. "Executable Form" 35 | means any form of the work other than Source Code Form. 36 | 37 | 1.7. "Larger Work" 38 | means a work that combines Covered Software with other material, in 39 | a separate file or files, that is not Covered Software. 40 | 41 | 1.8. "License" 42 | means this document. 43 | 44 | 1.9. "Licensable" 45 | means having the right to grant, to the maximum extent possible, 46 | whether at the time of the initial grant or subsequently, any and 47 | all of the rights conveyed by this License. 48 | 49 | 1.10. "Modifications" 50 | means any of the following: 51 | 52 | (a) any file in Source Code Form that results from an addition to, 53 | deletion from, or modification of the contents of Covered 54 | Software; or 55 | 56 | (b) any new file in Source Code Form that contains any Covered 57 | Software. 58 | 59 | 1.11. "Patent Claims" of a Contributor 60 | means any patent claim(s), including without limitation, method, 61 | process, and apparatus claims, in any patent Licensable by such 62 | Contributor that would be infringed, but for the grant of the 63 | License, by the making, using, selling, offering for sale, having 64 | made, import, or transfer of either its Contributions or its 65 | Contributor Version. 66 | 67 | 1.12. "Secondary License" 68 | means either the GNU General Public License, Version 2.0, the GNU 69 | Lesser General Public License, Version 2.1, the GNU Affero General 70 | Public License, Version 3.0, or any later versions of those 71 | licenses. 72 | 73 | 1.13. "Source Code Form" 74 | means the form of the work preferred for making modifications. 75 | 76 | 1.14. "You" (or "Your") 77 | means an individual or a legal entity exercising rights under this 78 | License. For legal entities, "You" includes any entity that 79 | controls, is controlled by, or is under common control with You. For 80 | purposes of this definition, "control" means (a) the power, direct 81 | or indirect, to cause the direction or management of such entity, 82 | whether by contract or otherwise, or (b) ownership of more than 83 | fifty percent (50%) of the outstanding shares or beneficial 84 | ownership of such entity. 85 | 86 | 2. License Grants and Conditions 87 | -------------------------------- 88 | 89 | 2.1. Grants 90 | 91 | Each Contributor hereby grants You a world-wide, royalty-free, 92 | non-exclusive license: 93 | 94 | (a) under intellectual property rights (other than patent or trademark) 95 | Licensable by such Contributor to use, reproduce, make available, 96 | modify, display, perform, distribute, and otherwise exploit its 97 | Contributions, either on an unmodified basis, with Modifications, or 98 | as part of a Larger Work; and 99 | 100 | (b) under Patent Claims of such Contributor to make, use, sell, offer 101 | for sale, have made, import, and otherwise transfer either its 102 | Contributions or its Contributor Version. 103 | 104 | 2.2. Effective Date 105 | 106 | The licenses granted in Section 2.1 with respect to any Contribution 107 | become effective for each Contribution on the date the Contributor first 108 | distributes such Contribution. 109 | 110 | 2.3. Limitations on Grant Scope 111 | 112 | The licenses granted in this Section 2 are the only rights granted under 113 | this License. No additional rights or licenses will be implied from the 114 | distribution or licensing of Covered Software under this License. 115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a 116 | Contributor: 117 | 118 | (a) for any code that a Contributor has removed from Covered Software; 119 | or 120 | 121 | (b) for infringements caused by: (i) Your and any other third party's 122 | modifications of Covered Software, or (ii) the combination of its 123 | Contributions with other software (except as part of its Contributor 124 | Version); or 125 | 126 | (c) under Patent Claims infringed by Covered Software in the absence of 127 | its Contributions. 128 | 129 | This License does not grant any rights in the trademarks, service marks, 130 | or logos of any Contributor (except as may be necessary to comply with 131 | the notice requirements in Section 3.4). 132 | 133 | 2.4. Subsequent Licenses 134 | 135 | No Contributor makes additional grants as a result of Your choice to 136 | distribute the Covered Software under a subsequent version of this 137 | License (see Section 10.2) or under the terms of a Secondary License (if 138 | permitted under the terms of Section 3.3). 139 | 140 | 2.5. Representation 141 | 142 | Each Contributor represents that the Contributor believes its 143 | Contributions are its original creation(s) or it has sufficient rights 144 | to grant the rights to its Contributions conveyed by this License. 145 | 146 | 2.6. Fair Use 147 | 148 | This License is not intended to limit any rights You have under 149 | applicable copyright doctrines of fair use, fair dealing, or other 150 | equivalents. 151 | 152 | 2.7. Conditions 153 | 154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted 155 | in Section 2.1. 156 | 157 | 3. Responsibilities 158 | ------------------- 159 | 160 | 3.1. Distribution of Source Form 161 | 162 | All distribution of Covered Software in Source Code Form, including any 163 | Modifications that You create or to which You contribute, must be under 164 | the terms of this License. You must inform recipients that the Source 165 | Code Form of the Covered Software is governed by the terms of this 166 | License, and how they can obtain a copy of this License. You may not 167 | attempt to alter or restrict the recipients' rights in the Source Code 168 | Form. 169 | 170 | 3.2. Distribution of Executable Form 171 | 172 | If You distribute Covered Software in Executable Form then: 173 | 174 | (a) such Covered Software must also be made available in Source Code 175 | Form, as described in Section 3.1, and You must inform recipients of 176 | the Executable Form how they can obtain a copy of such Source Code 177 | Form by reasonable means in a timely manner, at a charge no more 178 | than the cost of distribution to the recipient; and 179 | 180 | (b) You may distribute such Executable Form under the terms of this 181 | License, or sublicense it under different terms, provided that the 182 | license for the Executable Form does not attempt to limit or alter 183 | the recipients' rights in the Source Code Form under this License. 184 | 185 | 3.3. Distribution of a Larger Work 186 | 187 | You may create and distribute a Larger Work under terms of Your choice, 188 | provided that You also comply with the requirements of this License for 189 | the Covered Software. If the Larger Work is a combination of Covered 190 | Software with a work governed by one or more Secondary Licenses, and the 191 | Covered Software is not Incompatible With Secondary Licenses, this 192 | License permits You to additionally distribute such Covered Software 193 | under the terms of such Secondary License(s), so that the recipient of 194 | the Larger Work may, at their option, further distribute the Covered 195 | Software under the terms of either this License or such Secondary 196 | License(s). 197 | 198 | 3.4. Notices 199 | 200 | You may not remove or alter the substance of any license notices 201 | (including copyright notices, patent notices, disclaimers of warranty, 202 | or limitations of liability) contained within the Source Code Form of 203 | the Covered Software, except that You may alter any license notices to 204 | the extent required to remedy known factual inaccuracies. 205 | 206 | 3.5. Application of Additional Terms 207 | 208 | You may choose to offer, and to charge a fee for, warranty, support, 209 | indemnity or liability obligations to one or more recipients of Covered 210 | Software. However, You may do so only on Your own behalf, and not on 211 | behalf of any Contributor. You must make it absolutely clear that any 212 | such warranty, support, indemnity, or liability obligation is offered by 213 | You alone, and You hereby agree to indemnify every Contributor for any 214 | liability incurred by such Contributor as a result of warranty, support, 215 | indemnity or liability terms You offer. You may include additional 216 | disclaimers of warranty and limitations of liability specific to any 217 | jurisdiction. 218 | 219 | 4. Inability to Comply Due to Statute or Regulation 220 | --------------------------------------------------- 221 | 222 | If it is impossible for You to comply with any of the terms of this 223 | License with respect to some or all of the Covered Software due to 224 | statute, judicial order, or regulation then You must: (a) comply with 225 | the terms of this License to the maximum extent possible; and (b) 226 | describe the limitations and the code they affect. Such description must 227 | be placed in a text file included with all distributions of the Covered 228 | Software under this License. Except to the extent prohibited by statute 229 | or regulation, such description must be sufficiently detailed for a 230 | recipient of ordinary skill to be able to understand it. 231 | 232 | 5. Termination 233 | -------------- 234 | 235 | 5.1. The rights granted under this License will terminate automatically 236 | if You fail to comply with any of its terms. However, if You become 237 | compliant, then the rights granted under this License from a particular 238 | Contributor are reinstated (a) provisionally, unless and until such 239 | Contributor explicitly and finally terminates Your grants, and (b) on an 240 | ongoing basis, if such Contributor fails to notify You of the 241 | non-compliance by some reasonable means prior to 60 days after You have 242 | come back into compliance. Moreover, Your grants from a particular 243 | Contributor are reinstated on an ongoing basis if such Contributor 244 | notifies You of the non-compliance by some reasonable means, this is the 245 | first time You have received notice of non-compliance with this License 246 | from such Contributor, and You become compliant prior to 30 days after 247 | Your receipt of the notice. 248 | 249 | 5.2. If You initiate litigation against any entity by asserting a patent 250 | infringement claim (excluding declaratory judgment actions, 251 | counter-claims, and cross-claims) alleging that a Contributor Version 252 | directly or indirectly infringes any patent, then the rights granted to 253 | You by any and all Contributors for the Covered Software under Section 254 | 2.1 of this License shall terminate. 255 | 256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all 257 | end user license agreements (excluding distributors and resellers) which 258 | have been validly granted by You or Your distributors under this License 259 | prior to termination shall survive termination. 260 | 261 | ************************************************************************ 262 | * * 263 | * 6. Disclaimer of Warranty * 264 | * ------------------------- * 265 | * * 266 | * Covered Software is provided under this License on an "as is" * 267 | * basis, without warranty of any kind, either expressed, implied, or * 268 | * statutory, including, without limitation, warranties that the * 269 | * Covered Software is free of defects, merchantable, fit for a * 270 | * particular purpose or non-infringing. The entire risk as to the * 271 | * quality and performance of the Covered Software is with You. * 272 | * Should any Covered Software prove defective in any respect, You * 273 | * (not any Contributor) assume the cost of any necessary servicing, * 274 | * repair, or correction. This disclaimer of warranty constitutes an * 275 | * essential part of this License. No use of any Covered Software is * 276 | * authorized under this License except under this disclaimer. * 277 | * * 278 | ************************************************************************ 279 | 280 | ************************************************************************ 281 | * * 282 | * 7. Limitation of Liability * 283 | * -------------------------- * 284 | * * 285 | * Under no circumstances and under no legal theory, whether tort * 286 | * (including negligence), contract, or otherwise, shall any * 287 | * Contributor, or anyone who distributes Covered Software as * 288 | * permitted above, be liable to You for any direct, indirect, * 289 | * special, incidental, or consequential damages of any character * 290 | * including, without limitation, damages for lost profits, loss of * 291 | * goodwill, work stoppage, computer failure or malfunction, or any * 292 | * and all other commercial damages or losses, even if such party * 293 | * shall have been informed of the possibility of such damages. This * 294 | * limitation of liability shall not apply to liability for death or * 295 | * personal injury resulting from such party's negligence to the * 296 | * extent applicable law prohibits such limitation. Some * 297 | * jurisdictions do not allow the exclusion or limitation of * 298 | * incidental or consequential damages, so this exclusion and * 299 | * limitation may not apply to You. * 300 | * * 301 | ************************************************************************ 302 | 303 | 8. Litigation 304 | ------------- 305 | 306 | Any litigation relating to this License may be brought only in the 307 | courts of a jurisdiction where the defendant maintains its principal 308 | place of business and such litigation shall be governed by laws of that 309 | jurisdiction, without reference to its conflict-of-law provisions. 310 | Nothing in this Section shall prevent a party's ability to bring 311 | cross-claims or counter-claims. 312 | 313 | 9. Miscellaneous 314 | ---------------- 315 | 316 | This License represents the complete agreement concerning the subject 317 | matter hereof. If any provision of this License is held to be 318 | unenforceable, such provision shall be reformed only to the extent 319 | necessary to make it enforceable. Any law or regulation which provides 320 | that the language of a contract shall be construed against the drafter 321 | shall not be used to construe this License against a Contributor. 322 | 323 | 10. Versions of the License 324 | --------------------------- 325 | 326 | 10.1. New Versions 327 | 328 | Mozilla Foundation is the license steward. Except as provided in Section 329 | 10.3, no one other than the license steward has the right to modify or 330 | publish new versions of this License. Each version will be given a 331 | distinguishing version number. 332 | 333 | 10.2. Effect of New Versions 334 | 335 | You may distribute the Covered Software under the terms of the version 336 | of the License under which You originally received the Covered Software, 337 | or under the terms of any subsequent version published by the license 338 | steward. 339 | 340 | 10.3. Modified Versions 341 | 342 | If you create software not governed by this License, and you want to 343 | create a new license for such software, you may create and use a 344 | modified version of this License if you rename the license and remove 345 | any references to the name of the license steward (except to note that 346 | such modified license differs from this License). 347 | 348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary 349 | Licenses 350 | 351 | If You choose to distribute Source Code Form that is Incompatible With 352 | Secondary Licenses under the terms of this version of the License, the 353 | notice described in Exhibit B of this License must be attached. 354 | 355 | Exhibit A - Source Code Form License Notice 356 | ------------------------------------------- 357 | 358 | This Source Code Form is subject to the terms of the Mozilla Public 359 | License, v. 2.0. If a copy of the MPL was not distributed with this 360 | file, You can obtain one at http://mozilla.org/MPL/2.0/. 361 | 362 | If it is not possible or desirable to put the notice in a particular 363 | file, then You may include the notice in a location (such as a LICENSE 364 | file in a relevant directory) where a recipient would be likely to look 365 | for such a notice. 366 | 367 | You may add additional accurate notices of copyright ownership. 368 | 369 | Exhibit B - "Incompatible With Secondary Licenses" Notice 370 | --------------------------------------------------------- 371 | 372 | This Source Code Form is "Incompatible With Secondary Licenses", as 373 | defined by the Mozilla Public License, v. 2.0. 374 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # بسم الله الرحمن الرحيم 2 | # الحمد لله وحده، والصلاة والسلام على من لا نبي بعده ﷺ 3 | 4 | # ✨ Welcome to the Computer Graphics Course! ✨ 5 | 6 | ## 🌟 Dear Students, 7 | 8 | Welcome to the **Computer Graphics Course** at the **Faculty of Computers and Information Sciences**! I'm excited to embark on this journey with you, where we'll explore the fascinating world of computer graphics using **Python**. This course will equip you with essential skills to create visual magic and understand the mechanics behind graphics technology. 9 | 10 | --- 11 | 12 | ## 📚 Course Plan (12 Weeks Overview) 13 | 14 | Here's what our **12-week roadmap** looks like: 15 | 16 | ### **💡 Week 1: Introduction to Computer Graphics** 17 | - What is computer graphics? 18 | - Real-world applications 19 | - Overview of Python graphics libraries (Matplotlib, Pygame, OpenGL) 20 | 21 | ### **💪 Week 2: Graphics Hardware and Software** 22 | - GPUs and rendering pipelines 23 | - Raster vs. vector graphics 24 | - Graphics APIs and frameworks 25 | 26 | ### **🌟 Week 3: 2D Graphics and Drawing Primitives** 27 | - Drawing lines, circles, and polygons 28 | - Bresenham’s and Midpoint algorithms 29 | - 2D transformations (translation, rotation, scaling) 30 | 31 | ### **🌈 Week 4: Colors, Lighting, and Shading** 32 | - RGB, CMYK, and HSV color models 33 | - Light and shading techniques 34 | - Python-based implementation 35 | 36 | ### **👨‍👩‍👦 Week 5: 3D Graphics Fundamentals** 37 | - 3D coordinate systems 38 | - Perspective and projection 39 | - 3D transformations 40 | 41 | ### **🌟 Week 6: Rendering Techniques** 42 | - Rasterization vs. ray tracing 43 | - Hidden surface removal 44 | - Texture mapping and shaders 45 | 46 | ### **🛠️ Week 7: OpenGL and Interactive Graphics** 47 | - Introduction to OpenGL 48 | - Creating interactive 3D graphics 49 | - Handling user input and animation 50 | 51 | ### **🔄 Week 8: Advanced Transformations and Animations** 52 | - Keyframe animation 53 | - Character movement & physics-based animation 54 | - 3D matrix transformations 55 | 56 | ### **📸 Week 9: Image Processing and Computational Graphics** 57 | - Image filtering, edge detection 58 | - Basics of computer vision 59 | - Implementing image processing in Python 60 | 61 | ### **🌳 Week 10: Procedural Graphics and Fractals** 62 | - Generating textures and fractals 63 | - Perlin noise & procedural world generation 64 | - Python implementations 65 | 66 | ### **🎮 Week 11: Virtual Reality (VR) and Augmented Reality (AR)** 67 | - Introduction to VR/AR technologies 68 | - WebGL and Three.js 69 | - Applications and future trends 70 | 71 | ### **🎯 Week 12: Course Project and Future Directions** 72 | - Final project presentations 73 | - Emerging trends in graphics 74 | - Career paths in computer graphics 75 | 76 | --- 77 | 78 | ## 👩‍🎓 Your Commitment to Learning 79 | 80 | To succeed in this course: 81 | 82 | ✅ **Attend classes** – Every lesson builds on the last. 83 | ✅ **Practice regularly** – Implement algorithms and experiment with code. 84 | ✅ **Ask questions** – I'm here to help! 85 | ✅ **Work on projects** – The final project will showcase your knowledge. 86 | 87 | --- 88 | 89 | ## 🎉 What You Will Gain 90 | 91 | By the end of this course, you will: 92 | 93 | 🔍 **Understand** core computer graphics principles. 94 | 🌀 **Write Python programs** to generate 2D/3D graphics. 95 | 📝 **Implement algorithms** for drawing, shading, and rendering. 96 | 🌟 **Build interactive applications** using OpenGL. 97 | 🏆 **Develop a project** that demonstrates your skills. 98 | 99 | --- 100 | 101 | ## ✨ Final Words 102 | 103 | Computer Graphics is an exciting field where creativity meets computation! 🌟 Your enthusiasm and participation will make this semester amazing. I can’t wait to see your progress and the incredible things you create. 104 | 105 | Let’s make this an **engaging, productive, and fun learning experience!** 🎉🚀 106 | 107 | ### **See you in class!** 🙌 108 | 109 | **Best wishes,** 110 | Dr. Haitham El-Ghareeb 111 | Faculty of Computers and Information Sciences 112 | 113 | --------------------------------------------------------------------------------