Computer Science I Introductions, course, class Classwork: First sketch Homework: Review...

Computer Science IIntroductions, course, classhttp://moodle.purchase.edu

Classwork: First sketchHomework: Review today's charts (examples

of code). Prepare for taking notes. Look at videos & computers in pictures and make

posting.

• Jeanine Meyer– Full professor, Math/Computer Science

• IBM: research (robotics) , manufacturing staff, educationPace University

• books: Multimedia in the Classroom, Programming games using Visual Basic, Creating Database Web Applications with PHP and ASP, Beginning Scripting Through Game Creation, The Essential Guide to HTML5: Using Games to Learn HTML5 and JavaScript, HTML5 and JavaScript Projects, Elementary Number Theory With Programming

• Son: teacher Illinois College. Daughter: staff for Westchester County Legislature, stage manager/media theater group Stolen Chair (visit http://www.stolenchair.org)

• Hobbies/interests: politics, origami, cooking and eating, reading novels, knit & crochet, travel

• Learning assistants• You?

Introductions

Course

• Introduction to programming• Introduction to computing • Exercise in thinking

Programming Environment• Processing language

– Processing comes with its own Integrated Development Environment– Create and edit programs– Compile (translate program and link with other

programs)– Execute (aka invoke, run)

Note: Logic is logic. Programming is programming.

Programming is• Design & problem solve independent of

implementation• Plan implementation• Create program

• Modify and adapt existing programs• Run

• Compilation step will catch some errors• Test

• Refine and improve

Outline of work• First half

– Build on my challenges– Design & produce your own project

• Midterm quiz• Second half

– Build on my challenges– Explore Processing within Java– Design and produce your own project

• Final quiz• Pop quizzes

Course materials• Lecture notes, examples, tutorials

– faculty.purchase.edu/jeanine.meyer– moodle.purchase.edu

• On-line sources (use google) excellent for Processing

• There will be pop quizzes on finding information.

• Several books are on reserve & you may choose to purchase

Course topics• How to specify look, function & logic of

programs• Use concepts common to all programming

languages– Logic, statements, compound statements– Variables, functions

• Use concepts of ‘Modern’ programming systems– Design of graphical user interface– Event handling– Classes and Objects

[strong] Advice• Try to understand examples. Make examples

your own. Be patient. Programming is not memory work.

• Class modes• Lecture/discussion: listen and ask and comment.

Take notes, including what you need to look up later.

• Demonstration: follow along on your computer.• Work session: The LAs and I are here to help.

ASK.

Check out history: first assignment

• Long history building (or attempting to build) calculating machines.

• Charles Baggage Analytical Engine: never built. Ada Lovelace described & produced but did not name programs for more general application.

• Issue of general versus specific for devices or programs still important.• Important for our programs!

Alan Turing• PhD thesis, done in response to a specific problem

posed by Hilbert, defined what it means to be computable and certain implications. This was pre-computers! Others were doing similar work.

• Turing is famous for two other things:• Work building special purpose machine to decode

Enigma codes.• Conviction in 1950s in UK for being gay and for his

suicide.• Books (Hodges), Breaking the Code, The Imitation

Game

Grace Murray Hopper• Commander, Admiral in Navy• Leader in efforts to define

and build high level language (COBOL) & compilers:programs to translateprograms into machinelanguage.

• Invented term "debug"

Brief introduction to a few terms• A variable holds values (numbers, strings of

characters, Booleans (true or false))• A function is packaging of code, to be invoked

by itself. Building block.• Statement types include

– Assignment statements– Calls to functions (built-in or programmer defined)– Compound statements: if, for loops

• An event is something that can happen for which you specify a response (handler)– Some events are relatively easy for you to set up:

for example, clicking on a button/link– Timing events

NOW IS THE TIME TO TAKE NOTES & ASK QUESTIONS!

Source of diagram: Coursera course Programming for Everyone, (Python), Charles Severance, U of Michigan

Secondary Memory/Secondary Storage/local storage/other names

• Hierarchy of folders• Different on different computers

• On campus computers, you can request and then access your own networked file space:• Go to http://students.purchase.edu/ and click on

Student Services link. Enter your credentials (id and password) and select File Space. This is not instant.

• You then can save and then retrieve your work to and from your networked drive. Will demonstrate later.

Terminology: Computer jargon • Terms are generally English words, but the

technical meaning is DIFFERENT and precise.• Meaning in general computer jargon and• More specific meaning for Processing

• Pay attention.• When I ask (or it is in a quiz), give technical

meaning• NOTES: LOOK UP terms after class.

How to specify the actions for shoe tying

• Typical situation: easy to do but more difficult to articulate how to do it.

• Atypical: physical actions and not just data/information.

• Issues of deciding level of specification.

• Get in small groups and write down instructions as you would teach a child.

Reflection on shoe tying

• More than one way to accomplish task• Divide task into small (very small) steps• Actions depended on external conditions

and events happening• describing steps required some special

use of language: jargon

• ALL features of programming!

Function• Important concept in programming

– All programming languages have specific way to define a function (subroutine, procedure)

• a method is a function/procedure associated with a class of objects• A method handles a message send to the object.

• an operation is a procedure specified to act on operands – and call (invoke, execute) the function– ALL programming languages have built-in code, often in the

form of functions or class methods– Today we will use

– size(…,…), rect( ), line( ), ellipse( )– and define our version of

– setup, draw

Functions are

• Built-in, part of existing language• Possibly in a Library that must be requested

• Defined by us (programmers)• Our way of extending the language.

• Functions are invoked / executed by [our] code.

• Think of Lego [sub] assembly.• Think of steps in a recipe.

Functions In Processing and some other languages• Function header:

designation_of_return_type name_of_function(parameters)

• Followed by body of function (code statements) { }int area(int w,int h) { return w*h; }• The header line, aka signature, says area takes two

arguments, each integers, and produces an integer• Using area as a model, how would you define a

function called perimeter, parameters w and h, and returns the perimeter of a rectangle, two sides length w and two sides length h?

Function as shorthand• Put it in my mail box instead of • go to the Natural Sciences building, 2nd floor,

Natural Sciences office, room 2065, go into the room on the right where the mail boxes are, find my name, put it in the box….

• The 'it' is analogous to the argument.• Note: some purists refer to these as arguments

on the caller side and parameters on the called side.

Computers must be programmed

• Some one, generally a collection of people, have specified the actions of ‘the computer’.

• ‘Actions’ can include– Performing a calculation– Moving data around– Accepting input or producing output– Testing something and doing different things

depending on the results

Programming involves• Problem solving (more or less independent of

the programming language)• Specifying solution in terms of the programming

language & environment– Program = sequence of statements (certain

statements can change the flow of control, e.g., conditionals & loops)

– Additional issue(s) involve the user interface: input (information & directives from the user) & output (information presented & actions taken)

NOTICE• If your program doesn't work, it is because of

something you did, not something some alien force inside the computer is doing to annoy you.

• Taking ownership is important.• Reflecting on mistakes (mis-conceptions) is

important.• Creating programs requires thinking logically,

systematically about sequences of steps/operations. It is not copying or memorizing text.

Sample statements• Assignment Note: equal sign doesn’t mean equal!

– count = 0;– count = count + 1;– Note: count++ and ++count

• if…else…if (class == ‘Programming Games’ ) {

schedule = ‘Monday/Thursday’;}else {

schedule = ‘Tuesday/Friday’; }• Looping

float sum = 0;float average;for (int i=0; i<=grades.length; i++) { sum = sum+grades[i];}Average = sum/grades.length;

Repeat

• In most programming languages, the symbol = is used in assignment statements.

• It means: set the value to be …..• One programming language, APL, used

an arrow and the language R, used for data analysis, uses an arrow <-

Programming • Decide what is needed to be done (logic)

– different approaches can work just like there are different ways to tie shoe laces

• Implement that logic in the programming language– Programming languages are not like natural language

• Grammar (syntax) must be exact• Some flexibility, but much less expressive power• …. Computer systems are infinitely patient

• Test, correct & enhance, re-testDivide tasks into smaller tasks.

To build a computer application

• You must specify/program everything– Static display– Dynamic display (what changes)– Response to user/player action– Response to system events – Rules of the game– If a two-person game (if the computer is a player), the

computer moves/actions• You must change roles and be tester of the

application.

If all actions must be specified completely….

• How do we put randomness into a program– For example, throw of dice, layout of mines in

minesweeper• Answer: Processing (and other

programming languages) have built in features to produce pseudo-random sequences of numbers. – They appear random, but they are calculated.

Strategy for course• The course is building games, not playing games.• Attend every class session. Be on-time.• Pay attention. TAKE NOTES.

– Do not use the computer when I'm lecturing!– Do not use your cell phone in class.

• Study materials. LOOK UP TERMS.• Come for help

– My office hours: Monday/Thursday 2:30pm to 4:00pm, NS3003• or by appointment with me or student lab assistant.• Einstein's Corner. Maybe Learning Center

– It is YOUR responsibility to ask for help.• Push yourself, but…build your project in stages.• Appreciate the fact that programming is different than … using other

computer tools. Be patient with yourself BUT/AND put in the effort.• Record ideas for projects in your notebook.

AsideProgramming languages have some things in

common with natural languagesgrammar, symbols, statement types, expressions

BUTBIG difference: a Processing program will not work at all if there are syntactic errors(analogous to grammatical errors).The computer is a machine: infinitely patient.

Advice• Pay attention! Listen when I talk

– Stop working at the computer EVEN if it is work on class projects– Attempt to answer all questions!

• Review and reflect on what you are doing.

• Programming is not memory work, just like writing an essay isn't remembering whole sentences.

• YOU MAY BENEFIT BY TAKING NOTES ON COPIES OF THE SLIDES (can print out 2,3,6/page)

• Come to my office hours, arrange time with Las, go to Einstein Corner tutoring

It is easy to be lost in details of coding.

Now on to first project…

ProcessingStart Processing • If icon not on bottom, go to Applications and find

Processing and click on it.• You will see an empty SKETCH

At home, • Go to processing.org and follow directions to download

and install. You may need to download and install Java.

Processing

• Code (your code) produces something in a window

• The dimensions of the window are set by a call to the built-in function size

• Lines, shapes, text is drawn in the window using various built-in functions…

• WHERE DO THEY GO? Answer: a coordinate system is used that designates horizontal and vertical position of pixels.

Think of graph paper or recall analytic geometry

BUT Processing and many other programming languages have upside down system, at least to

start.

• Origin 0,0 in upper left corner• X values do increase moving horizontally

to the right.• Y values increase moving DOWN the

page.• There is one way and only one way to

learn this: do examples!

Colors

There are different ways to set up for colors.Now we will use RGB

level of redness 0 to 255level of greenness 0 to 255level of blueness 0 to 255

Colors are specified for the fill of shapes or for the stroke, lines or outlines.

Processing

• A method called setup does …. setup.• A method called draw does …. drawing.• We write the contents (aka body) of setup

and draw.• Contents, the code within a function is made

up of statements.• Different types. All end with semi-colon.• Here the statement type is invoking a built-in

function.

void setup(){ size(800,600); // sets up a window 800 pixels wide 600 pixels high}void draw(){ fill(250,0,0); //red rect(10,10,200,200); // rectangle that is a square, in upper left corner fill(0,200,0); // green rect(550,10,200,500); //rectangle taller than wide over in upper right fill(0,0,250); // blue ellipse(400,300,120,70); //ellipse in center stroke(250,0,200); // purple line (30,500, 210,550); //line in lower left corner}

Make a mistake

Technical term: bugTechnical term: syntactic error

Processing caught it AND reported it exactly.Error reports may not be that helpful.Also…there are semantic errors:

What if I really wanted a yellow ellipse?

Class work

• Copy my example.• Change it!

• Colors, locations, dimensions• The LAs and I will suggest changes.• You can look up other primitives

• Use reference within Processing • Use google

Recap

• Processing IS a language, built on (in) another programming language called Java.

• It has many built-in functions (classes, constructs, etc.)

• It has its own development environment.

Preview: Layers of software (programs)

Operating System: file system, input/output, etc.

Processing Development Environment: includes invocation of setup, periodic invocation of draw, when event happens, invocation of mousePressed, etc.Setting of width, mouseX, etc.

Your program: your setup, draw, etc. Your methods, your variables, your classes, etc.

Java

Preview: Layers of software (programs)

Operating System: file system, input/output, etc.

IntelliJ: Integrated Development EnvironmentProcessing Libraries included

Your program: your setup, draw, etc. Your methods, your variables, your classes, etc. Java code will be visible.

Java

Save your work

Save As allows you to re-name a file (something more meaningful than sketch2345)

Use Processing / Preferences to set default Sketchbook location.can still change it each time.

Consider saving on your networked drive.To turn in work, you will zip (compress) the

folder and uploaded the zipped file.

Assignments• Read and re-read handouts. Review

PowerPoint charts for first lecture.• [Get into habit] review lecture charts after

each lecture. Study materials. Look up concepts. Check schedule. Write down ideas.

• Go to http://moodle.purchase.edu and view the history materials. Make a posting. Use this posting to introduce yourself again.

• Make more sketches!

Demonstration using moodle• Go to our moodle course.

• You should be enrolled.• Review Items at top.

• Links to history materials and forum for you to post your response. USE THEM

• Notice links for my examples.• These are compressed (.zip) files. They will

get more complex. The .pde file is the one to click on.