User Tools

Site Tools


ch02-getting-going.html

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
ch02-getting-going.html [2017/08/13 21:54]
mithat
ch02-getting-going.html [2017/08/20 18:35] (current)
mithat [The console]
Line 21: Line 21:
 </​file>​ </​file>​
  
-This is an example of a program written in what Processing calls its Basic Mode. In Basic Mode, the program'​s execution will begin at the first statement in the source code file. It will then continue statement-by-statement until it reaches the end of the file.+This is an example of a program written in what Processing calls its //Basic Mode//. In Basic Mode, the program'​s execution will begin at the first statement in the source code file. It will then continue statement-by-statement until it reaches the end of the file.
  
 Here's a program with two statements: Here's a program with two statements:
Line 34: Line 34:
 === Processing with an entry point === === Processing with an entry point ===
  
-Processing will automatically switch to Continuous Mode when you define at least one function in your program. (This is why you are not allowed to define functions in Basic Mode.) In Continuous Mode, Processing will look for a definition of a function called **''​%%setup%%''​**,​ and it will use this function as the point where the programs ​execution begins. Below is the Continuous Mode equivalent of the Basic Mode example above.+Processing will automatically switch to //Continuous Mode// when you define at least one function in your program. (This is why you are not allowed to define functions in Basic Mode.) In Continuous Mode, Processing will look for a definition of a function called **''​%%setup%%''​**,​ and it will use this function as the point where the program'​s ​execution begins. Below is the Continuous Mode equivalent of the Basic Mode example above.
  
 <file java cranberries_continuous_mode.pde>​ <file java cranberries_continuous_mode.pde>​
Line 91: Line 91:
 If a statement is the programming equivalent of a sentence, why are semicolons used to mark the end of statements rather than periods? If a statement is the programming equivalent of a sentence, why are semicolons used to mark the end of statements rather than periods?
  
-The biggest reason for this is that the language ​on which Processing is based, Java, uses semicolons to mark the end of statements. But why does Java do this? Because the language on which a lot of Java syntax is based, C++, also uses semicolons. Why does C++ do this? Because ... , you get the idea.+The biggest reason for this is that the language ​of the platform in which Processing is built, Java, uses semicolons to mark the end of statements. But why does Java do this? Because the language on which a lot of Java syntax is based, C++, also uses semicolons. Why does C++ do this? Because ... , you get the idea.
  
 The language ALGOL, whose development began in the late 1950'​s,​ may have been the first language to use the semicolon as the statement terminator. While the semicolon is widely used for this purpose, you should note that this is by no means universal. The language ALGOL, whose development began in the late 1950'​s,​ may have been the first language to use the semicolon as the statement terminator. While the semicolon is widely used for this purpose, you should note that this is by no means universal.
Line 105: Line 105:
 ==== Comments ==== ==== Comments ====
  
-FIXME Program statements and other things written a programming language are well-suited for getting your program to do what you want. That's their whole purpose! And if you write your programs using good style, which we hope you'll learn how to do throughout this book, your programs should be relatively straight-forward for someone with a decent knowledge of the programming language to understand.+Program statements and other things written a programming language are well-suited for getting your program to do what you want. That's their whole purpose! And if you write your programs using good style, which we hope you'll learn how to do throughout this book, your programs should be relatively straight-forward for someone with a decent knowledge of the programming language to understand.
  
-However, there will be times when you will want to include text in your code to help human readers. For example, you might want to include some information about who authored the program, when it was written, licensing information,​ etc. That is what **comments** are for.+However, there will be times when you will want to include text in your code just to help human readers. For example, you might want to include some information about who authored the program, when it was written, licensing information,​ etc. That is what **comments** are for.
  
