CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Welcome to CS123!
Mechanics
Andries van Dam © 9/5/2019 1/19
CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Your Staff
} Professor:
} Andy van Dam (avd@cs.brown.edu)
} Heir Apparent:
} Daniel Ritchie (daniel_ritchie@brown.edu)

} Head TA:
} Ashley Kim (akim52@cs.brown.edu), 2020
} Undergraduate TAs, all 123 veterans:
} Brad Guesman (jguesman), 2020
} Dylan Tian (dtian2), 2021
} Giuse Nguyen (gnguyen4), 2021
} Grishka Barboy (gbarboy), 2020
} Griffin Beels (gbeels), 2021
} Jeffrey Kennan (jkennan), 2020
} Michael Cosgrove (mcosgrov), 2020
} Natalie Lindsay (nlindsay), 2019
} Purvi Goel (pgoel2), 2019

Andries van Dam © 9/5/2019 2/19

CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Who Should Take CS123?
} Juniors or higher
} CS15-16, CS17-18, or CS19
} or equivalent, with strong software engineering skills (OO design and
programming, debugging) – this is a projects-based “studio course”
} we will teach you C++ and good practices to save you debugging time

} Sophomores (and new grad students)

} did well in intro sequence
} consider themselves strong OO programmers
} willing to put in a bit of extra time up front (e.g., to learn C++)
} you will catch up quickly

Andries van Dam © 9/5/2019 3/19

 CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Requirements Info
} If you don’t know C++, you CAN take this class
} Why C++? Important for job interviews and common for industry graphics: performance
} C++ is Java with some memory management and C grottiness
} Additional time investment required early on
} There are multiple ways you can learn C++
} We will hold multiple help sessions to get you started
} First C++ help session
} Intro to C++ and transitioning from Java
} First is tonight at 9:00pm in Motorola (165)
} If you can’t make it, there will be another Intro C++ session next Tuesday. Also, all help sessions
will be recorded and will be available on the course website (Docs page)
} We have a C++ diagnostic on our website to help you gauge your C++ experience
} TAs can help you with C++ issues on hours
} Linear Algebra (vector and matrix arithmetic, dot and cross products)
} Help session to review these concepts soon
} Consider taking MATH 520 (or 540) or CSCI 0530 (not this year) for Linear Algebra
} If you’re not sure you should be in CS123, stay after class and see Ashley (Head TA)
or email cs1230tas@lists.brown.edu
Andries van Dam © 9/5/2019 4/19
CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Bird’s Eye View of the Course (1/2)
} Quick start: 2D and 3D graphics with OpenGL
} 2D raster graphics
Root
} 2D modeling hierarchy –scene graph
Transformation
} Basic image transformations House

} Basic 3D scene management

Transformations
} Tessellation of curved surfaces
} Transformations (translation, rotation, scale) Windows Wall Door Roof

} Virtual camera model Transformations

} Scene graph traversal Rectangle geometry

Pentagon geometry

Andries van Dam © 9/5/2019 5/19

CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Bird’s Eye View of the Course (2/2)
} 3D Modeling and Rendering – the core
} intersecting rays with simple solids
} ray tracing
} lighting and shadowing of polygonal models
} stochastic methods for photorealistic
rendering
} GPU hardware rendering (GLSL)
} Other Topics
} color theory
} user interfaces
} augmented and virtual reality

Andries van Dam © 9/5/2019 GPU hardware rendering Vive Focus Plus 6/19
CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Half Credit requirements
} Each project will include a section called half credit requirements
} Those taking cs1234 will need to complete these requirements
} Those not taking cs1234 can use the requirements as additional extra credit
} Expect 7-10 additional hours of work
} CS1234 can be used as a capstone course
} Half credit requirements can be be used to get grad credit (2000 level)
} If you decide to enroll, email Ashley (Head TA)

Andries van Dam © 9/5/2019 7/19

CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Workload
} If you work steadily, CS 123 isn’t a killer course, but it will be
demanding
} Expect on average 15-20 hours of work per week
} Course is front-loaded, lots to learn in the first three weeks
} Combining with another programming-heavy course (like CS33) is
doable but can be challenging, especially for those who have only taken
the intro sequence. Best not to take 2D Game Engines or Animation
concurrently.
} Independent, open-ended final project doing shader
programming in GLSL on GPU
} Expect to put in a fair amount of time during reading period on your
Final Project (typically a 2-3 person team project)

Andries van Dam © 9/5/2019 8/19

CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Course Documents (1/2)
} Lectures PPT decks posted online. You are encouraged to bring your laptops to read
along and annotate lectures. Sit up front if fonts are too small.
} The first 2 rows will be reserved for non-laptop users for those who find laptops distracting
} Course missive (online)
} Assignment deadlines and lecture topics are subject to change
} Responsible for info on course website: http://cs.brown.edu/courses/cs123
} Mailing list for course updates – mail will be sent to your Brown CS e-mail address
} Help guides (in person and online)
} Help Session slides (C++, Linear Algebra, GLSL)
} Gear Up sessions for each project
} OpenGL Guide
} GLM Reference

Andries van Dam © 9/5/2019 9/19

CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Course Documents (2/2)
} Collaboration Policy (Fill out on website) – Strictly Enforced
} Allowed: discussion of lectures, discussion of labs, C++ concepts, OpenGL,
and GLSL
} Not allowed: implementation details, algorithms, code, pseudo-code,
anything solution-oriented
} This may be different from rules in other courses, but the key idea persists:
ALL your written work MUST BE YOUR OWN
} Read collaboration policy carefully before you sign because it is a contract
} MOSS – an AI program that is usually correct – we hand-check suspicious
similarity
} Typical verdict: directed NC and parental notification for first-time offense

