CGT 215 - Computer Graphics Programming I

This course focuses on scripting and programming fundamentals, logic, and problem solving. A cross-section of languages and technologies will be introduced. The course provides the basis for developing object-oriented applications and how to write, compile, build, and debug an application.    
 Course Syllabus Course Slides    


This lecture introduces the course -
*Assignment 1: Type up in one or two paragraphs describing why do you want to learn graphics programming - Submit on blackboard.


02-Installing Processing

Downloading and installing the Processing IDE


03-Geometric Primitives

Spatial geometry-Foundations for vector imaging


04-Primitives in Processing

Apply the foundations for vector imaging in the context of the Processing programming environment. Read Ch. 3 of Reas & Fry


05-Project 1: Vector Primitives

Design an abstract composition using the geometric primitives (. Use points, lines, shapes, curves and at least 4 values to produce an aesthetically pleasing image through the use of code.
*Assignment 2: Make a sketch of your project using the Geometric primitives sheet



Syntax and organization. Includes an explanation on how to export project 1 as a PDF.


07- Variables

Using variables with diverse data types. Read Ch. 4 Reas & Fry


08-Arithmetic Operators

Arimethic operators for Addition, Substraction, Multiplication, Division, Modulus, Increment and Decrement


09- IF

Flow diagrams, If statements, Assigning values, intro to relational operators.
*Assignment 3: On a white piece of paper, sketch a flow diagram of your morning routine. Be as detailed as possible.


10- OR - AND

Continue creating the "Bouncing ball" exercise using the OR operator. Read Ch. 5 of Reas & Fry


11- Relational and Logical Operators

Use the less than, greater than and equalties in the context of programming to create a button or collision area.


12- Practice Creating a Boundary

Make a geometric boundary applying the logical and relational operators.


13- Loops

Learn about the "For loops" and apply them in the context of programming graphics.


14- Geometric Transformations I

Isolating transformations, Matrix stacks, Translations


15- Geometric Transformations II

Rotation and Translation


16- Project 2: Mailer Patterns

Recreate one or more mail envelope patterns provided in the attached PDF. You may use For loops, If statements or geometric transformations to produce a visual output that resembles the original pattern.


17- Digital Images

Identify the difference between Raster and Vector images. Import and use a raster image in processing using the PImage object.


18- Raster File Formats

Compare the different raster imaging formats (TIF, JPG, GIF and PNG).


19- Vector File Formats

Import prevously designed vector graphics into your programs using the PShape object.


20- Color Systems

Color wheel, RGB, HLS and CMYK. Manipulate colors interactively.


21- Mouse Pressed

Review of if/else statements using the mousePressed function.


22- Mouse Functions I

Overview of the different mouse functions available. MousePressed continued.


23- Mouse Functions II

Introducing other mouse functions: mouseDragged, mouseClicked, mouseReleased. Computing the mouse previous position.


24- Keyboard input

Using the keyboard as input for a program. Filters.


25- Input Text and Fonts

Using the keyboard to display text or store String variables using the PFont object. Import fonts. Create a visible "Score" counter.


26- Functions

Create modular programming with functions. Random function. Read Ch. 8 of Reas & Fry.


27- Project 3: Carnival Ride

Create a program that simulates a carnival ride that is controlled by the user. Your program must use the following elements:
•Geometric Transformations (Rotate, Scale)
•on/off states, backwards
•Import Raster/Vector images
*Assignment 4:Concept Brief for Project 3


28-Return Functions

Identify the differences and appilications of void functions and return functions.


29- Arrays

Create multiple variables of the same type. Example of an Array of String for sorting lists. Example of an array of images for animation.


30- 3D Primitives

Introduction to programming geometry in a three-dimensional space. Review of geometric transformations. Rotate and translate in X,Y and Z.


31- Project 4

Create a program that shows your house design in 3D. Use functions to change the characteristics of the building:
Colors, size of roof, overall height etc.

*Assignment 5 On a quad piece of paper, sketch the basic geometry of your house in an orthographic projection. Keep the design simple using planes, boxes or spheres only.


32- 3D Shapes

Create 3D shapoes using vertices to construct your house. Identify variables in 3D space.


33- Variable Vertices

Continue working on constructing the function for Project 4.


34- OBJ Load

Import external 3D objects (with textures) using the shape function. Can you create rows and coulumns of 3D objects? Answer here


35- Objects I

Introduction to Object-Oriented Programming. Foundations to create Classes. Read Ch. 9 of Reas & Fry


36- Objects II

Continue working OOP. Array of objects. Read Ch. 10 of Reas & Fry


37- Final Project

The theme for our final project is free and therefore, you must create a concept, design a program and implement it. Take into consideration the different topics covered during this course and apply them in a new and creative way. There are no limitations what to do, except due dates. This is your opportunity to do what you want! Imagine it could be a game, an app or anything from interactive to generative.

*Assignment 5: Create a brief that outlines the concept of your final project. Provide sketches and flow diagrams to complement your idea.


38- Extending Processing

Extend processing using libraries and Processing.js