COMP 175 COMPUTER GRAPHICS Lecture 01 Introduction COMP

COMP 175 | COMPUTER GRAPHICS Lecture 01: Introduction COMP 175: Computer Graphics January 16, 2020 Remco Chang 01 - Introduction 1/26

COMP 175 | COMPUTER GRAPHICS People Instructor: Remco Chang remco@cs. tufts. edu Office: Halligan 215** Hours: ? ? Remco Chang 01 - Introduction Grad TA: Matt Russell Office: ? ? ? Hours: ? ? ? 2/26

COMP 175 | COMPUTER GRAPHICS Clarification! � Meeting Time: � Tuesday and Thursday from 1: 30 -2: 45 � H+ Block � Quick Poll: � Laptops? � Operating Systems? � C++ proficiency? � Linear Algebra? � People who took 150 VIZ? � Gamers? � Access to Piazza? Remco Chang 01 - Introduction 3/26

COMP 175 | COMPUTER GRAPHICS Clarification! � COMP 40 � � Linear Algebra � � Machine Structure and Assembly-Language Programming Implies: COMP 15 (Data Structures) Implies: proficiency with C++ and memory management Vector and Matrix math Calc 2 � Taking derivatives of lines and surfaces � � Finding tangents (slopes) Maybe integrals Remco Chang 01 - Introduction 4/26

COMP 175 | COMPUTER GRAPHICS Clarification �Questions? � Conflicts with schedule? � Come talk to me �Haven’t taken 40, Linear Algebra, or Calc 2? � Don’t panic… � We’ll go over most of the content Remco Chang 01 - Introduction 5/26

COMP 175 | COMPUTER GRAPHICS What is Graphics? � 3 D world map to 2 D �How to do it? Remco Chang 01 - Introduction 6/26

COMP 175 | COMPUTER GRAPHICS What is Graphics? � 3 D world map to 2 D �How to do it? � Geometry transform � Per-pixel operation Remco Chang 01 - Introduction 7/26

COMP 175 | COMPUTER GRAPHICS What is Graphics? �Geometry �View � Parallel � Perspective Remco Chang 01 - Introduction 8/26

COMP 175 | COMPUTER GRAPHICS What is Graphics? � Geometry � View � Parallel � Perspective � Complex scene � Putting pixels on a 2 D canvas � Putting (pretty) pixels on a 2 D canvas Remco Chang 01 - Introduction 9/26

COMP 175 | COMPUTER GRAPHICS What is Graphics? � 3 D world map to 2 D �How to do it? � Fixed pipeline � Programmable pipeline (so called “shaders”) �Going from fix pipeline into programmable pipeline Remco Chang 01 - Introduction 10/26

COMP 175 | COMPUTER GRAPHICS What Does your Graphics Card Do? �Why expensive graphics cards? �Why are they fast (at graphics)? �Are they good at anything else? �Example for parallelizable vs. serial-only algorithms � Let’s try sorting… Remco Chang 01 - Introduction 11/26

COMP 175 | COMPUTER GRAPHICS New “Twist” on Graphics � Traditionally 3 D graphics is for entertainment purposes (games, movies, special effects, etc. ) � Now techniques used in 3 D graphics are become more commonly used for both 2 D and 3 D rendering � Mostly to utilize graphics cards � It’s becoming a part of HTML 5 (through Web. GL) http: //www. nytimes. com/interactive/2015/01/09/sports/thedawn-wall-el-capitan. html � https: //www. creativebloq. com/3 d/30 -amazing-examples-webglaction-6142954 � https: //www. awwwards. com/30 -experimental-webgl-websites. html � � A new tool for designing rich and interactive web pages Remco Chang 01 - Introduction 12/26

COMP 175 | COMPUTER GRAPHICS Spirit of this class � Creativity, Creativity � We will teach you the tools, the rest is up to you! � Example: what is the most popular video games of all time? � https: //en. wikipedia. org/wiki/List_of_best-selling_video_games � https: //en. wikipedia. org/wiki/List_of_best-selling_PC_games � There are 3 ways to impress me: � Do something cool in your (visual | graphics) design � Do something cool in your (interaction) design � Do something cool in your (code | optimization) design Remco Chang 01 - Introduction 13/26

COMP 175 | COMPUTER GRAPHICS What Your Takeaways Are �Core: � Knowledge of 3 D graphics � Both fixed-pipeline and shaders � A portfolio of graphics applications that you have built � Understanding of event-based programming and hardware programming � Confidence in building (desktop) systems from the ground up �Passing: � Comfortable with scientific computing � Experiments with Web. GL Remco Chang 01 - Introduction 14/26

COMP 175 | COMPUTER GRAPHICS General Information �Course website: � http: //www. cs. tufts. edu/comp/175 �Assignments �Labs �Syllabus �Support Code �Textbooks �Grading �Accommodation Remco Chang 01 - Introduction 15/26

