Top Banner
Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction to Graphics Elements of Graphics CS324e Fall 2020
14

Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

Aug 25, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

Dr. Sarah AbrahamUniversity of Texas at AustinComputer Science Department

Introduction to Graphics

Elements of GraphicsCS324eFall 2020

Page 2: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

What is Graphics?

Page 3: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

Graphics and Visualization❖ Computer graphics creates imagery through computing

❖ Simulation

❖ Modeling

❖ Games

❖ Artist tools

❖ Computer Visualization conveys messages or information through computer graphics

❖ Medical

❖ Sociological

❖ Biological

❖ Physical

Page 4: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

Big Hero 6 (Disney)

Combustion Engine (Sandia)

Page 5: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

Topics Covered❖ Processing language

❖ Graphics programming

❖ Image manipulation

❖ Data visualization

❖ Object-oriented programming

❖ Animation

❖ Simulation

❖ Interactivity

❖ WebGL and shaders

Page 6: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

Elements of Graphics Class Format❖ In this class, we will focus on group exploration and

discussion rather than lecture

❖ Thus the day’s format will be:

❖ 10 minute presentation of student work

❖ 20-30 minutes of class material

❖ Periodic quizzes to test understanding

❖ 10-20 minutes of in-class work (groups encouraged)

Page 7: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

Class Expectations❖ Project-based work

❖ Team projects and reports

❖ Engaged and helpful attitude

❖ Mandatory attendance

❖ Ask and answer questions on Piazza/Discord

❖ Academic honesty

❖ Positive teamwork and interactions

❖ Preparedness for presenting your work in class

❖ Ability to read syllabus and schedule on your own

Page 8: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

In-Class Presentations and Quizzes❖ Attendance and discussion will be done using Instapoll and in-class presentations

❖ Be prepared/on time to present!

❖ Students can volunteer (or I will pick a student at random) to show off their work

❖ You will be notified the night before on Piazza

❖ You may be picked multiple times!

❖ In-class quiz grades are participation (wrong answers are not penalized)

❖ Checks individual attendance

❖ Checks understanding of material

❖ Canvas will have make-up quizzes if you are unable to attend class during the actual timeslot

Page 9: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

Processing

❖ Java-based language for visualization

❖ Designed for non-programmers

❖ All documentation can be found at https://processing.org/

❖ Recommended reading: Processing by Casey Reas and Ben Fry

Page 11: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

Processing Languages❖ Processing.py allows for Python-style syntax within the

Processing language

❖ p5.js is the Javascript version, which works well with HTML5

❖ Processing, Processing.py, and p5.js files will be accepted within this class

❖ Class examples will be done using Java-based Processing

❖ Java Processing recommended

❖ Note: we will use Javascript when working with WebGL

Page 12: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

Processing “Hello World”

Page 13: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

In-Class Exercise

❖ Install Processing on your laptop

❖ Create void setup() and void draw() functions

❖ Look on the Processing website to see some of the available calls to use within these functions

❖ What is the difference between setup() and draw()?

Page 14: Dr. Sarah Abraham University of Texas at Austin Computer ...theshark/courses/cs324e/... · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Introduction

Next Class: Online Meet and Greet!❖ Even though we’re working remotely, this is not an “online class”

❖ You’re here to make friends, work on a team, and get a full classroom experience beyond just learning

❖ Before next class take (or pick out) 2-3 images that “represent” you

❖ You do not have to share your face, but do make sure all of the images are work-appropriate

❖ We will meet next time in the Discord voice and text channels in medium groups where you will share these pictures and explain how they represent you