Introduction to Computer Graphics

Lab Image
Today's goal: Run your first OpenGL with the SDL 2 Library. Read all of the directions.


The first task to becoming a graphics programmer, is to figure out how to configure your system to run graphics applications. Very likely you have written many console-based applications that run in a terminal or perhaps other environments. I would like everyone to leave today understanding how to setup a graphics application. This includes how to compile and run the support code provided for an SDL applicaiton. This support code, may also serve as a template for when you build your assignments (or personal projects) from scratch in the future.

Your Task(s)

  1. Find your partner in the spreadsheet here. It is your responsibility for the two of you to complete the lab by the beginning of the next lab (In this first lab, you are working individually).
  2. For this particular lab, I would like everyone to know how to setup OpenGL and SDL on their respective system.
    • Be forewarned, there is a lot of setup (or boilerplate) code here. Yes--you will eventually have to understand what is going on, but you do not have to understand it all at once. I do ask you spend time reading my comments however.
  3. Download the files given in the next section titled "Files Given/Starter Code".
  4. Follow the respective tutorial for your operating system.
    • Linux (Tested on Ubuntu)
    • Windows
    • Mac (Tested on High Sierra 10.13.2 Operating System)
    • Something else? Let your instructor know. Typically labs and assignments are tested on all three configurations above (though in the future there will be 1 set of directions to follow after you are setup!)
    • Remote graphics through a terminal (Optional--and here primarily for very limited situations)
  5. Complete the "C++ Refresh" section, and any optional "Going Further" tasks.

Files Provided/Starter Code

  • Clicking the following link gives you immediate access to your personal private github repository.
    • You may use your personal or Northeastern github account. I do not care, but please be consistent with what you choose.
    • If you have not used git or github before, please follow this tutorial: Git in 15 Minutes.
    • I do look at your repositories, make sure you commit and push your final changes to repositories!
    • Please do not click until class starts. Occasionally I make changes until a few minutes before class (usually spelling corrections and other small typos).
    • Click now to get the lab starter code:

C++ Refresh

While this is not a C++ course, each lab I am going to provide an additional (optional) C++ code snippet so you can get up to speed (or perhaps just learn something cool and relevant to the course).
  • Code Sample 1. You can try it interactively here
  • Type out(i.e. DO NOT just copy and paste) the file so you learn the commands. Then save it with an appropriate name (e.g. example.cpp)
  • Compile and run with the following on the terminal:
    • Linux Option 1: clang++ -std=c++14 example.cpp -o example
    • Linux Option 2: g++ -std=c++14 example.cpp -o example
    • Mac Option 1:   clang++ -std=c++14 example.cpp -o example
    • Mac Option 2:   g++ -std=c++14 example.cpp -o example
    • Mac Option 3:   Create a console-based XCode project
    • Windows Option 1: Create a console-based Visual Studio C++ project
  • Finally, add this C++ code snippet to your repository to practice working with git.

(Optional) Aside - More on SDL

SDL("Simple Direct Medialayer") is a library that allows us to draw a window to the screen. We will be using SDL version 2.0+ for this course. SDL itself is an abstraction layer that can create windows for the appropriate platform(i.e. Windows, Mac, Linux, mobile, etc.), without us have to do the real nitty gritty details of setting up a window. While there are many

  • If you want to know how to setup a window in your native operating system platform the long way (without using a library like SDL), here are some examples from the web: Linux, Linux X11, Graphics Context in Mac, Native Windows
    • (Note: It is always worth knowing how things work behind the scenes! In doing so however, you may further appreciate the work done by SDL for us!)
  • We are not going to spend time arguing if other libraires (glut, freeglut, glfw, etc.) are the better or the best.
    • Try the one that fits your need
    • I choose SDL2 because it is what modern commercial games use, it is free, and it supports many desktop environments (as well as mobile if you are interested!)

Aside - More on OpenGL

Which version are we using for this course? The answer is that we will be using version 3.3.

  • There is some confusion as to which version of OpenGL versions exist.
  • OpenGL has a Compatibility Profile which contains all of the features of OpenGL (i.e. all of the old stuff)
  • OpenGL has a "Core Profile" which includes only new features that have not been deprecated. This is the future, though most graphics systems support legacy.
    • The Core profile has the old "fixed pipeline" in OpenGL. The fixed functino pipeline was actually quite nice for learning purposes, but is not efficient compared to modern day programs.
    • A Forward compatibility graphics context, will enforce the removal of all deprecated featuers.
  • The specification for OpenGL 3.3 is located here. Note this is not required reading by any means, but it is nice to know the spec exists, and this is something you might reference if you work at Intel, NVidia, AMD, etc.
  • A relatively detailed version of the OpenGL version history is here.

Going Further

What is that, you finished Early? Did you enjoy this lab? Here are some (optional) ways to further this assignment.
  • Start writing some OpenGL 3.3 from here! I imagine many will finish soon. This is now dedicated graphics time!
  • Look at some SDL 2 tutorial on the net.
  • Look for OpenGL 3.3 tutorials on the net.


  • You and your partner will receive the same grade from a scale of 0-2.
    • 0 for no work completed.
    • 1 for some work completed, but something is not working properly
    • 2 for a completed assignment (with possible 'going further' options completed)
  • You must complete this lab by next class. You will run your lab in front of me at the start of the next lab when class starts.

More Resources

Some additional resources to help you through this lab assignment

Found a bug?

If you found a mistake (big or small, including spelling mistakes) in this lab, kindly send me an e-mail. It is not seen as nitpicky, but appreciated! (Or rather, future generations of students will appreciate it!)
  • Fun fact: The famous computer scientist Donald Knuth would pay folks one $2.56 for errors in his published works. [source]
  • Unfortunately, there is no monetary reward in this course :)