Introduction to Programming

Slide 1

Slide 1 text

INTRODUCTION TO PROGRAMMING UH : Paciﬁc New Media : 2013 : 06 : 15

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

...do we direct technology, or do we let ourselves be directed by it and those who have mastered it? “Choose the former,” writes Rushkoff, “and you gain access to the control panel of civilization. http://www.rushkoff.com/program-or-be-programmed/ Choose the latter, and it could be the last real choice you get to make.”

Slide 4

Slide 4 text

"Any customer can have a car painted any colour that he wants so long as it is black." - Henry Ford

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Drawings Websites Mobile Apps Tasks 3D Printing Art Projects Physical Computing Books

Slide 7

Slide 7 text

Digital Natives - Matthew Plummer-Fernandez

Slide 8

Slide 8 text

My little piece of Privacy - Niklas Roy

Slide 9

Slide 9 text

Feltron Annual Report - Nicholas Felton

Slide 10

Slide 10 text

Kevin McCarthy Real Geeks [email protected] Hello. Kyle Oba Pas de Chocolat [email protected] @mudphone facebook.com/WhatNoChoco

Slide 11

Slide 11 text

KEVIN

Slide 12

Slide 12 text

KYLE

Slide 13

Slide 13 text

• Immediate Feedback • What is programming? • Thinking and programming • Processing (the tool) • Programming details: Color, Variables, Animation, Interactivity • What’s next?

Slide 14

Slide 14 text

• Immediate Feedback • What is programming? • Thinking and programming • Processing (the tool) • Programming details: Color, Variables, Animation, Interactivity • What’s next?

Slide 15

Slide 15 text

LAB: IMMEDIATE FEEDBACK

Slide 16

Slide 16 text

LAB: IMMEDIATE FEEDBACK Run me: LABS > ImmediateFeedback > ImmediateFeedback.pde

Slide 17

Slide 17 text

COFFEE BREAK 15 minutes.

Slide 18

Slide 18 text

WHAT IS PROGRAMMING?

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

HUMAN VS COMPUTER • 1. Get me some cereal with coffee • 1. Use feet to move to kitchen. Kitchen is at position x, y, z. • 2. Open cupboard. Cupboard is at position x, y, z, and retrieve cereal bowl, which looks like this • etc etc

Slide 21

Slide 21 text

DEMO: PAPER LAB 1 Graph paper!

Slide 22

Slide 22 text

PAPER LAB 1 Graph paper!

Slide 23

Slide 23 text

SIMPLE INSTRUCTIONS • write instructions to draw a thing (example: primitive car, house) • try to be as explicit as possible • executes from top to bottom • programmer, pass to computer, and vice versa • do this twice • GOAL: all computers product similar result

Slide 24

Slide 24 text

Slide 25

Slide 25 text

SIMPLE INSTRUCTIONS 1. Take out a piece of blank paper and write your name and “INSTRUCTIONS” at the top. 2. Write step by step instructions to draw your simple picture. Try to put each step on a separate line. 3. When complete pass it to your “computer.” 4. Receive instructions from your “programmer.” 5. Execute instructions on a separate, blank sheet of graph paper.

Slide 26

Slide 26 text

Slide 27

Slide 27 text

0,0 10,10

Slide 28

Slide 28 text

DRAW A DOT AT 4,3 point(4,3);

Slide 29

Slide 29 text

0,0 10,10

Slide 30

Slide 30 text

0,0 10,10

Slide 31

Slide 31 text

DRAW A BOX WITH ONE CORNER AT 4,3 AND ANOTHER CORNER AT 6,6 rect(4,3,6,6);

Slide 32

Slide 32 text

0,0 10,10

Slide 33

Slide 33 text

0,0 10,10

Slide 34

Slide 34 text

DRAW A CIRCLE 5 TALL AND 5 WIDE WITH ITS CENTER AT 4, 4 ellipse(5,5,4,4);

Slide 35

Slide 35 text

0,0 10,10

Slide 36

Slide 36 text

0,0 10,10

Slide 37

Slide 37 text

DEMO: PAPER LAB 2 Manipulatives!

Slide 38

Slide 38 text

PAPER LAB 2 Manipulatives!

Slide 39

Slide 39 text

THE SAME THING, BUT... • strict instructions with physical paper instructions • executes from top to bottom • choose from ellipse, line, & rect • with semicolons already attached • SAME GOAL: all computers product similar result

Slide 40

Slide 40 text

Slide 41

Slide 41 text

WITH MANIPULATIVES 1. Take out a piece of blank paper and write your name and “INSTRUCTIONS” at the top. 2. Arrange the given instruction cards on your sheet. Use the given instructions to draw your simple picture. 3. When complete pass it to your “computer.” 4. Receive instructions from your “programmer.” 5. Execute instructions on a separate, blank sheet of graph paper.

Slide 42

Slide 42 text

Slide 43

Slide 43 text

COFFEE BREAK 15 minutes.

Slide 44

Slide 44 text

FIRST PROCESSING LAB Manipulatives!

Slide 45

Slide 45 text

CHECKPOINT Is your Processing sketch running?

Slide 46

Slide 46 text

CHECKPOINT: EXTRA CREDIT Help > Reference > 2D Primitives arc(), quad(), triangle()

Slide 47

Slide 47 text

LUNCH BREAK 60 minutes.

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Casey Reas & Ben Fry

Slide 50

Slide 50 text

Processing is software for making images, animations, and interactions.

Slide 51

Slide 51 text

COLOR

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

color(255,0,0) color(0,255,0) color(0,0,255)

Slide 54

Slide 54 text

#FF0000 #00FF00 #0000FF

Slide 55

Slide 55 text

Tools > Color Selector

Slide 56

Slide 56 text

DEMO: COLOR PICKER

