CISC 110 Week 1. An Introduction to Computer Graphics and Scripting

Transcription

1 CISC 110 Week 1 An Introduction to Computer Graphics and Scripting

2 Emese Somogyvari Office: Goodwin Please use proper etiquette! Office hours: TBD Course website: I have been at Queen s for a long time, so if you have any questions about the School of Computing or Queen s in general, please feel free to ask

3 Lectures Here 6:30pm 9:30 pm Breaks

4 Labs Every week Mandatory Goodwin hr access with ibutton (see website for more info) Labs are full so no switching! (sorry 8:30am) Acitvate CasLab accounts *prior* to lab You will need your textbook TAs: Lexi: Brianna:

5 Textbook Buy me:

6 Flash We will be using Flash CS5.5 but you may come across CS6. ***CS6 files are not compatible with CS5.5

7 Marking Scheme and Schedule

8 Labs/Assignments Each Lab + Assignment = 3% of your mark Labs are due during your lab I will post everything on the website the week before Assignments are due the following week, marked during your lab -10% per day late Individual, but work together! I will find a way to post your grades through the website

9 Final Project Can be done in pairs or alone Storyboard (more later) Hand in during class Nov 6 Phase 1 code Marked for completion during labs in week 10 (up to - 20% off final project mark if incomplete) Phase 2 code Marked for completion during labs in week 12 (up to - 20% off final project mark if incomplete) User Manual (more later)

10 Tests Programming only (no Flash stuff) ActionScript Written Yes, written Practice problems and previous tests posted online Sometime I will allow a cheat sheet If you have a conflict with a test, you need to tell me well in advance

11 Sharing your work See website Uploading with Filezilla

12 Introductory course Course is designed for students with zero, or very little background in programming You will be learning basic programming concepts in ActionScript through the use of computer animation in Flash

13 CISC 110 Elementary Computer Animation in Flash What can you do in Flash..

14 Today and Maybe Next Week Intro to Animation and Programming 2D Graphics Frame by Frame and Motion Tween Animation Object-Oriented Programming Timeline Control Flash Library: Buttons, Text Fields, Sounds

15 What does an ActionScript File Look Like? A program is executed from the top-down.

16 The Flash Environment The basics..

17 Start up Flash Login with NetID and password to AD We will now activate your caslab accounts: 1. Go to 2. Click on Launch the CASLab Account Management Tool. 3. Enter your Queenʼs NetID (all lower-case). This will bring you to a page that will ask you to set your Caslab password (which is truncated to 10 chars) After completing these steps, you will need to wait for about 10 minutes until you have full access to the CASLab machines in the labs, so be sure to activate your CASLab account before your first lab

18 Start up Flash After ~10min. Use remote desktop to connect to socrates.caslab.queensu.ca Login as caslab\netid Use your caslab password

19 Vector Graphics Vector graphics Uses geometrical primitives such as points, lines, curves, and shapes or polygons, which are all based on mathematical equations, to represent images in computer graphics Credit: Many images in this section are from the Wikimedia Commons

20 Vector Graphics So, to draw a circle for example, a program needs to know the radius, the location of the center point, the line style and colour, and the fill style and colour, in order to draw it

21 Raster Graphics Raster graphics, unlike vector graphics, is generally a grid of pixels or points of colour

22 Vector vs. Raster Graphics Because raster images are based on pixels, they lose clarity when you scale them However, since vector images can be represented mathematically, they can scale indefinitely without degrading

23 Photo & Vectorized Image

24 Animation Animation is the rapid display of a sequence of images to create the illusion of movement These images can be of 2-D or 3-D artwork or model positions

25 2D Animation

26 3D Animation

27 Tweening Comes from inbetweening Process of generating intermediate frames between two images to give the appearance of a smooth transition In Flash, these two images are on keyframes in the timeline

28 Tweening Motion tween Shape tween Colour tween

29 Traditional Cel Animation Disney used cel animation until 1990 Images are drawn onto transparent cels and photographed together Each cel is a layer of the animation Background Each different character etc. In Flash you will also be animating in layers

30 RGB Colour Model Additive colour model where red, green, and blue light are added together to produce a wide array of colours

31 RGB Colour Model An RGB image can be separated into its red, green, and blue components:

32 Numerical Representation A colour in the RGB model can be represented by numbers which indicate how much of each red, green, and blue colours are present The colour is expressed as a triplet (r, g, b), with each value ranging from 0 (no light) to a maximum value (usually 255)

33 RGB Colour Cube If you were to take these numbers and plot them in a 3D space you get a colour cube:

34 Fully Saturated Colours When one colour is at it s max and all others are 0 (0, 0, 0) is black (255, 0, 0) is red (0, 255, 0) is green (0, 0, 255) is blue (255, 255, 0) is yellow (0, 255, 255) is cyan (255, 0, 255) is magenta yellow(255,255,0) green(0,255,0) cyan(0,255,255) red(255,0,0) blue(0,0,255) NOTE: (255, 255, 255) is white red(255,0,0) magenta(255,0,255)

35 Structure of Digital Computers CPU (Central Processing Unit): Calculations and the Fetch-Execute Cycle Secondary Storage Long-term memory of data and programs I/O Devices Input/Output:: Communication between the computer and the user, and with other computers Main Memory RAM (Random Access Memory): Short-term memory of data and programs, while computer is on

36 Main Memory (RAM) byte 3021 byte 3022 byte 3023 byte 3024 byte 3025 byte 3026 byte 3027 byte 3028 byte 3029 byte 3030 byte 3031 byte byte memory location at address 3021: could hold a 16-bit integer 4 byte memory location at address 3024: could hold a 32-bit integer 1 byte memory location at address 3030: could hold one letter

37 Memory Sizes Memory Conversion 1 bit Either 1 or 0 1 nybble 4 bits 1 byte 1 kilobyte 1 gigabyte 1 terabyte 8 bits 2 10 bytes (approx bytes) 1 megabyte 2 20 bytes (approx kilobytes) 2 30 bytes (approx megabytes) 2 40 bytes (approx gigabytes)

38 What is a Computer? A computer is a machine that carries out tasks by following instructions to perform operations at high speeds Operations are built into hardware: machine operations

39 What is an Algorithm? An algorithm is a sequence of instructions that describes how to carry our a task Algorithms aren t always on a computer! Instructions on how to bake a cake is an algorithm

40 Let s think of computation like cake-making Bit String: Numbers or Characters Cake Ingredients (Input) Program/Software Recipe (Algorithm) Electronic Computer Oven & Utensils (Hardware) Bit String: Numbers or Characters Cake (Output)

41 What is a Programming Language? Computer language consisting of operations used to define instruction that a computer can execute These instructions are written by you, the programmer, and given to the computer to execute

42 Scripting Language A scripting language, like ActionScript, is a programming language written for specific environments (like Flash) that can interpret tasks automatically Allows for the control of an application, like an animation for example

43 Next week. Object oriented programming Symbols: Classes in Flash Exercises! Methods in ActionScript and Flash Parameters Objects in Flash Buttons More! Make sure you have your textbook for your lab! Lab/Assignments will be posted online

44 Labs/Assignments Sometimes you will be working on something in your labs/assignments that I haven t necessarily or explicitly taught in class. This is intentional! You will learn a lot more in your labs and through your assignments/projects than what I can teach you in class because they are hands on. But I will try to clarify on these topics during lecture, after you ve had some experience with them. This also gives you the opportunity to ask questions (For example, you will be working with buttons and simple animations in your next lab/assignment)