From c3b8b312a094ee1881e849978e6f0c6cfe2c4a06 Mon Sep 17 00:00:00 2001
From: Casey Reas <reas@reas.com>
Date: Fri, 16 Sep 2011 00:02:20 +0000
Subject: [PATCH] Removing a few examples for 2.0

---
 .../Basics/Arrays/Array2D/Array2D.pde         |  8 +-
 .../Color/LinearGradient/LinearGradient.pde   | 92 +++++++------------
 .../Color/RadialGradient/RadialGradient.pde   | 43 ++++-----
 .../Basics/Color/Relativity/Relativity.pde    | 14 +--
 .../Control/Conditionals1/Conditionals1.pde   |  4 +-
 .../LogicalOperators/LogicalOperators.pde     | 10 +-
 .../CharactersStrings/CharactersStrings.pde   | 86 ++++++-----------
 .../DatatypeConversion/DatatypeConversion.pde | 28 +++---
 .../Data/IntegersFloats/IntegersFloats.pde    | 10 +-
 .../Basics/Data/TrueFalse/TrueFalse.pde       | 33 ++++---
 .../Data/VariableScope/VariableScope.pde      | 36 ++++----
 .../Basics/Data/Variables/Variables.pde       | 31 +++++--
 .../Form/ShapePrimitives/ShapePrimitives.pde  | 20 ++--
 .../Basics/Input/Keyboard/Keyboard.pde        |  3 +-
 .../Input/Milliseconds/Milliseconds.pde       |  8 +-
 .../Basics/Math/Arctangent/Arctangent.pde     |  2 +-
 .../IncrementDecrement/IncrementDecrement.pde |  6 +-
 java/examples/Basics/Math/Sine/Sine.pde       | 36 +++-----
 .../Basics/Math/SineCosine/SineCosine.pde     | 12 +--
 .../Shape/DisableStyle/DisableStyle.pde       |  4 +
 .../Basics/Shape/GetChild/GetChild.pde        | 10 +-
 .../LoadDisplayShape/LoadDisplayShape.pde     |  5 +-
 .../Basics/Shape/ScaleShape/ScaleShape.pde    |  4 +
 .../Structure/Coordinates/Coordinates.pde     | 50 +++++-----
 .../Basics/Structure/Functions/Functions.pde  | 13 +--
 .../Structure/Recursion2/Recursion2.pde       | 30 ------
 .../Basics/Structure/SetupDraw/SetupDraw.pde  |  4 +-
 .../Structure/WidthHeight/WidthHeight.pde     |  4 +-
 .../Basics/Transform/Translate/Translate.pde  | 21 ++---
 .../Basics/Typography/Letters/Letters.pde     | 58 ++++--------
 .../Basics/Typography/Words/Words.pde         | 50 +++++-----
 31 files changed, 318 insertions(+), 417 deletions(-)
 delete mode 100644 java/examples/Basics/Structure/Recursion2/Recursion2.pde

diff --git a/java/examples/Basics/Arrays/Array2D/Array2D.pde b/java/examples/Basics/Arrays/Array2D/Array2D.pde
index 6739bfdaa..ef749a8f7 100644
--- a/java/examples/Basics/Arrays/Array2D/Array2D.pde
+++ b/java/examples/Basics/Arrays/Array2D/Array2D.pde
@@ -9,7 +9,7 @@
 
 float[][] distances;
 float maxDistance;