Slide 57

Slide 57 text

DEMO: STROKE + FILL

Slide 58

Slide 58 text

LAB: COLOR add color to your program from manipulatives (ﬁrst processing lab)

Slide 59

Slide 59 text

VARIABLES

Slide 60

Slide 60 text

VARIABLES

Slide 61

Slide 61 text

MOVE THE CIRCLE

Slide 62

Slide 62 text

MOVE THE CIRCLE Open the sketch: Examples > MoveCircle > MoveCircle.pde Change the value for x, keeping it between 0 and 400.

Slide 63

Slide 63 text

VARIABLES Draw shapes with color.

Slide 64

Slide 64 text

VARIABLES & COLOR

Slide 65

Slide 65 text

Kazimir Malevich (1879-1935) http://commons.wikimedia.org/wiki/File:Black_Cross.jpg http://commons.wikimedia.org/wiki/File:Black_square_lg.jpg http://commons.wikimedia.org/wiki/File:Black_circle.jpg Russian painter and art theoretician. He was a pioneer of geometric abstract art and the originator of the avant-garde, Suprematist movement.

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

LAB: VARIABLES Variables - Simple Shapes PNMProcessingWorkshop_Summer2013 > LABS > VariablesSimpleShapes

Slide 69

Slide 69 text

COFFEE BREAK 15 minutes.

Slide 70

Slide 70 text

CHECKPOINT interactivity and animation?

Slide 71

Slide 71 text

ANIMATION IN MOVIES The motion picture.

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

Movies 24 fps TV 30fps The Hobbit 48 fps Processing 60 fps (or whatever you want)

Slide 74

Slide 74 text

setup(); Set size of sketch, create new variables, etc

Slide 75

Slide 75 text

setup(); Set size of sketch, create new variables, etc draw(); Draw frame of your program

Slide 76

Slide 76 text

setup(); Set size of sketch, create new variables, etc draw(); Draw frame of your program draw(); Draw frame of your program

Slide 77

Slide 77 text

setup(); Set size of sketch, create new variables, etc draw(); Draw frame of your program draw(); Draw frame of your program draw(); Draw frame of your program

Slide 78

Slide 78 text

setup(); Set size of sketch, create new variables, etc draw(); Draw frame of your program draw(); Draw frame of your program draw(); Draw frame of your program draw(); Draw frame of your program draw(); Draw frame of your program draw(); Draw frame of your program draw(); Draw frame of your program draw(); Draw frame of your program

Slide 79

Slide 79 text

ANIMATION IN PROCESSING

Slide 80

Slide 80 text

ANIMATE

Slide 81

Slide 81 text

CHECKPOINT interactivity and animation?

Slide 82

Slide 82 text

INTERACTIVITY Using mouseX and mouseY - ties into variables

Slide 83

Slide 83 text

LAB: INTERACTIVITY ellipse(mouseX, mouseY, 100, 100); PNMProcessingWorkshop_Summer2013 > LABS > MoveCircle

Slide 84

Slide 84 text

ANIMATING WITH VELOCITY

Slide 85

Slide 85 text

IF STATEMENT

Slide 86

Slide 86 text

IF STATEMENT

Slide 87

Slide 87 text

LAB: BOUNCING ANIMATION PNMProcessingWorkshop_Summer2013 > LABS > BouncingAnimation

Slide 88

Slide 88 text

WHAT’S NEXT? https://github.com/PasDeChocolat/PNMProcessingWorkshop_Summer2013/wiki/Resources

Slide 89

Slide 89 text

Out Of Ofﬁce

Slide 90

Slide 90 text

http://meetup.com/dynamic/

Slide 91

Slide 91 text

Kevin McCarthy Real Geeks [email protected] Thank You! Kyle Oba Pas de Chocolat [email protected] @mudphone facebook.com/WhatNoChoco

Slide 92

Slide 92 text

TEMPLATES FOR MANIPULATIVES

Slide 93

Slide 93 text

rect(____, ____, ____, ____); x y width height ellipse(____, ____, ____, ____); x y width height size(____, ____); width height line(____, ____, ____, ____); start-x start-y end-x end-y size(____, ____); width height rect(____, ____, ____, ____); x y width height rect(____, ____, ____, ____); x y width height rect(____, ____, ____, ____); x y width height rect(____, ____, ____, ____); x y width height ellipse(____, ____, ____, ____); x y width height ellipse(____, ____, ____, ____); x y width height ellipse(____, ____, ____, ____); x y width height line(____, ____, ____, ____); start-x start-y end-x end-y line(____, ____, ____, ____); start-x start-y end-x end-y line(____, ____, ____, ____); start-x start-y end-x end-y rect(____, ____, ____, ____); x y width height rect(____, ____, ____, ____); x y width height ellipse(____, ____, ____, ____); x y width height ellipse(____, ____, ____, ____); x y width height ellipse(____, ____, ____, ____); x y width height

Slide 94

Slide 94 text

• https://github.com/PasDeChocolat/PNMProcessingWorkshop_Summer2013/wiki/Workshop-Outline • https://github.com/PasDeChocolat/PNMProcessingWorkshop_Summer2013/archive/master.zip • https://github.com/PasDeChocolat/PNMProcessingWorkshop_Summer2013/tree/master/LABS • https://github.com/PasDeChocolat/PNMProcessingWorkshop_Summer2013/tree/master/LABS/SOLUTIONS • https://github.com/PasDeChocolat/PNMProcessingWorkshop_Summer2013/tree/master/EXAMPLES • https://github.com/PasDeChocolat/PNMProcessingWorkshop_Summer2013/wiki/Resources UH Paciﬁc New Media : Introduction to Programming : June 15, 2013 Kevin McCarthy - [email protected] Kyle Oba - @mudphone - [email protected]