Programming Basics

Muchake Brian
[email protected]
Objectives
• At the end of this topic, students will be able:
• 1. Understand Overview of Programming Basics
• 2. Discuss Introduction to Graphics APIs
• 3. Describe 2D Drawing and Rendering Techniques
• 4. Explain Coordinate Systems and Transformations
• 5. Expound on Shaders
Graphics Programming Basics
What is Graphics programming?
• Graphics programming is the process of creating and manipulating visual content using
programming languages and software libraries. It is used in applications such as:
• Video games
• Simulations
• Data visualization
• User interfaces
Graphics Programming Basics [Cont’d]
Key Concepts of Graphics Programming
• Pixels – Small, square units of color that make up an image.
• Resolution – The number of pixels in an image (e.g., 1024x768).
• Color Depth – The number of bits used per pixel (e.g., 8-bit, 16-bit, 32-bit).
• Frame Rate – The number of frames displayed per second (FPS).
• Transformations – Rotations, translations, and scaling applied to objects.
Graphics Programming Basics [Cont’d]
Graphics Programming APIs
• OpenGL – Cross-platform API for 2D/3D graphics.
• DirectX – Windows-specific API for graphics rendering.
• Vulkan – Efficient cross-platform API for graphics programming.
• Metal – Apple’s low-overhead API for graphics rendering.
Graphics Programming Basics [Cont’d]
Graphics Programming Languages
• C++ – High-performance graphics programming, widely used in gaming.
• Java – Common in Android app development.
• Python – Used for data visualization and scientific graphics.
• JavaScript – Web-based graphics programming using WebGL and Canvas.
Graphics Programming Basics [Cont’d]
Graphics Programming Techniques
• Rasterization – Converts 3D models into 2D images.
• Ray Tracing – Simulates light behavior for realistic rendering.
• Shading – Determines pixel color based on lighting and material.
• Texturing – Applies 2D images to 3D models for added detail.
Graphics Programming Basics [Cont’d]
Graphics Programming Tools
• Graphics Editors – Photoshop, GIMP for 2D graphics.
• 3D Modeling Software – Blender, Maya, 3ds Max for 3D modeling.
• Game Engines – Unity, Unreal Engine, Godot for interactive development.
• Graphics Debugging Tools – RenderDoc, GPU Debugger for optimization.
Graphics Programming Basics [Cont’d]
Conclusion
• Graphics programming is a fundamental field that blends computer science, mathematics, and
software engineering to create immersive experiences.
• Mastering these basics opens doors to game development, simulation, and visual computing.
Introduction to Graphics APIs
What are Graphics APIs?
Graphics APIs (Application Programming Interfaces) are libraries and tools that allow developers
to create and manipulate graphics. They enable interaction with graphics hardware (GPUs) to
render high-performance visuals.
Functions of Graphics APIs:
• Create and manage graphics resources (textures, buffers, shaders).
• Render graphics (2D and 3D models with various techniques).
• Interact with graphics hardware (optimize performance and utilize GPU features).
• Implement graphics effects (lighting, shading, physics simulations).
Introduction to Graphics APIs [Cont’d]
Types of Graphics APIs
• Low-level APIs – Direct access to graphics hardware, requiring manual memory management
(e.g., Vulkan, DirectX, Metal).
• High-level APIs – Provide higher abstraction and automate tasks (e.g., OpenGL, WebGL, Unity).
• Scene graph APIs – Manage and render complex scenes (e.g., OpenGL, DirectX).
• Physics-based APIs – Simulate physics and collisions (e.g., PhysX, Havok).
Introduction to Graphics APIs [Cont’d]
Popular Graphics APIs
• Vulkan – Low-level, cross-platform API by Khronos Group.
• DirectX – Windows-specific, low-level API by Microsoft.
• Metal – Apple-specific, low-level API by Apple.
• OpenGL – High-level, cross-platform API by Khronos Group.
• WebGL – High-level, web-specific API by Khronos Group.
• Unity – High-level game engine with built-in graphics API.
Introduction to Graphics APIs [Cont’d]
Advantages of Graphics APIs
• High-performance rendering – Utilizes graphics hardware for optimal speed.
• Cross-platform compatibility – Many APIs work across multiple platforms.
• Access to hardware features – Leverages GPU capabilities for better graphics.
• Simplified development – Provides tools and automation for easier coding.
Introduction to Graphics APIs [Cont’d]
Challenges of Graphics APIs
• Steep learning curve – Complex and requires time to master.
• Platform-specific issues – Some APIs require different implementations per platform.
• Optimization required – Needs tuning for high-performance rendering.
• Debugging difficulties – Complex rendering processes can make errors hard to track.
Introduction to Graphics APIs [Cont’d]
Conclusion
• Graphics APIs are essential for modern graphics development, allowing developers to create high-
performance applications with visually stunning effects.
• Understanding their types, advantages, and challenges helps in choosing the right API for specific
projects.
2D Drawing and Rendering Techniques
Introduction
• 2D drawing and rendering techniques help visualize ideas effectively.
• Used in various fields like architecture, product design, and graphic design.
• Focus on different methods to enhance depth, texture, and color in designs.
2D Drawing and Rendering Techniques [Cont’d]
Types of 2D Drawing Techniques
• Line Drawing: Creates simple and complex shapes using different line weights and styles.
• Value Drawing: Uses light and dark values to add depth and dimension.
• Texture Drawing: Adds tactile elements for realism.
• Color Drawing: Enhances mood, atmosphere, and visual appeal.
2D Drawing and Rendering Techniques [Cont’d]
Line Drawing
• Fundamental technique for shape creation.
• Different line weights and styles enhance visual interest.
• Example: A simple chair sketch using varied line weights.
2D Drawing and Rendering Techniques [Cont’d]
Value Drawing
• Establishes volume and depth through shading.
• Used to create mood and realism.
• Example: A grayscale landscape showing different light and dark values.
2D Drawing and Rendering Techniques [Cont’d]
Texture Drawing
• Mimics real-world textures in 2D artwork.
• Techniques include stippling, cross-hatching, and scribbling.
• Example: A tree bark sketch showing rough texture.
2D Drawing and Rendering Techniques [Cont’d]
Color Drawing
• Uses colors to represent mood and emotion.
• Warm vs. cool colors affect perception.
• Example: A sunset illustration with warm colors for depth.
2D Drawing and Rendering Techniques [Cont’d]
2D Rendering Techniques
• Hatching: Parallel lines for shading.
• Cross-Hatching: Intersecting lines for varied tones.
• Stippling: Small dots to create gradients.
• Shading: Smooth transitions between light and dark.
2D Drawing and Rendering Techniques [Cont’d]
Hatching and Cross-Hatching
• Hatching: Uses closely spaced lines to create shading.
• Cross-Hatching: Overlapping lines add texture and depth.
• Example: A sphere using both techniques.
2D Drawing and Rendering Techniques [Cont’d]
Stippling and Shading
• Stippling: Uses dots for gradient effects.
• Shading: Blending techniques for realistic depth.
• Example: A still life object shaded using these techniques.
2D Drawing and Rendering Techniques [Cont’d]
Applications of 2D Drawing & Rendering
• Architecture: Floor plans, elevations, and conceptual designs.
• Product Design: Prototypes and marketing visuals.
• Graphic Design: Logos, icons, and branding elements.
• Fine Art: Illustrations and detailed artworks.
2D Drawing and Rendering Techniques [Cont’d]
Real-World Examples
• Line Drawing: Architectural sketches.
• Value Drawing: Portraits with depth.
• Texture Drawing: Surface design for materials.
• Color Drawing: Concept art for animation and film.
2D Drawing and Rendering Techniques [Cont’d]
Benefits of 2D Drawing & Rendering
• Improved Communication of visual ideas.
• Enhanced Creativity through various techniques.
• Better Visualization of complex designs.
• Competitive Advantage in the design industry.
2D Drawing and Rendering Techniques [Cont’d]
Challenges and Limitations
• Time-Consuming to master.
• Limited Dimensionality compared to 3D.
• Software Dependence for digital rendering.
• Difficulty Conveying Materiality without color and shading expertise.
2D Drawing and Rendering Techniques [Cont’d]
Future of 2D Drawing & Rendering
• Advancements in Technology improve digital tools.
• Growth in Digital Art with better rendering software.
• Expansion into VR & AR for immersive designs.
• Sustainability Focus reduces material waste.
2D Drawing and Rendering Techniques [Cont’d]
Conclusion
• 2D drawing and rendering are essential for various creative fields.
• Mastering different techniques enhances artistic ability.
• Future developments will integrate AI and digital tools for more efficiency.
Coordinate Systems and Transformations
• Coordinate systems and transformations are used to represent and manipulate 2D and 3D objects
in a virtual space.
• They are essential in computer graphics, gaming, and simulation environments.
Coordinate Systems and Transformations [Cont’d]
Types of Coordinate Systems
• Cartesian Coordinate System (x, y, z axes)
• Polar Coordinate System (radius, angle)
• Spherical Coordinate System (radius, inclination, azimuth)
Coordinate Systems and Transformations [Cont’d]
Transformations
• Translation – Moves an object
• Rotation – Changes orientation
• Scaling – Alters size
• Reflection – Flips over a plane
Coordinate Systems and Transformations [Cont’d]
Matrix Representations of Transformations
• Translation Matrix
• Rotation Matrix
• Scaling Matrix
• Reflection Matrix
Coordinate Systems and Transformations [Cont’d]
Applications in Graphics
• 2D Graphics – Used in UI/UX, gaming
• 3D Graphics – Used in animation, gaming
• CAD (Computer-Aided Design) – Used in engineering, architecture
• Virtual Reality (VR) & Augmented Reality (AR) – Immersive experiences
Coordinate Systems and Transformations [Cont’d]
Future of Coordinate Systems and Transformations
• Real-time transformations
• AI and machine learning in transformations
• Advanced coordinate systems for VR/AR
• AI and machine learning in transformations
• Advanced coordinate systems for VR/AR
Coordinate Systems and Transformations [Cont’d]
Challenges and Limitations
• Computational complexity
• Numerical instability
• Precision issues
• Transformation Limitations
Coordinate Systems and Transformations [Cont’d]
Conclusion
• Coordinate systems and transformations are essential in computer graphics.
• Their evolution will lead to more immersive and realistic digital environments.
Shaders
Introduction to Shaders
• Shaders are small programs running on the GPU, used to calculate the final color of a pixel in
graphics rendering.
• Essential in the graphics pipeline for creating effects such as textures, lighting, animations, and
more.
Shaders [Cont’d]
Types of Shaders
• Vertex Shaders
• Transforms 3D vertices into screen space (rotation, scaling, translation).
• Fragment Shaders
• Calculates final pixel color (texture mapping, lighting, fog effects).
• Geometry Shaders
• Transforms 3D geometry into screen space (tessellation, deformation).
• Compute Shaders
• Used for general-purpose computations like physics simulations and data processing.
Shaders [Cont’d]
Shader Programming Languages
• GLSL (OpenGL Shading Language)
• Used for writing shaders in OpenGL applications.
• HLSL (High-Level Shading Language)
• Used for writing shaders in DirectX applications.
• Cg (C for Graphics)
• A versatile programming language for various graphics applications.
Shaders [Cont’d]
Shader Examples
1. Simple Vertex Shader
#version 330 core
layout (location = 0) in vec3 aPos;
void main() {
gl_Position = vec4(aPos, 1.0);
}
• Transforms 3D vertex position into 4D for screen space.
Shaders [Cont’d]
2. Simple Fragment Shader
#version 330 core
out vec4 FragColor;
void main() {
FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

• Outputs a red color for each pixel.

Shaders [Cont’d]
3. Texture Mapping Shader
#version 330 core
out vec4 FragColor;
uniform sampler2D texture1;
void main() {
FragColor = texture(texture1, gl_TexCoord[0].st);
}
• Uses a texture map for pixel color.
Shaders [Cont’d]
4. Lighting Shader
#version 330 core
out vec4 FragColor;
uniform vec3 lightPos;
uniform vec3 lightColor;
void main() {
vec3 normal = normalize(gl_Normal);
vec3 lightDir = normalize(lightPos - gl_Position.xyz);
float diffuse = max(0.0, dot(normal, lightDir));
FragColor = vec4(diffuse * lightColor, 1.0);
}
• Implements Blinn-Phong lighting model to compute color based on light and surface properties.
Shaders [Cont’d]
Shader Optimization Techniques
• Minimize Instructions: Fewer instructions mean faster shaders.
• Use Built-in Functions: Utilize functions provided by graphics APIs for common tasks.
• Use Constants: Reduces shader instruction count.
• Avoid Branching: Minimize conditional operations to avoid performance hits.
• Use Texture Compression: Reduces data transfer between CPU and GPU.
Coordinate Systems and Transformations [Cont’d]
Shader Illustration
•.
Shaders [Cont’d]
Conclusion
• Power of Shaders: Key to creating visually stunning and performant 2D/3D graphics.
• Optimizing Shaders: Careful selection of shader types, languages, and optimizations can
significantly improve graphics application performance.
Objectives
• At the end of this topic, students should be able:
• 1. Understand Overview of Programming Basics
• 2. Discuss Introduction to Graphics APIs
• 3. Describe 2D Drawing and Rendering Techniques
• 4. Explain Coordinate Systems and Transformations
• 5. Expound on Shaders
 Thank You!
~~~
Any questions?