Your SlideShare is downloading. ×
0
Computer  Programming  1 Mr. Simon Lowell High School San Francisco, CA
Course Requirements: <ul><li>No previous programming experience is expected </li></ul><ul><li>You should feel comfortable ...
Who should take this class? <ul><li>Anyone interested in a career as computer programmer or game designer </li></ul><ul><l...
What you’ll learn <ul><li>How to make simple programs (including computer games like &quot;Pong&quot; and &quot;Tron&quot;...
Grading Policy <ul><li>Each six week grade: </li></ul><ul><ul><ul><li>70% tests and quizzes </li></ul></ul></ul><ul><ul><u...
Programming Assignments <ul><li>Use  free  software: Processing </li></ul><ul><li>Available online or from me  </li></ul><...
Style <ul><li>Building a working program is not enough  </li></ul><ul><li>Other programmers need to read, understand and m...
10 point Program Grading Scale <ul><li>1 pt: Name, class, assignment in comments at top </li></ul><ul><li>2 pts: URL (web ...
Web and email <ul><li>Send  programs  to  room334@gmail.com  </li></ul><ul><li>Send  questions  to  [email_address] </li><...
Log Off! <ul><li>Please remember to logoff each time you finish with the computer, otherwise other people will be able to ...
Assignment 0 <ul><li>Then, send an email to  room334@gmail.com  with the following information: </li></ul><ul><li>Your nam...
Getting your own website <ul><li>Providers of free websites </li></ul><ul><li>http://webs.com </li></ul><ul><li>http://www...
webs.com <ul><li>Make up a site address and password </li></ul>
webs.com <ul><li>Fill in the forms, choose a template (you can change your mind later) </li></ul><ul><li>Make sure you sel...
webs.com <ul><li>I choose the &quot;blank canvas&quot; option, though I don't think it really matters </li></ul>
freehostspace.com <ul><li>No ads, but a little harder to use </li></ul><ul><li>You'll have to write some html to create yo...
freehostspace.com <ul><li>Choose the FREE Hosting Plan, and fill out the form </li></ul><ul><li>Leave &quot;Get Domain Nam...
freehostspace.com <ul><li>Once you get the confirmation email, login in, choose Website Manager and then Subdomain Manager...
freehostspace.com <ul><li>Make up a subdomain name, and choose &quot;Add Subdomain&quot; </li></ul><ul><li>I chose  mrsimo...
What is Computer Programming?
Computer Hardware and Software, the book analogy <ul><li>Computer Hardware is like the cover and pages of a book </li></ul...
Computer Language (Code) <ul><li>Like human (called “natural”) language, Computer languages have words, numbers, grammar, ...
Low Level Computer Language <ul><li>Computers only “understand” sequences of numbers </li></ul><ul><li>The “language of nu...
High Level Computer Language <ul><li>Uses words, easier for humans </li></ul><ul><li>High level programs are written using...
High Level Languages <ul><li>C++: flexible, powerful, most common </li></ul><ul><li>Java: good for the internet, and small...
Fourth Generation Languages <ul><li>Programmers are working to create language programs that can convert natural language ...
We'll create Java programs using  Processing <ul><li>Processing  is a beginner friendly program for creating Java software...
How to make your own computer software <ul><li>Start Processing </li></ul><ul><li>Type  ellipse(50,50,80,20); </li></ul><u...
How to make your own computer software <ul><li>ellipse(50,50,80,20); </li></ul><ul><li>An example of a  function </li></ul...
Coordinates in Computer Graphics <ul><li>In computer graphics, the coordinate system is only positive. </li></ul><ul><li>T...
ellipse( 50,50 ,80,20); <ul><li>The first two arguments ( in Red ) are the x and y coordinates of the center of the ellips...
ellipse(50,50, 80 , 20 ); <ul><li>The third argument ( in Yellow ) is the width of the ellipse </li></ul><ul><li>The fourt...
<ul><li>size(300,200); </li></ul><ul><li>Another function, should always be called first </li></ul><ul><li>This one increa...
How to make your own computer software <ul><li>noFill(); </li></ul><ul><li>ellipse(50,50,80,20); </li></ul><ul><li>A progr...
How to make your own computer software <ul><li>noFill(); </li></ul><ul><li>smooth(); </li></ul><ul><li>ellipse(50,50,80,20...
How to make your own computer software <ul><li>noFill(); </li></ul><ul><li>stroke(255,0,0); </li></ul><ul><li>ellipse(50,5...
How to make your own computer software <ul><li>noFill(); </li></ul><ul><li>stroke(255,0,0); </li></ul><ul><li>strokeWeight...
Order is important <ul><li>ellipse(50,50,80,20); </li></ul><ul><li>noFill(); </li></ul><ul><li>stroke(255,0,0); </li></ul>...
Saving your work <ul><li>By default, Processing expects you to store your programs is in the  Processing  folder in  My Do...
Java is very picky about names <ul><li>You may get this error message: </li></ul>
Assignment #1: Olympic Rings <ul><li>Write a program that produces a design  similar  to the Olympic Rings with 5 differen...
Uploading the program to your website <ul><li>Choose  File | Export </li></ul>
Uploading the program to your website <ul><li>Processing will create a folder called  Applet </li></ul><ul><li>First, rena...
A bug in version  0148 BETA 19 August 2008 <ul><li>When you export your applet, it's not the right size. </li></ul><ul><li...
Uploading the program to your website <ul><li>Upload only these three files to your website </li></ul><ul><ul><li>OlympicR...
Uploading to freewebs.com <ul><li>Log in and click on My Site </li></ul>
Uploading to freewebs.com <ul><li>Click on the  single file uploader </li></ul>
Uploading to freewebs.com <ul><li>One by one, upload OlympicRings (html or &quot;Firefox Document&quot;), OlympicRings (Ex...
Uploading to freewebs.com <ul><li>You should see all three in the File Manager </li></ul>
uploading to freehostspace.com <ul><li>Choose File Manager </li></ul><ul><li>Double click on the folder with your subdomai...
uploading to freehostspace.com <ul><li>Scroll down to the bottom of the page to find the file upload option </li></ul><ul>...
From the File Manager, Click on OlympicRings.html and you should see your program. It is now on the internet for the world...
Common Mistakes <ul><li>Put each statement on a separate line. </li></ul><ul><li>Once you call  noFill() , from then on, a...
Submitting the finished assignment <ul><li>Attach OlympicRings.pde to an email and send it to  [email_address] </li></ul><...
Submitting the finished assignment <ul><li>Make sure you have your name, assignment and class on the subject line </li></u...
Building your homepage and linking to your assignments <ul><li>Click on  Site Manager  and then click on the  Edit  icon n...
Building your homepage and linking to your assignments <ul><li>Move your cursor to the content box where you want the link...
Building your homepage and linking to your assignments <ul><li>Choose My Files, click on your html file, type some text an...
Building your homepage and linking to your assignments <ul><li>You should now see the link on your homepage </li></ul>
The Processing &quot;Dictionary&quot; <ul><li>http://processing.org/reference/index.html </li></ul><ul><li>The  API*  is t...
The &quot;definition&quot; of  ellipse()
Drawing Functions <ul><li>triangle() </li></ul><ul><li>rect()  (also squares) </li></ul><ul><li>quad() </li></ul><ul><li>e...
triangle( 150 , 20 , 20 , 280 ,280,280);
rect( 50 , 20 ,200, 100 );
quad( 50 , 20 , 220 , 80 , 250 , 160 ,30,280);
ellipse( 150 , 150 ,220, 80 );
point(150,150);
line( 10 , 250 , 290 , 15 );
The endpoints <ul><li>bezier( 20,20 ,10,110,280,150, 280,280 ); </li></ul>
These two invisible points &quot;pull&quot; the curve <ul><li>bezier(20,20, 10,110 , 280,150 ,280,280); </li></ul>
The effect at the ends is weaker <ul><li>bezier(20,20, 210,250 , 290,250 ,280,280); </li></ul>
The effect at the ends is weaker <ul><li>bezier(20,20, 10,50 , 100 , 50 ,280,280); </li></ul>
Both points on the same side <ul><li>bezier(20,20, 10,50 , 100 , 280 ,280,280); </li></ul>
The points can be off the screen! <ul><li>bezier(20,20, -200,110 , 500,150 ,280,280); </li></ul>
arc()  draws part of an  ellipse() <ul><li>arc( 150 ,  150 ,  200 ,  200 , 0, PI/2); </li></ul>
arc()  draws part of an  ellipse() <ul><li>arc( 150 ,  150 ,  100 ,  200 , PI/4, 3*PI/2); </li></ul>
Polygons <ul><li>beginShape(); </li></ul><ul><li>vertex(20, 20); </li></ul><ul><li>vertex(40, 20); </li></ul><ul><li>verte...
noStroke(); rect(50,50,200,100);
noFill(); rect(50,50,200,100);
noFill(); noStroke(); rect(50,50,200,100); Empty!
fill(255,0,0); rect(50,50,200,100);
fill(0,255,0); rect(50,50,200,100);
fill(0,0,255); rect(50,50,200,100);
fill(178,58,238); rect(50,50,200,100); RGB Color Codes:  http://www.tayloredmktg.com/rgb/
fill(0,0,255); stroke(255,0,0); rect(50,50,200,100);
background(0,0,0); fill(255,0,0); rect(50,50,200,100);
opacity  <ul><li>You can make shapes transparent by using the four argument version of fill() </li></ul><ul><li>the  fourt...
Practice Quiz Question <ul><li>Circle the picture that best matches the output </li></ul><ul><li>fill(255,0,0); </li></ul>...
Practice Quiz Questions <ul><li>True/False:   The  ellipse  function takes 3 arguments </li></ul><ul><li>Fill in the blank...
Comments <ul><li>Two forms: Single and Multi-line </li></ul><ul><li>// Single Line </li></ul><ul><li>/* Multi-Line */ </li...
Comments <ul><li>Good Style: Always put your name, assignment and class in comments at the top of your program </li></ul>
doc comments <ul><li>Doc comments (documentation comments) are used for sharing a description of your sketch when the prog...
doc comments <ul><li>Doc comments show up on the webpage when you export the program </li></ul>
doc comments <ul><li>You can start a new line with <br> or <p> </li></ul>
Arithmetic <ul><li>Calculations use the following arithmetic  operators :  + - * / % </li></ul><ul><li>The operators can b...
Expressions can be arguments <ul><li>What will be the height and width of the following ellipse? </li></ul><ul><li>ellipse...
Symmetry <ul><li>Expressions can be used to make placing symmetrical arrangements easier </li></ul>
Symmetry <ul><li>size(300,300); </li></ul><ul><li>ellipse( 150-75 ,150,40,40); </li></ul><ul><li>ellipse( 150+75 ,150,40,4...
Integer arithmetic <ul><li>Division is done differently with integers than with decimals </li></ul><ul><ul><li>5.0/4.0   e...
Integer arithmetic <ul><li>If you see an integer division expression like  5/4   </li></ul><ul><li>ask yourself  &quot;How...
Modulus and integer division <ul><li>Remember how you did math in grade school? </li></ul>
Modulus and integer division <ul><li>Remember how you did math in grade school? </li></ul>
Modulus and integer division <ul><li>Remember how you did math in grade school? </li></ul>
Modulus and integer division <ul><li>Remember how you did math in grade school? </li></ul>
<ul><li>The  modulus operator  gives the remainder of an integer division expression </li></ul><ul><li>8/5 </li></ul><ul><...
Practice Quiz Question:  Evaluate the following expressions <ul><li>9/4 </li></ul><ul><li>9%4 </li></ul><ul><li>21/2 </li>...
Variables and Declarations <ul><li>Sometimes you want a place to store a number in computer memory. </li></ul><ul><li>You ...
Variables and Declarations <ul><li>Vari -ables allow values to  change </li></ul>
Variable  Declarations  &  Initializations <ul><li>To create a mailbox, you  declare  it. </li></ul><ul><li>int num; </li>...
Using variables in expression <ul><li>Once a variable has been declared and initialized, you can use it in an expression <...
The assignment operator <ul><li>=  is called the  assignment operator </li></ul><ul><li>It takes the value on the  right ,...
The assignment operator <ul><li>You can't do an assignment as an argument </li></ul><ul><li>ellipse(int x = 45,55,10,10); ...
The  type  of variable must match <ul><li>You can't put a decimal in an  int </li></ul><ul><li>Otherwise you'll get an err...
The assignment operator <ul><li>This looks weird  if you are use to algebra, but it's very common in programming </li></ul...
Variables can be reused  as many times as you like
Now With just one change. . .
Good Style <ul><li>Name your variables what they are </li></ul><ul><li>x  is a good name for an x coordinate </li></ul><ul...
&quot;Moving&quot; a circle <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><...
&quot;Moving&quot; a circle <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><...
&quot;Moving&quot; a circle <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><...
&quot;Moving&quot; a circle <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><...
&quot;Moving&quot; a circle <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><...
Notice the difference? <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><ul><l...
The top picture drew the left circle  first , while the bottom drew the left circle  last <ul><li>size(200,100); </li></ul...
The bottom picture doesn't match the output of this program <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul...
Circle the matching output <ul><li>size(100,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><u...
Modern programs are very big—they are organized into   Functions <ul><li>Programs can be difficult to understand  Windows ...
You wouldn't write a paper that was just one long paragraph <ul><li>You'd have many paragraphs, each of which would focus ...
Creating your own functions <ul><li>Processing allows you to separate your program into different functions. </li></ul><ul...
setup()  and  draw() <ul><li>Processing programs that use functions must contain two special functions called  setup()  an...
Happy Face Example <ul><li>Let's say I had a program that drew a happy face </li></ul>
Happy Face Example <ul><li>Here's what it would look like separated into  setup()  and  draw()  functions </li></ul><ul><l...
The syntax of functions <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(200,100); </li></ul><ul><li>} </li...
Happy Face Example <ul><li>Here  I've added my own  face()  and  head()  functions </li></ul><ul><li>void setup() </li></u...
Oops! What happened? <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(200,100); </li></ul><ul><li>} </li></...
Auto-Format before after
Simple Animation <ul><li>We can take advantage of the way  setup()  and  draw()  work to create simple animations </li></u...
Practice Quiz Question <ul><li>Which picture matches the output of this program? </li></ul><ul><li>void setup() </li></ul>...
the background drawn  once <ul><li>int x = 0; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>backgro...
the background drawn  every time the screen is drawn (no trail) <ul><li>int x = 0; </li></ul><ul><li>void setup() </li></u...
Checking the value in a variable <ul><li>One of the confusing things in programming is keeping track of the values as they...
Checking the value in a variable <ul><li>Apparently (15%2) + 27 is 28 </li></ul>
Printing Text  <ul><li>Text can be words, sentences, paragraphs, numbers and more </li></ul><ul><li>It's any collection of...
Expressions vs. Literals <ul><li>These two function calls produce different output </li></ul><ul><li>println(&quot;2 + 3&q...
Expressions vs. Literals <ul><li>These two function calls produce different output </li></ul><ul><li>println(&quot;2 + 3&q...
print()  vs.  println() <ul><li>println()  means &quot;go to the next line AFTER you print.&quot; </li></ul><ul><li>print(...
<ul><li>You can make the output more readable by including blank  whitespace </li></ul><ul><li>print(2); </li></ul><ul><li...
Practice with  print() <ul><li>Start Processing </li></ul><ul><li>Copy and paste the following code: </li></ul><ul><li>int...
Practice with  print() <ul><li>Now add quote marks </li></ul><ul><li>int var1 = 23; </li></ul><ul><li>int var2 = 7; </li><...
Practice with  print() <ul><li>Now, run the program with both versions </li></ul><ul><li>int var1 = 23; </li></ul><ul><li>...
Practice with  print() <ul><li>Try this </li></ul><ul><li>int var1 = 23; </li></ul><ul><li>int var2 = 7; </li></ul><ul><li...
Practice Quiz Question <ul><li>What is the output of the following program? </li></ul><ul><li>int val1 = 13; </li></ul><ul...
Functions and variable declarations <ul><li>If you  declare a variable  in a function, you can only use it in that functio...
Functions and variable declarations <ul><li>If you declare a variable in a function, you can only use it in that function ...
Functions and variable declarations <ul><li>If you declare a variable in a function, you can only use it in that function ...
Functions and variable declarations <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>int num = 5; </li></ul><ul>...
The basic scope rule* <ul><li>Scope  is like a neighborhood, it's where the variable is known </li></ul><ul><li>The basic ...
The scope of  diameter  is in yellow <ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>ellipse(30,30,50,80); </li>...
If you  declare the variable at the top of the program  outside of any function,  it's scope is the entire program <ul><li...
Local vs. Global <ul><li>A  global  variable can be used anywhere in the program </li></ul><ul><li>You create a  global  v...
The circle gets bigger <ul><li>int diameter = 10; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>siz...
The circle DOESN'T get bigger <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>...
The   if  statement <ul><li>if( num > 150 ) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;num is pretty big&quot;); ...
if  statement <ul><li>int num = 5; </li></ul><ul><li>if(num > 2) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;It wo...
if  statement <ul><li>int num = 5; </li></ul><ul><li>if(num >  7 ) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;It ...
Using an  if  to &quot; start over if it gets too big &quot; <ul><li>int diameter = 10; </li></ul><ul><li>void setup() </l...
A Gradient <ul><li>int redAmount = 0; </li></ul><ul><li>int blueAmount = 255; </li></ul><ul><li>int x = 0; </li></ul><ul><...
A Circle that moves left to right <ul><li>int x = 0; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>...
A Circle that moves back & forth <ul><li>int x = 0; </li></ul><ul><li>int change = 1; </li></ul><ul><li>void setup() </li>...
Practice quiz question <ul><li>Circle the output that best matches the following code </li></ul><ul><li>int mystery = 0; <...
Input <ul><li>Most programs we see get input from people </li></ul><ul><li>The most common ways people provide input are: ...
Input <ul><li>Processing makes input from the mouse and keyboard about as easy as it gets </li></ul><ul><li>There are seve...
Moving a circle with the mouse <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li...
Functions that respond to events <ul><li>keyTyped() </li></ul><ul><li>keyPressed() </li></ul><ul><li>keyReleased() </li></...
Painting only if mouse is  dragged <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul...
More on  if : Relational Operators <ul><ul><li><  <=  ==  >=  >  != </li></ul></ul><ul><ul><li>if  statements are created ...
More on  if : Relational Operators <ul><ul><li>if (num1 < num2 < num3)   </li></ul></ul><ul><ul><li>Comparisons must be do...
More on  if : Relational Operators <ul><ul><li><  <=  ==  >=  >  != </li></ul></ul><ul><ul><li>The operators that are used...
=  vs.  == <ul><li>A  single  equals (called the assignment operator) MAKES two things equal </li></ul><ul><li>num = 3; </...
Moving the ellipse with the keyboard <ul><li>int x, y; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><l...
Painting only if the right mouse button  is clicked <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,30...
boolean  variables <ul><li>boolean s are the smallest, simplest kind of &quot;mailbox&quot; </li></ul><ul><li>They can hol...
Painting only if the  mouse is pressed   and  a key is pressed <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>...
Painting only if the  mouse is pressed   and  a key is pressed   a different way <ul><li>void setup() </li></ul><ul><li>{ ...
Logical Operators <ul><li>&&   //AND  </li></ul><ul><li>|| //OR </li></ul><ul><li>!   //NOT </li></ul><ul><li>Used to comb...
Painting only if the  mouse is dragged   and  the 'w' key is pressed <ul><li>void setup() </li></ul><ul><li>{ </li></ul><u...
Practice Quiz Question:  What is the output? <ul><li>int num = 4; </li></ul><ul><li>float dNum = 7.2; </li></ul><ul><li>if...
Watch out for this error <ul><li>int num = 5; </li></ul><ul><li>if(num > 7); </li></ul><ul><li>{ </li></ul><ul><li>println...
There shouldn't be a semi-colon here <ul><li>int num = 5; </li></ul><ul><li>if(num > 7) ; </li></ul><ul><li>{ </li></ul><u...
There shouldn't be a semi-colon here <ul><li>int num = 5; </li></ul><ul><li>if(num > 7) ; </li></ul><ul><li>{ </li></ul><u...
Now it's fixed <ul><li>int num = 5; </li></ul><ul><li>if(num > 7) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;num ...
Symmetrical reflections (mirrors) 300 200 (50,30)
Symmetrical reflections (mirrors) 300 200 (50,30) 50
Symmetrical reflections (mirrors) 300 200 (50,30) 50 50
Symmetrical reflections (mirrors) 300 200 (50,30) 50 50 (300-50,30)
if  and  if/else <ul><li>int num = 5; </li></ul><ul><li>if(num > 150) </li></ul><ul><li>{ </li></ul><ul><li>num = 5; </li>...
&quot;Chained&quot;  if/else <ul><li>if(temp > 80) </li></ul><ul><li>{ </li></ul><ul><li>println(Go swimming&quot;); </li>...
Practice Quiz Question:  What is the output of this program? <ul><li>int num1= 2; </li></ul><ul><li>int num2 = 7; </li></u...
Two modes <ul><li>Often, programs will have two &quot;modes&quot; or &quot;states&quot; </li></ul><ul><li>The combination ...
Two modes <ul><li>mode = !mode </li></ul><ul><li>this line of code &quot;flips&quot; mode back and forth between true and ...
Random numbers <ul><li>The  random()  function has two versions: </li></ul><ul><li>random(5)  returns a decimal value betw...
dice example <ul><li>Let's say I wanted to make an applet that simulated rolling a single six sided die </li></ul><ul><li>...
dice example <ul><li>Let's say I wanted to make an applet that simulated rolling a single six sided die </li></ul><ul><li>...
dice example <ul><li>Let's say I wanted to make an applet that simulated rolling a single six sided die </li></ul><ul><li>...
dice example <ul><li>Let's say I wanted to make an applet that simulated rolling a single six sided die </li></ul><ul><li>...
dice example <ul><li>Let's say I wanted to make an applet that simulated rolling a single six sided die </li></ul><ul><li>...
dice example <ul><li>Let's say I wanted to make an applet that simulated rolling a single six sided die </li></ul><ul><li>...
A bug with negative arguments <ul><li>What arguments would you use to get this range? </li></ul><ul><li>{-3,-2,-1,0,1,2,3}...
A bug with negative arguments <ul><li>For some reason the low limit is one less. </li></ul><ul><li>{-3,-2,-1,0,1,2,3} </li...
Random Walk <ul><li>The position or state of an object changes unpredictably (by a  random  amount) over time </li></ul><u...
A Random  Walk  isn't a Random  Jump <ul><li>I'd call this a random  jump </li></ul><ul><li>x = int(random(0,400)); </li><...
A Random  Walk  isn't a Random  Jump <ul><li>I'd call this a random  jump </li></ul><ul><li>x = int(random(0,400)); </li><...
Modeling stock prices <ul><li>int price = 150; </li></ul><ul><li>int x = 0; </li></ul><ul><li>int oldX,oldY; </li></ul><ul...
Modeling stock prices <ul><li>int changeValue = int(random(-51,51)); </li></ul><ul><li>price = price + changeValue; </li><...
Modeling stock prices <ul><li>int changeValue =  int(random(-51,51)) ; </li></ul><ul><li>price = price + changeValue; </li...
Modeling stock prices <ul><li>int changeValue =  int(random(-51,51)) ; </li></ul><ul><li>{-50,-49,-48, … 48,49,50}  </li><...
More Random Walk examples <ul><li>http://www.mit.edu/~kardar/teaching/projects/chemotaxis(AndreaSchmidt)/random.htm </li><...
 
Practice Quiz Questions <ul><li>Fill in the blanks to create the indicated random numbers </li></ul><ul><li>A random integ...
Using Pictures and Images <ul><li>Processing can display  .gif ,  .jpg ,  .tga , and  .png  image  </li></ul><ul><li>First...
Images <ul><li>Now, write code like this, where  hallway.jpg  is the name of the picture </li></ul><ul><li>PImage b; </li>...
Images <ul><li>b  is the name of the  variable  that holds the image </li></ul><ul><li>0,0  is the x and y of the top left...
Using an image for the  background() <ul><li>Make sure the  size()  of the applet is the same as the size of the image. </...
Which dot is moving in a random walk?
Which dot is moving in a random walk?
Which dot is moving in a random walk?
Which dot is moving in a random walk?
Which dot is moving in a random walk?
Which dot is moving in a random walk?
Which dot is moving in a random walk?
Random  Walks <ul><li>In a random walk, you always take one step at a time </li></ul><ul><li>You don't take different size...
4 Practice Quiz Questions <ul><li>Fill in the blanks so that the x coordinate is changed in a random walk pattern by -1,0,...
3D Graphics <ul><li>One of Processing's strengths is 3D graphics </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li><...
3D Graphics <ul><li>Positions in 3D space use three coordinates x, y and z </li></ul><ul><li>Objects are drawn at (0,0,0) ...
3D Graphics <ul><li>box() 's one argument specifies the side length </li></ul>box(170);
3D Graphics <ul><li>box() 's three arguments specify the x, y and z dimensions </li></ul>box(50,100,150);
3D Graphics <ul><li>translate()  moves the center of the box </li></ul><ul><li>In this case, we've moved the box  -100  (u...
3D Graphics <ul><li>translate()  moves the center of the box </li></ul><ul><li>In this case, we've moved the box  -100  (a...
3D Graphics <ul><li>translate()  moves the center of the box </li></ul><ul><li>In this case, we've moved the box  -100  (t...
3D Graphics <ul><li>sphere()  works the same as box except the argument is the radius </li></ul>translate(-100,0,0); spher...
3D Graphics <ul><li>rotateX()  rotates the box around the x axis </li></ul>rotateX(-.5); box(50); -.5
3D Graphics <ul><li>For comparison, here it is unrotated </li></ul>box(50);
3D Graphics <ul><li>rotateX()  rotates the box around the x axis </li></ul>rotateX(.5); box(50); .5
3D Graphics <ul><li>rotateY()  rotates the box around the y axis </li></ul>rotateY(-.3); box(50); -.3
3D Graphics <ul><li>For comparison, here it is unrotated </li></ul>box(50);
3D Graphics <ul><li>rotateY()  rotates the box around the y axis </li></ul>rotateY(.3); box(50); .3
3D Graphics <ul><li>rotateZ()  rotates the box around the z axis </li></ul>rotateZ(-.4); box(50); -.4
3D Graphics <ul><li>For comparison, here it is unrotated </li></ul>box(50);
3D Graphics <ul><li>rotateZ()  rotates the box around the z axis </li></ul>rotateZ(.4); box(50); .4
Lighting can add realism <ul><li>background(0); </li></ul><ul><li>translate(150,150,-250); </li></ul><ul><li>fill(255); </...
lights(); <ul><li>background(0); </li></ul><ul><li>translate(150,150,-250); </li></ul><ul><li>fill(255); </li></ul><ul><li...
pointLight(255,0,255,-235,-240, 275); <ul><li>background(0); </li></ul><ul><li>translate(150,150,-250); </li></ul><ul><li>...
pointLight ( 255,0,255 , -235,-240, 275 ); <ul><li>The first three arguments ( in red ) are the RGB values of the light (i...
Perspective <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(200,200,P3D); </li></ul><ul><li>background(0);...
Perspective <ul><li>An alternative is to change our  perspective </li></ul><ul><li>That is leave the cube as it is, but ch...
Perspective <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(200,200,P3D); </li></ul><ul><li>background(0);...
camera( 100,100,200 , 0,0,0 ,0,1,0); <ul><li>Camera takes 9 arguments </li></ul><ul><li>The first three are the ( x,y,z ) ...
Loops <ul><li>Looping  means  repeating  over and over </li></ul><ul><li>If you wanted to print 10  x s to the screen, you...
Loops <ul><li>On the other hand, if you wanted to print  100  or  1000  or even more  x s to the screen, using copy and pa...
while  Loops <ul><li>The simplest loop in java is the  while  loop </li></ul><ul><li>It uses a variable to keep track of h...
Review:  if  statements <ul><li>What is the output? </li></ul><ul><li>int num = 1; </li></ul><ul><li>if (num < 10) </li></...
Review:  if  statements <ul><li>What is the output? </li></ul><ul><li>int num = 1; </li></ul><ul><li>if (num < 10) </li></...
while  Loops <ul><li>A  while  loop is identical to an  if , just substitute  while  for  if </li></ul><ul><li>Now what is...
while  Loops <ul><li>A  while  loop is identical to an  if , just substitute  while  for  if </li></ul><ul><li>Now what is...
while  Loops <ul><li>This while loops  starting point is 0   </li></ul><ul><li>It's ending point is  before 100 </li></ul>...
while  Loops <ul><li>With a loop, it's just as easy to print 1000  x s as it is to print 10! </li></ul><ul><li>int numXs =...
while  vs  if <ul><li>An if-statement looks at the test in the parenthesis one time and then  maybe  executes the body  on...
Practice Quiz Question <ul><li>Find the output </li></ul><ul><li>int x = 3; </li></ul><ul><li>while(x < 10) </li></ul><ul>...
increment and decrement operators <ul><li>The increment operator is  ++ </li></ul><ul><li>num++; </li></ul><ul><li>is the ...
while  loop examples <ul><li>Here's a while loop example that uses a loop to see how man times you can divide a number by ...
A program that uses a loop to make a gradient in the background <ul><li>int redAmount = 0; </li></ul><ul><li>int blueAmoun...
Zero Loop Iterations <ul><li>Since the while-loop checks  the test  before every iteration, it is possible for  the body  ...
Infinite Loop <ul><li>The most famous sort of bug you can get with loops </li></ul><ul><li>Because of some mis-arrangement...
Infinite Loop <ul><li>The computer just sort of &quot;freezes up&quot; </li></ul><ul><li>The output is the same , over and...
Watch out for  this <ul><li>A particularly nasty mistake is to put a semi-colon after the parenthesis of the while loop </...
Watch out for  this <ul><li>This creates an infinite loop and processing freezes up! </li></ul><ul><li>int num = 1; </li><...
A Geeky Joke <ul><li>This is Apple computer’s actual address </li></ul><ul><li>It’s a geeky pun on computer programming </...
Practice Quiz Question: Circle the picture that best matches the output <ul><li>void setup() </li></ul><ul><li>{ </li></ul...
Problem: Make 100 random spheres
Problem: Make 100 random spheres <ul><li>First we’ll need to figure out how to make 1! </li></ul>
Problem: Make 100 random spheres <ul><li>I’ll need to translate the sphere to a better spot </li></ul>
Problem: Make 100 random spheres <ul><li>Now that I’ve got one, I’ll want to add randomness so I don’t have a bunch of ide...
I want to repeat the code in yellow <ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>background (0); </li></ul><u...
I want to repeat the code in yellow <ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>background (0); </li></ul><u...
To keep the spheres from translating off the screen, I’ll need to  translate back <ul><li>void draw() </li></ul><ul><li>{ ...
Displaying Text on the screen <ul><li>To add words or other text to your program </li></ul><ul><ul><li>Choose  Tools | Cre...
Displaying Text on the screen <ul><li>You can align the text, LEFT, RIGHT or CENTER </li></ul><ul><li>textAlign(CENTER); <...
Displaying Text on the screen <ul><li>The quotes character  &quot;  will display quotes to the screen </li></ul><ul><li>te...
textMode(SCREEN); <ul><li>I have no what this does, except it makes the text look better, especially in 3D </li></ul>
What is the output? How would it change if  limit  were doubled to 8? <ul><li>int count = 1; </li></ul><ul><li>int limit =...
String <ul><li>A  String  is any number of characters including letters, digits, spaces and punctuation </li></ul><ul><li>...
String  variables <ul><li>You would create a  String  variable when you need to store text that can change </li></ul><ul><...
Adding  String s <ul><li>The + operator combines  String s together to make one bigger  String </li></ul><ul><li>String s1...
Adding  String s <ul><li>The + operator combines  String s together to make one bigger  String </li></ul><ul><li>String s1...
Adding  String s <ul><li>The + operator combines  String s together to make one bigger  String </li></ul><ul><li>String s1...
Adding  String s <ul><li>The + operator combines  String s together to make one bigger  String </li></ul><ul><li>String s1...
Adding  String s <ul><li>The + operator is also useful for labeling output </li></ul><ul><li>Let’s say I’m debugging, and ...
Adding  String s <ul><li>I could use the + operator to label the output so I know what I’m looking at </li></ul><ul><li>in...
Adding  String s <ul><li>The + operator is also useful for labeling output </li></ul><ul><li>int dogs = 3; </li></ul><ul><...
for  loops <ul><li>Do exactly the same thing as  while  loops </li></ul>
A  while  loop <ul><li>int count = 1; </li></ul><ul><li>while(count < 4) </li></ul><ul><li>{ </li></ul><ul><li>println(&qu...
A  while  loop <ul><li>int count = 1; </li></ul><ul><li>while(count < 4) </li></ul><ul><li>{ </li></ul><ul><li>println(&qu...
A  while  and a  for  loop that do the exactly the same thing <ul><li>int count = 1; </li></ul><ul><li>while(count < 4) </...
Notice both have the same 3 parts <ul><li>int count = 1 ; </li></ul><ul><li>while( count < 4 ) </li></ul><ul><li>{ </li></...
Why both? <ul><li>Some programmers prefer the  for  loop since it uses fewer lines of code </li></ul><ul><li>Most beginnin...
Practice Quiz Question <ul><li>Write a program that uses two  for  loops to produce the following output </li></ul><ul><li...
Arrays <ul><li>An array is a collection of data, all of the same data type, that is accessed with an index </li></ul><ul><...
Arrays <ul><li>int [] nums = {5,-4,17}; </li></ul>nums [0]  [1]  [2] 5 -4 17
Arrays <ul><li>May be  declared and initialized  in one line.  []  can go either before or after the name of the array </l...
Arrays <ul><li>Just like any variable, you can  change the value  that is stored there </li></ul><ul><li>char letters[] = ...
A Simple Program using an array <ul><li>float nums[] = {5, 1.5, 7, 3.2}; </li></ul><ul><li>int i = 3; </li></ul><ul><li>wh...
A Simple Program using an array <ul><li>float nums[] = {5, 1.5, 7, 3.2}; </li></ul><ul><li>int i = 3; </li></ul><ul><li>wh...
Don't confuse the  index  with the  value  that is stored there <ul><li>float nums[] = {5, 1.5, 7, 3.2}; </li></ul><ul><li...
Practice Quiz Question:  What is the output of this program? <ul><li>String words[] = { </li></ul><ul><li>&quot;The&quot;,...
Practice Quiz Question:  What is the output of this program? <ul><li>String words[] = { </li></ul><ul><li>&quot;The&quot;,...
Practice Quiz Question:  What is the output of this program? <ul><li>String words[] = { </li></ul><ul><li>&quot;The&quot;,...
The  length  of an array <ul><li>The length of an array, is the number of elements that array can hold </li></ul><ul><li>T...
The  length  of an array <ul><li>The length of an array, is the number of elements that array can hold </li></ul><ul><li>T...
The  length  of an array <ul><li>length is often used with loops that go through each element in an array </li></ul><ul><l...
The  length  of an array <ul><li>length is often used with loops that go through each element in an array </li></ul><ul><l...
the  int()  function <ul><li>Java is very picky about types: </li></ul><ul><li>int num = 3.14; </li></ul><ul><li>generates...
the  int()  function <ul><li>We can fix the error with the  int()  function </li></ul><ul><li>int num =  int (3.14); </li>...
Practice Quiz Question: What is the output? <ul><li>float [] nums = {3.14,4.999,2.718,0.11235813}; </li></ul><ul><li>print...
File Input <ul><li>In “real life” many programs use very little graphics or none at all </li></ul><ul><li>Many programs pr...
Creating a program that uses File Input in processing <ul><li>Start a new program </li></ul><ul><li>For now, we don’t need...
Then, create a text file in  notepad
Save it to the same folder as your program Name it  list  (or something else)
Make sure the  name  is right <ul><li>If the name in our code doesn’t match the name of the file, our program won’t run. <...
list.length <ul><li>The  length  of the array will be the number of lines there are in the text file </li></ul><ul><li>pri...
list.length <ul><li>In this case there are 6 </li></ul><ul><li>println( </li></ul><ul><li>&quot;there are &quot; +  list.l...
loadStrings()  from the API <ul><li>This loop will display each line of input on a line by itself </li></ul><ul><li>for (i...
Now that we know the program is working, we can begin to modify it <ul><li>Our assignment is to write a program that conve...
Converting a  String  to an  int <ul><li>loadStrings()  always returns an array of  String s </li></ul><ul><li>This is a l...
the  int()  function <ul><li>The problem is that the  types  don’t match </li></ul><ul><li>String   lines[] = loadStrings(...
the  int()  function <ul><li>the  int()  function fixes the problem </li></ul><ul><li>String   lines[] = loadStrings(&quot...
Practice quiz question: If we use the following data file, what will be the output? <ul><li>String lines[] = loadStrings(&...
tron
get() <ul><li>Returns the color of one pixel </li></ul><ul><li>if(get(x,y) != color(0,0,0)) </li></ul><ul><li>{ </li></ul>...
How we could check for a crash with  get() <ul><li>int x = 10; </li></ul><ul><li>int y = 150; </li></ul><ul><li>void setup...
How we could check for a crash with  get() <ul><li>int x = 10; </li></ul><ul><li>int y = 150; </li></ul><ul><li>void setup...
Writing tron <ul><li>Don't try to write the program all at once </li></ul><ul><li>Get one detail working and then move on ...
Writing tron <ul><li>The next thing would be to make the direction change based on what's in  key </li></ul>
Writing tron <ul><li>Now, we'd probably want to use  get()  to see if we ran into our own light trail </li></ul>
Oops, the game is over as soon as it started! <ul><li>The problem is that we aren't moving </li></ul><ul><li>If we stay in...
Keep moving <ul><li>In  setup()  we can set  key  to get the dot moving </li></ul><ul><li>In my program I used:  key = 'd'...
Adding a computer opponent <ul><li>Before I add the computer, let's clean up the code </li></ul><ul><li>draw()  is getting...
Adding a computer opponent <ul><li>There, that's better </li></ul><ul><li>Now we can use the  human()  function as a guide...
Adding a computer opponent <ul><li>The computer opponent will need it's own set of variables to keep track of its location...
Adding a computer opponent <ul><li>We will write a function that is very similar to  human()  called  computer() </li></ul...
Adding a computer opponent <ul><li>The problem now is that our computer won't turn </li></ul><ul><li>We need to add code t...
Adding a computer opponent <ul><li>In each of the four  if  statements of the computer, we will look ahead 1 place to see ...
Practice Quiz Questions <ul><li>1. How many variables would be needed for a tron player that can change position and direc...
Practice Quiz Question: Find the output <ul><li>for(int i = 0; i <= 3; i++) </li></ul><ul><li>{ </li></ul><ul><li>if(i != ...
Ending the game <ul><li>Here's a problem </li></ul><ul><li>The Human crashes and the game displays &quot;Human Loses&quot;...
Ending the game <ul><li>I need to stop the game as soon as one player loses, otherwise things will get messed up </li></ul...
Ending the game <ul><li>When a player crashes, I'll change the variable to show the game is over </li></ul>
Ending the game <ul><li>In  draw() , I'll make sure that the players only move is the game isn't over </li></ul>
Making the line thicker <ul><li>We can make a bigger dot by making a  rect angle instead of a  point </li></ul><ul><li>Sin...
Making the line thicker <ul><li>Now there is some funny behavior </li></ul><ul><li>Up and left are fine, but we crash as s...
Making the line thicker <ul><li>Look carefully at  rect(x,y,5,5); </li></ul><ul><li>x  and  y  are the coordinates of the ...
Making the line thicker <ul><li>If I take one step to the left ( x-- ), there's no problem </li></ul><ul><li>(x,y)  lands ...
Making the line thicker <ul><li>After I take one step to the right ( x++ )  </li></ul><ul><li>(x,y)  lands on part of the ...
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Processing
Upcoming SlideShare
Loading in...5
×

Processing

1,087

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,087
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Processing"

  1. 1. Computer Programming 1 Mr. Simon Lowell High School San Francisco, CA
  2. 2. Course Requirements: <ul><li>No previous programming experience is expected </li></ul><ul><li>You should feel comfortable using the internet and email </li></ul><ul><li>A web based email account (e.g. GMail or Yahoo mail) that you can access from school </li></ul><ul><li>A website (free and easy to get—I recommend freewebs.com) </li></ul>
  3. 3. Who should take this class? <ul><li>Anyone interested in a career as computer programmer or game designer </li></ul><ul><li>Anyone considering a college major in: </li></ul><ul><ul><li>Computer Science </li></ul></ul><ul><ul><li>Engineering </li></ul></ul><ul><ul><li>Math </li></ul></ul><ul><ul><li>Physics </li></ul></ul><ul><ul><li>Biology </li></ul></ul><ul><ul><li>Economics </li></ul></ul><ul><ul><li>Information Science </li></ul></ul><ul><li>Anyone curious about how software is created </li></ul>
  4. 4. What you’ll learn <ul><li>How to make simple programs (including computer games like &quot;Pong&quot; and &quot;Tron&quot;) that can be installed on a computer, a webpage and even a cell phone </li></ul><ul><li>Data types (e.g. int, float) </li></ul><ul><li>Control structures (e.g. if, while) </li></ul><ul><li>Functions </li></ul><ul><li>Computer Graphics </li></ul><ul><li>Good Programming Style </li></ul><ul><li>A good foundation for studying computer science in college </li></ul>
  5. 5. Grading Policy <ul><li>Each six week grade: </li></ul><ul><ul><ul><li>70% tests and quizzes </li></ul></ul></ul><ul><ul><ul><li>20% programming assignments </li></ul></ul></ul><ul><ul><ul><li>10% productive use of lab time </li></ul></ul></ul><ul><li>The Semester grade: </li></ul><ul><ul><ul><li>Average of the 3 six week </li></ul></ul></ul><ul><ul><ul><li>grades and the final exam </li></ul></ul></ul>
  6. 6. Programming Assignments <ul><li>Use free software: Processing </li></ul><ul><li>Available online or from me </li></ul><ul><li>It’s critical to your success that you spend adequate time programming and fully understand the assignments </li></ul><ul><li>Programming can be very time consuming—class time alone may not be enough </li></ul><ul><li>All programs should be sent by email to room334@gmail.com </li></ul>
  7. 7. Style <ul><li>Building a working program is not enough </li></ul><ul><li>Other programmers need to read, understand and modify your program </li></ul><ul><li>Every class, book and job may use a slightly different style </li></ul><ul><li>Good style will significantly improve your grade </li></ul>
  8. 8. 10 point Program Grading Scale <ul><li>1 pt: Name, class, assignment in comments at top </li></ul><ul><li>2 pts: URL (web address) </li></ul><ul><li>2 pts: Correct Style </li></ul><ul><li>5 pts: Program Correctness </li></ul><ul><li>Always put your name, class and assignment on the subject line of the email message </li></ul>
  9. 9. Web and email <ul><li>Send programs to room334@gmail.com </li></ul><ul><li>Send questions to [email_address] </li></ul><ul><li>Check mrsimon.net for assignments, grades, software and other information </li></ul>
  10. 10. Log Off! <ul><li>Please remember to logoff each time you finish with the computer, otherwise other people will be able to access your work! </li></ul>
  11. 11. Assignment 0 <ul><li>Then, send an email to room334@gmail.com with the following information: </li></ul><ul><li>Your name, reg, class and computer # </li></ul><ul><li>Your parents/guardians name, home phone and email </li></ul><ul><li>Your parents work/daytime phone </li></ul><ul><li>Secret Code (4 digits/characters, examples: AOK1, 1776, KT85) </li></ul><ul><li>If time permits, sign up for a website at freewebs.com </li></ul><ul><li>Log Off when you’re done </li></ul>
  12. 12. Getting your own website <ul><li>Providers of free websites </li></ul><ul><li>http://webs.com </li></ul><ul><li>http://www.freehostspace.com </li></ul><ul><li>http://geocities.yahoo.com/ </li></ul><ul><li>http:// www.netfirms.com </li></ul><ul><li>http://www.50megs.com </li></ul><ul><li>http:// www.angelfire.lycos.com / </li></ul><ul><li>http://www.100megs.com </li></ul><ul><li>Know of any others? </li></ul>
  13. 13. webs.com <ul><li>Make up a site address and password </li></ul>
  14. 14. webs.com <ul><li>Fill in the forms, choose a template (you can change your mind later) </li></ul><ul><li>Make sure you select the free plan </li></ul>
  15. 15. webs.com <ul><li>I choose the &quot;blank canvas&quot; option, though I don't think it really matters </li></ul>
  16. 16. freehostspace.com <ul><li>No ads, but a little harder to use </li></ul><ul><li>You'll have to write some html to create your webpage (I'll show you how) </li></ul><ul><li>Choose the FREE Hosting Plan, and fill out the form </li></ul>
  17. 17. freehostspace.com <ul><li>Choose the FREE Hosting Plan, and fill out the form </li></ul><ul><li>Leave &quot;Get Domain Name&quot; field blank </li></ul><ul><li>You'll be sent a username and password </li></ul>
  18. 18. freehostspace.com <ul><li>Once you get the confirmation email, login in, choose Website Manager and then Subdomain Manager </li></ul>
  19. 19. freehostspace.com <ul><li>Make up a subdomain name, and choose &quot;Add Subdomain&quot; </li></ul><ul><li>I chose mrsimon.scienceontheweb.net </li></ul>
  20. 20. What is Computer Programming?
  21. 21. Computer Hardware and Software, the book analogy <ul><li>Computer Hardware is like the cover and pages of a book </li></ul><ul><li>Computer Software is like the story—the language of the book </li></ul><ul><li>Programming a computer is creating software by writing computer language </li></ul>
  22. 22. Computer Language (Code) <ul><li>Like human (called “natural”) language, Computer languages have words, numbers, grammar, syntax and punctuation </li></ul><ul><li>Unlike natural language, computer languages are very limited and specialized </li></ul><ul><li>Human language often has 100,000’s of words, computer languages get by with a few hundred </li></ul>
  23. 23. Low Level Computer Language <ul><li>Computers only “understand” sequences of numbers </li></ul><ul><li>The “language of numbers” is called machine language —a low level language. It looks like </li></ul><ul><li>100011 00011 01000 000000000001000100 </li></ul><ul><li>Writing low level programs is difficult and tedious </li></ul>
  24. 24. High Level Computer Language <ul><li>Uses words, easier for humans </li></ul><ul><li>High level programs are written using a special program that is sort of like a word processor for computer language </li></ul><ul><li>When the code is finished, another program (called a compiler) converts the high level code to machine code </li></ul>
  25. 25. High Level Languages <ul><li>C++: flexible, powerful, most common </li></ul><ul><li>Java: good for the internet, and small devices like cell phones </li></ul><ul><li>Basic: easy to learn and use </li></ul><ul><li>Scheme: good for artificial intelligence </li></ul><ul><li>Many Others: C#, C, LISP, Fortran, Pascal, Forth, COBOL, Logo. . . . </li></ul>
  26. 26. Fourth Generation Languages <ul><li>Programmers are working to create language programs that can convert natural language to computer language </li></ul><ul><li>Query is one example </li></ul><ul><li>Still in the early stages, it will be some time in the future before they can be used to make useful programs </li></ul>
  27. 27. We'll create Java programs using Processing <ul><li>Processing is a beginner friendly program for creating Java software </li></ul><ul><li>Completely free to download and use from processing.org </li></ul><ul><li>Runs on Windows, Macs and Linux, even off a thumb drive </li></ul><ul><li>Finished programs can be exported to a website and java enabled cell phones </li></ul><ul><li>Very powerful graphics features </li></ul>
  28. 28. How to make your own computer software <ul><li>Start Processing </li></ul><ul><li>Type ellipse(50,50,80,20); </li></ul><ul><li>Press &quot;Run&quot; </li></ul><ul><li>You should see this: </li></ul>
  29. 29. How to make your own computer software <ul><li>ellipse(50,50,80,20); </li></ul><ul><li>An example of a function </li></ul><ul><li>functions &quot;do something&quot; this one &quot;draws an ellipse with this size and position&quot; </li></ul><ul><li>The numbers are called arguments or parameters </li></ul>
  30. 30. Coordinates in Computer Graphics <ul><li>In computer graphics, the coordinate system is only positive. </li></ul><ul><li>The origin is the top left corner of the window </li></ul>(0,0) + X + Y
  31. 31. ellipse( 50,50 ,80,20); <ul><li>The first two arguments ( in Red ) are the x and y coordinates of the center of the ellipse </li></ul>50 50
  32. 32. ellipse(50,50, 80 , 20 ); <ul><li>The third argument ( in Yellow ) is the width of the ellipse </li></ul><ul><li>The fourth argument ( in Green ) is the height </li></ul><ul><li>If the width and height are the same, the result is a circle </li></ul>80 20
  33. 33. <ul><li>size(300,200); </li></ul><ul><li>Another function, should always be called first </li></ul><ul><li>This one increases (or decreases) the screen area </li></ul><ul><li>The two arguments are width and height </li></ul><ul><li>Keep your applets small, no bigger than 800x600, and usually smaller </li></ul>
  34. 34. How to make your own computer software <ul><li>noFill(); </li></ul><ul><li>ellipse(50,50,80,20); </li></ul><ul><li>A program can use any number of functions </li></ul><ul><li>The noFill() function changes how ellipses are drawn </li></ul><ul><li>Notice that noFill() has no arguments, it's parenthesis are empty </li></ul>
  35. 35. How to make your own computer software <ul><li>noFill(); </li></ul><ul><li>smooth(); </li></ul><ul><li>ellipse(50,50,80,20); </li></ul><ul><li>smooth() also has no arguments </li></ul><ul><li>It smoothes out the curves of the ellipse </li></ul>
  36. 36. How to make your own computer software <ul><li>noFill(); </li></ul><ul><li>stroke(255,0,0); </li></ul><ul><li>ellipse(50,50,80,20); </li></ul><ul><li>The stroke() function changes the color of the outline </li></ul><ul><li>It's 3 arguments are the amount of Red, Green and Blue in the range 0 - 255 </li></ul>
  37. 37. How to make your own computer software <ul><li>noFill(); </li></ul><ul><li>stroke(255,0,0); </li></ul><ul><li>strokeWeight(5); </li></ul><ul><li>ellipse(50,50,80,20); </li></ul><ul><li>The strokeWeight() function changes the thickness of the outline </li></ul>
  38. 38. Order is important <ul><li>ellipse(50,50,80,20); </li></ul><ul><li>noFill(); </li></ul><ul><li>stroke(255,0,0); </li></ul><ul><li>strokeWeight(5); </li></ul><ul><li>Here changing the stroke and fill has no effect, because it's done after the ellipse had already been drawn </li></ul>
  39. 39. Saving your work <ul><li>By default, Processing expects you to store your programs is in the Processing folder in My Documents </li></ul><ul><li>If you want, you can change the sketchbook location to store work on a flash drive </li></ul><ul><li>Choose Edit | Preferences to configure where your programs will be stored </li></ul><ul><li>Once you start typing your program choose </li></ul><ul><li>File | Save as and give it a name </li></ul>
  40. 40. Java is very picky about names <ul><li>You may get this error message: </li></ul>
  41. 41. Assignment #1: Olympic Rings <ul><li>Write a program that produces a design similar to the Olympic Rings with 5 differently colored circles </li></ul><ul><li>Your program will use the following functions (some more than once): </li></ul><ul><ul><li>strokeWeight(); </li></ul></ul><ul><ul><li>stroke() </li></ul></ul><ul><ul><li>ellipse() </li></ul></ul><ul><ul><li>size() </li></ul></ul><ul><ul><li>noFill() </li></ul></ul>
  42. 42. Uploading the program to your website <ul><li>Choose File | Export </li></ul>
  43. 43. Uploading the program to your website <ul><li>Processing will create a folder called Applet </li></ul><ul><li>First, rename index to something like &quot;OlympicRings&quot; </li></ul>
  44. 44. A bug in version 0148 BETA 19 August 2008 <ul><li>When you export your applet, it's not the right size. </li></ul><ul><li>Open the html file in Word Pad, and manually change the size in two places </li></ul>
  45. 45. Uploading the program to your website <ul><li>Upload only these three files to your website </li></ul><ul><ul><li>OlympicRings (html or &quot;Firefox Document&quot;) </li></ul></ul><ul><ul><li>OlympicRings (Executable Jar File) </li></ul></ul><ul><ul><li>loading (GIF Image) </li></ul></ul>
  46. 46. Uploading to freewebs.com <ul><li>Log in and click on My Site </li></ul>
  47. 47. Uploading to freewebs.com <ul><li>Click on the single file uploader </li></ul>
  48. 48. Uploading to freewebs.com <ul><li>One by one, upload OlympicRings (html or &quot;Firefox Document&quot;), OlympicRings (Executable Jar File) and loading (GIF Image) </li></ul><ul><li>You can hold the mouse over each file to figure out which is which </li></ul><ul><li>Leave the directory pull down menu unchanged </li></ul>
  49. 49. Uploading to freewebs.com <ul><li>You should see all three in the File Manager </li></ul>
  50. 50. uploading to freehostspace.com <ul><li>Choose File Manager </li></ul><ul><li>Double click on the folder with your subdomain name </li></ul>
  51. 51. uploading to freehostspace.com <ul><li>Scroll down to the bottom of the page to find the file upload option </li></ul><ul><li>You can upload 3 files at a time </li></ul>
  52. 52. From the File Manager, Click on OlympicRings.html and you should see your program. It is now on the internet for the world to see!
  53. 53. Common Mistakes <ul><li>Put each statement on a separate line. </li></ul><ul><li>Once you call noFill() , from then on, all ellipses will be unfilled. Don't call it more than once. </li></ul><ul><li>Same with strokeWeight() . Don't call it more than once. </li></ul>
  54. 54. Submitting the finished assignment <ul><li>Attach OlympicRings.pde to an email and send it to [email_address] </li></ul><ul><li>You can find the PDE file by holding your mouse over it. It's NOT in the applet folder. </li></ul>
  55. 55. Submitting the finished assignment <ul><li>Make sure you have your name, assignment and class on the subject line </li></ul><ul><li>Put the link to the page in the body of the email </li></ul>
  56. 56. Building your homepage and linking to your assignments <ul><li>Click on Site Manager and then click on the Edit icon next to home </li></ul>
  57. 57. Building your homepage and linking to your assignments <ul><li>Move your cursor to the content box where you want the link to go, and click Link </li></ul>
  58. 58. Building your homepage and linking to your assignments <ul><li>Choose My Files, click on your html file, type some text and click Insert </li></ul>
  59. 59. Building your homepage and linking to your assignments <ul><li>You should now see the link on your homepage </li></ul>
  60. 60. The Processing &quot;Dictionary&quot; <ul><li>http://processing.org/reference/index.html </li></ul><ul><li>The API* is the dictionary of a computer language </li></ul>* API stands for Application Programming Interface , but you don't really care and it won't be on the test
  61. 61. The &quot;definition&quot; of ellipse()
  62. 62. Drawing Functions <ul><li>triangle() </li></ul><ul><li>rect() (also squares) </li></ul><ul><li>quad() </li></ul><ul><li>ellipse() (also circles) </li></ul><ul><li>point() </li></ul><ul><li>line() </li></ul><ul><li>bezier() and arc() (for curves) </li></ul><ul><li>beginShape() and endShape () (for polygons) </li></ul>
  63. 63. triangle( 150 , 20 , 20 , 280 ,280,280);
  64. 64. rect( 50 , 20 ,200, 100 );
  65. 65. quad( 50 , 20 , 220 , 80 , 250 , 160 ,30,280);
  66. 66. ellipse( 150 , 150 ,220, 80 );
  67. 67. point(150,150);
  68. 68. line( 10 , 250 , 290 , 15 );
  69. 69. The endpoints <ul><li>bezier( 20,20 ,10,110,280,150, 280,280 ); </li></ul>
  70. 70. These two invisible points &quot;pull&quot; the curve <ul><li>bezier(20,20, 10,110 , 280,150 ,280,280); </li></ul>
  71. 71. The effect at the ends is weaker <ul><li>bezier(20,20, 210,250 , 290,250 ,280,280); </li></ul>
  72. 72. The effect at the ends is weaker <ul><li>bezier(20,20, 10,50 , 100 , 50 ,280,280); </li></ul>
  73. 73. Both points on the same side <ul><li>bezier(20,20, 10,50 , 100 , 280 ,280,280); </li></ul>
  74. 74. The points can be off the screen! <ul><li>bezier(20,20, -200,110 , 500,150 ,280,280); </li></ul>
  75. 75. arc() draws part of an ellipse() <ul><li>arc( 150 , 150 , 200 , 200 , 0, PI/2); </li></ul>
  76. 76. arc() draws part of an ellipse() <ul><li>arc( 150 , 150 , 100 , 200 , PI/4, 3*PI/2); </li></ul>
  77. 77. Polygons <ul><li>beginShape(); </li></ul><ul><li>vertex(20, 20); </li></ul><ul><li>vertex(40, 20); </li></ul><ul><li>vertex(40, 40); </li></ul><ul><li>vertex(60, 40); </li></ul><ul><li>vertex(60, 60); </li></ul><ul><li>vertex(20, 60); </li></ul><ul><li>endShape(CLOSE); </li></ul>
  78. 78. noStroke(); rect(50,50,200,100);
  79. 79. noFill(); rect(50,50,200,100);
  80. 80. noFill(); noStroke(); rect(50,50,200,100); Empty!
  81. 81. fill(255,0,0); rect(50,50,200,100);
  82. 82. fill(0,255,0); rect(50,50,200,100);
  83. 83. fill(0,0,255); rect(50,50,200,100);
  84. 84. fill(178,58,238); rect(50,50,200,100); RGB Color Codes: http://www.tayloredmktg.com/rgb/
  85. 85. fill(0,0,255); stroke(255,0,0); rect(50,50,200,100);
  86. 86. background(0,0,0); fill(255,0,0); rect(50,50,200,100);
  87. 87. opacity <ul><li>You can make shapes transparent by using the four argument version of fill() </li></ul><ul><li>the fourth argument is opacity </li></ul><ul><li>size(200,200); </li></ul><ul><li>background(0); </li></ul><ul><li>fill(0,255,0, 127 ); </li></ul><ul><li>ellipse(50,50,30,80); </li></ul><ul><li>fill(255,0,0, 127 ); </li></ul><ul><li>rect(30,30,150,70); </li></ul><ul><li>fill(0,0,255, 127 ); </li></ul><ul><li>rect(40,50,80,170); </li></ul>
  88. 88. Practice Quiz Question <ul><li>Circle the picture that best matches the output </li></ul><ul><li>fill(255,0,0); </li></ul><ul><li>ellipse(10,10,50,50); </li></ul><ul><li>fill(0,255,0); </li></ul><ul><li>rect(10,10,80,20); </li></ul><ul><li>rect(10,50,20,30); </li></ul>
  89. 89. Practice Quiz Questions <ul><li>True/False: The ellipse function takes 3 arguments </li></ul><ul><li>Fill in the blank: The ______ is like a dictionary of the words in a programming language </li></ul><ul><li>Circle the unnecessary line of code in the following program: </li></ul><ul><ul><ul><li>stroke(0,255,0); </li></ul></ul></ul><ul><ul><ul><li>ellipse(33,50,20,20); </li></ul></ul></ul><ul><ul><ul><li>stroke(0,255,0); </li></ul></ul></ul><ul><ul><ul><li>ellipse(66,50,20,20); </li></ul></ul></ul>
  90. 90. Comments <ul><li>Two forms: Single and Multi-line </li></ul><ul><li>// Single Line </li></ul><ul><li>/* Multi-Line */ </li></ul><ul><li>Tells the computer “ignore this”, this is for people </li></ul><ul><li>Good Style: Always put your name, assignment and class in comments at the top of your program </li></ul>
  91. 91. Comments <ul><li>Good Style: Always put your name, assignment and class in comments at the top of your program </li></ul>
  92. 92. doc comments <ul><li>Doc comments (documentation comments) are used for sharing a description of your sketch when the program is exported. </li></ul><ul><li>To make doc comments use </li></ul><ul><li>/** </li></ul><ul><li>description </li></ul><ul><li>*/ </li></ul>
  93. 93. doc comments <ul><li>Doc comments show up on the webpage when you export the program </li></ul>
  94. 94. doc comments <ul><li>You can start a new line with <br> or <p> </li></ul>
  95. 95. Arithmetic <ul><li>Calculations use the following arithmetic operators : + - * / % </li></ul><ul><li>The operators can be combined with numbers to make expressions . </li></ul><ul><li>The expression 5 + 3 evaluates to 8 </li></ul><ul><li>Parenthesis can be used to create more complicated expressions </li></ul><ul><li>(5 * (2 – 3)) evaluates to -5 </li></ul>
  96. 96. Expressions can be arguments <ul><li>What will be the height and width of the following ellipse? </li></ul><ul><li>ellipse(150,150,2*(22+78),40*(8-2)); </li></ul>
  97. 97. Symmetry <ul><li>Expressions can be used to make placing symmetrical arrangements easier </li></ul>
  98. 98. Symmetry <ul><li>size(300,300); </li></ul><ul><li>ellipse( 150-75 ,150,40,40); </li></ul><ul><li>ellipse( 150+75 ,150,40,40); </li></ul>
  99. 99. Integer arithmetic <ul><li>Division is done differently with integers than with decimals </li></ul><ul><ul><li>5.0/4.0 evaluates to 1.25 </li></ul></ul><ul><ul><li>5/4.0 evaluates to 1.25 </li></ul></ul><ul><ul><li>5.0/4 evaluates to 1.25 </li></ul></ul><ul><ul><li>5/4 evaluates to 1 </li></ul></ul><ul><li>If one or more numbers in an expression is a decimal , the result will be a decimal </li></ul><ul><li>If all the numbers in an expression are integers , the result will be an integer </li></ul>
  100. 100. Integer arithmetic <ul><li>If you see an integer division expression like 5/4 </li></ul><ul><li>ask yourself &quot;How many times does 4 go into 5?&quot; </li></ul>
  101. 101. Modulus and integer division <ul><li>Remember how you did math in grade school? </li></ul>
  102. 102. Modulus and integer division <ul><li>Remember how you did math in grade school? </li></ul>
  103. 103. Modulus and integer division <ul><li>Remember how you did math in grade school? </li></ul>
  104. 104. Modulus and integer division <ul><li>Remember how you did math in grade school? </li></ul>
  105. 105. <ul><li>The modulus operator gives the remainder of an integer division expression </li></ul><ul><li>8/5 </li></ul><ul><li>8 % 5 </li></ul>Modulus and integer division
  106. 106. Practice Quiz Question: Evaluate the following expressions <ul><li>9/4 </li></ul><ul><li>9%4 </li></ul><ul><li>21/2 </li></ul><ul><li>21%2 </li></ul><ul><li>5/8 </li></ul><ul><li>5%8 </li></ul>
  107. 107. Variables and Declarations <ul><li>Sometimes you want a place to store a number in computer memory. </li></ul><ul><li>You can think of this as a &quot;mailbox&quot; </li></ul><ul><li>There different sizes of &quot;mailboxes&quot; for different kinds of numbers. </li></ul><ul><ul><li>Integers: int </li></ul></ul><ul><ul><li>Decimals: float </li></ul></ul><ul><ul><li>Characters (Letters, Punctuation & Digits): char </li></ul></ul><ul><ul><li>boolean holds only true or false </li></ul></ul>
  108. 108. Variables and Declarations <ul><li>Vari -ables allow values to change </li></ul>
  109. 109. Variable Declarations & Initializations <ul><li>To create a mailbox, you declare it. </li></ul><ul><li>int num; </li></ul><ul><li>num is the &quot;name&quot; of the variable </li></ul><ul><li>names can't have spaces or unusual characters </li></ul><ul><li>Once its declared you can store a number in it </li></ul><ul><li>num = 5; </li></ul><ul><li>This is called initializing </li></ul><ul><li>You can also do both at once </li></ul><ul><li>int value = 17 ; </li></ul>
  110. 110. Using variables in expression <ul><li>Once a variable has been declared and initialized, you can use it in an expression </li></ul><ul><li>What will be the x and y coordinates of the center of the ellipse? </li></ul><ul><li>int value1 = 17; </li></ul><ul><li>int value2 = 13; </li></ul><ul><li>ellipse( 50+value1 , 50-value2 ,12,44); </li></ul>
  111. 111. The assignment operator <ul><li>= is called the assignment operator </li></ul><ul><li>It takes the value on the right , and puts it in the variable on the left </li></ul><ul><li>num = 5; </li></ul><ul><li>You can't do it the other way around! </li></ul><ul><li>5 = num; </li></ul>
  112. 112. The assignment operator <ul><li>You can't do an assignment as an argument </li></ul><ul><li>ellipse(int x = 45,55,10,10); </li></ul><ul><li>You have to do in two separate lines </li></ul><ul><li>int x = 45; </li></ul><ul><li>ellipse(x,55,10,10); </li></ul>
  113. 113. The type of variable must match <ul><li>You can't put a decimal in an int </li></ul><ul><li>Otherwise you'll get an error message </li></ul>
  114. 114. The assignment operator <ul><li>This looks weird if you are use to algebra, but it's very common in programming </li></ul><ul><li>int x = 3; </li></ul><ul><li>x = x + 1 ; </li></ul><ul><li>What value is in the x variable after those two lines of code are executed? </li></ul>
  115. 115. Variables can be reused as many times as you like
  116. 116. Now With just one change. . .
  117. 117. Good Style <ul><li>Name your variables what they are </li></ul><ul><li>x is a good name for an x coordinate </li></ul><ul><li>num is a lousy name for the screen width </li></ul><ul><li>variable names that use more than one word should capitalize the beginning of all the words after the first </li></ul><ul><li>int numberOfPeople = 34; </li></ul><ul><li>Be careful! If type a name for a variable and it changes color, that name has already been taken! </li></ul>
  118. 118. &quot;Moving&quot; a circle <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul>
  119. 119. &quot;Moving&quot; a circle <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 50; </li></ul>
  120. 120. &quot;Moving&quot; a circle <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul>
  121. 121. &quot;Moving&quot; a circle <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 50; </li></ul>
  122. 122. &quot;Moving&quot; a circle <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul>
  123. 123. Notice the difference? <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul>
  124. 124. The top picture drew the left circle first , while the bottom drew the left circle last <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul>
  125. 125. The bottom picture doesn't match the output of this program <ul><li>size(200,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul>
  126. 126. Circle the matching output <ul><li>size(100,100); </li></ul><ul><li>int x = 50; </li></ul><ul><li>int y = 50; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>x = x + 30; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul><ul><li>y = y - 30; </li></ul><ul><li>ellipse(x,y,60,60); </li></ul>
  127. 127. Modern programs are very big—they are organized into Functions <ul><li>Programs can be difficult to understand Windows Vista has over 50,000,000 lines of computer code! </li></ul><ul><li>One way to make programs easier to understand is to break them down into smaller &quot;chunks&quot; or modules </li></ul><ul><li>One name for these modules is functions </li></ul>213,000,000 Debian GNU/Linux 2005 30,000,000 Red Hat Linux 7.1 2005 86,000,000 Mac OS X 10.4 2005 50,000,000 Windows Vista Beta 2 2005 40,000,000 Windows XP 2001 29,000,000 Windows 2000 2000 16,000,000 Windows NT 4.0 1996 6,000,000 Windows NT 3.1 1993 Lines of Code Operating System Year
  128. 128. You wouldn't write a paper that was just one long paragraph <ul><li>You'd have many paragraphs, each of which would focus on one topic </li></ul><ul><li>It's the same in programs—we divide our program into chunks called functions </li></ul><ul><li>Each function focuses on one job or task </li></ul>
  129. 129. Creating your own functions <ul><li>Processing allows you to separate your program into different functions. </li></ul><ul><li>This is one of the key elements of good style , and makes programs easier to understand, modify and reuse. </li></ul><ul><li>A well designed function should do one thing ; that is you should be able to describe what it does without using the word and or or . </li></ul>
  130. 130. setup() and draw() <ul><li>Processing programs that use functions must contain two special functions called setup() and draw() </li></ul><ul><li>Put things that happen only once at the beginning in setup() </li></ul><ul><li>Put code that draws in draw() </li></ul><ul><li>You may create as many additional functions as you want </li></ul>
  131. 131. Happy Face Example <ul><li>Let's say I had a program that drew a happy face </li></ul>
  132. 132. Happy Face Example <ul><li>Here's what it would look like separated into setup() and draw() functions </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(200,100); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>fill(255,255,0); </li></ul><ul><li>ellipse(100,50,80,80); </li></ul><ul><li>arc(100,50,60,60,PI/8,7*PI/8); </li></ul><ul><li>fill(0,0,0); </li></ul><ul><li>ellipse(85,40,10,15); </li></ul><ul><li>ellipse(115,40,10,15); </li></ul><ul><li>} </li></ul>
  133. 133. The syntax of functions <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(200,100); </li></ul><ul><li>} </li></ul><ul><li>For now, every function starts with void which marks the beginning of the head </li></ul><ul><li>Then a name followed by parenthesis </li></ul><ul><li>Curly braces mark the beginning and ending of the body of the function </li></ul><ul><li>The head and body together are called the function definition </li></ul>
  134. 134. Happy Face Example <ul><li>Here I've added my own face() and head() functions </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(200,100); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>head(); </li></ul><ul><li>face(); </li></ul><ul><li>} </li></ul><ul><li>void head() </li></ul><ul><li>{ </li></ul><ul><li>fill(255,255,0); </li></ul><ul><li>ellipse(100,50,80,80); </li></ul><ul><li>} </li></ul><ul><li>void face() </li></ul><ul><li>{ </li></ul><ul><li>arc(100,50,60,60,PI/8,7*PI/8); </li></ul><ul><li>fill(0,0,0); </li></ul><ul><li>ellipse(85,40,10,15); </li></ul><ul><li>ellipse(115,40,10,15); </li></ul><ul><li>} </li></ul>
  135. 135. Oops! What happened? <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(200,100); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>face(); </li></ul><ul><li>head(); </li></ul><ul><li>} </li></ul><ul><li>void head() </li></ul><ul><li>{ </li></ul><ul><li>fill(255,255,0); </li></ul><ul><li>ellipse(100,50,80,80); </li></ul><ul><li>} </li></ul><ul><li>void face() </li></ul><ul><li>{ </li></ul><ul><li>arc(100,50,60,60,PI/8,7*PI/8); </li></ul><ul><li>fill(0,0,0); </li></ul><ul><li>ellipse(85,40,10,15); </li></ul><ul><li>ellipse(115,40,10,15); </li></ul><ul><li>} </li></ul>
  136. 136. Auto-Format before after
  137. 137. Simple Animation <ul><li>We can take advantage of the way setup() and draw() work to create simple animations </li></ul><ul><li>(demo) </li></ul>
  138. 138. Practice Quiz Question <ul><li>Which picture matches the output of this program? </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>background(0,0,0); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>anotherMystery(); </li></ul><ul><li>mysteryFunction(); </li></ul><ul><li>fill(255,0,0); </li></ul><ul><li>ellipse(50,50,40,40); </li></ul><ul><li>} </li></ul><ul><li>void mysteryFunction() </li></ul><ul><li>{ </li></ul><ul><li>fill(0,255,0); </li></ul><ul><li>ellipse(60,50,40,40); </li></ul><ul><li>} </li></ul><ul><li>void anotherMystery() </li></ul><ul><li>{ </li></ul><ul><li>fill(0,0,255); </li></ul><ul><li>ellipse(70,50,40,40); </li></ul><ul><li>} </li></ul>A B C D
  139. 139. the background drawn once <ul><li>int x = 0; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>background(0,0,0); </li></ul><ul><li>stroke(255,255,255); </li></ul><ul><li>noFill(); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>ellipse(x,50,20,20); </li></ul><ul><li>x = x + 5; </li></ul><ul><li>} </li></ul>
  140. 140. the background drawn every time the screen is drawn (no trail) <ul><li>int x = 0; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>stroke(255,255,255); </li></ul><ul><li>noFill(); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>background(0,0,0); </li></ul><ul><li>ellipse(x,50,20,20); </li></ul><ul><li>x = x + 5; </li></ul><ul><li>} </li></ul>
  141. 141. Checking the value in a variable <ul><li>One of the confusing things in programming is keeping track of the values as they change </li></ul><ul><li>You can print the values to the black box at the bottom of Processing with </li></ul><ul><ul><li>print() </li></ul></ul><ul><ul><li>println() </li></ul></ul>
  142. 142. Checking the value in a variable <ul><li>Apparently (15%2) + 27 is 28 </li></ul>
  143. 143. Printing Text <ul><li>Text can be words, sentences, paragraphs, numbers and more </li></ul><ul><li>It's any collection of characters, punctuation, numbers and spaces </li></ul><ul><li>To print text use double quotes </li></ul><ul><li>print( &quot; Testing, 1, 2, 3 &quot; ); </li></ul><ul><li>&quot;Testing, 1, 2, 3&quot; is an example of a literal </li></ul>
  144. 144. Expressions vs. Literals <ul><li>These two function calls produce different output </li></ul><ul><li>println(&quot;2 + 3&quot;); </li></ul><ul><li>println( 2 + 3); </li></ul>
  145. 145. Expressions vs. Literals <ul><li>These two function calls produce different output </li></ul><ul><li>println(&quot;2 + 3&quot;); </li></ul><ul><li>//displays 2 + 3 </li></ul><ul><li>println(2 + 3); </li></ul><ul><li>//displays 5 </li></ul>
  146. 146. print() vs. println() <ul><li>println() means &quot;go to the next line AFTER you print.&quot; </li></ul><ul><li>print() doesn't </li></ul><ul><li>print(&quot;x&quot;); </li></ul><ul><li>print(2); </li></ul><ul><li>//displays: x2 </li></ul><ul><li>println(&quot;x&quot;); </li></ul><ul><li>println(2); </li></ul><ul><li>//displays: x </li></ul><ul><li>// 2 </li></ul>
  147. 147. <ul><li>You can make the output more readable by including blank whitespace </li></ul><ul><li>print(2); </li></ul><ul><li>print( &quot;and&quot; ); </li></ul><ul><li>print(2); </li></ul><ul><li>print( &quot;makes&quot; ); </li></ul><ul><li>print(4); </li></ul><ul><li>//displays 2and2makes4 </li></ul><ul><li>print(2); </li></ul><ul><li>print( &quot; and &quot; ); </li></ul><ul><li>print(2); </li></ul><ul><li>print( &quot; makes &quot; ); </li></ul><ul><li>print(4); </li></ul><ul><li>//displays 2 and 2 makes 4 </li></ul><ul><li>Processing generally ignores whitespace unless you place it in a literal surrounded by double quotes </li></ul>Whitespace
  148. 148. Practice with print() <ul><li>Start Processing </li></ul><ul><li>Copy and paste the following code: </li></ul><ul><li>int var1 = 23; </li></ul><ul><li>int var2 = 7; </li></ul><ul><li>print(var1 / var2); </li></ul><ul><li>Try and guess what will be displayed </li></ul><ul><li>Check your answer by pressing play </li></ul>
  149. 149. Practice with print() <ul><li>Now add quote marks </li></ul><ul><li>int var1 = 23; </li></ul><ul><li>int var2 = 7; </li></ul><ul><li>print( &quot; var1 / var2 &quot; ); </li></ul><ul><li>Now, try and guess what will be displayed </li></ul><ul><li>Check your answer by pressing play </li></ul>
  150. 150. Practice with print() <ul><li>Now, run the program with both versions </li></ul><ul><li>int var1 = 23; </li></ul><ul><li>int var2 = 7; </li></ul><ul><li>print(&quot;var1 / var2&quot;); </li></ul><ul><li>print(var1 / var2); </li></ul><ul><li>Again, try and guess what will be displayed </li></ul><ul><li>Check your answer by pressing play </li></ul>
  151. 151. Practice with print() <ul><li>Try this </li></ul><ul><li>int var1 = 23; </li></ul><ul><li>int var2 = 7; </li></ul><ul><li>print ln (&quot;var1 / var2&quot;); </li></ul><ul><li>print ln (var1 / var2); </li></ul>
  152. 152. Practice Quiz Question <ul><li>What is the output of the following program? </li></ul><ul><li>int val1 = 13; </li></ul><ul><li>int val2 = 5; </li></ul><ul><li>print(&quot;va11 / val2 = &quot;); </li></ul><ul><li>print(val1/val2); </li></ul><ul><li>println(&quot;r&quot;); </li></ul><ul><li>println(val1%val2); </li></ul>
  153. 153. Functions and variable declarations <ul><li>If you declare a variable in a function, you can only use it in that function </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>int num = 5; </li></ul><ul><li>println(num); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>println(num); </li></ul><ul><li>} </li></ul>
  154. 154. Functions and variable declarations <ul><li>If you declare a variable in a function, you can only use it in that function </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>int num = 5; </li></ul><ul><li>println(num); //OK! </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>println(num); </li></ul><ul><li>} </li></ul>
  155. 155. Functions and variable declarations <ul><li>If you declare a variable in a function, you can only use it in that function </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>int num = 5; </li></ul><ul><li>println(num); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>println(num); //Error! </li></ul><ul><li>} </li></ul>
  156. 156. Functions and variable declarations <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>int num = 5; </li></ul><ul><li>println(num); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>println(num); //Error! </li></ul><ul><li>} </li></ul>
  157. 157. The basic scope rule* <ul><li>Scope is like a neighborhood, it's where the variable is known </li></ul><ul><li>The basic scope rule* is the scope of variable begins with it's declaration and ends with the closing curly brace of the block of code where it was declared </li></ul><ul><li>*there are exceptions to this rule, but we don't really care and we certainly aren't going to worry about it now </li></ul>
  158. 158. The scope of diameter is in yellow <ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>ellipse(30,30,50,80); </li></ul><ul><li>noFill(); </li></ul><ul><li>strokeWeight(5); </li></ul><ul><li>int diameter = 100; </li></ul><ul><li>stroke(255,0,0); </li></ul><ul><li>ellipse(60,60,diameter,diameter); </li></ul><ul><li>println(diameter); </li></ul><ul><li>} </li></ul>
  159. 159. If you declare the variable at the top of the program outside of any function, it's scope is the entire program <ul><li>int diameter = 10; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>println( diameter ); //OK </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>ellipse(30,30,50,80); </li></ul><ul><li>noFill(); </li></ul><ul><li>strokeWeight(5); </li></ul><ul><li>diameter = diameter + 10; //OK </li></ul><ul><li>stroke(255,0,0); </li></ul><ul><li>ellipse(60,60, diameter , diameter ); //OK </li></ul><ul><li>println( diameter ); //OK </li></ul><ul><li>} </li></ul>
  160. 160. Local vs. Global <ul><li>A global variable can be used anywhere in the program </li></ul><ul><li>You create a global variable by declaring it at the top of the program </li></ul><ul><li>A local variable is declared in a function </li></ul>
  161. 161. The circle gets bigger <ul><li>int diameter = 10; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>noFill(); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>ellipse(150,150,diameter,diameter); </li></ul><ul><li>diameter = diameter + 10; </li></ul><ul><li>} </li></ul>
  162. 162. The circle DOESN'T get bigger <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>noFill(); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>int diameter = 10; </li></ul><ul><li>ellipse(150,150,diameter,diameter); </li></ul><ul><li>diameter = diameter + 10; </li></ul><ul><li>} </li></ul>
  163. 163. The if statement <ul><li>if( num > 150 ) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;num is pretty big&quot;); </li></ul><ul><li>} </li></ul><ul><ul><li>a &quot;test&quot; within parentheses ( ) </li></ul></ul><ul><ul><li>a block of statements within curly braces { }. </li></ul></ul><ul><li>The test is any expression that evaluates to true or false. </li></ul><ul><li>The if-statement evaluates the test and then runs the body code only if the test is true. If the test is false, the body is skipped. </li></ul>
  164. 164. if statement <ul><li>int num = 5; </li></ul><ul><li>if(num > 2) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;It worked!&quot;); </li></ul><ul><li>} </li></ul>
  165. 165. if statement <ul><li>int num = 5; </li></ul><ul><li>if(num > 7 ) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;It worked!&quot;); </li></ul><ul><li>} </li></ul>Empty!
  166. 166. Using an if to &quot; start over if it gets too big &quot; <ul><li>int diameter = 10; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>background(0,0,0); </li></ul><ul><li>noFill(); </li></ul><ul><li>stroke(255,255,255); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>ellipse(150,150,diameter,diameter); </li></ul><ul><li>diameter = diameter + 20; </li></ul><ul><li>if(diameter > 300) </li></ul><ul><li>{ </li></ul><ul><li>background(0,0,0); </li></ul><ul><li>diameter = 10; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  167. 167. A Gradient <ul><li>int redAmount = 0; </li></ul><ul><li>int blueAmount = 255; </li></ul><ul><li>int x = 0; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(256,256); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>stroke(redAmount,0,blueAmount); </li></ul><ul><li>line(x,0,x,255); </li></ul><ul><li>x=x+1; </li></ul><ul><li>redAmount = redAmount + 1; </li></ul><ul><li>blueAmount = blueAmount - 1; </li></ul><ul><li>} </li></ul>
  168. 168. A Circle that moves left to right <ul><li>int x = 0; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>background(0); </li></ul><ul><li>ellipse(x,150,30,30); </li></ul><ul><li>x = x + 1; </li></ul><ul><li>} </li></ul>
  169. 169. A Circle that moves back & forth <ul><li>int x = 0; </li></ul><ul><li>int change = 1; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>background(0); </li></ul><ul><li>ellipse(x,150,30,30); </li></ul><ul><li>x = x + change; </li></ul><ul><li>if(x > 300) </li></ul><ul><li>{ </li></ul><ul><li>change = -1; </li></ul><ul><li>} </li></ul><ul><li>if(x < 0) </li></ul><ul><li>{ </li></ul><ul><li>change = 1; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  170. 170. Practice quiz question <ul><li>Circle the output that best matches the following code </li></ul><ul><li>int mystery = 0; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>noFill(); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>ellipse(50,mystery,20,20); </li></ul><ul><li>mystery = mystery + 15; </li></ul><ul><li>} </li></ul>
  171. 171. Input <ul><li>Most programs we see get input from people </li></ul><ul><li>The most common ways people provide input are: </li></ul><ul><ul><li>Typing on the keyboard </li></ul></ul><ul><ul><li>Moving and/or clicking the mouse </li></ul></ul>
  172. 172. Input <ul><li>Processing makes input from the mouse and keyboard about as easy as it gets </li></ul><ul><li>There are several predefined &quot;system variables&quot; </li></ul><ul><ul><li>mouseX </li></ul></ul><ul><ul><li>mouseY </li></ul></ul><ul><ul><li>key </li></ul></ul>
  173. 173. Moving a circle with the mouse <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>ellipse(mouseX,mouseY,30,30); </li></ul><ul><li>} </li></ul><ul><li>The ellipse will track the mouse </li></ul>
  174. 174. Functions that respond to events <ul><li>keyTyped() </li></ul><ul><li>keyPressed() </li></ul><ul><li>keyReleased() </li></ul><ul><li>mouseMoved() </li></ul><ul><li>mousePressed() </li></ul><ul><li>mouseReleased() </li></ul><ul><li>mouseClicked() </li></ul><ul><li>mouseDragged() </li></ul>
  175. 175. Painting only if mouse is dragged <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>} </li></ul><ul><li>void mouseDragged () </li></ul><ul><li>{ </li></ul><ul><li>ellipse(mouseX,mouseY,10,10); </li></ul><ul><li>} </li></ul>
  176. 176. More on if : Relational Operators <ul><ul><li>< <= == >= > != </li></ul></ul><ul><ul><li>if statements are created by comparing two things </li></ul></ul><ul><ul><li>if(5 < 3) </li></ul></ul><ul><ul><li>if(num == 5) </li></ul></ul><ul><ul><li>if(num >= 5) </li></ul></ul><ul><ul><li>if(num != 5) </li></ul></ul><ul><ul><li>if the the comparison in the parenthesis is true, the code in the curly braces after the if executes. Otherwise it is skipped. </li></ul></ul>
  177. 177. More on if : Relational Operators <ul><ul><li>if (num1 < num2 < num3) </li></ul></ul><ul><ul><li>Comparisons must be done two at a time </li></ul></ul>
  178. 178. More on if : Relational Operators <ul><ul><li>< <= == >= > != </li></ul></ul><ul><ul><li>The operators that are used for comparisons are called relational operators </li></ul></ul>
  179. 179. = vs. == <ul><li>A single equals (called the assignment operator) MAKES two things equal </li></ul><ul><li>num = 3; </li></ul><ul><li>Don't put this in an if —it will always be true! </li></ul><ul><li>The double equals asks a question: Are these two things equal? </li></ul><ul><li>num==3 </li></ul><ul><li>Use the double equals anywhere you would use a condition: if , etc. </li></ul><ul><li>if(num==3) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;num is three&quot;); </li></ul><ul><li>} </li></ul>
  180. 180. Moving the ellipse with the keyboard <ul><li>int x, y; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>x = 150; </li></ul><ul><li>y = 150; </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>ellipse(x,y,30,30); </li></ul><ul><li>} </li></ul><ul><li>void keyPressed() </li></ul><ul><li>{ </li></ul><ul><li>if(key=='w') </li></ul><ul><li>{ </li></ul><ul><li>y = y - 1; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  181. 181. Painting only if the right mouse button is clicked <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>} </li></ul><ul><li>void mousePressed() </li></ul><ul><li>{ </li></ul><ul><li>if(mouseButton==RIGHT ) </li></ul><ul><li>{ </li></ul><ul><li>ellipse(mouseX,mouseY,10,10); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  182. 182. boolean variables <ul><li>boolean s are the smallest, simplest kind of &quot;mailbox&quot; </li></ul><ul><li>They can hold only one of two possible values: true or false </li></ul><ul><li>Examples: </li></ul><ul><li>boolean zoom = true ; </li></ul><ul><li>boolean cond = 3 >= 3 ; </li></ul><ul><li>boolean isBig = num > 7 ; </li></ul>
  183. 183. Painting only if the mouse is pressed and a key is pressed <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>} </li></ul><ul><li>void keyPressed() </li></ul><ul><li>{ </li></ul><ul><li>if( mousePressed==true ) </li></ul><ul><li>{ </li></ul><ul><li>ellipse(mouseX,mouseY,10,10); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  184. 184. Painting only if the mouse is pressed and a key is pressed a different way <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>} </li></ul><ul><li>void mousePressed() </li></ul><ul><li>{ </li></ul><ul><li>if( keyPressed==true ) </li></ul><ul><li>{ </li></ul><ul><li>ellipse(mouseX,mouseY,10,10); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  185. 185. Logical Operators <ul><li>&& //AND </li></ul><ul><li>|| //OR </li></ul><ul><li>! //NOT </li></ul><ul><li>Used to combine multiple conditions (&quot;tests&quot;) </li></ul><ul><li>Truth tables shown at right above </li></ul><ul><li>Examples </li></ul><ul><ul><li>( 0 < nCount ) && ( nCount <= 100 ) </li></ul></ul><ul><ul><li>( 0 < nCount ) || ( nCount <= 100 ) </li></ul></ul><ul><ul><li>(‘A’ <= cGrade) && (cGrade <= ‘F’) </li></ul></ul><ul><ul><li>! (19 >= nAge && nAge >= 13) </li></ul></ul><ul><ul><li>19 < nAge || nAge < 13 </li></ul></ul>
  186. 186. Painting only if the mouse is dragged and the 'w' key is pressed <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>} </li></ul><ul><li>void mouseDragged() </li></ul><ul><li>{ </li></ul><ul><li>if( keyPressed == true && key == 'w' ) </li></ul><ul><li>{ </li></ul><ul><li>ellipse(mouseX,mouseY,10,10); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  187. 187. Practice Quiz Question: What is the output? <ul><li>int num = 4; </li></ul><ul><li>float dNum = 7.2; </li></ul><ul><li>if((num > 5) && (dNum < 8)) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;first&quot;); </li></ul><ul><li>} </li></ul><ul><li>if((num > 5) || (dNum < 8)) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;second&quot;); </li></ul><ul><li>} </li></ul><ul><li>if(!(num > 5)) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;third&quot;); </li></ul><ul><li>} </li></ul><ul><li>if(!(dNum < 8)) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;fourth&quot;); </li></ul><ul><li>} </li></ul>
  188. 188. Watch out for this error <ul><li>int num = 5; </li></ul><ul><li>if(num > 7); </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;num is big&quot;); </li></ul><ul><li>} </li></ul>
  189. 189. There shouldn't be a semi-colon here <ul><li>int num = 5; </li></ul><ul><li>if(num > 7) ; </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;num is big&quot;); </li></ul><ul><li>} </li></ul>
  190. 190. There shouldn't be a semi-colon here <ul><li>int num = 5; </li></ul><ul><li>if(num > 7) ; </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;num is big&quot;); </li></ul><ul><li>} </li></ul><ul><li>Is &quot;If num is greater than 7.&quot; a complete sentence? </li></ul>
  191. 191. Now it's fixed <ul><li>int num = 5; </li></ul><ul><li>if(num > 7) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;num is big&quot;); </li></ul><ul><li>} </li></ul><ul><li>No, the complete sentence is &quot;If num is greater than 7 then num is big.&quot; </li></ul>
  192. 192. Symmetrical reflections (mirrors) 300 200 (50,30)
  193. 193. Symmetrical reflections (mirrors) 300 200 (50,30) 50
  194. 194. Symmetrical reflections (mirrors) 300 200 (50,30) 50 50
  195. 195. Symmetrical reflections (mirrors) 300 200 (50,30) 50 50 (300-50,30)
  196. 196. if and if/else <ul><li>int num = 5; </li></ul><ul><li>if(num > 150) </li></ul><ul><li>{ </li></ul><ul><li>num = 5; </li></ul><ul><li>} </li></ul><ul><li>An if controls some code that either runs or doesn't </li></ul><ul><li>if(num > 150) </li></ul><ul><li>{ </li></ul><ul><li>num = 5; </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>num = num + 10; </li></ul><ul><li>} </li></ul><ul><li>An if/else always runs the code in the if or the else , but never both </li></ul>
  197. 197. &quot;Chained&quot; if/else <ul><li>if(temp > 80) </li></ul><ul><li>{ </li></ul><ul><li>println(Go swimming&quot;); </li></ul><ul><li>} </li></ul><ul><li>else if(temp > 50) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Go Fishing&quot;); </li></ul><ul><li>} </li></ul><ul><li>else if(temp > 32) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Go hot tubbing&quot;); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Go sledding&quot;); </li></ul><ul><li>} </li></ul>
  198. 198. Practice Quiz Question: What is the output of this program? <ul><li>int num1= 2; </li></ul><ul><li>int num2 = 7; </li></ul><ul><li>float decimal = 9; </li></ul><ul><li>if(num1 == 2) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;First&quot;); </li></ul><ul><li>} </li></ul><ul><li>else if (num2 == 3) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Second&quot;); </li></ul><ul><li>} </li></ul><ul><li>else if (decimal == 9) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Third&quot;); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Fourth&quot;); </li></ul><ul><li>} </li></ul><ul><li>if(num2/num1 != 1) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Fifth&quot;); </li></ul><ul><li>} </li></ul><ul><li>if(num2/num1 != 3) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Sixth&quot;); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Seventh&quot;); </li></ul><ul><li>} </li></ul>
  199. 199. Two modes <ul><li>Often, programs will have two &quot;modes&quot; or &quot;states&quot; </li></ul><ul><li>The combination of an if and a boolean can switch between the two </li></ul>
  200. 200. Two modes <ul><li>mode = !mode </li></ul><ul><li>this line of code &quot;flips&quot; mode back and forth between true and false. </li></ul>
  201. 201. Random numbers <ul><li>The random() function has two versions: </li></ul><ul><li>random(5) returns a decimal value between 0 and up to but not including 5.0 </li></ul><ul><li>random(-5, 10.2) returns a decimal value between -5.0 and up to but not including 10.2. </li></ul><ul><li>To drop the decimal part of a random number, use the int() function. </li></ul><ul><li>int randNum = int( random(16) ) ; </li></ul><ul><li>randNum now holds an integer from 0 up to but not including 16 </li></ul>
  202. 202. dice example <ul><li>Let's say I wanted to make an applet that simulated rolling a single six sided die </li></ul><ul><li>What numbers would be possible? </li></ul>
  203. 203. dice example <ul><li>Let's say I wanted to make an applet that simulated rolling a single six sided die </li></ul><ul><li>What numbers would be possible? </li></ul><ul><li>{1,2,3,4,5,6} </li></ul>
  204. 204. dice example <ul><li>Let's say I wanted to make an applet that simulated rolling a single six sided die </li></ul><ul><li>What numbers would be possible? </li></ul><ul><li>{1,2,3,4,5,6} </li></ul><ul><li>int roll = ?? </li></ul>
  205. 205. dice example <ul><li>Let's say I wanted to make an applet that simulated rolling a single six sided die </li></ul><ul><li>What numbers would be possible? </li></ul><ul><li>{1,2,3,4,5,6} </li></ul><ul><li>int roll = int(random( ?,? )); </li></ul>
  206. 206. dice example <ul><li>Let's say I wanted to make an applet that simulated rolling a single six sided die </li></ul><ul><li>What numbers would be possible? </li></ul><ul><li>{1,2,3,4,5,6} </li></ul><ul><li>int roll = int(random( ?,? )); </li></ul>+1
  207. 207. dice example <ul><li>Let's say I wanted to make an applet that simulated rolling a single six sided die </li></ul><ul><li>What numbers would be possible? </li></ul><ul><li>{1,2,3,4,5,6} </li></ul><ul><li>int roll = int(random( 1 , 7 )); </li></ul>+1
  208. 208. A bug with negative arguments <ul><li>What arguments would you use to get this range? </li></ul><ul><li>{-3,-2,-1,0,1,2,3} </li></ul><ul><li>int roll = int(random( ? , ? )); </li></ul>
  209. 209. A bug with negative arguments <ul><li>For some reason the low limit is one less. </li></ul><ul><li>{-3,-2,-1,0,1,2,3} </li></ul><ul><li>int roll =int(random( -4 , 4 )); </li></ul>
  210. 210. Random Walk <ul><li>The position or state of an object changes unpredictably (by a random amount) over time </li></ul><ul><li>Software uses random walks to model many &quot;real life&quot; things including: </li></ul><ul><ul><li>Weather </li></ul></ul><ul><ul><li>Stock Prices </li></ul></ul><ul><ul><li>Load on a web server </li></ul></ul><ul><ul><li>Chemistry (gas particles) </li></ul></ul><ul><ul><li>Biology (food foraging) </li></ul></ul>
  211. 211. A Random Walk isn't a Random Jump <ul><li>I'd call this a random jump </li></ul><ul><li>x = int(random(0,400)); </li></ul>
  212. 212. A Random Walk isn't a Random Jump <ul><li>I'd call this a random jump </li></ul><ul><li>x = int(random(0,400)); </li></ul><ul><li>I'd call this a random walk </li></ul><ul><li>x = x + int(random(-2,2)); </li></ul>
  213. 213. Modeling stock prices <ul><li>int price = 150; </li></ul><ul><li>int x = 0; </li></ul><ul><li>int oldX,oldY; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>oldX = x; </li></ul><ul><li>oldY = price; </li></ul><ul><li>x = x+ 10; </li></ul><ul><li>int changeValue = </li></ul><ul><li>int(random(-51,51)); </li></ul><ul><li>price = price + changeValue; </li></ul><ul><li>line(oldX,oldY,x,price); </li></ul><ul><li>ellipse(x,price,10,10); </li></ul><ul><li>} </li></ul>
  214. 214. Modeling stock prices <ul><li>int changeValue = int(random(-51,51)); </li></ul><ul><li>price = price + changeValue; </li></ul>
  215. 215. Modeling stock prices <ul><li>int changeValue = int(random(-51,51)) ; </li></ul><ul><li>price = price + changeValue; </li></ul>
  216. 216. Modeling stock prices <ul><li>int changeValue = int(random(-51,51)) ; </li></ul><ul><li>{-50,-49,-48, … 48,49,50} </li></ul><ul><li>price = price + changeValue; </li></ul>
  217. 217. More Random Walk examples <ul><li>http://www.mit.edu/~kardar/teaching/projects/chemotaxis(AndreaSchmidt)/random.htm </li></ul>
  218. 219. Practice Quiz Questions <ul><li>Fill in the blanks to create the indicated random numbers </li></ul><ul><li>A random integer from 0 to 10: (including 10) </li></ul><ul><li>int(random(________)) </li></ul><ul><li>A random integer from 1 to 100: (including 100) </li></ul><ul><li>int(random(________)) </li></ul><ul><li>A random integer from -5 to 5: (including 5) </li></ul><ul><li>int(random(________)) </li></ul>
  219. 220. Using Pictures and Images <ul><li>Processing can display .gif , .jpg , .tga , and .png image </li></ul><ul><li>First, choose Sketch | Add File to select the the image you want </li></ul>
  220. 221. Images <ul><li>Now, write code like this, where hallway.jpg is the name of the picture </li></ul><ul><li>PImage b; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(415,350); </li></ul><ul><li>b = loadImage(&quot;hallway.jpg&quot;); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>image(b, 0, 0,415,350); </li></ul><ul><li>} </li></ul>
  221. 222. Images <ul><li>b is the name of the variable that holds the image </li></ul><ul><li>0,0 is the x and y of the top left hand corner </li></ul><ul><li>415, 350 is the width and height </li></ul><ul><li>PImage b ; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(415,350); </li></ul><ul><li>b = loadImage(&quot;hallway.jpg&quot;); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>image( b , 0, 0 , 415, 350 ); </li></ul><ul><li>} </li></ul>
  222. 223. Using an image for the background() <ul><li>Make sure the size() of the applet is the same as the size of the image. </li></ul><ul><li>PImage bill; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(450,315); </li></ul><ul><li>bill = loadImage(&quot;bill-gates-mugshot.jpg&quot;); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>background(bill); </li></ul><ul><li>} </li></ul>
  223. 224. Which dot is moving in a random walk?
  224. 225. Which dot is moving in a random walk?
  225. 226. Which dot is moving in a random walk?
  226. 227. Which dot is moving in a random walk?
  227. 228. Which dot is moving in a random walk?
  228. 229. Which dot is moving in a random walk?
  229. 230. Which dot is moving in a random walk?
  230. 231. Random Walks <ul><li>In a random walk, you always take one step at a time </li></ul><ul><li>You don't take different size random jumps to an entirely new random location </li></ul><ul><li>In a random walk, if we leave a trail, there will not be any gaps </li></ul>
  231. 232. 4 Practice Quiz Questions <ul><li>Fill in the blanks so that the x coordinate is changed in a random walk pattern by -1,0, or 1 </li></ul><ul><li>x = _____ + int(random(__,__)); </li></ul><ul><li>True / False (3!=4) && (2<=2) </li></ul><ul><li>Three &quot;system variables&quot; that are used for user input are ________, ________ and _______ . </li></ul><ul><li>Mark is writing a game where one coin is tossed. Every time the mouse is pressed, he will draw a single circle at a new random location, so the coin x and y coordinates will change, along with whether the coin shows heads or tails. How many variables will his program need? </li></ul>
  232. 233. 3D Graphics <ul><li>One of Processing's strengths is 3D graphics </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300,P3D); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>translate(150,150,0); </li></ul><ul><li>rotateX(-.5); </li></ul><ul><li>rotateY(.5); </li></ul><ul><li>box(100); </li></ul><ul><li>} </li></ul>
  233. 234. 3D Graphics <ul><li>Positions in 3D space use three coordinates x, y and z </li></ul><ul><li>Objects are drawn at (0,0,0) unless you translate them to a new position </li></ul>box(50); -x -z -y +x +z +y
  234. 235. 3D Graphics <ul><li>box() 's one argument specifies the side length </li></ul>box(170);
  235. 236. 3D Graphics <ul><li>box() 's three arguments specify the x, y and z dimensions </li></ul>box(50,100,150);
  236. 237. 3D Graphics <ul><li>translate() moves the center of the box </li></ul><ul><li>In this case, we've moved the box -100 (up) in the y direction </li></ul>translate(0,-100,0); box(50);
  237. 238. 3D Graphics <ul><li>translate() moves the center of the box </li></ul><ul><li>In this case, we've moved the box -100 (away from us) in the z direction </li></ul>translate(0,0,-100); box(50);
  238. 239. 3D Graphics <ul><li>translate() moves the center of the box </li></ul><ul><li>In this case, we've moved the box -100 (to the left) in the x direction </li></ul>translate(-100,0,0); box(50);
  239. 240. 3D Graphics <ul><li>sphere() works the same as box except the argument is the radius </li></ul>translate(-100,0,0); sphere(50);
  240. 241. 3D Graphics <ul><li>rotateX() rotates the box around the x axis </li></ul>rotateX(-.5); box(50); -.5
  241. 242. 3D Graphics <ul><li>For comparison, here it is unrotated </li></ul>box(50);
  242. 243. 3D Graphics <ul><li>rotateX() rotates the box around the x axis </li></ul>rotateX(.5); box(50); .5
  243. 244. 3D Graphics <ul><li>rotateY() rotates the box around the y axis </li></ul>rotateY(-.3); box(50); -.3
  244. 245. 3D Graphics <ul><li>For comparison, here it is unrotated </li></ul>box(50);
  245. 246. 3D Graphics <ul><li>rotateY() rotates the box around the y axis </li></ul>rotateY(.3); box(50); .3
  246. 247. 3D Graphics <ul><li>rotateZ() rotates the box around the z axis </li></ul>rotateZ(-.4); box(50); -.4
  247. 248. 3D Graphics <ul><li>For comparison, here it is unrotated </li></ul>box(50);
  248. 249. 3D Graphics <ul><li>rotateZ() rotates the box around the z axis </li></ul>rotateZ(.4); box(50); .4
  249. 250. Lighting can add realism <ul><li>background(0); </li></ul><ul><li>translate(150,150,-250); </li></ul><ul><li>fill(255); </li></ul><ul><li>rotateX(-.5); </li></ul><ul><li>rotateY(.5); </li></ul><ul><li>box(150); </li></ul>
  250. 251. lights(); <ul><li>background(0); </li></ul><ul><li>translate(150,150,-250); </li></ul><ul><li>fill(255); </li></ul><ul><li>rotateX(-.5); </li></ul><ul><li>rotateY(.5); </li></ul><ul><li>lights(); </li></ul><ul><li>box(150); </li></ul>
  251. 252. pointLight(255,0,255,-235,-240, 275); <ul><li>background(0); </li></ul><ul><li>translate(150,150,-250); </li></ul><ul><li>fill(255); </li></ul><ul><li>rotateX(-.5); </li></ul><ul><li>rotateY(.5); </li></ul><ul><li>pointLight(…); </li></ul><ul><li>box(150); </li></ul>
  252. 253. pointLight ( 255,0,255 , -235,-240, 275 ); <ul><li>The first three arguments ( in red ) are the RGB values of the light (in this case Magenta) </li></ul><ul><li>The last three arguments ( in yellow ) are the (x,y,z) position of the light </li></ul>
  253. 254. Perspective <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(200,200,P3D); </li></ul><ul><li>background(0); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>box(100); </li></ul><ul><li>} </li></ul><ul><li>If we don't rotate or translate the box, we get a pretty boring view of it </li></ul>
  254. 255. Perspective <ul><li>An alternative is to change our perspective </li></ul><ul><li>That is leave the cube as it is, but change the position of our &quot;eye&quot; </li></ul><ul><li>This is done with the camera function </li></ul>
  255. 256. Perspective <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(200,200,P3D); </li></ul><ul><li>background(0); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>camera(100,100,200,0,0,0,0,1,0); </li></ul><ul><li>box(100); </li></ul><ul><li>} </li></ul>
  256. 257. camera( 100,100,200 , 0,0,0 ,0,1,0); <ul><li>Camera takes 9 arguments </li></ul><ul><li>The first three are the ( x,y,z ) position of our &quot;eye&quot; </li></ul><ul><li>The next three are the ( x,y,z ) position of where our eye is looking </li></ul><ul><li>I always leave the last three as the default values 0,1,0 (y axis is up) </li></ul>
  257. 258. Loops <ul><li>Looping means repeating over and over </li></ul><ul><li>If you wanted to print 10 x s to the screen, you could copy and paste code like this: </li></ul><ul><li>print(&quot;x&quot;); </li></ul><ul><li>print(&quot;x&quot;); </li></ul><ul><li>print(&quot;x&quot;); </li></ul><ul><li>print(&quot;x&quot;); </li></ul><ul><li>print(&quot;x&quot;); </li></ul><ul><li>print(&quot;x&quot;); </li></ul><ul><li>print(&quot;x&quot;); </li></ul><ul><li>print(&quot;x&quot;); </li></ul><ul><li>print(&quot;x&quot;); </li></ul><ul><li>print(&quot;x&quot;); </li></ul>
  258. 259. Loops <ul><li>On the other hand, if you wanted to print 100 or 1000 or even more x s to the screen, using copy and paste would be tedious </li></ul>
  259. 260. while Loops <ul><li>The simplest loop in java is the while loop </li></ul><ul><li>It uses a variable to keep track of how many repititions to make </li></ul><ul><li>The variable has a starting point , an ending point , and some way of progressing from start to end </li></ul>
  260. 261. Review: if statements <ul><li>What is the output? </li></ul><ul><li>int num = 1; </li></ul><ul><li>if (num < 10) </li></ul><ul><li>{ </li></ul><ul><li>println(num); </li></ul><ul><li>num = num + 1; </li></ul><ul><li>} </li></ul><ul><li>println(num); </li></ul>
  261. 262. Review: if statements <ul><li>What is the output? </li></ul><ul><li>int num = 1; </li></ul><ul><li>if (num < 10) </li></ul><ul><li>{ </li></ul><ul><li>println(num); </li></ul><ul><li>num = num + 1; </li></ul><ul><li>} </li></ul><ul><li>println(num); </li></ul>
  262. 263. while Loops <ul><li>A while loop is identical to an if , just substitute while for if </li></ul><ul><li>Now what is the output? </li></ul><ul><li>int num = 1; </li></ul><ul><li>while (num < 10) </li></ul><ul><li>{ </li></ul><ul><li>println(num); </li></ul><ul><li>num = num + 1; </li></ul><ul><li>} </li></ul><ul><li>println(num); </li></ul>
  263. 264. while Loops <ul><li>A while loop is identical to an if , just substitute while for if </li></ul><ul><li>Now what is the output? </li></ul><ul><li>int num = 1; </li></ul><ul><li>while (num < 10) </li></ul><ul><li>{ </li></ul><ul><li>println(num); </li></ul><ul><li>num = num + 1; </li></ul><ul><li>} </li></ul><ul><li>println(num); </li></ul>
  264. 265. while Loops <ul><li>This while loops starting point is 0 </li></ul><ul><li>It's ending point is before 100 </li></ul><ul><li>It progresses by counting up by one </li></ul><ul><li>int count = 0; </li></ul><ul><li>while ( count < 100 ) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;count:&quot; + count); </li></ul><ul><li>count = count + 1; </li></ul><ul><li>} </li></ul><ul><li>println(&quot;all done&quot;); </li></ul>
  265. 266. while Loops <ul><li>With a loop, it's just as easy to print 1000 x s as it is to print 10! </li></ul><ul><li>int numXs = 0; </li></ul><ul><li>while (numXs < 1000) </li></ul><ul><li>{ </li></ul><ul><li>print(&quot;x&quot;); </li></ul><ul><li>numXs = numXs + 1; </li></ul><ul><li>} </li></ul>
  266. 267. while vs if <ul><li>An if-statement looks at the test in the parenthesis one time and then maybe executes the body once . </li></ul><ul><li>The while-loop keeps executing the body again and again , as long as the test in the parenthesis (what I call the stopping point) is true </li></ul>
  267. 268. Practice Quiz Question <ul><li>Find the output </li></ul><ul><li>int x = 3; </li></ul><ul><li>while(x < 10) </li></ul><ul><li>{ </li></ul><ul><li>println(x); </li></ul><ul><li>x = x + 3; </li></ul><ul><li>} </li></ul><ul><li>println(&quot;loop stops, now x is&quot;); </li></ul><ul><li>println(x); </li></ul>
  268. 269. increment and decrement operators <ul><li>The increment operator is ++ </li></ul><ul><li>num++; </li></ul><ul><li>is the same as </li></ul><ul><li>num = num + 1; </li></ul><ul><li>The decrement operator is -- </li></ul><ul><li>num--; </li></ul><ul><li>is the same as </li></ul><ul><li>num = num - 1; </li></ul>
  269. 270. while loop examples <ul><li>Here's a while loop example that uses a loop to see how man times you can divide a number by 2 </li></ul><ul><li>int num = 16; </li></ul><ul><li>int count = 0; // count how many </li></ul><ul><li>//divisions we've done </li></ul><ul><li>while (num >= 1) </li></ul><ul><li>{ </li></ul><ul><li>num = num / 2; </li></ul><ul><li>count++; </li></ul><ul><li>} </li></ul><ul><li>println(count); </li></ul>
  270. 271. A program that uses a loop to make a gradient in the background <ul><li>int redAmount = 0; </li></ul><ul><li>int blueAmount = 255; </li></ul><ul><li>int x = 0; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(256,256); </li></ul><ul><li>while(x < 256) </li></ul><ul><li>{ </li></ul><ul><li>stroke(redAmount,0,blueAmount); </li></ul><ul><li>line(x,0,x,255); </li></ul><ul><li>x = x + 1; </li></ul><ul><li>redAmount = redAmount + 1; </li></ul><ul><li>blueAmount = blueAmount - 1; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>fill(0); </li></ul><ul><li>stroke(0); </li></ul><ul><li>ellipse(127,127,100,100); </li></ul><ul><li>} </li></ul>
  271. 272. Zero Loop Iterations <ul><li>Since the while-loop checks the test before every iteration, it is possible for the body to not run even once: </li></ul><ul><li>int count = 100; </li></ul><ul><li>while ( count < 100 ) </li></ul><ul><li>{ </li></ul><ul><li>count = count + 1; </li></ul><ul><li>} </li></ul>
  272. 273. Infinite Loop <ul><li>The most famous sort of bug you can get with loops </li></ul><ul><li>Because of some mis-arrangement, the loop fails to get any closer to its stopping point </li></ul><ul><li>For example, suppose the body fails to make the count bigger by accident: </li></ul><ul><li>int count = 0; </li></ul><ul><li>while (count < 100) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;count:&quot; + count); </li></ul><ul><li>count = count * 1; </li></ul><ul><li>// OOPS, does not change count </li></ul><ul><li>} </li></ul>
  273. 274. Infinite Loop <ul><li>The computer just sort of &quot;freezes up&quot; </li></ul><ul><li>The output is the same , over and over again </li></ul><ul><li>If this happens to you: </li></ul><ul><ul><li>Press &quot;Cntrl&quot;, &quot;Alt&quot; + &quot;Delete&quot; </li></ul></ul><ul><ul><li>Click Shutdown </li></ul></ul><ul><ul><li>Choose Restart </li></ul></ul>
  274. 275. Watch out for this <ul><li>A particularly nasty mistake is to put a semi-colon after the parenthesis of the while loop </li></ul><ul><li>int num = 1; </li></ul><ul><li>while(num<100) ; </li></ul><ul><li>{ </li></ul><ul><li>println(num); </li></ul><ul><li>num++; </li></ul><ul><li>} </li></ul>
  275. 276. Watch out for this <ul><li>This creates an infinite loop and processing freezes up! </li></ul><ul><li>int num = 1; </li></ul><ul><li>while(num<100) ; </li></ul><ul><li>{ </li></ul><ul><li>println(num); </li></ul><ul><li>num++; </li></ul><ul><li>} </li></ul><ul><li>&quot;while num is less that 100&quot; is not a complete sentence </li></ul>
  276. 277. A Geeky Joke <ul><li>This is Apple computer’s actual address </li></ul><ul><li>It’s a geeky pun on computer programming </li></ul>
  277. 278. Practice Quiz Question: Circle the picture that best matches the output <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(100,100); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>int num = 5; </li></ul><ul><li>while(num > 2) </li></ul><ul><li>{ </li></ul><ul><li>ellipse(num * 15,50,20,20); </li></ul><ul><li>num--; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  278. 279. Problem: Make 100 random spheres
  279. 280. Problem: Make 100 random spheres <ul><li>First we’ll need to figure out how to make 1! </li></ul>
  280. 281. Problem: Make 100 random spheres <ul><li>I’ll need to translate the sphere to a better spot </li></ul>
  281. 282. Problem: Make 100 random spheres <ul><li>Now that I’ve got one, I’ll want to add randomness so I don’t have a bunch of identical spheres piled on top of each other </li></ul>
  282. 283. I want to repeat the code in yellow <ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>background (0); </li></ul><ul><li>lights(); </li></ul><ul><li>int size = int(random(3,30)); </li></ul><ul><li>int offsetX = int(random(0,300)); </li></ul><ul><li>int offsetY = int(random(0,300)); </li></ul><ul><li>translate(offsetX,offsetY,0); </li></ul><ul><li>sphere(size); </li></ul><ul><li>} </li></ul>
  283. 284. I want to repeat the code in yellow <ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>background (0); </li></ul><ul><li>lights(); </li></ul><ul><li>??? </li></ul><ul><li>while( ??? ) </li></ul><ul><li>{ </li></ul><ul><li>int size = int(random(3,30)); </li></ul><ul><li>int offsetX = int(random(0,300)); </li></ul><ul><li>int offsetY = int(random(0,300)); </li></ul><ul><li>translate(offsetX,offsetY,0); </li></ul><ul><li>sphere(size); ??? </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  284. 285. To keep the spheres from translating off the screen, I’ll need to translate back <ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>//some code not shown </li></ul><ul><li>while(??) </li></ul><ul><li>{ </li></ul><ul><ul><li>int size =int(random(3,30)); </li></ul></ul><ul><ul><li>int offsetX = int(random(0,300)); </li></ul></ul><ul><ul><li>int offsetY = int(random(0,300)); </li></ul></ul><ul><ul><li>translate(offsetX,offsetY,0); </li></ul></ul><ul><ul><li>sphere(size); </li></ul></ul><ul><li>translate(-offsetX,-offsetY,0); </li></ul><ul><li>//other code not shown </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  285. 286. Displaying Text on the screen <ul><li>To add words or other text to your program </li></ul><ul><ul><li>Choose Tools | Create Font </li></ul></ul><ul><ul><li>Pick the font and size you want, click &quot;ok&quot; </li></ul></ul><ul><ul><li>In setup() add code like this </li></ul></ul><ul><li>// Load the font. Fonts must be placed within the data </li></ul><ul><li>// directory of your sketch. A font must first be created </li></ul><ul><li>// using the 'Create Font...' option in the Tools menu. </li></ul><ul><li>PFont fontA = </li></ul><ul><li>loadFont(&quot;Ziggurat-HTF-Black-32.vlw&quot;); </li></ul><ul><li>// Set the font and its size (in units of pixels) </li></ul><ul><li>textFont(fontA, 32); </li></ul><ul><ul><li>In draw() you can now call text() </li></ul></ul><ul><li>// Display the text at the indicated position </li></ul><ul><li>text(&quot;hello&quot;, 50, 50); </li></ul>
  286. 287. Displaying Text on the screen <ul><li>You can align the text, LEFT, RIGHT or CENTER </li></ul><ul><li>textAlign(CENTER); </li></ul><ul><li>The newline character will start a new line of text </li></ul><ul><li>text(&quot;You can split up </li></ul><ul><li>text on two lines&quot;,150,150); </li></ul>
  287. 288. Displaying Text on the screen <ul><li>The quotes character &quot; will display quotes to the screen </li></ul><ul><li>text(&quot; &quot; In Quotes &quot; &quot;,150,150); </li></ul>
  288. 289. textMode(SCREEN); <ul><li>I have no what this does, except it makes the text look better, especially in 3D </li></ul>
  289. 290. What is the output? How would it change if limit were doubled to 8? <ul><li>int count = 1; </li></ul><ul><li>int limit = 4; </li></ul><ul><li>while(count <= limit) </li></ul><ul><li>{ </li></ul><ul><li>print(count); </li></ul><ul><li>print(&quot;:&quot;); </li></ul><ul><li>println(limit); </li></ul><ul><li>count++; </li></ul><ul><li>} </li></ul>
  290. 291. String <ul><li>A String is any number of characters including letters, digits, spaces and punctuation </li></ul><ul><li>String greeting = &quot;Hello There!&quot;; </li></ul><ul><li>println(greeting); </li></ul><ul><li>//is the same as </li></ul><ul><li>println(&quot;Hello There!&quot;); </li></ul><ul><li>A String can be thought of as a “mailbox” to hold text </li></ul>
  291. 292. String variables <ul><li>You would create a String variable when you need to store text that can change </li></ul><ul><li>String words = &quot;Testing, 1,2,3&quot;; </li></ul><ul><li>println(words); </li></ul><ul><li>words = &quot;Is this mic on?&quot;; </li></ul><ul><li>println(words); </li></ul>
  292. 293. Adding String s <ul><li>The + operator combines String s together to make one bigger String </li></ul><ul><li>String s1 = &quot;abc&quot;; </li></ul><ul><li>String s2 = &quot;xyz&quot;; </li></ul><ul><li>String s3 = s1 + s2; </li></ul><ul><li>println(s3); </li></ul>
  293. 294. Adding String s <ul><li>The + operator combines String s together to make one bigger String </li></ul><ul><li>String s1 = &quot;abc&quot;; </li></ul><ul><li>String s2 = &quot;xyz&quot;; </li></ul><ul><li>String s3 = s1 + s2; </li></ul><ul><li>println(s3); </li></ul><ul><li>//Displays abcxyz </li></ul>
  294. 295. Adding String s <ul><li>The + operator combines String s together to make one bigger String </li></ul><ul><li>String s1 = &quot;abc&quot;; </li></ul><ul><li>String s2 = &quot;xyz&quot;; </li></ul><ul><li>String s3 = s1 + s2; </li></ul><ul><li>println(s3); </li></ul><ul><li>s3 = s2 + s1; </li></ul><ul><li>println(s3); </li></ul>
  295. 296. Adding String s <ul><li>The + operator combines String s together to make one bigger String </li></ul><ul><li>String s1 = &quot;abc&quot;; </li></ul><ul><li>String s2 = &quot;xyz&quot;; </li></ul><ul><li>String s3 = s1 + s2; </li></ul><ul><li>println(s3); </li></ul><ul><li>s3 = s2 + s1; </li></ul><ul><li>println(s3); </li></ul><ul><li>//Displays xyzabc </li></ul>
  296. 297. Adding String s <ul><li>The + operator is also useful for labeling output </li></ul><ul><li>Let’s say I’m debugging, and I want to know what is in the dogs variable </li></ul><ul><li>int dogs = 3; </li></ul>
  297. 298. Adding String s <ul><li>I could use the + operator to label the output so I know what I’m looking at </li></ul><ul><li>int dogs = 3; </li></ul><ul><li>println(&quot;There are &quot;+ dogs +&quot; dogs.&quot;); </li></ul>
  298. 299. Adding String s <ul><li>The + operator is also useful for labeling output </li></ul><ul><li>int dogs = 3; </li></ul><ul><li>println(&quot; There are &quot;+ dogs +&quot; dogs. &quot;); </li></ul><ul><li>//Displays There are 3 dogs </li></ul><ul><li>The + operator creates one big String of all the </li></ul><ul><li>things that are added together </li></ul>
  299. 300. for loops <ul><li>Do exactly the same thing as while loops </li></ul>
  300. 301. A while loop <ul><li>int count = 1; </li></ul><ul><li>while(count < 4) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;count is &quot; + count); </li></ul><ul><li>count++; </li></ul><ul><li>} </li></ul>
  301. 302. A while loop <ul><li>int count = 1; </li></ul><ul><li>while(count < 4) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;count is &quot; + count); </li></ul><ul><li>count++; </li></ul><ul><li>} </li></ul><ul><li>/* Output is </li></ul><ul><li>count is 1 </li></ul><ul><li>count is 2 </li></ul><ul><li>count is 3 */ </li></ul>
  302. 303. A while and a for loop that do the exactly the same thing <ul><li>int count = 1; </li></ul><ul><li>while(count < 4) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;count is &quot; + count); </li></ul><ul><li>count++; </li></ul><ul><li>} </li></ul><ul><li>Is the same as </li></ul><ul><li>for(int count = 1;count < 4;count++) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;count is &quot; + count); </li></ul><ul><li>} </li></ul>
  303. 304. Notice both have the same 3 parts <ul><li>int count = 1 ; </li></ul><ul><li>while( count < 4 ) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;count is &quot; + count); </li></ul><ul><li>count++ ; </li></ul><ul><li>} </li></ul><ul><li>Is the same as </li></ul><ul><li>for( int count = 1 ; count < 4 ; count++ ) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;count is &quot; + count); </li></ul><ul><li>} </li></ul>
  304. 305. Why both? <ul><li>Some programmers prefer the for loop since it uses fewer lines of code </li></ul><ul><li>Most beginning programmers find the while loop easier to understand </li></ul><ul><li>Good Style : Use for loops only when you know in advance how many times you want the loop to run. In all other circumstances use a while loop. </li></ul>
  305. 306. Practice Quiz Question <ul><li>Write a program that uses two for loops to produce the following output </li></ul><ul><li>x x x x x x </li></ul><ul><li>10 9 8 7 6 5 4 3 2 1 </li></ul>
  306. 307. Arrays <ul><li>An array is a collection of data, all of the same data type, that is accessed with an index </li></ul><ul><li>If a variable is like a mailbox, an array is like the mailboxes at a post office or an apartment building: a row of otherwise identical boxes with different numbers. </li></ul><ul><li>[] (square brackets) are used to indicate an array </li></ul>
  307. 308. Arrays <ul><li>int [] nums = {5,-4,17}; </li></ul>nums [0] [1] [2] 5 -4 17
  308. 309. Arrays <ul><li>May be declared and initialized in one line. [] can go either before or after the name of the array </li></ul><ul><li>int nums[] = {5,-4,17}; </li></ul><ul><li>//or </li></ul><ul><li>int[] nums = {5,-4,17}; </li></ul><ul><li>Are &quot;zero-based&quot;: First index is 0 </li></ul><ul><li>println(nums[1]); //displays -4 </li></ul><ul><li>You can make an array of any data type </li></ul><ul><li>char letters[] = {'a', 'b', 'c'}; </li></ul><ul><li>String answers[] = {“yes”, “no”}; </li></ul>
  309. 310. Arrays <ul><li>Just like any variable, you can change the value that is stored there </li></ul><ul><li>char letters[] = { 'a' , 'b', 'c'}; </li></ul><ul><li>println(letters[0]); </li></ul><ul><li>letters[0]='z'; </li></ul><ul><li>println(letters[0]); </li></ul>
  310. 311. A Simple Program using an array <ul><li>float nums[] = {5, 1.5, 7, 3.2}; </li></ul><ul><li>int i = 3; </li></ul><ul><li>while(i >= 0) </li></ul><ul><li>{ </li></ul><ul><li>println(nums[i]); </li></ul><ul><li>i--; </li></ul><ul><li>} </li></ul>
  311. 312. A Simple Program using an array <ul><li>float nums[] = {5, 1.5, 7, 3.2}; </li></ul><ul><li>int i = 3; </li></ul><ul><li>while(i >= 0) </li></ul><ul><li>{ </li></ul><ul><li>println(nums[i]); </li></ul><ul><li>i--; </li></ul><ul><li>} </li></ul>
  312. 313. Don't confuse the index with the value that is stored there <ul><li>float nums[] = {5, 1.5, 7, 3.2}; </li></ul><ul><li>nums[2] </li></ul><ul><li>2 is the index (think apartment number) </li></ul><ul><li>7 is the value that is stored at index 2 </li></ul>
  313. 314. Practice Quiz Question: What is the output of this program? <ul><li>String words[] = { </li></ul><ul><li>&quot;The&quot;, &quot;Quick&quot;, &quot;Brown&quot;,&quot;Fox&quot;, </li></ul><ul><li>&quot;Jumped&quot;, &quot;Over&quot;, &quot;The&quot;, &quot;Lazy&quot;, &quot;Red&quot;, &quot;Dog&quot;}; </li></ul><ul><li>words[2] = &quot;Blue&quot;; </li></ul><ul><li>for(int i = 0;i < 10;i=i+2) </li></ul><ul><li>{ </li></ul><ul><li>println(words[i]); </li></ul><ul><li>} </li></ul>
  314. 315. Practice Quiz Question: What is the output of this program? <ul><li>String words[] = { </li></ul><ul><li>&quot;The&quot;, &quot;Quick&quot;, &quot;Brown&quot;,&quot;Fox&quot;, </li></ul><ul><li>&quot;Jumped&quot;, &quot;Over&quot;, &quot;The&quot;, &quot;Lazy&quot;, &quot;Red&quot;, &quot;Dog&quot;}; </li></ul><ul><li>words[2] = &quot;Blue&quot;; </li></ul><ul><li>for( int i = 0 ; i < 10 ; i=i+2 ) </li></ul><ul><li>{ </li></ul><ul><li>println(words[i]); </li></ul><ul><li>} </li></ul>
  315. 316. Practice Quiz Question: What is the output of this program? <ul><li>String words[] = { </li></ul><ul><li>&quot;The&quot;, &quot;Quick&quot;, &quot;Brown&quot;,&quot;Fox&quot;, </li></ul><ul><li>&quot;Jumped&quot;, &quot;Over&quot;, &quot;The&quot;, &quot;Lazy&quot;, &quot;Red&quot;, &quot;Dog&quot;}; </li></ul><ul><li>words[2] = &quot;Blue&quot;; </li></ul><ul><li>int i = 0; </li></ul><ul><li>while( i < 10 ) </li></ul><ul><li>{ </li></ul><ul><li>println(words[i]); </li></ul><ul><li>i=i+2; </li></ul><ul><li>} </li></ul>
  316. 317. The length of an array <ul><li>The length of an array, is the number of elements that array can hold </li></ul><ul><li>Think of it as the number of &quot;apartments&quot; in that array </li></ul><ul><li>char [] letters = {'d','o','g','s'}; </li></ul><ul><li>println(letters. length ); </li></ul>
  317. 318. The length of an array <ul><li>The length of an array, is the number of elements that array can hold </li></ul><ul><li>Think of it as the number of &quot;apartments&quot; in that array </li></ul><ul><li>char [] letters = {'d','o','g','s'}; </li></ul><ul><li>println(letters. length ); </li></ul>
  318. 319. The length of an array <ul><li>length is often used with loops that go through each element in an array </li></ul><ul><li>char [] letters = {'d','o','g','s'}; </li></ul><ul><li>int i = 0; </li></ul><ul><li>while(i < letters. length ) </li></ul><ul><li>{ </li></ul><ul><li>print(letters[i]); </li></ul><ul><li>i++; </li></ul><ul><li>} </li></ul>
  319. 320. The length of an array <ul><li>length is often used with loops that go through each element in an array </li></ul><ul><li>char [] letters = {'d','o','g','s'}; </li></ul><ul><li>int i = 0; </li></ul><ul><li>while(i < letters. length ) </li></ul><ul><li>{ </li></ul><ul><li>print(letters[i]); </li></ul><ul><li>i++; </li></ul><ul><li>} </li></ul>
  320. 321. the int() function <ul><li>Java is very picky about types: </li></ul><ul><li>int num = 3.14; </li></ul><ul><li>generates an error </li></ul>
  321. 322. the int() function <ul><li>We can fix the error with the int() function </li></ul><ul><li>int num = int (3.14); </li></ul><ul><li>It drops the decimals (called &quot;truncation&quot;); </li></ul>
  322. 323. Practice Quiz Question: What is the output? <ul><li>float [] nums = {3.14,4.999,2.718,0.11235813}; </li></ul><ul><li>println(&quot;There are &quot;+ nums.length + &quot; elements&quot;); </li></ul><ul><li>for(int i = 0; i < nums.length; i++) </li></ul><ul><li>{ </li></ul><ul><li>int nNum = int(nums[i]); </li></ul><ul><li>println(nNum); </li></ul><ul><li>} </li></ul>
  323. 324. File Input <ul><li>In “real life” many programs use very little graphics or none at all </li></ul><ul><li>Many programs process large amounts of data that is stored as text </li></ul><ul><li>For example, the school district has large files of names, addresses, course information and grades. It runs computer programs that use those files to print grade reports. </li></ul>
  324. 325. Creating a program that uses File Input in processing <ul><li>Start a new program </li></ul><ul><li>For now, we don’t need any functions </li></ul><ul><li>The loadStrings() example from the API is a good starting point: </li></ul><ul><li>String lines[] = loadStrings(&quot;list.txt&quot;); </li></ul><ul><li>println(&quot;there are &quot; + lines.length + &quot; lines&quot;); </li></ul><ul><li>for (int i=0; i < lines.length; i++) </li></ul><ul><li>{ </li></ul><ul><li>println(lines[i]); </li></ul><ul><li>} </li></ul><ul><li>Save the program </li></ul>
  325. 326. Then, create a text file in notepad
  326. 327. Save it to the same folder as your program Name it list (or something else)
  327. 328. Make sure the name is right <ul><li>If the name in our code doesn’t match the name of the file, our program won’t run. </li></ul><ul><li>Otherwise, we can then load it into an Array of String s with code like: </li></ul><ul><li>String lines[] = loadStrings(&quot; list.txt &quot;); </li></ul>
  328. 329. list.length <ul><li>The length of the array will be the number of lines there are in the text file </li></ul><ul><li>println( </li></ul><ul><li>&quot;there are &quot; + list.length + &quot; lines&quot;); </li></ul>
  329. 330. list.length <ul><li>In this case there are 6 </li></ul><ul><li>println( </li></ul><ul><li>&quot;there are &quot; + list.length + &quot; lines&quot;); </li></ul>
  330. 331. loadStrings() from the API <ul><li>This loop will display each line of input on a line by itself </li></ul><ul><li>for (int i=0; i < list.length; i++) </li></ul><ul><li>{ </li></ul><ul><li>println(list[i]); </li></ul><ul><li>} </li></ul>
  331. 332. Now that we know the program is working, we can begin to modify it <ul><li>Our assignment is to write a program that converts Fahrenheit temperatures to Celsius temperatures </li></ul><ul><li>We’ll have a text file with three integers: </li></ul><ul><li>212 </li></ul><ul><li>32 </li></ul><ul><li>-40 </li></ul>
  332. 333. Converting a String to an int <ul><li>loadStrings() always returns an array of String s </li></ul><ul><li>This is a little awkward if you want to work with int egers or decimals </li></ul>int fahrenheit = lines[i]; //error!
  333. 334. the int() function <ul><li>The problem is that the types don’t match </li></ul><ul><li>String lines[] = loadStrings(&quot;list.txt&quot;); </li></ul><ul><li>//lots of java not shown </li></ul><ul><li>int fahrenheit = lines[i]; </li></ul>
  334. 335. the int() function <ul><li>the int() function fixes the problem </li></ul><ul><li>String lines[] = loadStrings(&quot;list.txt&quot;); </li></ul><ul><li>//lots of java not shown </li></ul><ul><li>int fahrenheit = int( lines[i] ) ; </li></ul><ul><li>It converts a String to an int , for example &quot;6&quot; with 6 </li></ul>
  335. 336. Practice quiz question: If we use the following data file, what will be the output? <ul><li>String lines[] = loadStrings(&quot;list.txt&quot;); </li></ul><ul><li>println (&quot;there are &quot; + lines.length + &quot; lines&quot;); </li></ul><ul><li>for (int i= 1 ; i < lines.length; i=i+3 ) </li></ul><ul><li>{ </li></ul><ul><li>println (lines[i]); </li></ul><ul><li>} </li></ul>
  336. 337. tron
  337. 338. get() <ul><li>Returns the color of one pixel </li></ul><ul><li>if(get(x,y) != color(0,0,0)) </li></ul><ul><li>{ </li></ul><ul><li>//lots of java </li></ul><ul><li>} </li></ul>
  338. 339. How we could check for a crash with get() <ul><li>int x = 10; </li></ul><ul><li>int y = 150; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>background(0); </li></ul><ul><li>fill(255); </li></ul><ul><li>ellipse(270,150,20,20); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>if(get(x,y) != color(0,0,0)) //we crashed! </li></ul><ul><li>{ </li></ul><ul><li>fill(255,0,0); </li></ul><ul><li>ellipse(150,150,250,250); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>stroke(255,0,255); </li></ul><ul><li>point(x,y); </li></ul><ul><li>x++; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  339. 340. How we could check for a crash with get() <ul><li>int x = 10; </li></ul><ul><li>int y = 150; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>size(300,300); </li></ul><ul><li>background(0); </li></ul><ul><li>fill(255); </li></ul><ul><li>ellipse(270,150,20,20); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>if(get(x,y) != color(0,0,0)) //we crashed! </li></ul><ul><li>{ </li></ul><ul><li>fill(255,0,0); </li></ul><ul><li>ellipse(150,150,250,250); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>stroke(255,0,255); </li></ul><ul><li>point(x,y); </li></ul><ul><li>x++; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  340. 341. Writing tron <ul><li>Don't try to write the program all at once </li></ul><ul><li>Get one detail working and then move on to the next thing </li></ul><ul><li>Let's start by making the light trail </li></ul>
  341. 342. Writing tron <ul><li>The next thing would be to make the direction change based on what's in key </li></ul>
  342. 343. Writing tron <ul><li>Now, we'd probably want to use get() to see if we ran into our own light trail </li></ul>
  343. 344. Oops, the game is over as soon as it started! <ul><li>The problem is that we aren't moving </li></ul><ul><li>If we stay in the same place we'll put a dot on a dot </li></ul>
  344. 345. Keep moving <ul><li>In setup() we can set key to get the dot moving </li></ul><ul><li>In my program I used: key = 'd' </li></ul><ul><li>Stopping is sort of the opposite </li></ul><ul><li>If I've run into a light trail I'll set key to some unused value like: key = 'x' </li></ul>
  345. 346. Adding a computer opponent <ul><li>Before I add the computer, let's clean up the code </li></ul><ul><li>draw() is getting ugly </li></ul><ul><li>let's move the human code into its own function </li></ul>
  346. 347. Adding a computer opponent <ul><li>There, that's better </li></ul><ul><li>Now we can use the human() function as a guide </li></ul><ul><li>computer() will be similar </li></ul>
  347. 348. Adding a computer opponent <ul><li>The computer opponent will need it's own set of variables to keep track of its location and direction </li></ul>
  348. 349. Adding a computer opponent <ul><li>We will write a function that is very similar to human() called computer() </li></ul><ul><li>In computer() , will use compX , compY , etc., instead of x & y </li></ul>
  349. 350. Adding a computer opponent <ul><li>The problem now is that our computer won't turn </li></ul><ul><li>We need to add code to make it &quot;smart&quot; </li></ul><ul><li>Sometimes, this is called &quot;AI&quot; for artificial intelligence </li></ul>
  350. 351. Adding a computer opponent <ul><li>In each of the four if statements of the computer, we will look ahead 1 place to see if we are going to run into something </li></ul><ul><li>If we are, we'll turn by changing the value of compDirection </li></ul>
  351. 352. Practice Quiz Questions <ul><li>1. How many variables would be needed for a tron player that can change position and direction? </li></ul><ul><li>2. Write an if statement that checks to see if the position above a tron player (toward the top of the screen) is blocked. </li></ul><ul><li>3. The following program was intended to display 3 (the sum of the first two values in the array) but instead it generates an error. Use the int() function twice to fix the problem. </li></ul><ul><li>String [] numbers = {&quot;1&quot;, &quot;2&quot;, &quot;77&quot;}; </li></ul><ul><li>int numOne = numbers[0]; </li></ul><ul><li>int numTwo = numbers[1]; </li></ul><ul><li>println(numOne + numTwo); </li></ul><ul><li>4. What would the following program display. (Hint: what happens when you add String s?) </li></ul><ul><li>String [] numbers = {&quot;1&quot;, &quot;2&quot;, &quot;77&quot;}; </li></ul><ul><li>println(numbers[0] + numbers[1]); </li></ul>
  352. 353. Practice Quiz Question: Find the output <ul><li>for(int i = 0; i <= 3; i++) </li></ul><ul><li>{ </li></ul><ul><li>if(i != 0 && i <2) </li></ul><ul><li>{ </li></ul><ul><li>print(&quot;A&quot;); </li></ul><ul><li>} </li></ul><ul><li>else if (i ==2 || i == 3) </li></ul><ul><li>{ </li></ul><ul><li>print(&quot;B&quot;); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>print(&quot;C&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  353. 354. Ending the game <ul><li>Here's a problem </li></ul><ul><li>The Human crashes and the game displays &quot;Human Loses&quot; </li></ul><ul><li>But, the game keeps going, and eventually the computer crashes and the game displays &quot;Computer Loses!&quot; </li></ul>
  354. 355. Ending the game <ul><li>I need to stop the game as soon as one player loses, otherwise things will get messed up </li></ul><ul><li>I'll create a boolean variable to do this </li></ul>
  355. 356. Ending the game <ul><li>When a player crashes, I'll change the variable to show the game is over </li></ul>
  356. 357. Ending the game <ul><li>In draw() , I'll make sure that the players only move is the game isn't over </li></ul>
  357. 358. Making the line thicker <ul><li>We can make a bigger dot by making a rect angle instead of a point </li></ul><ul><li>Since rect s have a stroke and fill color, we should set both to the same color </li></ul>
  358. 359. Making the line thicker <ul><li>Now there is some funny behavior </li></ul><ul><li>Up and left are fine, but we crash as soon as we turn down or right! </li></ul>
  359. 360. Making the line thicker <ul><li>Look carefully at rect(x,y,5,5); </li></ul><ul><li>x and y are the coordinates of the top left corner </li></ul><ul><li>5 is the length of each side </li></ul>(x,y)
  360. 361. Making the line thicker <ul><li>If I take one step to the left ( x-- ), there's no problem </li></ul><ul><li>(x,y) lands on a black part of the screen </li></ul><ul><li>But, if I move to the right. . . </li></ul>(x,y)
  361. 362. Making the line thicker <ul><li>After I take one step to the right ( x++ ) </li></ul><ul><li>(x,y) lands on part of the previous rectangle </li></ul><ul><li>It's not black, so I cr
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×