var EI1 = new example (
  "Example I.1",
  "This is a first very simple Processing program: it just draws two lines. Note that comment within the code is preceded by two slashes, and that each instruction ends with a semi-colon. Also, x,y-coordinates (0,0) relate to the top-left corner of the canvas.",
  "exampleI1",
"// This is comment.<BR />\
<BR />\
size(200, 200);<BR />\
background(102);<BR />\
line(0, 0, 200, 200);<BR />\
line(0, 200, 200, 0);");


var EI2 = new example (
  "Example I.2",
  "This simple program shows the use of variables, assignments and  operators. A variable contains a little chunk of data of a specific type (e.g. <CODE>int</CODE> or <CODE>float</CODE>); data can be 'stored' in a variable with a so-called 'assignment'. Numerical data can be manipulated by operators like the ones on a pocket calculator. The program draws four lines and shows the use of integer numbers.",
  "exampleI2",
"// Variable declarations<BR />\
int x1, y1;<BR />\
int x2, y2;<BR />\
 <BR />\
// Assignments<BR />\
x1 = 0;<BR />\
y1 = 0;<BR />\
x2 = width;<BR />\
y2 = height;<BR />\
 <BR />\
line(x1, y1, x2, y2);");


var EI3 = new example (
  "Example I.3",
  "This program shows the use of floating-point numbers and the cast operator. The two most important data types are <CODE>int</CODE> and <CODE>float</CODE>. Sometimes you have to change the one data type into the other: that is what you use a cast operator for. In this example, we cast a float value into an integer value.",
  "exampleI3",
"int x, y;<BR />\
float a;<BR />\
x = (int) (width * sin(a));<BR />\
y = (int) (height * cos(a));<BR />\
line(0, 0, x, y);");


var EI4 = new example (
  "Example I.4",
  "This example shows the basic structure of most Processing programs using functions <CODE>setup</CODE> and <CODE>draw</CODE>. Everything inside <CODE>setup()</CODE> is done once, immediately upon start of program execution. It is typically used to initialize some things. Everything inside <CODE>draw()</CODE> is done repeatedly and without stopping, several times a second. Typically, you use the code within <CODE>draw()</CODE> to redraw the screen. Note that you must use <CODE>background()</CODE> if you want to start over with a blank screen within every repetition of <CODE>draw()</CODE>. In the below example it might not show, but the screen is redrawn continuously <I>ad infinitum</I>.",
  "exampleI4",
"int x, y;<BR />\
float a;<BR />\
<BR />\
void setup() {<BR />\
  size(200, 200);<BR />\
  background(102);<BR />\
  a = HALF_PI;<BR />\
}<BR />\
<BR />\
void draw() {<BR />\
  x = (int) (width * sin(a));<BR />\
  y = (int) (height * cos(a));<BR />\
  line(0, 0, x, y);<BR />\
  a /= 2.0;<BR />\
}");


var AI1 = new assignment (
  "Assignment I.1",
  "Make a program that draws a circle at the center of the screen, such that the diameter of the circle is half the screen's width. Moreover, the program should print the radius of the circle in the text Area of the Processing Environment. Use the following built-in Processing methods: <CODE>noStroke(), ellipseMode(), ellipse(), println()</CODE>",
  "assignmentI1",
  dateI);


var AI2 = new assignment (
  "Lab Assignment I.2",
  "Make a similar program, this time with a growing circle. Start with a circle with a radius of zero, and never stop growing it. Again, print the radius in the text area. Use the following built-in Processing methods: <CODE>setup(), draw()</CODE>. Note that in the example below the growing stops at a certain point; you do not need to implement this! Note furthermore that we cannot print text on these webpages; but you have to do so in the assignment.",
  "assignmentI2",
  dateI);


var AI3 = new assignment (
  "Assignment I.3",
  "Now grow the circle exponentially, instead of in a time-linear fashion. Start with a circle with a radius of one. You might consider using a 'cast' method to convert data from one type to another. Again, your circle does not need to stop growing.",
  "assignmentI3",
  dateI);