Andries van Dam © 9/5/2019 10/19

 CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
The Book
} The textbook for this class is recommended, but
not required
} Most lectures will correspond to chapters in the
book
} An improved index has been linked on the site’s
docs page

Andries van Dam © 9/5/2019 11/19

 CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Assignments
} 7 Algos } 6 Programming } 11 Labs } 1 Final Project } Participation
} Written
Projects
} Learn what } Real-time } In-class
assignments to } Three of modern
prepare you which build project using questions
for the projects graphics on TopHat
up to a ray- systems can do GPU
10% of final tracing programming
}
system } Correct
grade } Real-time
} You are answers
} Additional computer
requirements graphics and strongly will be 3/3
for half credit GPU shaders encouraged to points
course work in groups
} 3D interaction } Incorrect
} 55% of final and UI of 2-3; 3 is the answers
grade most common
} 3 out of last 4 will be 2/3
labs required } 20% of final points
grade } 5% of final
} 10% of final
grade grade

Andries van Dam © 9/5/2019 12/19

CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Projects
} Brush – a 2d drawing program (intro to C++)
} Shapes – tessellating primitives
} Filter – image processing, including anti-aliasing
Image created using brushes from the
} Sceneview – 3d static scene viewer for OpenGL “Brush” assignment

} Intersect – parametric shapes, ray-shape intersections

} Ray – your own 3d rendering engine
} Final – an amazing graphics program that you and your buddies get
to choose

} Each project is preceded by a short “algo” assignment, which ensures that you
understand the concepts behind the project before starting to code.

Andries van Dam © 9/5/2019 13/19

CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Labs
} Lab 1: VBOs – learn to use OpenGL to draw 2D shapes
} Lab 2: Shaders – create and animate 3D shapes
} Lab 3: Debugging – learn to fix errors and simulate lighting
} Lab 4: Filter – implement a few filters before the filter project
} Lab 5: Terrain – generate a natural looking environment
} Lab 6: Camtrans – create a controllable OpenGL viewing camera
} Lab 7: FBOs – create multipass effects
} Lab 8: Particles – generate your own visual effects
} Lab 9: Metal & Glass – make objects that look like glass and metal
} Lab 10: Shadertoy – build a real-time raymarcher (similar to a raytracer) online
} Lab 11: Color – work with color spaces and learn WebGL

Andries van Dam © 9/5/2019 14/19

CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Labs
} Lab assignments are due (must be checked off by a TA) every Monday at 8pm
} Labs are mandatory
} Two sessions a week
} You can attend either, or both
} 3 out of last 4 labs required
} Meet twice a week in the Sunlab (Mon. 6:00-8:00pm, Fri. 4:00-6:00pm)

Andries van Dam © 9/5/2019 15/19

CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
First Assignment
} First assignment, Brush: warm-up exercise in C++
} Out NOW
} Start early, especially if you’re uncomfortable with, let alone new to, C++
} Bring questions to help session tonight
} Algorithm assignment due Thursday, September 12 at 6:00pm
} Hand in using cs123_handin brush_algo
¨ No email hand-ins!
} No late hand-ins accepted
} Brush Gear-Up next Thursday, September 12 at 6:00pm (right after the algo is due)
} Project can be completed without the Gear-Up (don’t wait!)
} Program due Sunday, September 15th, 11:59pm
} Hand in using cs123_handin brush

Andries van Dam © 9/5/2019 16/19

CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Working with Qt Creator
} This class uses the Qt Creator IDE
} The TAs will be hosting open hours to
help everyone get Qt set up on their
local machines on Thursday,
September 12th at 7pm (right after
the Brush Gear-Up)
} Windows, Mac, and Linux support
} If you can’t make it, you can also get
help at hours

Andries van Dam © 9/5/2019 17/19

CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
A Recommended Workflow Pattern
} Tip #1 - Finish the
Algo as soon as
possible, so you can
start the project.
} Tip #2 – Try to
always go to the
first set of lab
hours, so that you
can always have the
second one if you
don’t finish in the
first.
Andries van Dam © 9/5/2019 18/19
 CS123 | INTRODUCTION TO COMPUTER GRAPHICS <#?
Final Project Demos
From last year:
} Biomes:
https://youtu.be/vw48JxD0PKA } Blackhole
} GPU Raytraced Physics Simulator:
https://www.youtube.com/watch?
https://www.youtube.com/watch?v=YuCZGtpwn_U
v=S59u7YB5gPM
} Dancing Robot: } VR Dance Party
https://www.youtube.com/watch?v=7rvrtDBXAws https://www.youtube.com/watch?
} Torches:
v=-6mwYtyLcuw
https://youtu.be/4kbKlNYd9S4 } Digital Arboretum
} GPU Raytracer: https://www.youtube.com/watch?
https://www.youtube.com/watch?v=qQQMozhkQRA v=jDcx-KobpdU&t=215s
} Fireworks: } Snowy Sunrise
https://www.youtube.com/watch?v=I0JobHULJiE https://www.youtube.com/watch?
} Music Visualizer: v=ceOfkHSTTaY
http://lcallana.github.io/visualizer.html

Andries van Dam © 9/5/2019 19/19