IAT 265 Multimedia Programming for Art and Design

  • Slides: 50
Download presentation
IAT 265 Multimedia Programming for Art and Design ___________________________________________ SCHOOL OF INTERACTIVE ARTS +

IAT 265 Multimedia Programming for Art and Design ___________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW. SIAT. SFU. CA

Overview g Go over the syllabus g Brief g Art, May 10, 2016 introduction

Overview g Go over the syllabus g Brief g Art, May 10, 2016 introduction to me and my work programming and Java IAT 265 2

Background g g Ph. D. in Computing Science Research – – Visual Analytics Virtual

Background g g Ph. D. in Computing Science Research – – Visual Analytics Virtual Environments Health Informatics Two-Handed 3 D Interfaces for • 3 D Free-Form Surface Design • Scientific visualization • Information visualization – Bioinformatics Visualization g Teaching – Videogame Design & Programming, VA May 10, 2016 IAT 265 3

3 D CAD: Twister May 10, 2016 IAT 265 4

3 D CAD: Twister May 10, 2016 IAT 265 4

3. CAD: Gallery May 10, 2016 IAT 265 5

3. CAD: Gallery May 10, 2016 IAT 265 5

TA g Ankit Gupta – Ph. D student in SIAT – Visual Analytics and

TA g Ankit Gupta – Ph. D student in SIAT – Visual Analytics and Health Informatics expert – He doesn’t always wear a tie May 10, 2016 IAT 265 6

Myths about 265 g Survey said… g Too much of the same stuff as

Myths about 265 g Survey said… g Too much of the same stuff as CMPT 166 and IAT 167 – Fixed! We address this throughout the term by getting to the new stuff more quickly May 10, 2016 IAT 265 7

Myths about 265 g Useless for my awesome design/media career – True! • in

Myths about 265 g Useless for my awesome design/media career – True! • in 1992! g What is the primary medium of information delivery today? – The internet is fundamentally a medium is implemented, controlled, delivered by computer programs – Who do you want in control of that? You or some Computer Science geek who doesn’t know Jack? May 10, 2016 IAT 265 8

Myths about 265 g Nobody wants programming g Take a look at these 309

Myths about 265 g Nobody wants programming g Take a look at these 309 W Portfolios May 10, 2016 IAT 265 9

Cassie de. Git – Tutoring System May 10, 2016 IAT 265 10

Cassie de. Git – Tutoring System May 10, 2016 IAT 265 10

Carlo Misajon- Table. Top Game May 10, 2016 IAT 265 11

Carlo Misajon- Table. Top Game May 10, 2016 IAT 265 11

Bruce Beh – Twitter-Powered Vending machine May 10, 2016 IAT 265 12

Bruce Beh – Twitter-Powered Vending machine May 10, 2016 IAT 265 12

g. I interviewed Facebook staff: – “We want people who have good design chops

g. I interviewed Facebook staff: – “We want people who have good design chops who know about system design and can write code” g Grad students – “We need people who can do deep scientific inquiry into what people need and how Facebook can fulfill that need” May 10, 2016 IAT 265 13

May 10, 2016 IAT 265 14

May 10, 2016 IAT 265 14

What g What you will do – 4 -5 assignments (50 %) • In

What g What you will do – 4 -5 assignments (50 %) • In these individual assignments, you will build code to deliver a walking animal and have it be displayed on a common platform – Quizzes 15% – Exam 30% – Clicker (Top. Hat) 5% May 10, 2016 IAT 265 15

Programming languages Abstract, “human understandable” language for telling computer what to do g The

Programming languages Abstract, “human understandable” language for telling computer what to do g The abstract language must be translated into the low level language “understood” by the machine g This translation is accomplished by an interpreter or compiler g We will be learning the compiled language Java g May 10, 2016 IAT 265 16

