CISC 110 Week 1 An Introduction to Computer Graphics and Scripting
Emese Somogyvari Office: Goodwin 235 E-mail: somogyva@cs.queensu.ca Please use proper email etiquette! Office hours: TBD Course website: http://courses.caslab.queensu.ca/cisc110/ 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
Lectures Here 6:30pm 9:30 pm Breaks
Labs Every week Mandatory Goodwin 248 24hr 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: lexi.flynn@queensu.ca Brianna: 11br21@queensu.ca
Textbook Buy me:
Flash We will be using Flash CS5.5 but you may come across CS6. ***CS6 files are not compatible with CS5.5
Marking Scheme and Schedule
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
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)
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
Sharing your work See website Uploading with Filezilla
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
CISC 110 Elementary Computer Animation in Flash What can you do in Flash..
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
What does an ActionScript File Look Like? A program is executed from the top-down.
The Flash Environment The basics..
Start up Flash Login with NetID and password to AD We will now activate your caslab accounts: 1. Go to http://www.caslab.queensu.ca/account/ 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
Start up Flash After ~10min. Use remote desktop to connect to socrates.caslab.queensu.ca Login as caslab\netid Use your caslab password
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
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
Raster Graphics Raster graphics, unlike vector graphics, is generally a grid of pixels or points of colour
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
Photo & Vectorized Image
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
2D Animation
3D Animation
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
Tweening Motion tween Shape tween Colour tween
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
RGB Colour Model Additive colour model where red, green, and blue light are added together to produce a wide array of colours
RGB Colour Model An RGB image can be separated into its red, green, and blue components:
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)
RGB Colour Cube If you were to take these numbers and plot them in a 3D space you get a colour cube:
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)
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
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 3032 11110000 10101100 11011010 00110101 01000001 10101010 01011101 00000000 11111111 11100010 10110101 00011011 01001111 2 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
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. 1000 bytes) 1 megabyte 2 20 bytes (approx. 1000 kilobytes) 2 30 bytes (approx. 1000 megabytes) 2 40 bytes (approx. 1000 gigabytes)
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
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
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)
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
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
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
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)