-int spacer = 10;
+int spacer;
 
 void setup() {
   size(640, 360);
@@ -17,10 +17,11 @@ void setup() {
   distances = new float[width][height];
   for (int y = 0; y < height; y++) {
     for (int x = 0; x < width; x++) {
-      float dist = dist(width/2, height/2, x, y);
-      distances[x][y] = dist/maxDistance * 255;
+      float distance = dist(width/2, height/2, x, y);
+      distances[x][y] = distance/maxDistance * 255;
     }
   }
+  spacer = 10;
   noLoop();  // Run once and stop
 }
 
@@ -35,3 +36,4 @@ void draw() {
 }
 
 
+
diff --git a/java/examples/Basics/Color/LinearGradient/LinearGradient.pde b/java/examples/Basics/Color/LinearGradient/LinearGradient.pde
index d8794a775..f83b522f5 100644
--- a/java/examples/Basics/Color/LinearGradient/LinearGradient.pde
+++ b/java/examples/Basics/Color/LinearGradient/LinearGradient.pde
@@ -1,81 +1,55 @@
 /**
  * Simple Linear Gradient 
- * by Ira Greenberg. 
  * 
- * Using the convenient red(), green() 
- * and blue() component functions,
- * generate some linear gradients.
+ * The lerpColor() function is useful for interpolating
+ * between two colors.
  */
 
-// constants
+// Constants
 int Y_AXIS = 1;
 int X_AXIS = 2;
-color b1, b2, c1, c2, c3, c4, c5, c6;
+color b1, b2, c1, c2;
 
-void setup(){
+void setup() {
   size(640, 360);
 
-  // create some gradients
+  // Define colors
+  b1 = color(255);
+  b2 = color(0);
+  c1 = color(204, 102, 0);
+  c2 = color(0, 102, 153);
 
-  b1 = color(190, 190, 190);
-  b2 = color(20, 20, 20);
-
-
-  c1 = color(255, 120, 0);
-  c2 = color(10, 45, 255);
-  c3 = color(10, 255, 15);
-  c4 = color(125, 2, 140);
-  c5 = color(255, 255, 0);
-  c6 = color(25, 255, 200);
   noLoop();
 }
 
 void draw() {
-    // background
-    setGradient(0, 0, width, height, b1, b2, Y_AXIS);
-    //center squares
-  setGradient(25, 25, 75, 75, c1, c2, Y_AXIS);
-  setGradient(100, 25, 75, 75, c3, c4, X_AXIS);
-  setGradient(25, 100, 75, 75, c2, c5, X_AXIS);
-  setGradient(100, 100, 75, 75, c4, c6, Y_AXIS); 
+  // Background
+  setGradient(0, 0, width/2, height, b1, b2, X_AXIS);
+  setGradient(width/2, 0, width/2, height, b2, b1, X_AXIS);
+  // Foreground
+  setGradient(50, 90, 540, 80, c1, c2, Y_AXIS);
+  setGradient(50, 190, 540, 80, c2, c1, X_AXIS);
 }
 
-void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ){
-  // calculate differences between color components 
-  float deltaR = red(c2)-red(c1);
-  float deltaG = green(c2)-green(c1);
-  float deltaB = blue(c2)-blue(c1);
+void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) {
 
-  // choose axis
-  if(axis == Y_AXIS){
-    /*nested for loops set pixels
-     in a basic table structure */
-    // column
-    for (int i=x; i<=(x+w); i++){
-      // row
-      for (int j = y; j<=(y+h); j++){
-        color c = color(
-        (red(c1)+(j-y)*(deltaR/h)),
-        (green(c1)+(j-y)*(deltaG/h)),
-        (blue(c1)+(j-y)*(deltaB/h)) 
-          );
-        set(i, j, c);
-      }
-    }  
+  noFill();
+
+  if (axis == Y_AXIS) {  // Top to bottom gradient
+    for (int i = y; i <= y+h; i++) {
+      float inter = map(i, y, y+h, 0, 1);
+      color c = lerpColor(c1, c2, inter);
+      stroke(c);
+      line(x, i, x+w, i);
+    }
   }  
-  else if(axis == X_AXIS){
-    // column 
-    for (int i=y; i<=(y+h); i++){
-      // row
-      for (int j = x; j<=(x+w); j++){
-        color c = color(
-        (red(c1)+(j-x)*(deltaR/h)),
-        (green(c1)+(j-x)*(deltaG/h)),
-        (blue(c1)+(j-x)*(deltaB/h)) 
-          );
-        set(j, i, c);
-      }
-    }  
+  else if (axis == X_AXIS) {  // Left to right gradient
+    for (int i = x; i <= x+w; i++) {
+      float inter = map(i, x, x+w, 0, 1);
+      color c = lerpColor(c1, c2, inter);
+      stroke(c);
+      line(i, y, i, y+h);
+    }
   }
 }
 
diff --git a/java/examples/Basics/Color/RadialGradient/RadialGradient.pde b/java/examples/Basics/Color/RadialGradient/RadialGradient.pde
index 2c0b7c097..ed358a1e5 100644
--- a/java/examples/Basics/Color/RadialGradient/RadialGradient.pde
+++ b/java/examples/Basics/Color/RadialGradient/RadialGradient.pde
@@ -1,43 +1,36 @@
 /**
- * Inspired by Ira Greenberg's RadialGradient sketch,
- * but uses a different method for the gradients.
+ * Radial Gradient. 
+ * 
+ * Draws are series of concentric circles to create a gradient 
+ * from one color to another.
  */
 
-int dim = 40;
+int dim;
 
 void setup() {
   size(640, 360);
+  dim = width/2;
   background(0);
-  smooth();
+  colorMode(HSB, 360, 100, 100);
   noStroke();
   ellipseMode(RADIUS);
+  frameRate(1);
+}
 
-  // create a simple table of gradients
-  int rows = height / dim;
-  int cols = width / dim;
-
-  for (int row = 0; row < rows; row++) {
-    for (int col = 0; col < cols; col++) {
-      drawGradient(col*dim + dim/2, row*dim + dim/2);
-    }
-  }
+void draw() {
+  background(0);
+  for (int x = 0; x <= width; x+=dim) {
+    drawGradient(x, height/2);
+  } 
 }
 
 void drawGradient(float x, float y) {
-  int radius = dim/2 - 2;
-  float r1 = random(255);
-  float g1 = random(255);
-  float b1 = random(255);
-  float dr = (random(255) - r1) / radius;
-  float dg = (random(255) - g1) / radius;
-  float db = (random(255) - b1) / radius;
-  
+  int radius = dim/2;
+  float h = random(0, 360);
   for (int r = radius; r > 0; --r) {
-    fill(r1, g1, b1);
+    fill(h, 90, 90);
     ellipse(x, y, r, r);
-    r1 += dr;
-    g1 += dg;
-    b1 += db;
+    h = (h + 1) % 360;
   }
 }
 
diff --git a/java/examples/Basics/Color/Relativity/Relativity.pde b/java/examples/Basics/Color/Relativity/Relativity.pde
index 9332e9baf..6ca87cd70 100644
--- a/java/examples/Basics/Color/Relativity/Relativity.pde
+++ b/java/examples/Basics/Color/Relativity/Relativity.pde
@@ -1,27 +1,27 @@
 /**
  * Relativity. 
  * 
- * Each color is perceived in relation to other colors. 
- * The top and bottom bars each contain the same component colors,
- * but a different display order causes individual colors to appear differently. 
+ * Each color is perceived in relation to other colors. The top and bottom 
+ * bars each contain the same component colors, but a different display order 
+ * causes individual colors to appear differently. 
  */
  
 color a, b, c, d, e;
 
 void setup() {
-  size(200, 200);
+  size(640, 360);
   noStroke();
   a = color(165, 167, 20);
   b = color(77, 86, 59);
   c = color(42, 106, 105);
   d = color(165, 89, 20);
   e = color(146, 150, 127);
-  noLoop();
+  noLoop();  // Draw only one time
 }
 
 void draw() {
-  drawBand(a, b, c, d, e, 0, width/50);
-  drawBand(c, a, d, b, e, height/2, width/50);
+  drawBand(a, b, c, d, e, 0, width/128);
+  drawBand(c, a, d, b, e, height/2, width/128);
 }
 
 void drawBand(color v, color w, color x, color y, color z, int ypos, int barWidth) {
diff --git a/java/examples/Basics/Control/Conditionals1/Conditionals1.pde b/java/examples/Basics/Control/Conditionals1/Conditionals1.pde
index 7789f1f95..ea70e67b8 100644
--- a/java/examples/Basics/Control/Conditionals1/Conditionals1.pde
+++ b/java/examples/Basics/Control/Conditionals1/Conditionals1.pde
@@ -17,10 +17,10 @@ for(int i = 10; i < width; i += 10) {
   // If 'i' divides by 20 with no remainder draw the first line
   // else draw the second line
   if(i%20 == 0) {
-    stroke(153);
+    stroke(255);
     line(i, 80, i, height/2);
   } else {
-    stroke(102);
+    stroke(153);
     line(i, 20, i, 180); 
   }
 }
diff --git a/java/examples/Basics/Control/LogicalOperators/LogicalOperators.pde b/java/examples/Basics/Control/LogicalOperators/LogicalOperators.pde
index eb6ed3df5..eb20ea7bc 100644
--- a/java/examples/Basics/Control/LogicalOperators/LogicalOperators.pde
+++ b/java/examples/Basics/Control/LogicalOperators/LogicalOperators.pde
@@ -1,5 +1,5 @@
 /**
- * Logical testerators. 
+ * Logical Operators. 
  * 
  * The logical operators for AND (&&) and OR (||) are used to 
  * combine simple relational statements into more complex expressions.
@@ -11,7 +11,7 @@ background(126);
 
 boolean test = false;
 
-for(int i = 5; i <= height; i += 5) {
+for (int i = 5; i <= height; i += 5) {
   // Logical AND
   stroke(0);
   if((i > 35) && (i < 100)) {
@@ -21,21 +21,21 @@ for(int i = 5; i <= height; i += 5) {
   
   // Logical OR
   stroke(76);
-  if((i <= 35) || (i >= 100)) {
+  if ((i <= 35) || (i >= 100)) {
     line(width/2, i, width, i);
     test = true;
   }
   
   // Testing if a boolean value is "true"
   // The expression "if(test)" is equivalent to "if(test == true)"
-  if(test) {
+  if (test) {
     stroke(0);
     point(width/3, i);
   }
     
   // Testing if a boolean value is "false"
   // The expression "if(!test)" is equivalent to "if(test == false)"
-  if(!test) {
+  if (!test) {
     stroke(255);
     point(width/4, i);
   }
diff --git a/java/examples/Basics/Data/CharactersStrings/CharactersStrings.pde b/java/examples/Basics/Data/CharactersStrings/CharactersStrings.pde
index c5b528562..bbc9049a7 100644
--- a/java/examples/Basics/Data/CharactersStrings/CharactersStrings.pde
+++ b/java/examples/Basics/Data/CharactersStrings/CharactersStrings.pde
@@ -1,81 +1,47 @@
 /**
  * Characters Strings. 
- * 
- * Click on the image to give it focus and then type letters to
- * shift the location of the image. 
- * Characters are typographic symbols such as A, d, and %.  
+ *  
  * The character datatype, abbreviated as char, stores letters and 
  * symbols in the Unicode format, a coding system developed to support 
  * a variety of world languages. Characters are distinguished from other
- * symbols by putting them between single quotes ('P'). 
+ * symbols by putting them between single quotes ('P').<br />
+ * <br />
  * A string is a sequence of characters. A string is noted by surrounding 
  * a group of letters with double quotes ("Processing"). 
  * Chars and strings are most often used with the keyboard methods, 
- * to display text to the screen, and to load images or files. 
+ * to display text to the screen, and to load images or files.<br />
+ * <br />
+ * The String datatype must be capitalized because it is a complex datatype.
+ * A String is actually a class with its own methods, some of which are
+ * featured below. 
  */
- 
-PImage frog;
-PFont font;
-int xoffset;
+
 char letter;
+String words = "Begin...";
 
-void setup() 
-{
-  size(200, 200, P2D);
-
-  font = loadFont("Eureka-90.vlw"); 
-  textFont(font); 
-  // Draw text more accurately and efficiently.
-  textMode(SCREEN);
-  textAlign(CENTER);
-  
-  // The String datatype must be capitalized because it is a complex datatype.
-  // A String is actually a class with its own methods, some of which are
-  // featured below.
-  String name = "rathausFrog";
-  String extension = ".jpg";
-  int nameLength = name.length();
-  println("The length of " + name + " is " + nameLength + ".");
-  name = name.concat(extension);
-  nameLength = name.length();
-  println("The length of " + name + " is " + nameLength + ".");
-
-  // The parameter for the loadImage() method must be a string
-  // This line could also be written "frog = loadImage("rathausFrog.jpg");
-  frog = loadImage(name);
+void setup() {
+  size(640, 360);
 }
 
-void draw() 
-{
-  background(51); // Set background to dark gray
+void draw() {
+  background(0); // Set background to black
 
-  // Same as image(frog, xoffset, 0), but more efficient 
-  // because no transformations or tint() or smooth() are used.
-  set(xoffset, 0, frog);
-
-  // Draw an X
-  line(0, 0, width, height);  
-  line(0, height, width, 0); 
-
-//  // Get the width of the letter
-//  float letterWidth = textWidth(letter);
-//
   // Draw the letter to the center of the screen
-  text(letter, width/2, height/2);
+  textSize(12);
+  text("Click on the program, then type to add to the String", 50, 50);
+  text("Current key: " + letter, 50, 70);
+  text("The String is " + words.length() +  " characters long", 50, 90);
+  
+  textSize(36);
+  text(words, 50, 120, 540, 300);
 }
 
-void keyPressed()
-{
-  // The variable "key" always contains the value of the most recent key pressed.
-  // If the key is an upper or lowercase letter between 'A' and 'z'
-  // the image is shifted to the corresponding value of that key
-  if (key >= 'A' && key <= 'z') {
-    // Map the index of the key pressed from the range between 'A' and 'z',
-    // into a position for the left edge of the image. The maximum xoffset
-    // is the width of the drawing area minus the size of the image.
-    xoffset = int(map(key, 'A', 'z', 0, width - frog.width));
-    // Update the letter shown to the screen
+void keyPressed() {
+  // The variable "key" always contains the value 
+  // of the most recent key pressed.
+  if ((key >= 'A' && key <= 'z') || key == ' ') {
     letter = key;
+    words = words + key;
     // Write the letter to the console
     println(key);
   }
diff --git a/java/examples/Basics/Data/DatatypeConversion/DatatypeConversion.pde b/java/examples/Basics/Data/DatatypeConversion/DatatypeConversion.pde
index 381afd181..2c481b665 100644
--- a/java/examples/Basics/Data/DatatypeConversion/DatatypeConversion.pde
+++ b/java/examples/Basics/Data/DatatypeConversion/DatatypeConversion.pde
@@ -7,22 +7,26 @@
  * The conversion functions include int(), float(), char(), byte(), and others. 
  */
  
-size(200, 200);
-background(51);
+size(640, 360);
+background(0);
 noStroke();
 
-char c;    // Chars are used for storing typographic symbols
+char c;    // Chars are used for storing alphanumeric symbols
 float f;   // Floats are decimal numbers
-int i;     // Ints are values between 2,147,483,647 and -2147483648
+int i;     // Integers are values between 2,147,483,647 and -2147483648
 byte b;    // Bytes are values between -128 and 128
 
 c = 'A';
-f = float(c);     // Sets f = 65.0
-i = int(f * 1.4); // Sets i to 91
-b = byte(c / 2);  // Sets b to 32
+f = float(c);      // Sets f = 65.0
+i = int(f * 1.4);  // Sets i to 91
+b = byte(c / 2);   // Sets b to 32
 
-rect(f, 0, 40, 66);
-fill(204);
-rect(i, 67, 40, 66);
-fill(255);
-rect(b, 134, 40, 66);
+println(f);
+println(i);
+println(b);
+
+textSize(24);
+text("The value of c is " + c, 50, 100);
+text("The value of f is " + f, 50, 150);
+text("The value of i is " + i, 50, 200);
+text("The value of b is " + b, 50, 250);
diff --git a/java/examples/Basics/Data/IntegersFloats/IntegersFloats.pde b/java/examples/Basics/Data/IntegersFloats/IntegersFloats.pde
index 87bf67f19..19b13cb48 100644
--- a/java/examples/Basics/Data/IntegersFloats/IntegersFloats.pde
+++ b/java/examples/Basics/Data/IntegersFloats/IntegersFloats.pde
@@ -11,16 +11,14 @@
 int a = 0;      // Create a variable "a" of the datatype "int"
 float b = 0.0;  // Create a variable "b" of the datatype "float"
 
-void setup()
-{
-  size(200, 200);
+void setup() {
+  size(640, 360);
   stroke(255);
   frameRate(30);
 }
 
-void draw()
-{
-  background(51);
+void draw() {
+  background(0);
   
   a = a + 1;
   b = b + 0.2; 
diff --git a/java/examples/Basics/Data/TrueFalse/TrueFalse.pde b/java/examples/Basics/Data/TrueFalse/TrueFalse.pde
index c4bb0531f..d7d6c02ee 100644
--- a/java/examples/Basics/Data/TrueFalse/TrueFalse.pde
+++ b/java/examples/Basics/Data/TrueFalse/TrueFalse.pde
@@ -1,34 +1,37 @@
 /**
  * True/False. 
  * 
- * Boolean data is one bit of information. True or false. 
+ * A Boolean variable has only two possible values: true or false. 
  * It is common to use Booleans with control statements to 
  * determine the flow of a program. In this example, when the
  * boolean value "x" is true, vertical black lines are drawn and when
  * the boolean value "x" is false, horizontal gray lines are drawn. 
  */
  
-boolean x = false;
+boolean b = false;
 
-size(200, 200);
+size(640, 360);
 background(0);
-stroke(0);
+stroke(255);
 
-for (int i = 1; i < width; i += 2) 
-{
-  if (i < width/2) {
-    x = true;
+int d = 20;
+int middle = width/2;;
+
+for (int i = d; i <= width; i += d) {
+  
+  if (i < middle) {
+    b = true;
   } else {
-    x = false;
+    b = false;
   }
   
-  if (x) {
-    stroke(255);
-    line(i, 1, i, height-1);
+  if (b == true) {
+    // Vertical line
+    line(i, d, i, height-d);
   }
   
-  if (!x) {
-    stroke(126);
-    line(width/2 , i, width-2, i);
+  if (b == false) {
+    // Horizontal line
+    line(middle, i - middle + d, width-d, i - middle + d);
   }
 }
diff --git a/java/examples/Basics/Data/VariableScope/VariableScope.pde b/java/examples/Basics/Data/VariableScope/VariableScope.pde
index 8c2ae3559..9141c157a 100644
--- a/java/examples/Basics/Data/VariableScope/VariableScope.pde
+++ b/java/examples/Basics/Data/VariableScope/VariableScope.pde
@@ -1,39 +1,37 @@
 /**
  * Variable Scope. 
  * 
- * Variables may either have a global or local "scope". 
+ * Variables have a global or local "scope". 
  * For example, variables declared within either the
- * setup() or loop() functions may be only used in these
+ * setup() or draw() functions may be only used in these
  * functions. Global variables, variables declared outside
- * of setup() and loop(), may be used anywhere within the program.
+ * of setup() and draw(), may be used anywhere within the program.
  * If a local variable is declared with the same name as a
  * global variable, the program will use the local variable to make 
- * its calculations within the current scope. Variables may be localized
- * within classes, functions, and iterative statements. 
+ * its calculations within the current scope. Variables are localized
+ * within each block, the space between a { and }. 
  */
  
-int a = 20;  // Create a global variable "a"
+int a = 80;  // Create a global variable "a"
 
-void setup() 
-{
-  size(200, 200);
-  background(51);
+void setup() {
+  size(640, 360);
+  background(0);
   stroke(255);
   noLoop();
 }
 
-void draw()
-{
+void draw() {
   // Draw a line using the global variable "a"
   line(a, 0, a, height);
   
   // Create a new variable "a" local to the for() statement 
-  for(int a=50; a<80; a += 2) {
+  for (int a = 120; a < 200; a += 2) {
     line(a, 0, a, height);
   }
   
-  // Create a new variable "a" local to the loop() method
-  int a = 100;
+  // Create a new variable "a" local to the draw() function
+  int a = 300;
   // Draw a line using the new local variable "a"
   line(a, 0, a, height);  
   
@@ -44,16 +42,14 @@ void draw()
   drawYetAnotherLine();
 }
 
-void drawAnotherLine() 
-{
+void drawAnotherLine() {
   // Create a new variable "a" local to this method
-  int a = 185;
+  int a = 320;
   // Draw a line using the local variable "a"
   line(a, 0, a, height);
 }
 
-void drawYetAnotherLine() 
-{
+void drawYetAnotherLine() {
   // Because no new local variable "a" is set, 
   // this lines draws using the original global
   // variable "a" which is set to the value 20.
diff --git a/java/examples/Basics/Data/Variables/Variables.pde b/java/examples/Basics/Data/Variables/Variables.pde
index 597e72508..ea35e2e8e 100644
--- a/java/examples/Basics/Data/Variables/Variables.pde
+++ b/java/examples/Basics/Data/Variables/Variables.pde
@@ -2,24 +2,39 @@
  * Variables. 
  * 
  * Variables are used for storing values. In this example, change 
- * the values of variables 'a' and 'b' to affect the composition. 
+ * the values of variables to affect the composition. 
  */
  
 size(640, 360);
 background(0);
 stroke(153);
-strokeWeight(2);
+strokeWeight(4);
+strokeCap(SQUARE);
 
-int a = 60;
-int b = 100;
-int c = 200;
-int d = 120;
+int a = 50;
+int b = 120;
+int c = 180;
 
 line(a, b, a+c, b);
+line(a, b+10, a+c, b+10);
+line(a, b+20, a+c, b+20);
+line(a, b+30, a+c, b+30);
+
+a = a + c;
+b = height-b;
 
-a += 100;
-b += 50;
 line(a, b, a+c, b);
+line(a, b+10, a+c, b+10);
+line(a, b+20, a+c, b+20);
+line(a, b+30, a+c, b+30);
+
+a = a + c;
+b = height-b;
+
+line(a, b, a+c, b);
+line(a, b+10, a+c, b+10);
+line(a, b+20, a+c, b+20);
+line(a, b+30, a+c, b+30);
 
 
 
diff --git a/java/examples/Basics/Form/ShapePrimitives/ShapePrimitives.pde b/java/examples/Basics/Form/ShapePrimitives/ShapePrimitives.pde
index 198f56763..223be739a 100644
--- a/java/examples/Basics/Form/ShapePrimitives/ShapePrimitives.pde
+++ b/java/examples/Basics/Form/ShapePrimitives/ShapePrimitives.pde
@@ -2,24 +2,32 @@
  * Shape Primitives. 
  * 
  * The basic shape primitive functions are triangle(),
- * rect(), quad(), and ellipse(). Squares are made
- * with rect() and circles are made with
- * ellipse(). Each of these functions requires a number
- * of parameters to determine the shape's position and size. 
+ * rect(), quad(), ellipse(), and arc(). Squares are made
+ * with rect() and circles are made with ellipse(). Each 
+ * of these functions requires a number of parameters to 
+ * determine the shape's position and size. 
  */
- 
+
 size(640, 360);
 smooth(); 
 background(0);
 noStroke();
+
 fill(204);
 triangle(18, 18, 18, 360, 81, 360);
-fill(153);
+
+fill(102);
 rect(81, 81, 63, 63);
+
 fill(204);
 quad(189, 18, 216, 18, 216, 360, 144, 360);
+
 fill(255);
 ellipse(252, 144, 72, 72);
+
 fill(204);
 triangle(288, 18, 351, 360, 288, 360); 
 
+fill(255);
+arc(479, 300, 280, 280, PI, TWO_PI);
+
diff --git a/java/examples/Basics/Input/Keyboard/Keyboard.pde b/java/examples/Basics/Input/Keyboard/Keyboard.pde
index 16014dee0..f2c6da22f 100644
--- a/java/examples/Basics/Input/Keyboard/Keyboard.pde
+++ b/java/examples/Basics/Input/Keyboard/Keyboard.pde
@@ -3,8 +3,7 @@
  * 
  * Click on the image to give it focus and press the letter keys 
  * to create forms in time and space. Each key has a unique identifying 
- * number called its ASCII value. These numbers can be used to position 
- * shapes in space. 
+ * number. These numbers can be used to position shapes in space. 
  */
 
 int rectWidth;
diff --git a/java/examples/Basics/Input/Milliseconds/Milliseconds.pde b/java/examples/Basics/Input/Milliseconds/Milliseconds.pde
index 5af9a69b9..45977d990 100644
--- a/java/examples/Basics/Input/Milliseconds/Milliseconds.pde
+++ b/java/examples/Basics/Input/Milliseconds/Milliseconds.pde
@@ -9,16 +9,14 @@
  
 float scale;
 
-void setup()
-{
+void setup() {
   size(640, 360);
   noStroke();
   scale = width/20;
 }
 
-void draw()
-{ 
-  for(int i = 0; i < scale; i++) {
+void draw() { 
+  for (int i = 0; i < scale; i++) {
     colorMode(RGB, (i+1) * scale * 10);
     fill(millis()%((i+1) * scale * 10));
     rect(i*scale, 0, scale, height);
diff --git a/java/examples/Basics/Math/Arctangent/Arctangent.pde b/java/examples/Basics/Math/Arctangent/Arctangent.pde
index e299032e1..cad5bda30 100644
--- a/java/examples/Basics/Math/Arctangent/Arctangent.pde
+++ b/java/examples/Basics/Math/Arctangent/Arctangent.pde
@@ -50,7 +50,7 @@ class Eye {
     fill(255);
     ellipse(0, 0, size, size);
     rotate(angle);
-    fill(153);
+    fill(153, 204, 0);
     ellipse(size/4, 0, size/2, size/2);
     popMatrix();
   }
diff --git a/java/examples/Basics/Math/IncrementDecrement/IncrementDecrement.pde b/java/examples/Basics/Math/IncrementDecrement/IncrementDecrement.pde
index 7f1044cd2..49b115248 100644
--- a/java/examples/Basics/Math/IncrementDecrement/IncrementDecrement.pde
+++ b/java/examples/Basics/Math/IncrementDecrement/IncrementDecrement.pde
@@ -9,8 +9,7 @@ int a;
 int b;
 boolean direction;
 
-void setup()
-{
+void setup() {
   size(640, 360);
   colorMode(RGB, width);
   a = 0;
@@ -19,8 +18,7 @@ void setup()
   frameRate(30);
 }
 
-void draw()
-{
+void draw() {
   a++;
   if(a > width) {
     a = 0;
diff --git a/java/examples/Basics/Math/Sine/Sine.pde b/java/examples/Basics/Math/Sine/Sine.pde
index f574d1ea9..bdfd42dd0 100644
--- a/java/examples/Basics/Math/Sine/Sine.pde
+++ b/java/examples/Basics/Math/Sine/Sine.pde
@@ -4,37 +4,29 @@
  * Smoothly scaling size with the sin() function. 
  */
  
-float diameter = 84.0; 
+float diameter; 
 float angle = 0;
 
-void setup() 
-{
+void setup() {
   size(640, 360);
+  diameter = height - 10;
   noStroke();
   smooth();
+  noStroke();
+  fill(255, 204, 0);
 }
 
-void draw() 
-{ 
-  background(153);
+void draw() {
   
-  translate(width * 0.3, height * 0.5);
-  
-  fill(255);
-  ellipse(0, 0, 16, 16);
-  
-  float angleOffset = 0;
-  fill(51);
+  background(0);
 
-  for (int i = 0; i < 5; i++) {
-    pushMatrix();
-    rotate(angleOffset + -45);
-    ellipse(-116, 0, diameter, diameter);
-    popMatrix();
-    angleOffset += TWO_PI/5;
-  }
-
-  diameter = 34 * sin(angle) + 168;
+  float d1 = 10 + (sin(angle) * diameter/2) + diameter/2;
+  float d2 = 10 + (sin(angle + PI/2) * diameter/2) + diameter/2;
+  float d3 = 10 + (sin(angle + PI) * diameter/2) + diameter/2;
+  
+  ellipse(0, height/2, d1, d1);
+  ellipse(width/2, height/2, d2, d2);
+  ellipse(width, height/2, d3, d3);
   
   angle += 0.02;
 }
diff --git a/java/examples/Basics/Math/SineCosine/SineCosine.pde b/java/examples/Basics/Math/SineCosine/SineCosine.pde
index 07b66dbaa..2ff6bb864 100644
--- a/java/examples/Basics/Math/SineCosine/SineCosine.pde
+++ b/java/examples/Basics/Math/SineCosine/SineCosine.pde
@@ -11,16 +11,14 @@ float x1, x2, y1, y2;
 float angle1, angle2;
 float scalar = 70;
 
-void setup() 
-{
+void setup() {
   size(640, 360);
   noStroke();
   smooth();
   rectMode(CENTER);
 }
 
-void draw() 
-{
+void draw() {
   background(0);
 
   float ang1 = radians(angle1);
@@ -32,14 +30,14 @@ void draw()
   y1 = height/2 + (scalar * sin(ang1));
   y2 = height/2 + (scalar * sin(ang2));
   
-  fill(51);
+  fill(255);
   rect(width*0.5, height*0.5, 140, 140);
 
-  fill(255);
+  fill(0, 102, 153);
   ellipse(x1, height*0.5 - 120, scalar, scalar);
   ellipse(x2, height*0.5 + 120, scalar, scalar);
   
-  fill(153);
+  fill(255, 204, 0);
   ellipse(width*0.5 - 120, y1, scalar, scalar);
   ellipse(width*0.5 + 120, y2, scalar, scalar);
 
diff --git a/java/examples/Basics/Shape/DisableStyle/DisableStyle.pde b/java/examples/Basics/Shape/DisableStyle/DisableStyle.pde
index 656132ce2..5ea564470 100644
--- a/java/examples/Basics/Shape/DisableStyle/DisableStyle.pde
+++ b/java/examples/Basics/Shape/DisableStyle/DisableStyle.pde
@@ -8,6 +8,10 @@
  * method turns it back on.
  */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="bot1.svg"; */ 
+
 PShape bot;
 
 void setup() {
diff --git a/java/examples/Basics/Shape/GetChild/GetChild.pde b/java/examples/Basics/Shape/GetChild/GetChild.pde
index 0b9b9d393..edcc58b43 100644
--- a/java/examples/Basics/Shape/GetChild/GetChild.pde
+++ b/java/examples/Basics/Shape/GetChild/GetChild.pde
@@ -8,6 +8,10 @@
  * two new PShape objects by extracting the data from two states.
  */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="usa-wikipedia.svg"; */ 
+
 PShape usa;
 PShape michigan;
 PShape ohio;
@@ -17,8 +21,6 @@ void setup() {
   usa = loadShape("usa-wikipedia.svg");
   michigan = usa.getChild("MI");
   ohio = usa.getChild("OH");
-  smooth();  // Improves the drawing quality of the SVG
-  noLoop();
 }
 
 void draw() {
@@ -33,7 +35,7 @@ void draw() {
   fill(0, 51, 102);
   noStroke();
   // Draw a single state
-  shape(michigan, -600, -180); // Go Blue!
+  shape(michigan, -600, -180); // Wolverines!
   
   // Disable the colors found in the SVG file
   ohio.disableStyle();
@@ -41,5 +43,5 @@ void draw() {
   fill(153, 0, 0);
   noStroke();
   // Draw a single state
-  shape(ohio, -600, -180);  // Boo Buckeyes!
+  shape(ohio, -600, -180);  // Buckeyes!
 }
diff --git a/java/examples/Basics/Shape/LoadDisplayShape/LoadDisplayShape.pde b/java/examples/Basics/Shape/LoadDisplayShape/LoadDisplayShape.pde
index 3d18b4b4a..855093eaf 100644
--- a/java/examples/Basics/Shape/LoadDisplayShape/LoadDisplayShape.pde
+++ b/java/examples/Basics/Shape/LoadDisplayShape/LoadDisplayShape.pde
@@ -8,6 +8,10 @@
  * it'll work for SVGs created with anything else. 
  */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="bot1.svg"; */ 
+
 PShape bot;
 
 void setup() {
@@ -16,7 +20,6 @@ void setup() {
   // The file "bot1.svg" must be in the data folder
   // of the current sketch to load successfully
   bot = loadShape("bot1.svg");
-  noLoop(); // Only run draw() once
 } 
 
 void draw(){
diff --git a/java/examples/Basics/Shape/ScaleShape/ScaleShape.pde b/java/examples/Basics/Shape/ScaleShape/ScaleShape.pde
index 879f20b68..d61911f3f 100644
--- a/java/examples/Basics/Shape/ScaleShape/ScaleShape.pde
+++ b/java/examples/Basics/Shape/ScaleShape/ScaleShape.pde
@@ -7,6 +7,10 @@
  * remain smooth at any size.
  */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="bot1.svg"; */ 
+
 PShape bot;
 
 void setup() {
diff --git a/java/examples/Basics/Structure/Coordinates/Coordinates.pde b/java/examples/Basics/Structure/Coordinates/Coordinates.pde
index c63c147b7..01d47ce41 100644
--- a/java/examples/Basics/Structure/Coordinates/Coordinates.pde
+++ b/java/examples/Basics/Structure/Coordinates/Coordinates.pde
@@ -1,41 +1,37 @@
 /**
  * Coordinates. 
  * 
- * All shapes drawn to the screen have a position that is specified as a coordinate.
- * All coordinates are measured as the distance from the origin in units of pixels.
- * The origin [0, 0] is the coordinate is in the upper left of the window
- * and the coordinate in the lower right is [width-1, height-1].  
+ * All shapes drawn to the screen have a position that is 
+ * specified as a coordinate. All coordinates are measured 
+ * as the distance from the origin in units of pixels.
+ * The origin [0, 0] is the coordinate is in the upper left 
+ * of the window and the coordinate in the lower right is 
+ * [width-1, height-1].  
  */
 
 // Sets the screen to be 200, 200, so the width of the window is 200 pixels
 // and the height of the window is 200 pixels
-size(200, 200);
+size(640, 360);
 background(0);
 noFill();
-stroke(255);
+
 
 // The two parameters of the point() method each specify coordinates.
-// This call to point() draws at the position [100, 100]
-point(width/2, height/2);
-
-// Draws to the position [100, 50]
-point(width/2, height/4); 
-
-// It is also possible to specify a point with any parameter, 
-// but only coordinates on the screen are visible
-point(60, 30);
-point(60, 134);
-point(160, 50);
-point(280, -800);
-point(201, 100);
+// The first parameter is the x-coordinate and the second is the Y 
+stroke(255);
+point(width * 0.5, height * 0.5);
+point(width * 0.5, height * 0.25); 
 
 // Coordinates are used for drawing all shapes, not just points.
-// Parameters for different methods are used for different purposes.
-// For example, the first two parameters to line() specify the coordinates of the 
-// first point and the second two parameters specify the second point
-stroke(204);
-line(0, 73, width, 73);
+// Parameters for different functions are used for different purposes.
+// For example, the first two parameters to line() specify 
+// the coordinates of the first point and the second two parameters 
+// specify the second point
+stroke(0, 153, 255);
+line(0, height*0.33, width, height*0.33);
 
-// The first two parameters to rect() are coordinates
-// and the second two are the width and height
-rect(110, 55, 40, 36);
+// By defaulty, the first two parameters to rect() are the 
+// coordinates of the upper-left corner and the second pair
+// is the width and height
+stroke(255, 153, 0);
+rect(width*0.25, height*0.1, width * 0.5, height * 0.8);
diff --git a/java/examples/Basics/Structure/Functions/Functions.pde b/java/examples/Basics/Structure/Functions/Functions.pde
index 79938a7fd..33d79d48e 100644
--- a/java/examples/Basics/Structure/Functions/Functions.pde
+++ b/java/examples/Basics/Structure/Functions/Functions.pde
@@ -6,8 +6,7 @@
  * rings for each target. 
  */
 
-void setup() 
-{
+void setup() {
   size(640, 360);
   background(51);
   noStroke();
@@ -15,19 +14,17 @@ void setup()
   noLoop();
 }
 
-void draw() 
-{
+void draw() {
   drawTarget(width*0.25, height*0.4, 200, 4);
   drawTarget(width*0.5, height*0.5, 300, 10);
   drawTarget(width*0.75, height*0.3, 120, 6);
 }
 
-void drawTarget(float xloc, float yloc, int size, int num) 
-{
+void drawTarget(float xloc, float yloc, int size, int num) {
   float grayvalues = 255/num;
   float steps = size/num;
-  for(int i=0; i<num; i++) {
+  for (int i = 0; i < num; i++) {
     fill(i*grayvalues);
-    ellipse(xloc, yloc, size-i*steps, size-i*steps);
+    ellipse(xloc, yloc, size - i*steps, size - i*steps);
   }
 }
diff --git a/java/examples/Basics/Structure/Recursion2/Recursion2.pde b/java/examples/Basics/Structure/Recursion2/Recursion2.pde
deleted file mode 100644
index 701930ffa..000000000
--- a/java/examples/Basics/Structure/Recursion2/Recursion2.pde
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Recursion. 
- * 
- * A demonstration of recursion, which means functions call themselves. 
- * Notice how the drawCircle() function calls itself at the end of its block. 
- * It continues to do this until the variable "level" is equal to 1. 
- */
- 
-void setup() {
-  size(640, 360);
-  noStroke();
-  smooth();
-  drawCircle(width*0.5, height*0.5, 160, 8);
-}
-
-void drawCircle(float x, float y, int radius, int level) {          
-  float tt = 126 * level/6.0;
-  fill(tt, 153);
-  ellipse(x, y, radius*2, radius*2);      
-  if(level > 1) {
-    level = level - 1;
-    int num = int(random(2, 6));
-    for(int i=0; i<num; i++) {
-      float a = random(0, TWO_PI);
-      float nx = x + cos(a) * 6.0 * level;
-      float ny = y + sin(a) * 6.0 * level;
-      drawCircle(nx, ny, radius/2, level);
-    }
-  }
-}
diff --git a/java/examples/Basics/Structure/SetupDraw/SetupDraw.pde b/java/examples/Basics/Structure/SetupDraw/SetupDraw.pde
index 6fcfcef58..f0441e121 100644
--- a/java/examples/Basics/Structure/SetupDraw/SetupDraw.pde
+++ b/java/examples/Basics/Structure/SetupDraw/SetupDraw.pde
@@ -1,8 +1,8 @@
 /**
  * Setup and Draw. 
  * 
- * The draw() function creates a structure in which
- * to write programs that change with time. 
+ * The code inside the draw() function runs continuously
+ * from top to bottom until the program is stopped.  
  */
 
 float y = 100;
diff --git a/java/examples/Basics/Structure/WidthHeight/WidthHeight.pde b/java/examples/Basics/Structure/WidthHeight/WidthHeight.pde
index ac69f3a38..ea5b4ecbb 100644
--- a/java/examples/Basics/Structure/WidthHeight/WidthHeight.pde
+++ b/java/examples/Basics/Structure/WidthHeight/WidthHeight.pde
@@ -12,8 +12,8 @@ void setup() {
 void draw() {
   background(127);
   noStroke();
-  for (int i=0; i<height; i+=20) {
-    fill(0);
+  for (int i = 0; i < height; i += 20) {
+    fill(129, 206, 15);
     rect(0, i, width, 10);
     fill(255);
     rect(i, 0, 10, height);
diff --git a/java/examples/Basics/Transform/Translate/Translate.pde b/java/examples/Basics/Transform/Translate/Translate.pde
index e8b20f70d..d701904ff 100644
--- a/java/examples/Basics/Transform/Translate/Translate.pde
+++ b/java/examples/Basics/Transform/Translate/Translate.pde
@@ -8,7 +8,7 @@
  */
  
 float x, y;
-float size = 80.0;
+float dim = 80.0;
 
 void setup() {
   size(640, 360);
@@ -20,19 +20,18 @@ void draw() {
   
   x = x + 0.8;
   
-  if (x > width + size) {
-    x = -size;
+  if (x > width + dim) {
+    x = -dim;
   } 
   
-  translate(x, height/2-size/2);
+  translate(x, height/2-dim/2);
   fill(255);
-  rect(-size/2, -size/2, size, size);
+  rect(-dim/2, -dim/2, dim, dim);
   
-  // Transforms accumulate.
-  // Notice how this rect moves twice
-  // as fast as the other, but it has
-  // the same parameter for the x-axis value
-  translate(x, size);
+  // Transforms accumulate. Notice how this rect moves 
+  // twice as fast as the other, but it has the same 
+  // parameter for the x-axis value
+  translate(x, dim);
   fill(0);
-  rect(-size/2, -size/2, size, size);
+  rect(-dim/2, -dim/2, dim, dim);
 }
diff --git a/java/examples/Basics/Typography/Letters/Letters.pde b/java/examples/Basics/Typography/Letters/Letters.pde
index 1f683ce20..ccd0d7352 100644
--- a/java/examples/Basics/Typography/Letters/Letters.pde
+++ b/java/examples/Basics/Typography/Letters/Letters.pde
@@ -7,64 +7,46 @@
 
 PFont fontA;
 
-void setup() 
-{
+void setup() {
   size(640, 360);
   background(0);
   smooth();
-  
-  // Create the font
-  fontA = createFont("Courier", 42);
 
-  // Set the font and its size (in units of pixels)
+  // Create the font
+  fontA = createFont("Mono", 18);
+
+  // Set the font
   textFont(fontA);
   textAlign(CENTER, CENTER);
-
-  // Only draw once
-  noLoop();
 } 
 
-void draw() 
-{
-  // Set the gray value of the letters
-  fill(255);
+void draw() {
+  background(0);
 
   // Set the left and top margin
-  int margin = 6;
-  int gap = 60;
-  translate(margin*10, margin*1.5);
+  int margin = 10;
+  translate(margin*4, margin*4);
 
-  // Create a matrix of letterforms
-  int counter = 0;
-  for(int i = 0; i < margin; i++) {
-    for(int j = 0; j < margin; j++) {
-      char letter;
+  int gap = 46;
+  int counter = 35;
+  
+  for (int y = 0; y < height-gap; y += gap) {
+    for (int x = 0; x < width-gap; x += gap) {
 
-      // Select the letter
-      int count = 65+(i*margin)+j;
-      if(count <= 90) {
-        letter = char(65+counter);
-        if(letter == 'A' || letter == 'E' || letter == 'I' || 
-          letter == 'O' || letter == 'U') {
-          fill(204, 204, 0);
-        } 
-        else {
-          fill(255);
-        }
+      char letter = char(counter);
+      
+      if (letter == 'A' || letter == 'E' || letter == 'I' || letter == 'O' || letter == 'U') {
+        fill(255);
       } 
       else {
-        fill(153);
-        letter = char(48+counter);
+        fill(102);
       }
 
       // Draw the letter to the screen
-      text(letter, 15+j*gap*1.6, 20+i*gap);
+      text(letter, x, y);
 
       // Increment the counter
       counter++;
-      if(counter >= 26) {
-        counter = 0;
-      }
     }
   }
 }
diff --git a/java/examples/Basics/Typography/Words/Words.pde b/java/examples/Basics/Typography/Words/Words.pde
index d8e8a5f96..3547b5e61 100644
--- a/java/examples/Basics/Typography/Words/Words.pde
+++ b/java/examples/Basics/Typography/Words/Words.pde
@@ -5,35 +5,35 @@
  */
 
 
-int x = 30;
 PFont fontA;
   
-void setup() 
-{
-  size(200, 200);
-  background(102);
+void setup() {
+  size(640, 360);
 
-  // Load the font. Fonts must be placed within the data 
-  // directory of your sketch. Use Tools > Create Font 
-  // to create a distributable bitmap font. 
-  // For vector fonts, use the createFont() function. 
-  fontA = loadFont("Ziggurat-HTF-Black-32.vlw");
-
-  // Set the font and its size (in units of pixels)
-  textFont(fontA, 32);
-
-  // Only draw once
-  noLoop();
+  // Create the font
+  fontA = createFont("Mono", 24);
+  textFont(fontA, 24);
 }
 
 void draw() {
-  // Use fill() to change the value or color of the text
-  fill(0);
-  text("ichi", x, 60);
-  fill(51);
-  text("ni", x, 95);
-  fill(204);
-  text("san", x, 130);
-  fill(255);
-  text("shi", x, 165);
+  background(102);
+  textAlign(RIGHT);
+  drawType(width * 0.25);
+  textAlign(CENTER);
+  drawType(width * 0.5);
+  textAlign(LEFT);
+  drawType(width * 0.75);
+}
+
+void drawType(float x) {
+  line(x, 0, x, 65);
+  line(x, 220, x, height);
+  fill(0);
+  text("ichi", x, 95);
+  fill(51);
+  text("ni", x, 130);
+  fill(204);
+  text("san", x, 165);
+  fill(255);
+  text("shi", x, 210);
 }