//****************************************************************************//
//******************** First Day - January 7th, 2019 ************************//
//**************************************************************************//

- 12:18 - activity on the screen detected
    - On the screen: "CS 3451 - COMPUTER GRAPHICS - INSTRUCTOR GREG TURK"
-------------------------------------------------------------------------

- "Okay, so as you hopefully know, this class is CS 3451 - an intro course to computer graphics"
- Instructor: Professor Greg Turk!
    - "I work in the school of interactive computing, which most students don't know or care about"
    - Specifically, he works on computer graphics applications, so this is his own favorite child in the course curriculum :)

- Okay, some intro syllabus stuff:
    - This course was designed as a first class for computer graphics, so if you haven't taken a CG class before, great! Otherwise, this class might be a bit basic for the experienced folks among us
- Some things I expect you to already know:
    - BASIC linear algebra knowledge (vectors, matrices, matrix multiplication, inverses, etc.)
    - Familiarity with Java/a C-like programming languages
        - "We'll be using Processing in this course, which is a sort of wrapper-extension to Java"
    - Things I hope that you WILL get to know: output devices, rasterization, texturing, raytracing, color, lighting...etc.
- There'll be 5 medium-sized programming assignments (and 1 warm-up assignment) that make up 70% of the grade, along with a midterm and a final
    - These are all individual assignments - feel free to get help from me or the TAs, but I think you'll learn best by going it on your own. That means NO code sharing, using code from books/github, etc.
        - As per usual, honor code violations result in a 0, and it breaks his heart everytime
- We DO have a textbook for this course - and it's pretty good! "Fundamentals of Computer Graphics", by Peter Shirley. Any edition from 2-4 is fine, and optional reading assignments from it will be pretty frequent.
    - You can probably get through this class without it, but I'd highly recommend you do get it

- How do you succeed in this course? Really, just 2 pieces of usual advice from other classes:
    - Start the projects EARLY - start them a day or two after it's released, not the night of. Give yourself that buffer if something goes wrong
    - Get help if you feel like you're struggling. Some of this stuff might be confusing the first time you hear it, and that's okay! We're here to help!

- Student question: "wat bout blender pr0gram?"
    - Professor Turk: Blender's a really nice open source CG modeling program that uses many of the techniques we'll discuss here, but that's an example of a 3D computer graphics application - we're going to be learning the algorithms and mathematics BEHIND how those graphics work and how applications like Blender are created, not using them directly

- ...okay, that's most of the administrivia and a broad outline of what we're doing this semester.
- With that said, let's talk about the first example programming assignment, and why it exists:
    - This project is just to give you guys an early heads-up on what the programming/difficulty in this course looks like, so you can decide right away if this course is appropriate for you. Get started on it right away; if it's easy for you, great! If it takes some work, consider talking to me about whether this course is right for you

- ...and with that, let's start talking about the first big topic in the course: RASTER IMAGES
    - As most of you know, computer screens are composed of PIXELS (short for "picture element" - "I don't know how the X got in there"), arranged in rows (known as SCANLINES) and each with its own assigned color
        - Typically, this color is given as an RGB (red-green-blue) value of 3 numbers in the range 0 to 255 - e.g., [255, 0, 0] is bright red, [0, 255, 255] would be cyan, etc.
        - There ARE a few less common ways of specifying color, but we'll talk about that in due time
    - These pixels are arranged in a rectangular grid, according to some coordinate system

- In Processing, the coordinates are given as 2D (x,y) coordinates, with X on the horizontal axis and Y on the vertical
    - Annoyingly, instead of the origin being in the lower-left corner of the screen, it's in the UPPER-LEFT, with the "x" coordinate being the distance to the right and "y" being the distance down from the top
        - Apparently, there's some historical reason for this due to how early TV transmissions were displayed, but still: annoyance
- The size of the grid in Processing can be specified with the "size" command, e.g:

    size(400, 400); // opens a 400x400 pixel window

- EVERY Processing program needs 2 functions:
    - void setup() {...}, which handles any initialization
    - void draw() {...}, which is repeatedly called every frame, usually to redraw the window

- A few other useful Processing commands:

    rect(100, 200, width, height); // width-by-height rectangle with the upper-left corner at (100, 200)
    ellipse(200, 200, width, height); // creates an ellipse

    background(r, g, b); // fills the window w/ the given background color
    stroke(r, g, b); // sets the outline color
    fill(r, g, b); // sets the fill color
    noStroke(); //turns off outlines
    noFill(); //turns off the fill color

- Other Processing things:
    - "width" and "height" are predefined variables that refer to the width/height (in pixels) of the window
    - "mouseX" / "mouseY" are ditto for the mouse position coordinates

- Okay, but what if we really didn't like Processing's coordinate system?
    - Let's say, for instance, we want to specify coordinates using the regular origin-in-the-middle graph system from middle school, w/ the X-range from -1 to 1 - how would we do this?
        - Well, the current Processing X-coordinates go from 0 to screenWidth, so we need to map from [-1, 1] to [0, screenWidth]
            - Since we want to go from positive/negative numbers to all positive, let's just shift our coordinates to all positive by adding 1; i.e, 

                [-1, 1] -> [0, 2]

            - From there, we can just multiply by screenWidth/2 to get the screen's coordinates!
                - "Some of you might be comfortable doing this in 1 step with linear algebra, but I like to split it up in my head"
    - Similarly, to go from the screen X coordinates to our [-1, 1] system, we'd subtract "screenWidth/2" from the coordinates to shift the "center" of the range, then multiply it by (1 / (screenWidth/2)) to finish it off

- "Now, remember the unit circle for sines and cosines in Trig? Remember, for a point on that unit circle, the X-coordinate is cos(theta), and the Y-coordinate is sin(theta)"
    - Importantly, Processing uses radians for sine/cosine angles; don't use degrees, or things'll get real weird fast

- ...and with that, you should have all the Processing and math you need to finish the intro project - until then, Salud!