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    
     

01-Introduction

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

 

06-Structure

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