COMP 175 | COMPUTER GRAPHICS Grading �Assignments (2% + 9% each): � 1. Shapes � 2. Camera � 3. Scene. View � 4. Modeler � 5. Ray Tracer �Final Project �Labs (9) 11% 11% 11% 18% 27% (3% each) � Note: Lab 0 is not for grade �Total Remco Chang 100% 01 - Introduction 16/26

COMP 175 | COMPUTER GRAPHICS Teams and Outside Help � Paired Programming � Work in a team of two � Labs: � Random partners � Assignments: � Same partner for the first 2 assignments � Another partner for the last 3 assignments � Final Project � No restrictions on the partners, but work in teams of 2. � Online Resources � There are lots of resources online � Use them for understanding, but again, you must turn in your own work! Remco Chang 01 - Introduction 17/26

COMP 175 | COMPUTER GRAPHICS In Class Labs � 10 Labs total �Should be doable within a couple of hours… �If not, you have 1 week to complete it Remco Chang 01 - Introduction 18/26

COMP 175 | COMPUTER GRAPHICS Take-Home Assignments � There are 5 Assignments � You have 2 weeks to complete each one � An algorithm sheet needs to be submitted within the first week � Due date will generally be noon on Fridays � All assignments (including algorithm worksheets) are due on Mondays at midnight (11: 59 pm) � On the course website it looks like assignments are due on Tuesdays… They’re due on Mondays at midnight!! Remco Chang 01 - Introduction 19/26

COMP 175 | COMPUTER GRAPHICS Take-Home Assignments: Grading �Your team will demo your take-home assignment to the TA or myself at the designated time. We will have sign up sheets when the assignments are due. � Usually the demo date is the Friday of the assignment due week. �Algorithm worksheets and Assignments are submitted using “provide” � The TAs will grade your algorithm worksheet for each assignment and give you feedback � If it turns out that your solution is way off course, the TAs will ask you to schedule another time to meet with them Remco Chang 01 - Introduction 20/26

COMP 175 | COMPUTER GRAPHICS Assignment 1: Shapes �Creating 3 -dimensional objects using triangles �Write code to break up common geometric shapes into triangles (tessellation) �Rectangles, spheres, cylinders, and cones �Data structure of points, lines, polygons, shapes Remco Chang 01 - Introduction 21/26

COMP 175 | COMPUTER GRAPHICS Assignment 2: Camera � Write a (software) perspective camera � Maintain transform matrices, from world to screen and inversely from screen to world � Implement pan, zoom, rotate, etc. for the camera � Become comfortable with matrix manipulation Remco Chang 01 - Introduction 22/26

COMP 175 | COMPUTER GRAPHICS Assignment 3: Scene. View � Maintain and render a hierarchical scene � Uses the primitives created in Shapes, and the view transform from Camera � Apply hierarchical transform of rotation, translation, and scaling to render a 3 D scene � Management of hierarchical data structure Remco Chang 01 - Introduction 23/26

COMP 175 | COMPUTER GRAPHICS Assignment 4: Modeler / Intersect �Cast rays to intersect with a 3 D scene �Add user interactivity to move the objects using a mouse �Output 3 D scene files �Become comfortable with going from 2 D to 3 D and 3 D to 2 D Remco Chang 01 - Introduction 24/26

COMP 175 | COMPUTER GRAPHICS Assignment 5: Recursive Ray Tracer �Using rays from Modeler, recursively bounce to rays to create a fully ray-traced 3 D scene �Implement Phong Shading �Implement texture-mapping �Highly parallel, recursive algorithm Remco Chang 01 - Introduction 25/26

COMP 175 | COMPUTER GRAPHICS Final Project � Demo during the final period � Be awesome � Ideas can come from: � Labs � Assignments � Something cool you saw on Youtube � An idea for a game � A cool website (in Web. GL) � A research paper you read �: �: Remco Chang 01 - Introduction 26/26

COMP 175 | COMPUTER GRAPHICS Other Issues �Using Piazza � Do NOT post code!! � It’s been setup. You should be receiving an invitation soon �Using FLTK and GLM � Cross platform � Linux / Unix � Mac** � Windows** � Support code “cleanliness” and stability… Remco Chang 01 - Introduction 27/26

COMP 175 | COMPUTER GRAPHICS Late Policy �Assignments that are turned in late will receive a 0. �Note: you are allowed 1 extension for the semester. � With an extension, you will be granted an extra 3 days. Remco Chang 01 - Introduction 28/26

COMP 175 | COMPUTER GRAPHICS Late Policy �Labs are checked one week later. � You will demo this in class to myself or the TA � There is no late policy for the labs. �If you have an extraordinary circumstance, you must contact the instructor or the TA as soon as possible and obtain written approval. �NO LATE POLICY for the Final Project!! � Final Project Demo will be on the Final Exam date (see course website for detail) Remco Chang 01 - Introduction 29/26

COMP 175 | COMPUTER GRAPHICS Questions? Remco Chang 01 - Introduction 30/26