-TODO+There are three ways to write comments in Processing: the "​standard"​ comment, the multi line comment, and the doc comment.
  
 +=== "​standard"​ comments ===
 +The most common syntax for creating comments in Processing is to use a double forward slash: ''​%%//​%%''​. Anything that comes after a double slash up to the end of the line is a comment and will be ignored by the Processing compiler. Here a version of the ''​cranberries2.pde''​ program with some added some comments to identify the author and other information and explain some of the code:
 +
 +<file java cranberries2-with-comments.pde>​
 +// The Most Spectacular Program Ever
 +// Mithat Konar
 +// Aug 19, 2017
 +
 +void setup() {
 +
 +  // advise the user about nutrition:
 +  println("​Cranberries are high in antioxidants."​);​
 +  println("​Chickpeas are high in tryptophan."​);​
 +  println("​Tomatoes are high in lycopene."​);​
 +  ​
 +  println("​OK?"​); ​ // confirm with the user.
 +
 +
 +</​file>​
 +
 +This comment type also sometimes called the single line comment.
 +
 +=== multiline comment ===
 +The limitation with the "​standard"​ comment above is that its awkward to use it to write a comment that should cover many lines.
 +
 +<code java>
 +// A really awesome program
 +// by Sora Antimony
 +// Creates a pretty picture with lots of
 +// unicorns and rainbows. The unicorns
 +// dance.
 +</​code>​
 +
 +For situations like this, the multiline comment is often a better option. A multiline comment starts with ''/​*''​ and ends with ''​*/''​ --- even if the closing ''​*/''​ is several lines down.
 +
 +<code java>
 +/* A really awesome program
 +by Sora Antimony
 +Creates a pretty picture with lots of
 +unicorns and rainbows. The unicorns
 +dance. */
 +</​code>​
 +
 +A bit of formatting can make it pretty:
 +
 +<code java>
 +/* A really awesome program
 +   by Sora Antimony
 +   ​Creates a pretty picture with lots of
 +   ​unicorns and rainbows. The unicorns
 +   ​dance.
 +*/
 +</​code>​
 +
 +or 
 +
 +<code java>
 +/*
 + * A really awesome program
 + * by Sora Antimony
 + * Creates a pretty picture with lots of
 + * unicorns and rainbows. The unicorns
 + * dance.
 +*/
 +</​code>​
 +
 +=== doc comment ===
 +The doc comment is a special case of the multiline comment. It's short for "​documentation comment."​ Its rules and behavior are identical to the multiline comment with one important difference: There is a tool available to Java programs (the platform on which Processing is based) called ''​javadoc''​ that when applied to a source file will find all the doc comments and produce nicely formatted and pretty documentation from them.
 +
 +To turn a mutiline comment into a doc comment, just add an additional ''​*''​ in the opening tag:
 +
 +<code java>
 +/* I'm a multiline comment, even though I really only take up one line. */
 +/** I'm a doc comment. I'm so special that the
 +    javadoc tool will read me and extract my
 +    precious info. */
 +</​code>​
 +
 +We won't go any deeper into the when and why of doc comments as it's a bit of an advanced subject. But it's important to mention them here as you will probably see other people'​s code that uses them.
 ===== Program output ===== ===== Program output =====
  
Line 122: Line 201:
 )) ))
  
-In Processing, there is a console built into the IDE that you can use however ​you want. It is the dark box toward the bottom of the window ​(Figure TODO)Thus, when you run a Processing program from the Processing IDE, you will be able to see and use the console without having to do any extra work.+There is a console built into the Processing ​IDE should ​you want to use it. It'​s ​the dark box toward the bottom of the window. ​If it ever becomes hiddenyou can activate it by clicking on the "​Console"​ tab. This means when you run a Processing program from the Processing IDE, you will be able to see and use the console without having to do any extra work.
  
 === Outputting text === === Outputting text ===
Line 320: Line 399:
 } }
 </​code>​ </​code>​
-To draw more than one rectangle, just make more than one call to the ''​%%ellipse%%''​ function. They will be drawn in the order you write them.+To draw more than one ellipse, just make more than one call to the ''​%%ellipse%%''​ function. They will be drawn in the order you write them.
  
 <code java> <code java>