A simple Java program Human readable? !? for ( int i = 0 ;

A simple Java program Human readable? !? for ( int i = 0 ; i < 10 ; i++ ) { println( i ); } Just prints the numbers 0 to 9 on the screen May 10, 2016 IAT 265 17

“Human readable” is relative for (int i = 0; i < 10; i++) {

“Human readable” is relative for (int i = 0; i < 10; i++) { println(i); } Java compiler translates this into… May 10, 2016 IAT 265 18

Java VM assembly code public static void main(java. lang. String[]); Code: 0: iconst_0 1:

Java VM assembly code public static void main(java. lang. String[]); Code: 0: iconst_0 1: istore_1 2: goto 30 5: getstatic 8: new 11: dup 12: ldc 14: invokespecial #23 17: iload_1 18: invokevirtual #27 21: invokevirtual #31 May 10, 2016 24: 27: 30: 31: 33: 36: invokevirtual #34 iinc 1, 1 iload_1 bipush 10 if_icmplt 5 return test. Print. Loop(); Code: 0: aload_0 1: invokespecial #43; 4: return IAT 265 19

Object Oriented vs. Procedural Languages Procedural (e. g. C) – We create some data

Object Oriented vs. Procedural Languages Procedural (e. g. C) – We create some data representing an image (array of pixels to draw on the screen) – We write a procedure than can be passed the image and will draw it May 10, 2016 Object Oriented (e. g. Java) – We create a class that contains an image AND a procedure to draw it – The data and the behavior (ability to draw) are in one "container" IAT 265 20

A couple of Java’s relatives g Smalltalk 80 – Alan Kay and the Dynabook

A couple of Java’s relatives g Smalltalk 80 – Alan Kay and the Dynabook (PARC) g C++ – Managing big C programs: Bjarne Stroustrup May 10, 2016 IAT 265 21

Java g Designers started with C++ – Smaller – Simpler – Safer g Programming

Java g Designers started with C++ – Smaller – Simpler – Safer g Programming embedded systems – Toasters, microwave ovens, TV set top boxes • Reliability very important--avoid costly recalls g Web programming – Incorporated into web browsers at critical moment May 10, 2016 IAT 265 22

The virtual machine g Since Java was designed to run on embedded systems, it

The virtual machine g Since Java was designed to run on embedded systems, it was designed around a virtual machine – “Write once, run everywhere” PC Mac Cell Phone Java VM Windows Java VM OS X x 64 Java VM x 86 Phone OS Processor Java Machine “Java OS” Java VM May 10, 2016 IAT 265 23

Developing Programs g We will start with Processing g Then, we will transition to

Developing Programs g We will start with Processing g Then, we will transition to Net. Beans using the Processing library. May 10, 2016 IAT 265 24

Processing g Processing is built on top of Java g Supports script-like coding –

Processing g Processing is built on top of Java g Supports script-like coding – Easy to get simple programs up fast – But allows transition to full Java programming g Has built-in methods and classes to make drawing easy g Easy to export program May 10, 2016 IAT 265 25

Playing around g To learn how to program it is necessary to play around

Playing around g To learn how to program it is necessary to play around with code!!! – Don’t just wait for me or the TA to show you things g Processing makes this easy – Use the Reference in the Help menu – or www. processing. org/reference – Play with the examples May 10, 2016 IAT 265 26

Saving your work g You should install Processing on your own machine – Do

Saving your work g You should install Processing on your own machine – Do this for Thursday g Processing saves all projects in a directory you can select via preferences May 10, 2016 IAT 265 27

Drawing in Processing g Automatic creation of display window g Window has a coordinate

Drawing in Processing g Automatic creation of display window g Window has a coordinate system for drawing 0 0 50 100 x 50 100 y May 10, 2016 IAT 265 28

Let’s draw a point: point() point(x, y) – draws a point at the location

Let’s draw a point: point() point(x, y) – draws a point at the location x, y Let’s try it: point(50, 50) Unexpected token: null – what ? ? g Compiler errors appear in the bottom pane All lines must be terminated with a semicolon ; May 10, 2016 IAT 265 29

Drawing several points point( May 10, 2016 30, 85, 30, 20 20 75 75

Drawing several points point( May 10, 2016 30, 85, 30, 20 20 75 75 ); ); IAT 265 30

Drawing more shapes line(x 1, y 1, x 2, y 2); triangle(x 1, y

Drawing more shapes line(x 1, y 1, x 2, y 2); triangle(x 1, y 1, x 2, y 2, x 3, y 3); rect(x, y, width, height); rect. Mode() – CORNER, CORNERS, CENTER ellipse(x, y, width, height); ellipse. Mode() – CENTER, CENTER_RADIUS, CORNERS Don’t use these draw modes!!! rect. Mode(), ellipse. Mode() May 10, 2016 IAT 265 31

Controlling color and line Colors represented as Red Green Blue (RGB) values Each one

Controlling color and line Colors represented as Red Green Blue (RGB) values Each one ranges from 0 to 255 background(R, G, B); – set the background color stroke(R, G, B); – set the colors of the outline (default black) no. Stroke(); – no outline drawing around shapes fill(R, G, B); – set the fill color for shapes (default white) no. Fill(); – don’t fill the shapes (background shows through) stroke. Weight(w); – line width for outlines (default 1) May 10, 2016 IAT 265 32

Comments g Comments are non-program text you put in the file to describe to

Comments g Comments are non-program text you put in the file to describe to others (and yourself) what you’re doing g Important for being able to look back at your code and understand it g Single-line comments begin with // g Multi-line comments begin with /* and end with */ Commenting and uncommenting lines is useful for figuring out code May 10, 2016 IAT 265 33

Syntax g The study of the principles and rules for constructing sentences in natural

Syntax g The study of the principles and rules for constructing sentences in natural languages g Computer languages are Formal Languages – Strict rules for well-formed statements – Well-defined meaning for well-formed statements So well defined, a machine can do it May 10, 2016 IAT 265 34

Semantics formal meaning of well-formed statements g The g As we move forward in

Semantics formal meaning of well-formed statements g The g As we move forward in the term, we will 1. Describe correct syntax 2. Describe basic semantics 3. Explore the use of these tools for Design May 10, 2016 IAT 265 35

Drawing primitives g What are the different syntax parts of a drawing primitive? method

Drawing primitives g What are the different syntax parts of a drawing primitive? method name line( 0, 0, 50 ); arguments, parameters parentheses contain arguments May 10, 2016 IAT 265 36

The drawing commands are methods g Methods are reusable commands – Like a little

The drawing commands are methods g Methods are reusable commands – Like a little machine that does work for you – Let’s you reuse code without typing it over and over g The arguments tell the method precisely what to do g We’ll see later that you can define your own methods! May 10, 2016 IAT 265 37

Variables g A variable is a named box for storing a value g You

Variables g A variable is a named box for storing a value g You can put values in a variable by using the assignment operator (aka “=“ ) e. g. x = 1; g To use the value stored in a variable, just use the variable’s name e. g. line( x, 0, 50); May 10, 2016 IAT 265 38

Variables have a type g You must tell Processing (Java) what kinds of values

Variables have a type g You must tell Processing (Java) what kinds of values can go in the box g You int x; int y; do this by giving a variable a type // variable x can hold integers (int) // variable y can hold integers (int) x = 20; // store 20 in x y = 30; // store 30 in y point(x, y); // use the values of x and y to draw a point May 10, 2016 IAT 265 39

Creating an int variable Code Effect Name: an. Int, Type: int // Single int

Creating an int variable Code Effect Name: an. Int, Type: int // Single int an. Int; // Put a value in the int an. Int = 3; Name: an. Int, Type: int // Type error! an. Int = “hello”; May 10, 2016 Name: an. Int, Type: int 3 “hello” Can’t shove “hello” into an int IAT 265 40

Assigned values must match the type int x; int y; // variable x can

Assigned values must match the type int x; int y; // variable x can hold integers (int) // variable y can hold integers (int) x = 1. 5; y = 30; point(x, y); // store 1. 5 in x causes an error!!! // store 30 in y // use the values of x and y to draw a point May 10, 2016 IAT 265 41

Why Types? g Tells system (and you) what kind of values to expect g

Why Types? g Tells system (and you) what kind of values to expect g System uses type to detect errors int pi = 3. 14 ; // error: 3. 14 not an int May 10, 2016 IAT 265 42

The “primitive” types int – integers between -2, 147, 483, 648 and 2, 147,

The “primitive” types int – integers between -2, 147, 483, 648 and 2, 147, 483, 647 float – floating point numbers (e. g. 3. 1415927, -2. 34) char – a single character (e. g. ‘c’) byte – integers between -128 and 127 boolean – holds the values true or false color – holds a color (red, green, blue, alpha) color is a Processing type May 10, 2016 IAT 265 43

Can combine declaring and assigning g Declaring a variable means telling Processing its type

Can combine declaring and assigning g Declaring a variable means telling Processing its type int x; g Assigning a value to a variable means putting a value in the named box x = 1; g You can declare and assign at the same time int x = 1, y = 2; g But only declare a variable once, otherwise you get an error May 10, 2016 IAT 265 44

Print and println g When working with variables, it is often convenient to look

Print and println g When working with variables, it is often convenient to look at their values g print() and println() print to the bottom processing pane – They do the same thing, except println starts a new line after printing May 10, 2016 IAT 265 45

Control flow g By default Processing (Java) executes the lines of a method one

Control flow g By default Processing (Java) executes the lines of a method one after the other – Sequential control flow – Unconditional – doesn’t matter what happens in the world g Often we want which steps are executed to depend on what else has happened g That is, we want conditional control flow – This is necessary in order to make anything that is interactive May 10, 2016 IAT 265 46

If if statements introduce conditional execution if ( <boolean expression> ) { // do

If if statements introduce conditional execution if ( <boolean expression> ) { // do this code } <boolean expressions> have one of two values: true or false May 10, 2016 IAT 265 47

Some boolean expressions an. Integer == 1 true if variable an. Integer is equal

Some boolean expressions an. Integer == 1 true if variable an. Integer is equal to 1 x > 20 true if variable x is greater than 20 1 == 2 true if 1 is equal to 2, it’s not so this is false ! ! (1 == 2) is the not operator – reverses true and false so, is true This is not a boolean expression: int an. Integer = 1; May 10, 2016 IAT 265 48

Example stroke. Weight(2); // draw with heavier line stroke(200, 0, 0); // draw with

Example stroke. Weight(2); // draw with heavier line stroke(200, 0, 0); // draw with red line boolean draw. Rect = true; boolean draw. An. X = true; if (draw. Rect) { fill(0, 200, 0); // fill with green rect(30, 40, 40); } if (draw. An. X) { line(0, 0, 100); line(100, 0, 0, 100); } Try changing the values of draw. Rect and draw. An. X May 10, 2016 IAT 265 49

Composition g Programming languages have pluggable parts Plug in a boolean if ( <boolean

Composition g Programming languages have pluggable parts Plug in a boolean if ( <boolean expression> ) { // do this code } Plug in a some code Compose programs from pluggable parts May 10, 2016 IAT 265 50