Your SlideShare is downloading. ×
0
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Processing

1,084

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,084
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Computer Programming 1 Mr. Simon Lowell High School San Francisco, CA
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. webs.com <ul><li>Make up a site address and password </li></ul>
  • 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. webs.com <ul><li>I choose the &quot;blank canvas&quot; option, though I don't think it really matters </li></ul>
  • 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. 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. freehostspace.com <ul><li>Once you get the confirmation email, login in, choose Website Manager and then Subdomain Manager </li></ul>
  • 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. What is Computer Programming?
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. <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. 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. 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. 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. 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. 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. 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. Java is very picky about names <ul><li>You may get this error message: </li></ul>
  • 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. Uploading the program to your website <ul><li>Choose File | Export </li></ul>
  • 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. 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. 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. Uploading to freewebs.com <ul><li>Log in and click on My Site </li></ul>
  • 47. Uploading to freewebs.com <ul><li>Click on the single file uploader </li></ul>
  • 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. Uploading to freewebs.com <ul><li>You should see all three in the File Manager </li></ul>
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Building your homepage and linking to your assignments <ul><li>You should now see the link on your homepage </li></ul>
  • 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. The &quot;definition&quot; of ellipse()
  • 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. triangle( 150 , 20 , 20 , 280 ,280,280);
  • 64. rect( 50 , 20 ,200, 100 );
  • 65. quad( 50 , 20 , 220 , 80 , 250 , 160 ,30,280);
  • 66. ellipse( 150 , 150 ,220, 80 );
  • 67. point(150,150);
  • 68. line( 10 , 250 , 290 , 15 );
  • 69. The endpoints <ul><li>bezier( 20,20 ,10,110,280,150, 280,280 ); </li></ul>
  • 70. These two invisible points &quot;pull&quot; the curve <ul><li>bezier(20,20, 10,110 , 280,150 ,280,280); </li></ul>
  • 71. The effect at the ends is weaker <ul><li>bezier(20,20, 210,250 , 290,250 ,280,280); </li></ul>
  • 72. The effect at the ends is weaker <ul><li>bezier(20,20, 10,50 , 100 , 50 ,280,280); </li></ul>
  • 73. Both points on the same side <ul><li>bezier(20,20, 10,50 , 100 , 280 ,280,280); </li></ul>
  • 74. The points can be off the screen! <ul><li>bezier(20,20, -200,110 , 500,150 ,280,280); </li></ul>
  • 75. arc() draws part of an ellipse() <ul><li>arc( 150 , 150 , 200 , 200 , 0, PI/2); </li></ul>
  • 76. arc() draws part of an ellipse() <ul><li>arc( 150 , 150 , 100 , 200 , PI/4, 3*PI/2); </li></ul>
  • 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. noStroke(); rect(50,50,200,100);
  • 79. noFill(); rect(50,50,200,100);
  • 80. noFill(); noStroke(); rect(50,50,200,100); Empty!
  • 81. fill(255,0,0); rect(50,50,200,100);
  • 82. fill(0,255,0); rect(50,50,200,100);
  • 83. fill(0,0,255); rect(50,50,200,100);
  • 84. fill(178,58,238); rect(50,50,200,100); RGB Color Codes: http://www.tayloredmktg.com/rgb/
  • 85. fill(0,0,255); stroke(255,0,0); rect(50,50,200,100);
  • 86. background(0,0,0); fill(255,0,0); rect(50,50,200,100);
  • 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. 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. 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. 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. Comments <ul><li>Good Style: Always put your name, assignment and class in comments at the top of your program </li></ul>
  • 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. doc comments <ul><li>Doc comments show up on the webpage when you export the program </li></ul>
  • 94. doc comments <ul><li>You can start a new line with <br> or <p> </li></ul>
  • 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. 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. Symmetry <ul><li>Expressions can be used to make placing symmetrical arrangements easier </li></ul>
  • 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. 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. 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. Modulus and integer division <ul><li>Remember how you did math in grade school? </li></ul>
  • 102. Modulus and integer division <ul><li>Remember how you did math in grade school? </li></ul>
  • 103. Modulus and integer division <ul><li>Remember how you did math in grade school? </li></ul>
  • 104. Modulus and integer division <ul><li>Remember how you did math in grade school? </li></ul>
  • 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. 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. 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. Variables and Declarations <ul><li>Vari -ables allow values to change </li></ul>
  • 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. 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. 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. 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. 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. 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. Variables can be reused as many times as you like
  • 116. Now With just one change. . .
  • 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. &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. &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. &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. &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. &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. 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. 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. 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. 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. 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. 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. 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. 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. Happy Face Example <ul><li>Let's say I had a program that drew a happy face </li></ul>
  • 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. 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. 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. 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. Auto-Format before after
  • 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. 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. 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. 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. 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. Checking the value in a variable <ul><li>Apparently (15%2) + 27 is 28 </li></ul>
  • 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. 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. 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. 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. <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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. = 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Symmetrical reflections (mirrors) 300 200 (50,30)
  • 193. Symmetrical reflections (mirrors) 300 200 (50,30) 50
  • 194. Symmetrical reflections (mirrors) 300 200 (50,30) 50 50
  • 195. Symmetrical reflections (mirrors) 300 200 (50,30) 50 50 (300-50,30)
  • 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. &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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Modeling stock prices <ul><li>int changeValue = int(random(-51,51)); </li></ul><ul><li>price = price + changeValue; </li></ul>
  • 215. Modeling stock prices <ul><li>int changeValue = int(random(-51,51)) ; </li></ul><ul><li>price = price + changeValue; </li></ul>
  • 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. 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 224. Which dot is moving in a random walk?
  • 225. Which dot is moving in a random walk?
  • 226. Which dot is moving in a random walk?
  • 227. Which dot is moving in a random walk?
  • 228. Which dot is moving in a random walk?
  • 229. Which dot is moving in a random walk?
  • 230. Which dot is moving in a random walk?
  • 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>
  • 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>
  • 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>
  • 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
  • 235. 3D Graphics <ul><li>box() 's one argument specifies the side length </li></ul>box(170);
  • 236. 3D Graphics <ul><li>box() 's three arguments specify the x, y and z dimensions </li></ul>box(50,100,150);
  • 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);
  • 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);
  • 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);
  • 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);
  • 241. 3D Graphics <ul><li>rotateX() rotates the box around the x axis </li></ul>rotateX(-.5); box(50); -.5
  • 242. 3D Graphics <ul><li>For comparison, here it is unrotated </li></ul>box(50);
  • 243. 3D Graphics <ul><li>rotateX() rotates the box around the x axis </li></ul>rotateX(.5); box(50); .5
  • 244. 3D Graphics <ul><li>rotateY() rotates the box around the y axis </li></ul>rotateY(-.3); box(50); -.3
  • 245. 3D Graphics <ul><li>For comparison, here it is unrotated </li></ul>box(50);
  • 246. 3D Graphics <ul><li>rotateY() rotates the box around the y axis </li></ul>rotateY(.3); box(50); .3
  • 247. 3D Graphics <ul><li>rotateZ() rotates the box around the z axis </li></ul>rotateZ(-.4); box(50); -.4
  • 248. 3D Graphics <ul><li>For comparison, here it is unrotated </li></ul>box(50);
  • 249. 3D Graphics <ul><li>rotateZ() rotates the box around the z axis </li></ul>rotateZ(.4); box(50); .4
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 279. Problem: Make 100 random spheres
  • 280. Problem: Make 100 random spheres <ul><li>First we’ll need to figure out how to make 1! </li></ul>
  • 281. Problem: Make 100 random spheres <ul><li>I’ll need to translate the sphere to a better spot </li></ul>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 289. textMode(SCREEN); <ul><li>I have no what this does, except it makes the text look better, especially in 3D </li></ul>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 300. for loops <ul><li>Do exactly the same thing as while loops </li></ul>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 308. Arrays <ul><li>int [] nums = {5,-4,17}; </li></ul>nums [0] [1] [2] 5 -4 17
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 326. Then, create a text file in notepad
  • 327. Save it to the same folder as your program Name it list (or something else)
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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!
  • 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>
  • 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>
  • 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>
  • 337. tron
  • 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>
  • 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>
  • 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>
  • 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>
  • 342. Writing tron <ul><li>The next thing would be to make the direction change based on what's in key </li></ul>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 356. Ending the game <ul><li>When a player crashes, I'll change the variable to show the game is over </li></ul>
  • 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>
  • 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>
  • 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>
  • 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)
  • 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)
  • 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 crash and die : ( </li></ul>(x,y)
  • 363. Making the line thicker <ul><li>Instead of moving by a distance of 1, I need to move by a distance of one more than the side length </li></ul><ul><li>That way I don't land on a part of the previous rectangle </li></ul>(x,y)
  • 364. Making the line thicker <ul><li>This is a great place for a variable </li></ul><ul><li>We can call it dotSize (for example) </li></ul><ul><li>Just make sure that the distance we move is ONE MORE THAN the side length </li></ul><ul><li>When we &quot;look ahead&quot; we also need to use ONE MORE THAN the side length </li></ul>
  • 365. modulus <ul><li>Let's say thumb drives cost $7 each </li></ul><ul><li>If you have $25, how many thumb drives can you buy? </li></ul><ul><li>How much money will be left over? </li></ul>
  • 366. modulus <ul><li>Let's say thumb drives cost $7 each </li></ul><ul><li>If you have $25, how many thumb drives can you buy? </li></ul><ul><li>25 / 7 is 3 </li></ul><ul><li>How much money will be left over? </li></ul><ul><li>25 % 7 is 4 </li></ul><ul><li>Modulus finds the remainder (&quot;left over&quot;) from integer division </li></ul>
  • 367. modulus 25 7
  • 368. modulus 25 7 3
  • 369. modulus 25 7 3 21
  • 370. modulus 25 7 3 21 4
  • 371. modulus 25 7 3 21 4 25 / 7 25 % 7
  • 372. writing functions with arguments <ul><li>Up to now, all the functions we have written have had empty parenthesis and looked like </li></ul><ul><li>void function() </li></ul><ul><li>Since the parenthesis are empty, the functions do not take any arguments </li></ul><ul><li>We have used functions with arguments: </li></ul><ul><li>point(x,y); </li></ul><ul><li>line(30,50,30,250); </li></ul><ul><li>ellipse(50,10,100,80); </li></ul><ul><li>stroke(255,0,0); </li></ul>
  • 373. Pass by Value arguments <ul><li>To write a function with arguments, you add variable declarations inside the parenthesis of the function header </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>area(50,100); </li></ul><ul><li>} </li></ul><ul><li>void draw(){}//empty! </li></ul><ul><li>void area ( int someWidth, int someLength ) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;The area is &quot;+(someWidth*someLength)); </li></ul><ul><li>} </li></ul>
  • 374. Pass by Value arguments <ul><li>Notice that the data types only go in the header , NOT in the function call </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>area(50,100); </li></ul><ul><li>} </li></ul><ul><li>void draw(){}//empty! </li></ul><ul><li>void area ( int someWidth, int someLength) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;The area is &quot;+(someWidth*someLength)); </li></ul><ul><li>} </li></ul>
  • 375. Pass by Value arguments <ul><li>When the function is call ed the arguments are copied into someWidth and someLength </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>area(50,100); </li></ul><ul><li>} </li></ul><ul><li>void draw(){}//empty! </li></ul><ul><li>void area (int someWidth , int someLength ) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;The area is &quot;+(someWidth*someLength)); </li></ul><ul><li>} </li></ul>50 100 50 100 someWidth someLength
  • 376. Pass by Value arguments <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>area(50,100); </li></ul><ul><li>} </li></ul><ul><li>void draw(){}//empty! </li></ul><ul><li>void area (int someWidth, int someLength) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;The area is &quot;+(someWidth*someLength)); </li></ul><ul><li>} </li></ul>
  • 377. Practice Quiz Question: What is the output of this program? <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>mystery1(4, 1); </li></ul><ul><li>int num = 5; </li></ul><ul><li>mystery1(4,num); </li></ul><ul><li>mystery2(5,2); </li></ul><ul><li>} </li></ul><ul><li>void draw(){}//empty! </li></ul><ul><li>void mystery1 (int a, int b) </li></ul><ul><li>{ </li></ul><ul><li>println((a - 2) * (b + 3)); </li></ul><ul><li>} </li></ul><ul><li>void mystery2 (float c, int d) </li></ul><ul><li>{ </li></ul><ul><li>println(c / d); </li></ul><ul><li>} </li></ul>
  • 378. void <ul><li>Means &quot;nothing&quot; </li></ul><ul><li>Every function we’ve written up to now has used void and looked like: </li></ul><ul><li>void function (int num, float fNum); </li></ul><ul><li>You can replace that “nothing” with “something” </li></ul><ul><li>int function (int num, float fNum); </li></ul><ul><li>This means the function return s an integer </li></ul>
  • 379. Functions that return values <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;The answer is &quot; + </li></ul><ul><li>someFunction(4.5)); </li></ul><ul><li>} </li></ul><ul><li>void draw(){}//empty! </li></ul><ul><li>float someFunction (float fNum) </li></ul><ul><li>{ </li></ul><ul><li>return fNum/2; </li></ul><ul><li>} </li></ul>
  • 380. Functions that return values <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;The answer is &quot; + </li></ul><ul><li>someFunction(4.5)); </li></ul><ul><li>} </li></ul><ul><li>void draw(){}//empty! </li></ul><ul><li>float someFunction (float fNum) </li></ul><ul><li>{ </li></ul><ul><li>return fNum/2; </li></ul><ul><li>} </li></ul>fNum 4.5 4.5
  • 381. Functions that return values <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;The answer is &quot; + </li></ul><ul><li>someFunction(4.5)); </li></ul><ul><li>} </li></ul><ul><li>void draw(){}//empty! </li></ul><ul><li>float someFunction (float fNum) </li></ul><ul><li>{ </li></ul><ul><li>return fNum/2; </li></ul><ul><li>} </li></ul>fNum 4.5 2.25
  • 382. Functions that return values <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;The answer is &quot; + </li></ul><ul><li>someFunction(4.5)); </li></ul><ul><li>} </li></ul><ul><li>void draw(){}//empty! </li></ul><ul><li>float someFunction (float fNum) </li></ul><ul><li>{ </li></ul><ul><li>return fNum/2; </li></ul><ul><li>} </li></ul>fNum 4.5 2.25 2.25
  • 383. return <ul><li>Sends data back to the function call </li></ul><ul><li>println(&quot;The answer is &quot; + </li></ul><ul><li>someFunction(4.5)); </li></ul><ul><li>becomes </li></ul><ul><li>println(&quot;The answer is &quot; + 2.25); </li></ul>
  • 384. Practice Quiz Question: what is the output of this program? <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>int num = mystery1(4,2); </li></ul><ul><li>float fract = mystery2(5,2); </li></ul><ul><li>println(num*fract); </li></ul><ul><li>} </li></ul><ul><li>void draw(){}//empty! </li></ul><ul><li>int mystery1 (int nA, int nB) </li></ul><ul><li>{ </li></ul><ul><li>return nA + nB; </li></ul><ul><li>} </li></ul><ul><li>float mystery2(int nA, int nB) </li></ul><ul><li>{ </li></ul><ul><li>return float(nA)/nB; </li></ul><ul><li>} </li></ul>
  • 385. A program using a boolean and the mouse to switch &quot;modes&quot; <ul><li>boolean mode = false; </li></ul><ul><li>void setup(){}//empty </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>background(0); </li></ul><ul><li>if(mode == true) </li></ul><ul><li>{ </li></ul><ul><li>ellipse(50,50,50,50); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>rect(25,25,50,50); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>void mouseClicked() </li></ul><ul><li>{ </li></ul><ul><li>mode = !mode; </li></ul><ul><li>} </li></ul>
  • 386. Now let's modify the program so that the ellipse has a random position <ul><li>boolean mode = false; </li></ul><ul><li>void setup(){}//empty </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>background(0); </li></ul><ul><li>if(mode == true) </li></ul><ul><li>{ </li></ul><ul><li>ellipse(int(random(100)),int(random(100)),50,50); } </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>rect(25,25,50,50); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>void mouseClicked() </li></ul><ul><li>{ </li></ul><ul><li>mode = !mode; </li></ul><ul><li>} </li></ul>
  • 387. noLoop() and redraw() <ul><li>Normally, the screen is refreshed at 60hz (60 times a second) </li></ul><ul><li>Every time the screen all the code in draw() executes </li></ul><ul><li>If you call noLoop() in setup() , though, draw() only executes once </li></ul><ul><li>If you want to draw the screen again, call redraw() </li></ul>
  • 388. The fixed version with noLoop() and redraw() <ul><li>boolean mode = false; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>noLoop(); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>background(0); </li></ul><ul><li>if(mode == true) </li></ul><ul><li>{ </li></ul><ul><li>ellipse(int(random(100)),int(random(100)),50,50); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>rect(25,25,50,50); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>void mouseClicked() </li></ul><ul><li>{ </li></ul><ul><li>mode = !mode; </li></ul><ul><li>redraw(); </li></ul><ul><li>} </li></ul>
  • 389. charAt() <ul><li>Lets you get at the individual char acters of a String </li></ul><ul><li>What would the following code display? </li></ul><ul><li>String x = &quot;mystery&quot;; </li></ul><ul><li>println(x.charAt(2)); </li></ul>
  • 390. the length() of a String <ul><li>A String can be thought of like an Array </li></ul><ul><li>The length of the String is the number of characters in the String </li></ul><ul><li>What would be displayed by this program? </li></ul><ul><li>String one = &quot;dog&quot;; </li></ul><ul><li>String two = &quot;elephant&quot;; </li></ul><ul><li>String three = &quot;&quot;; </li></ul><ul><li>println(one.length()); </li></ul><ul><li>println(two.length()); </li></ul><ul><li>println(three.length()); </li></ul>
  • 391. the length() of a String <ul><li>String one = &quot;dog&quot;; </li></ul><ul><li>String two = &quot;elephant&quot;; </li></ul><ul><li>String three = &quot;&quot;; </li></ul><ul><li>println(one.length()); </li></ul><ul><li>println(two.length()); </li></ul><ul><li>println(three.length()); </li></ul>
  • 392. boolean functions <ul><li>A boolean function returns true or false </li></ul><ul><li>Let's say you work at the admissions office for UC Santa Cruz where the average freshman admission has a GPA of 3.7 and an SAT of 1750* </li></ul><ul><li>Your asked to write a function that will return true if a freshman has scores that are both better than average or false if they don't </li></ul>http:// www.universityofcalifornia.edu/admissions/undergrad_adm/selecting/camp_profiles/camp_profiles_ucsc.html
  • 393. boolean functions <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>println( getsIn( 4.0, 1700 ) ); </li></ul><ul><li>println( getsIn( 3.0, 1400 ) ); </li></ul><ul><li>println( getsIn( 3.5, 2100 ) ); </li></ul><ul><li>println( getsIn( 3.8, 1800 ) ); </li></ul><ul><li>} </li></ul><ul><li>boolean getsIn( float gpa , int sat ) </li></ul><ul><li>{ </li></ul><ul><li>??? </li></ul><ul><li>} </li></ul>
  • 394. boolean functions <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>println( getsIn( 4.0, 1700 ) ); </li></ul><ul><li>println( getsIn( 3.0, 1400 ) ); </li></ul><ul><li>println( getsIn( 3.5, 2100 ) ); </li></ul><ul><li>println( getsIn( 3.8, 1800 ) ); </li></ul><ul><li>} </li></ul><ul><li>boolean getsIn( float gpa , int sat ) </li></ul><ul><li>{ </li></ul><ul><li>??? </li></ul><ul><li>} </li></ul>
  • 395. boolean functions <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>println( getsIn( 4.0, 1700 ) ); </li></ul><ul><li>println( getsIn( 3.0, 1400 ) ); </li></ul><ul><li>println( getsIn( 3.5, 2100 ) ); </li></ul><ul><li>println( getsIn( 3.8, 1800 ) ); </li></ul><ul><li>} </li></ul><ul><li>boolean getsIn( float gpa , int sat ) </li></ul><ul><li>{ </li></ul><ul><li>if(gpa > 3.7 && sat > 1750) </li></ul><ul><li>??? </li></ul><ul><li>} </li></ul>
  • 396. boolean functions <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>println( getsIn( 4.0, 1700 ) ); </li></ul><ul><li>println( getsIn( 3.0, 1400 ) ); </li></ul><ul><li>println( getsIn( 3.5, 2100 ) ); </li></ul><ul><li>println( getsIn( 3.8, 1800 ) ); </li></ul><ul><li>} </li></ul><ul><li>boolean getsIn( float gpa , int sat ) </li></ul><ul><li>{ </li></ul><ul><li>if(gpa > 3.7 && sat > 1750) </li></ul><ul><li>{ </li></ul><ul><li>return true; </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>??? </li></ul><ul><li>} </li></ul>
  • 397. boolean functions <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>println( getsIn( 4.0, 1700 ) ); </li></ul><ul><li>println( getsIn( 3.0, 1400 ) ); </li></ul><ul><li>println( getsIn( 3.5, 2100 ) ); </li></ul><ul><li>println( getsIn( 3.8, 1800 ) ); </li></ul><ul><li>} </li></ul><ul><li>boolean getsIn( float gpa , int sat ) </li></ul><ul><li>{ </li></ul><ul><li>if(gpa > 3.7 && sat > 1750) </li></ul><ul><li>{ </li></ul><ul><li>return true; </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>return false; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  • 398. Find the output <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>if(isMatch(&quot;elephant&quot;)==true) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Match 1&quot;); </li></ul><ul><li>} </li></ul><ul><li>if(isMatch(&quot;alligator&quot;)==true) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Match 2&quot;); </li></ul><ul><li>} </li></ul><ul><li>if(isMatch(&quot;ox&quot;)==true) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Match 3&quot;); </li></ul><ul><li>} </li></ul><ul><li>if(isMatch(&quot;pup fish&quot;)==true) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Match 4&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>boolean isMatch(String sWord) </li></ul><ul><li>{ </li></ul><ul><li>if(sWord.length()>=3) </li></ul><ul><li>{ </li></ul><ul><li>return sWord.charAt(0) == sWord.charAt(2); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>return false; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  • 399. What is the output of this program? <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>if(mystery(&quot;antelope&quot;, 'e')==true) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;One&quot;); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Two&quot;); </li></ul><ul><li>} </li></ul><ul><li>if(mystery(&quot;aardvark&quot;, 'a')==true) </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Three&quot;); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Four&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>boolean mystery(String word, char letter) </li></ul><ul><li>{ </li></ul><ul><li>int sum = 0; </li></ul><ul><li>for(int i = 0; i < word.length(); i++) </li></ul><ul><li>{ </li></ul><ul><li>if(word.charAt(i) == letter) </li></ul><ul><li>{ </li></ul><ul><li>sum++; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>return sum > 2; </li></ul><ul><li>} </li></ul>
  • 400. The Palindrome function: a starting point <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>String lines[] = loadStrings(&quot;palindrome.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>if( palindrome(lines[i]) ==true) </li></ul><ul><li>{ </li></ul><ul><li>println(lines[i] + &quot; IS a palidrome.&quot;); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>println(lines[i] + &quot; is NOT a palidrome.&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>boolean palindrome(String word) </li></ul><ul><li>{ </li></ul><ul><li>return true ; </li></ul><ul><li>} </li></ul>
  • 401. The Palindrome function <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>String lines[] = loadStrings(&quot;palindrome.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>if(palindrome(lines[i])==true) </li></ul><ul><li>{ </li></ul><ul><li>println(lines[i] + &quot; IS a palidrome.&quot;); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>println(lines[i] + &quot; is NOT a palidrome.&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>boolean palindrome(String word) </li></ul><ul><li>{ </li></ul><ul><li>return true; </li></ul><ul><li>} </li></ul>
  • 402. The Palindrome function <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>String lines[] = loadStrings(&quot;palindrome.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>if(palindrome(lines[i])==true) </li></ul><ul><li>{ </li></ul><ul><li>println(lines[i] + &quot; IS a palidrome.&quot;); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>println(lines[i] + &quot; is NOT a palidrome.&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>boolean palindrome(String text) </li></ul><ul><li>{ </li></ul><ul><li>return false; </li></ul><ul><li>} </li></ul>
  • 403. The Palindrome function <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>String lines[] = loadStrings(&quot;palindrome.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>if(palindrome(lines[i])==true) </li></ul><ul><li>{ </li></ul><ul><li>println(lines[i] + &quot; IS a palidrome.&quot;); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>println(lines[i] + &quot; is NOT a palidrome.&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>boolean palindrome(String text) </li></ul><ul><li>{ </li></ul><ul><li>return false; </li></ul><ul><li>} </li></ul>
  • 404. The Palindrome Algorithm <ul><li>An Algorithm is the steps you take to solve a problem </li></ul><ul><li>What steps would you take to see if the following word is a palindrome? </li></ul><ul><li>rewriter </li></ul>
  • 405. The Palindrome Algorithm <ul><li>rewriter </li></ul>
  • 406. The Palindrome Algorithm <ul><li>rewriter </li></ul>
  • 407. The Palindrome Algorithm <ul><li>rewriter </li></ul>
  • 408. The Palindrome Algorithm <ul><li>Start by comparing the first and last letters </li></ul><ul><li>If they are the same, does that mean the word is a palindrome? </li></ul><ul><li>If they are different, does that mean the word is NOT a palindrome? </li></ul><ul><li>rewriter </li></ul><ul><li>01234567 </li></ul>
  • 409. The Palindrome Algorithm <ul><li>Start by comparing the first and last letters </li></ul><ul><li>If they are the same, does that mean the word is a palindrome? </li></ul><ul><li>If they are different, does that mean the word is NOT a palindrome? </li></ul><ul><li>rewriter </li></ul><ul><li>01234567 </li></ul><ul><li>int first = 0; </li></ul><ul><li>int last = word.length() – 1; </li></ul><ul><li>if(word.charAt(first)!= </li></ul><ul><li>word.charAt(last)) </li></ul><ul><li>???? </li></ul>
  • 410. The Palindrome Algorithm <ul><li>Start by comparing the first and last letters </li></ul><ul><li>If they are the same, does that mean the word is a palindrome? </li></ul><ul><li>If they are different, does that mean the word is NOT a palindrome? </li></ul><ul><li>rewriter </li></ul><ul><li>01234567 </li></ul><ul><li>int first = 0; </li></ul><ul><li>int last = word.length() – 1; </li></ul><ul><li>if(word.charAt(first)!= </li></ul><ul><li>word.charAt(last)) </li></ul><ul><li>{ </li></ul><ul><li>return false; </li></ul><ul><li>} </li></ul>
  • 411. The Palindrome Algorithm <ul><li>rewriter </li></ul><ul><li>01234567 </li></ul><ul><li>int first = 0; </li></ul><ul><li>int last = word.length() – 1; </li></ul><ul><li>if(word.charAt(first)!= </li></ul><ul><li>word.charAt(last)) </li></ul><ul><li>{ </li></ul><ul><li>return false; </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>??? </li></ul>
  • 412. The Palindrome Algorithm <ul><li>rewriter </li></ul><ul><li>01234567 </li></ul><ul><li>int first = 0; </li></ul><ul><li>int last = word.length() – 1; </li></ul><ul><li>while(???) </li></ul><ul><li>{ </li></ul><ul><li>if(word.charAt(first)!= </li></ul><ul><li>word.charAt(last)) </li></ul><ul><li>???; </li></ul><ul><li>else </li></ul><ul><li>??? </li></ul><ul><li>} </li></ul><ul><li>??? </li></ul>
  • 413. Some loops never run! <ul><li>What will be displayed by the following program? </li></ul><ul><li>int num = 100; </li></ul><ul><li>while(num < 10) </li></ul><ul><li>{ </li></ul><ul><li>println(num); </li></ul><ul><li>num++; </li></ul><ul><li>} </li></ul>
  • 414. Some loops never run! <ul><li>What will be displayed by the following program? NOTHING! but with a small change. . . </li></ul><ul><li>int num = 100; </li></ul><ul><li>while(num < 10) </li></ul><ul><li>{ </li></ul><ul><li>println(num); </li></ul><ul><li>num++; </li></ul><ul><li>} </li></ul>
  • 415. Some loops never run! <ul><li>What will be displayed by the following program? </li></ul><ul><li>int num = 100; </li></ul><ul><li>do </li></ul><ul><li>{ </li></ul><ul><li>println(num); </li></ul><ul><li>num++; </li></ul><ul><li>}while(num < 10); </li></ul><ul><li>Now it displays 100! </li></ul>
  • 416. do-while loops <ul><li>Because the code for the control expression is at the bottom, a do-while loop always runs at lease once </li></ul><ul><li>int num = 100; </li></ul><ul><li>do </li></ul><ul><li>{ </li></ul><ul><li>println(num); </li></ul><ul><li>num++; </li></ul><ul><li>}while( num < 10 ); </li></ul>
  • 417. while vs. do-while <ul><li>A while may never run </li></ul><ul><li>A do-while will always run at least once, even if the control expression is false </li></ul><ul><li>Otherwise, they do the same thing </li></ul>
  • 418. toUpperCase() & toLowerCase() <ul><li>return s a new String that is all upper or lower case </li></ul><ul><li>does NOT change the original String </li></ul>
  • 419. A function that &quot;removes&quot; 'a' s <ul><li>removeAs(&quot;apple&quot;) -> &quot;pple&quot; </li></ul><ul><li>removeAs(&quot;banana&quot;) -> &quot;bnn&quot; </li></ul><ul><li>removeAs(&quot;aaaaaaa&quot;) -> &quot;&quot; </li></ul><ul><li>removeAs(&quot;bcdef&quot;) -> &quot;bcdef&quot; </li></ul><ul><li>String removeAs(String str) </li></ul><ul><li>{ </li></ul><ul><li>??? </li></ul><ul><li>} </li></ul>
  • 420. A function that &quot;removes&quot; 'a' s <ul><li>String removeAs(String str) </li></ul><ul><li>{ </li></ul><ul><li>String noAs = &quot;&quot;; </li></ul><ul><li>??? </li></ul><ul><li>return noAs; </li></ul><ul><li>} </li></ul>
  • 421. A function that &quot;removes&quot; 'a' s <ul><li>String removeAs(String str) </li></ul><ul><li>{ </li></ul><ul><li>String noAs = &quot;&quot;; </li></ul><ul><li>for(int i = 0; i < str.length(); i++) </li></ul><ul><li>{ </li></ul><ul><li>??? </li></ul><ul><li>} </li></ul><ul><li>return noAs; </li></ul><ul><li>} </li></ul>
  • 422. A function that &quot;removes&quot; 'a' s <ul><li>String removeAs(String str) </li></ul><ul><li>{ </li></ul><ul><li>String noAs = &quot;&quot;; </li></ul><ul><li>for(int i = 0; i < str.length(); i++) </li></ul><ul><li>{ </li></ul><ul><li>if(str.charAt(i)=='a') </li></ul><ul><li>{ </li></ul><ul><li>??? </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>return noAs; </li></ul><ul><li>} </li></ul>
  • 423. A function that &quot;removes&quot; 'a' s <ul><li>String removeAs(String str) </li></ul><ul><li>{ </li></ul><ul><li>String noAs = &quot;&quot;; </li></ul><ul><li>for(int i = 0; i < str.length(); i++) </li></ul><ul><li>{ </li></ul><ul><li>if(str.charAt(i) != 'a') </li></ul><ul><li>{ </li></ul><ul><li>??? </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>return noAs; </li></ul><ul><li>} </li></ul>
  • 424. A function that &quot;removes&quot; 'a' s <ul><li>String removeAs(String str) </li></ul><ul><li>{ </li></ul><ul><li>String noAs = &quot;&quot;; </li></ul><ul><li>for(int i = 0; i < str.length(); i++) </li></ul><ul><li>{ </li></ul><ul><li>if(str.charAt(i) != 'a') </li></ul><ul><li>{ </li></ul><ul><li>noAs = ??? </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>return noAs; </li></ul><ul><li>} </li></ul>
  • 425. A function that &quot;removes&quot; 'a' s <ul><li>String removeAs(String str) </li></ul><ul><li>{ </li></ul><ul><li>String noAs = &quot;&quot;; </li></ul><ul><li>for(int i = 0; i < str.length(); i++) </li></ul><ul><li>{ </li></ul><ul><li>if(str.charAt(i)!='a') </li></ul><ul><li>{ </li></ul><ul><li>noAs = noAs + str.charAt(i); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>return noAs; </li></ul><ul><li>} </li></ul>
  • 426. What the whole program would look like <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>println(removeAs(&quot;apple&quot;) ); </li></ul><ul><li>println(removeAs(&quot;banana&quot;) ); </li></ul><ul><li>println(removeAs(&quot;aaaaaaa&quot;) ); </li></ul><ul><li>println(removeAs(&quot;bcdef&quot;) ); </li></ul><ul><li>} </li></ul><ul><li>String removeAs(String str) </li></ul><ul><li>{ </li></ul><ul><li>String noAs = &quot;&quot;; </li></ul><ul><li>for(int i = 0; i < str.length(); i++) </li></ul><ul><li>{ </li></ul><ul><li>if(str.charAt(i)!='a') </li></ul><ul><li>{ </li></ul><ul><li>noAs = noAs + str.charAt(i); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>return noAs; </li></ul><ul><li>} </li></ul>
  • 427. find the output <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>println(mystery(&quot;yellow&quot;)); </li></ul><ul><li>String test = &quot;willy nilly&quot;; </li></ul><ul><li>println(mystery(test)); </li></ul><ul><li>println(mystery(test.toUpperCase())); </li></ul><ul><li>println(test); </li></ul><ul><li>} </li></ul><ul><li>String mystery(String str) </li></ul><ul><li>{ </li></ul><ul><li>String s = &quot;&quot;; </li></ul><ul><li>for(int i = 0; i < str.length(); i=i+2) </li></ul><ul><li>{ </li></ul><ul><li>if(str.charAt(i) != 'y') </li></ul><ul><li>{ </li></ul><ul><li>s = s + str.charAt(i); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>return s; </li></ul><ul><li>} </li></ul>
  • 428. javabat.com <ul><li>Online java practice problems </li></ul><ul><li>Example: Given a String name, e.g. &quot;Bob&quot;, return a greeting of the form &quot;Hello Bob!&quot;. </li></ul><ul><ul><li>helloName(&quot;Bob&quot;) -> &quot;Hello Bob!&quot; </li></ul></ul><ul><ul><li>helloName(&quot;Alice&quot;) -> &quot;Hello Alice!&quot; </li></ul></ul><ul><ul><li>helloName(&quot;X&quot;) -> &quot;Hello X!&quot; </li></ul></ul><ul><li>public String helloName(String name){ </li></ul><ul><li>} </li></ul>
  • 429. javabat.com <ul><li>Online java practice problems </li></ul><ul><li>Example: Given a String name, e.g. &quot;Bob&quot;, return a greeting of the form &quot;Hello Bob!&quot;. </li></ul><ul><ul><li>helloName(&quot;Bob&quot;) -> &quot;Hello Bob!&quot; </li></ul></ul><ul><ul><li>helloName(&quot;Alice&quot;) -> &quot;Hello Alice!&quot; </li></ul></ul><ul><ul><li>helloName(&quot;X&quot;) -> &quot;Hello X!&quot; </li></ul></ul><ul><li>public String helloName(String name){ </li></ul><ul><li>return ?? ; </li></ul><ul><li>} </li></ul>
  • 430. javabat.com <ul><li>Online java practice problems </li></ul><ul><li>Example: Given a String name, e.g. &quot;Bob&quot;, return a greeting of the form &quot;Hello Bob!&quot;. </li></ul><ul><ul><li>helloName(&quot;Bob&quot;) -> &quot;Hello Bob!&quot; </li></ul></ul><ul><ul><li>helloName(&quot;Alice&quot;) -> &quot;Hello Alice!&quot; </li></ul></ul><ul><ul><li>helloName(&quot;X&quot;) -> &quot;Hello X!&quot; </li></ul></ul><ul><li>public String helloName(String name){ </li></ul><ul><li>return ?? + name ; </li></ul><ul><li>} </li></ul>
  • 431. javabat.com <ul><li>Online java practice problems </li></ul><ul><li>Example: Given a String name, e.g. &quot;Bob&quot;, return a greeting of the form &quot;Hello Bob!&quot;. </li></ul><ul><ul><li>helloName(&quot;Bob&quot;) -> &quot;Hello Bob!&quot; </li></ul></ul><ul><ul><li>helloName(&quot;Alice&quot;) -> &quot;Hello Alice!&quot; </li></ul></ul><ul><ul><li>helloName(&quot;X&quot;) -> &quot;Hello X!&quot; </li></ul></ul><ul><li>public String helloName(String name){ </li></ul><ul><li>return &quot;Hello &quot; + name ; </li></ul><ul><li>} </li></ul>
  • 432. javabat.com <ul><li>public String helloName(String name){ </li></ul><ul><li>return &quot;Hello &quot; + name ; </li></ul><ul><li>} </li></ul><ul><li>We can check our answer by clicking on this button at the bottom: </li></ul>
  • 433. javabat.com <ul><li>public String helloName(String name){ </li></ul><ul><li>return &quot;Hello &quot; + name ; </li></ul><ul><li>} </li></ul><ul><li>The red Xs aren't good </li></ul><ul><li>Our answer is missing something </li></ul>
  • 434. javabat.com <ul><li>public String helloName(String name){ </li></ul><ul><li>return &quot;Hello &quot; + name + &quot;!&quot; ; </li></ul><ul><li>} </li></ul><ul><li>Now it works </li></ul>
  • 435. Practice Quiz Question <ul><li>http://javabat.com/prob?id=String1.makeAbba </li></ul><ul><li>Given two Strings, A and B, return a new String of the form ABBA. So for example, with the Strings &quot;Hi&quot; and &quot;Bye&quot;, return &quot;HiByeByeHi&quot;. </li></ul><ul><ul><li>makeAbba(&quot;Hi&quot;, &quot;Bye&quot;) -> &quot;HiByeByeHi&quot; </li></ul></ul><ul><ul><li>makeAbba(&quot;Yo&quot;, &quot;Alice&quot;) -> &quot;YoAliceAliceYo&quot; </li></ul></ul><ul><ul><li>makeAbba(&quot;x&quot;, &quot;y&quot;) -> &quot;xyyx&quot; </li></ul></ul><ul><li>public String makeAbba(String a,String b){ </li></ul><ul><li>} </li></ul>
  • 436. Practice Quiz Question <ul><li>http://javabat.com/prob?id=String1.withoutX </li></ul><ul><li>Given a string, if the first or last chars are 'x', return the string without those 'x' chars, and otherwise return the string unchanged. </li></ul><ul><ul><li>withoutX(&quot;xHix&quot;) -> &quot;Hi&quot; </li></ul></ul><ul><ul><li>withoutX(&quot;xHi&quot;) -> &quot;Hi&quot; </li></ul></ul><ul><ul><li>withoutX(&quot;Hxix&quot;) -> &quot;Hxi&quot; </li></ul></ul><ul><li>public String withoutX(String str) { </li></ul><ul><li>} </li></ul>
  • 437. One possible approach <ul><li>Check to see if the String is empty--If it is there is no work to do, just return the empty string </li></ul><ul><li>Make a local string variable and assign it the empty string </li></ul><ul><li>If the first character is not an 'x', add it to the local string variable </li></ul><ul><li>Write a loop to add all the middle characters to the local string variable </li></ul><ul><li>If the last character is not an 'x', add it to the local string variable </li></ul><ul><li>return the local string variable </li></ul>
  • 438. <ul><li>public String withoutX(String str) { </li></ul><ul><li>if(str.length() == 0) </li></ul><ul><li>{ </li></ul><ul><li>return &quot;&quot;; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  • 439. <ul><li>public String withoutX(String str) { </li></ul><ul><li>if(str.length() == 0) </li></ul><ul><li>{ </li></ul><ul><li>return &quot;&quot;; </li></ul><ul><li>} </li></ul><ul><li>String noXs = &quot;&quot;; </li></ul><ul><li>??? </li></ul><ul><li>} </li></ul>
  • 440. <ul><li>str &quot;Hxix&quot; </li></ul><ul><li>noXs &quot;&quot; </li></ul>
  • 441. <ul><li>str &quot;Hxix&quot; </li></ul><ul><li>noXs &quot;&quot; </li></ul>
  • 442. <ul><li>str &quot;Hxix&quot; </li></ul><ul><li>noXs &quot;H&quot; </li></ul>
  • 443. <ul><li>public String withoutX(String str) { </li></ul><ul><li>if(str.length() == 0) </li></ul><ul><li>{ </li></ul><ul><li>return &quot;&quot;; </li></ul><ul><li>} </li></ul><ul><li>String noXs = &quot;&quot;; </li></ul><ul><li>if(str.charAt(0) != 'x') </li></ul><ul><li>{ </li></ul><ul><li>noXs = noXs + ??? ; </li></ul><ul><li>} </li></ul><ul><li>??? </li></ul><ul><li>} </li></ul>
  • 444. <ul><li>str &quot;Hxix&quot; </li></ul><ul><li>noXs &quot;H&quot; </li></ul>
  • 445. <ul><li>str &quot;Hxix&quot; </li></ul><ul><li>noXs &quot;Hx&quot; </li></ul>
  • 446. <ul><li>str &quot;Hxix&quot; </li></ul><ul><li>noXs &quot;Hxi&quot; </li></ul>
  • 447. <ul><li>public String withoutX(String str) { </li></ul><ul><li>if(str.length() == 0) </li></ul><ul><li>{ </li></ul><ul><li>return &quot;&quot;; </li></ul><ul><li>} </li></ul><ul><li>String noXs = &quot;&quot;; </li></ul><ul><li>if(str.charAt(0) != 'x') </li></ul><ul><li>{ </li></ul><ul><li>noXs = noXs + ??? ; </li></ul><ul><li>} </li></ul><ul><li>for(int i = 1; i < str.length()-1; i++) </li></ul><ul><li>{ </li></ul><ul><li>noXs = noXs + ??? ; </li></ul><ul><li>} </li></ul><ul><li>int last = str.length() - 1; </li></ul><ul><li>if(str.charAt(last) != ??? ) </li></ul><ul><li>{ </li></ul><ul><li>??? ; </li></ul><ul><li>} </li></ul><ul><li>return ??? ; </li></ul><ul><li>} </li></ul>One possible starting point
  • 448. Practice Quiz Question <ul><li>http://javabat.com/prob?id=Warmup2.stringTimes </li></ul><ul><li>Given a string and a non-negative int n, return a larger string that is n copies of the original string. </li></ul><ul><ul><li>stringTimes(&quot;Hi&quot;, 2) -> &quot;HiHi&quot; </li></ul></ul><ul><ul><li>stringTimes(&quot;Hi&quot;, 3) -> &quot;HiHiHi&quot; </li></ul></ul><ul><ul><li>stringTimes(&quot;Hi&quot;, 1) -> &quot;Hi&quot; </li></ul></ul><ul><li>public String stringTimes(String str, int n) { </li></ul><ul><li>} </li></ul>
  • 449. Cell Phone Programming <ul><li>Sun has a “Wireless Tool Kit” (WTK) that allows programmers to create Java programs for cell phones and other devices. </li></ul><ul><li>A different version of Processing called Mobile uses the WTK </li></ul>
  • 450. Configuring Mobile <ul><li>Start Mobile </li></ul><ul><li>Choose File | Preferences and click on the Mobile tab </li></ul><ul><li>Your settings should look like this </li></ul>
  • 451. Now write a program <ul><li>Writing the program is almost identical to normal processing </li></ul>
  • 452. Mobile's API is slightly different <ul><ul><li>You can’t change the size() of the display </li></ul></ul><ul><ul><li>Input is a little different </li></ul></ul><ul><ul><li>Colors can’t have opacity on phones </li></ul></ul><ul><ul><li>3D graphics require a special library </li></ul></ul><ul><ul><li>There are no get() or smooth() functions </li></ul></ul><ul><ul><li>Fonts work a little differently </li></ul></ul><ul><ul><li>Best to use “text box” format for text() </li></ul></ul><ul><ul><li>(int) instead of int() </li></ul></ul><ul><ul><li>float only available on newer versions ( CLDC 1.1 ) </li></ul></ul><ul><li>So, you will need to port an existing program to the mobile environment by modifying the code </li></ul>
  • 453. Cell Phone Programming <ul><li>When you press the play button it will bring up a virtual cell phone </li></ul><ul><li>To run the program, press the button under “launch” </li></ul><ul><li>When you are happy with your program export it as a MIDlet </li></ul>
  • 454. Cell Phone Programming <ul><li>For input, you can use keyCode </li></ul><ul><li>UP , DOWN , LEFT , RIGHT and FIRE refer to the five navigation buttons </li></ul><ul><li>or you can use code like if(key == '*') to use the keypad </li></ul>
  • 455. Getting the program on your cell phone is the hard part <ul><li>First, you need a cell phone that supports Java, most don't </li></ul><ul><li>It's easiest to get the program on your cell phone using a USB cable and your phone's software </li></ul>
  • 456. Inflating Balloon <ul><li>Let's say I want to make an animation of a balloon that gets bigger, that is, it &quot;inflates&quot; </li></ul><ul><li>I'll start by asking what a balloon has and what it does </li></ul><ul><li>And then I'll write a class that models the object </li></ul><ul><li>class Balloon </li></ul><ul><li>{ </li></ul><ul><li>} </li></ul>
  • 457. Inflating Balloon <ul><li>Balloon's have a size </li></ul><ul><li>For each thing it has , we create a variable </li></ul><ul><li>class Balloon </li></ul><ul><li>{ </li></ul><ul><li>int size; </li></ul><ul><li>} </li></ul>
  • 458. Inflating Balloon <ul><li>What balloons do is inflate and show up on the screen </li></ul><ul><li>For each thing it does , we create a method </li></ul><ul><li>class Balloon </li></ul><ul><li>{ </li></ul><ul><li>int size; </li></ul><ul><li>void inflate() </li></ul><ul><li>{ </li></ul><ul><li>size++; </li></ul><ul><li>} </li></ul><ul><li>void show() </li></ul><ul><li>{ </li></ul><ul><li>ellipse(150,150,size,size); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  • 459. The Balloon constructor <ul><li>Every class should have a special function called a constructor </li></ul><ul><li>class Balloon </li></ul><ul><li>{ </li></ul><ul><li>int size; </li></ul><ul><li>Balloon() </li></ul><ul><li>{ </li></ul><ul><li>size = 0; </li></ul><ul><li>} </li></ul><ul><li>void inflate() </li></ul><ul><li>{ </li></ul><ul><li>size++; </li></ul><ul><li>} </li></ul><ul><li>void show() </li></ul><ul><li>{ </li></ul><ul><li>ellipse(150,150,size,size); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  • 460. The Balloon constructor <ul><li>The constructor must have the same name as the class </li></ul><ul><li>It doesn't have a return type, not even void </li></ul><ul><li>It initializes the variables, that is, it sets them equal to their first values </li></ul><ul><li>Balloon() </li></ul><ul><li>{ </li></ul><ul><li>size = 0; </li></ul><ul><li>} </li></ul>
  • 461. Inflating Balloon <ul><li>Once I've written my balloon class, I can use it to build a new Balloon() in my program </li></ul><ul><li>Balloon bob; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>bob = new Balloon(); </li></ul><ul><li>size(300,300); </li></ul><ul><li>} </li></ul>
  • 462. Inflating Balloon <ul><li>Every time the screen is drawn, I want my Balloon to do it's thing </li></ul><ul><li>Balloon bob; </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>bob = new Balloon(); </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,0,0); </li></ul><ul><li>bob.inflate(); </li></ul><ul><li>bob.show(); </li></ul><ul><li>} </li></ul>
  • 463. Inflating Balloon <ul><li>The complete program looks like this </li></ul>
  • 464. OOP and class <ul><li>The Pong assignment uses a class to model what Ball s and Paddle s have and do </li></ul><ul><li>We use a class to make a &quot;plan&quot; or &quot;blueprint&quot; of the object </li></ul><ul><li>This is called Object Oriented Programming or just OOP </li></ul>
  • 465. Here's the basic outline of the Bouncing Ball program <ul><li>Ball bob; //or whatever you want to call it </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>//your code here </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>//your code here </li></ul><ul><li>} </li></ul><ul><li>class Ball </li></ul><ul><li>{ </li></ul><ul><li>//your code here </li></ul><ul><li>} </li></ul>                                                   
  • 466. An Instance of a class <ul><li>Creating a class is like making a blueprint for a house </li></ul><ul><li>It shows what the house will look like when you actually build it </li></ul><ul><li>Designing a blueprint is different from building a house. </li></ul><ul><li>It's the same with a class : The Ball class shows what balls will have and do, when some are actually made . </li></ul>Not the same!
  • 467. Here's the basic outline of the Bouncing Ball program <ul><li>Ball bob; //or whatever you want to call it </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>//other code not shown </li></ul><ul><li>bob = new Ball(); </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>//your code here </li></ul><ul><li>} </li></ul><ul><li>class Ball </li></ul><ul><li>{ </li></ul><ul><li>//your code here </li></ul><ul><li>} </li></ul>                                                   
  • 468. new <ul><li>When you make a new object, it is said to be an instance of its class </li></ul><ul><li>In Java, you make instances of a class with the word new </li></ul><ul><li>new Ball(); </li></ul><ul><li>You can create a variable for a Ball , by declaring it's type and initializing it, much like any variable </li></ul><ul><li>Ball bob = new Ball(); </li></ul><ul><li>int num = 5; </li></ul>
  • 469. The draw function with move, bounce and display our ball <ul><li>Ball bob; //or whatever you want to call it </li></ul><ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>//your code here </li></ul><ul><li>} </li></ul><ul><li>void draw() </li></ul><ul><li>{ </li></ul><ul><li>//other code not shown </li></ul><ul><li>bob.move(); </li></ul><ul><li>bob.bounce(); </li></ul><ul><li>bob.show(); </li></ul><ul><li>} </li></ul><ul><li>class Ball </li></ul><ul><li>{ </li></ul><ul><li>//your code here </li></ul><ul><li>} </li></ul>                                                   
  • 470. The dot operator <ul><li>Once you have made an instance of a class, you can access its parts with a dot </li></ul><ul><li>Ball bob; //the declaration </li></ul><ul><li>bob = new Ball(); //the initization </li></ul><ul><li>//other java code not shown </li></ul><ul><li>bob . move(); </li></ul><ul><li>bob . bounce(); </li></ul><ul><li>bob . show(); </li></ul>
  • 471. Practice Quiz question: Find the output <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>Thingy bob = new Thingy(); </li></ul><ul><li>bob.num = 2; </li></ul><ul><li>bob.mystery(); </li></ul><ul><li>Thingy barbara = new Thingy(); </li></ul><ul><li>barbara.mystery(); </li></ul><ul><li>println(&quot;bob: &quot; + bob.num); </li></ul><ul><li>println(&quot;barbara: &quot; + barbara.num ); </li></ul><ul><li>} </li></ul><ul><li>class Thingy </li></ul><ul><li>{ </li></ul><ul><li>int num; </li></ul><ul><li>Thingy() </li></ul><ul><li>{ </li></ul><ul><li>num = 3; </li></ul><ul><li>} </li></ul><ul><li>void mystery() </li></ul><ul><li>{ </li></ul><ul><li>num = num *2; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  • 472. Pong
  • 473. Pong                                                   
  • 474. Pong <ul><li>For many people, Pong was the first time they used a computer </li></ul><ul><li>Brought the first computers into people's homes </li></ul><ul><li>Written by Allan Alcorn (a Lowell grad) for Atari </li></ul><ul><li>First Pong game was installed in a Sunnyvale bar in September 1972 </li></ul><ul><li>Two weeks later the machine stopped working—because all the quarters had jammed it </li></ul><ul><li>Original Paddles had eight segments—different segments gave different angles </li></ul>Allan Alcorn
  • 475. The original arcade Pong game was basically some logic chips hooked up to an actual TV set with an added coin mechanism.
  • 476. Pong was not the first computer game <ul><li>10 years before Pong, there was another, much more sophisticated computer game… </li></ul>
  • 477. Spacewar!
  • 478. Spacewar! <ul><li>Written by members of the MIT model railroad club beginning in 1961 </li></ul><ul><li>They also coined the word &quot;hack&quot; </li></ul><ul><li>Code was kept in an unlocked drawer—anyone was free to modify it </li></ul><ul><li>Programmed on the Digital Equipment PDP-1, one of the first computers with a monitor </li></ul><ul><li>Club members built the world's first joysticks </li></ul><ul><li>Later modified by Atari ( stolen? ) to become Asteroids </li></ul>
  • 479. Pong Spin-offs <ul><li>Pong Doubles 1973 </li></ul>
  • 480. Pong Spin-offs <ul><li>Dr. Pong 1974 </li></ul>
  • 481. Pong Spin-offs <ul><li>Cocktail Pong 1974 </li></ul>
  • 482. Pong Spin-offs <ul><li>Puppy Pong 1974 </li></ul>
  • 483. Pong Spin-offs <ul><li>Pin Pong 1974 </li></ul>
  • 484. Pong Spin-offs <ul><li>Quadra Pong 1974 </li></ul>
  • 485. Pong Spin-offs <ul><li>Super Pong 1974 </li></ul>
  • 486. Pong Spin-offs <ul><li>Rebound 1974 </li></ul>
  • 487. Pong Spin-offs <ul><li>Slime Volleyball </li></ul>
  • 488. Pong Spin-offs <ul><li>Breakout 1976 </li></ul>
  • 489. Pong Spin-offs <ul><li>Bomb Bee 1979 </li></ul>
  • 490. Pong Spin-offs <ul><li>3d pong </li></ul>
  • 491. Pong Spin-offs <ul><li>circular pong </li></ul>
  • 492. Pong Spin-offs <ul><li>Warlords </li></ul>
  • 493. Pong Spin-offs <ul><li>Pong Clock--As Pong randomly plays, the score shown is the time of day </li></ul>
  • 494. Pong Spin-offs <ul><li>Plasma Pong, uses fluid dynamics, so the ball seems to move through a fluid </li></ul>
  • 495. And from these humble beginnings… <ul><li>Computer gaming is now a huge industry with revenue over 7 billion dollars in 2005 </li></ul><ul><li>'Mario' has made twice the revenue of all the 'Star Wars' movies combined </li></ul><ul><li>Computer Games and entertainment software are the fastest growing area of the computer software industry (which is itself one of the fastest growing areas of the economy) </li></ul>
  • 496. BallMaster www.blueteagames.com by Steven Zhao class of 2001 In BallMaster, you guide a flying ball through dangerous adventures. With the aid of your computerized assistant, you fend off a variety of beasts that attack you as you float through the air. Other Games: Cactus Bruce and the Corporate Monkeys, Meeklits and HeliumMan-X
  • 497. Pong Spin-offs <ul><li>and many, many others. . . </li></ul>
  • 498. Practice Quiz Question: Find the output <ul><li>void setup() </li></ul><ul><li>{ </li></ul><ul><li>TwoNums bob = new TwoNums(); </li></ul><ul><li>println(bob.mystery1()); </li></ul><ul><li>TwoNums jane = new TwoNums(); </li></ul><ul><li>jane.d1 = bob.d1 * 3; </li></ul><ul><li>jane.n1 = int(bob.d1); </li></ul><ul><li>println(jane.mystery1()); </li></ul><ul><li>bob.mystery2(); </li></ul><ul><li>println(&quot;Bob's float is &quot; + bob.d1); </li></ul><ul><li>} </li></ul><ul><li>class TwoNums </li></ul><ul><li>{ </li></ul><ul><li>int n1; </li></ul><ul><li>float d1; </li></ul><ul><li>TwoNums() </li></ul><ul><li>{ </li></ul><ul><li>println(&quot;Constructing a new one&quot;); </li></ul><ul><li>n1 = 2; </li></ul><ul><li>d1 = 1.5; </li></ul><ul><li>} </li></ul><ul><li>int mystery1 () </li></ul><ul><li>{ </li></ul><ul><li>return int(n1*d1); </li></ul><ul><li>} </li></ul><ul><li>void mystery2 () </li></ul><ul><li>{ </li></ul><ul><li>int nMys = mystery1(); </li></ul><ul><li>d1 = nMys + d1; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>

×