Line 338: Line 417:
 } }
 </​code>​ </​code>​
 +
 +{{::​three-ellipses.png?​nolink|Three ellipses}}
 +
 Again, parameter values may be integers of floating-point numbers. Again, parameter values may be integers of floating-point numbers.
  
 === Lines === === Lines ===
  
-TODO+To draw lines, you can use, you Processing'​s,​ guessed it, ''​%%line%%''​ function. The ''​%%line%%''​ function has four parameters: starting x coordinate, starting y coordinate, ending x coordinate, ending y coordinate.((You can add and additional pair of coordinates for doing 3D stuff, but we won't be covering that here.)) 
 + 
 +<code java> 
 +void setup() { 
 +  line(10, 10, 20, 40); 
 +  line(30, 10, 40, 40); 
 +  line(50, 10, 60, 40); 
 +  line(70, 10, 80, 40); 
 +
 +</​code>​ 
 + 
 +{{::​four-lines.png?​nolink|Four lines}} 
 + 
 +As was the case for ''​%%rectangle%%''​ and ''​%%ellipse%%'',​ the parameter values you provide to the ''​%%line%%''​ function can be floating point values as well.
  
 Processing provides a //lot// more control over what you can draw and how (including rendering images and graphic versions of text), but for the remainder of this text we will limit ourselves to the above elements. Processing provides a //lot// more control over what you can draw and how (including rendering images and graphic versions of text), but for the remainder of this text we will limit ourselves to the above elements.
Line 357: Line 452:
 void setup() { void setup() {
   // set the background color using an RGB values   // set the background color using an RGB values
-  background(00200); +  background(6464128); 
 + 
   // make the pen two pixels wide   // make the pen two pixels wide
   strokeWeight(2);​   strokeWeight(2);​
-  ​+ 
   // make the pen red color using RGB values   // make the pen red color using RGB values
   stroke(255, 0, 0);   stroke(255, 0, 0);
 +
   // make shapes fill with a dark red color using RGB values   // make shapes fill with a dark red color using RGB values
   fill(192, 0, 0);   fill(192, 0, 0);
 + 
   ellipse(30, 30, 50, 50);   ellipse(30, 30, 50, 50);
 + 
   // make the pen red color using RGB values   // make the pen red color using RGB values
   stroke(0, 255, 0);   stroke(0, 255, 0);
   // make shapes fill with a dark green color using RGB values   // make shapes fill with a dark green color using RGB values
   fill(0, 192, 0);   fill(0, 192, 0);
 + 
   ellipse(70, 70, 50, 50);   ellipse(70, 70, 50, 50);
 } }
 </​code>​ </​code>​
-In keeping with the spirit of this text being about programing ​concepts rather than the Processing language, we will not delve into this any further at this point. If you want to learn more, everything you need to know about these (and more!) is simply and concisely documented on the Processing reference Web pages (http:​%%//​%%processing.org/​reference/​) under the **Color** and **Attributes** headings.+ 
 +{{::​color-example.png?​nolink|Color example}} 
 + 
 +In keeping with the spirit of this text being about programming ​concepts rather than the Processing language, we will not delve into this any further at this point. If you want to learn more, everything you need to know about these (and more!) is simply and concisely documented on the Processing reference Web pages (http:​%%//​%%processing.org/​reference/​) under the **Color** and **Attributes** headings.
  
 === Canvas size === === Canvas size ===
Line 390: Line 489:
 </​code>​ </​code>​
 Aaah ... that's better. Now we have some room to work. Aaah ... that's better. Now we have some room to work.
 +
 +The call to the ''​%%size%%''​ function doesn'​t need to be the first statement in the ''​%%setup%%''​ function, but in this case it makes it easier for the reader if it is.
  
  
ch02-getting-going.html.1502661287.txt.gz · Last modified: 2017/08/13 21:54 by mithat