History of Java

Brief History of Java

Java was created by Sun Microsystems between 1991 and 1995, by James Gosling and some colleagues.  Gosling intended to create a programming language that would run "anywhere" - that included any platform (Windows, Mac, Linux, etc) and any hardware (PC, mainframe, cell-phone, web-server, etc). 

One of the new concepts in Java was the ability to run a program inside a web-page - as an Applet (that means a small application).  The real interest in Applets was not so much calculations or any other useful work, but rather to make interesting graphics displays.  Now interesting graphics displays are achieved with other tools (Flash, .gif animations, videos), but Java is still a common and interesting tool with good graphics capabilities.

Processing Instead of Standard Java

Processing is a version of Java that was created to help graphic artists learn the basics of programing.  To facilitate this task:

Some Examples

Here are some web-sites with Processing applets with interesting graphics displays:

  http://www.openprocessing.org/   

  http://www.flong.com/projects/newyear/

Why Java (Processing) instead of Another Language

The Java language was based on the popular C++ language.  The syntax of Java is similar to C++ as well as JavaScript, which was also based on C++.  That creates an entire family of languages that use similar commands.  So after learning Java, you are well prepared to learn other languages in the same family.

Visual Basic has a long, long history reaching back to the 1960's when the original BASIC (Beginners All-purpose Symbolic Instruction Code).  The syntax of Basic is much simpler than Java, making it easier for a beginner to learn Basic.  So VB was a good way to start programming graphics displays.

But VB doesn't contain very many low-level (pixel oriented) graphics commands, and those don't execute very efficiently.  Processing contains some very powerful low-level graphics commands, that execute efficiently, and that can easily be incorporated into a web-page.  So we will use Processing to create graphics displays that manipulate images at the pixel level and that execute efficiently in a web-page. 

Write a Program to Draw a Face

If you are learning Java programming, you will want to type your own programming commands.
Open a new, empty Processing window and TYPE the following commands in. 
When you run it, you should see the picture shown below.  (No, you cannot copy the text - you need to practice typing it correctly.)  
Then make the changes listed below in #1-11

img1.gif

  1. Run Processing.  Make a New program (blank page).
  2. Type in one command at a time.  
    After each command, run the program and correct any errors.
    Then type another command.
  3. Once you have the whole picture (above), you need to add more commands.
  4. Add the second eye - make it blue.
  5. Add the second eyebrow - make it black.
  6. Add EARS (use an ellipse where the two radii are different).
  7. Fix the smile so it is made from a curve, not straight lines.
  8. Add lots of curves to make HAIR.  You can choose the color, but not blue.
  9. Add arms by adding two more rectangles.
  10. Add buttons on the front of the "shirt".
  11. If you finish that, add more details, especially using CURVES - e.g. piercing, tattoos, etc.
===========  End of First Lesson =======================================

More Faces

Now we can make a nice pattern by drawing LOTS of faces - for example
these 9 copies of Che Guevara by Andy Warhol :

(source: https://upload.wikimedia.org/wikipedia/en/8/89/WarholChe.jpg)

We won't do something so artistic (we are not as good as Andy Warhol),
but we can easily make lots of copies of the faces in our program above.

Methods

A method is a collection of Java commands that perform a specific task. 
We assign a name and package the commands up in curly braces, like this:

void setup()
{
  size(200,200);
  grimFace(); 
}

void grimFace()
{
   ellipse(100,50,100,100);
   fill(0,0,200);
   ellipse(80,40,20,20);
   ellipse(120,40,20,20);
   stroke(200,0,0);
   strokeWeight(10);
   line(80,70,120,70);
}

Now the big advantage of a method is that we can use it over and over again,
just by saying 

grimFace();
grimFace();
grimFace();
Unfortunately, that just draws the same face over and over again, so we just see one face.
We really want something like this:


We would like to use grimFace() over and over again, but it should draw the faces
in 3 different positions.

Parameters

We can use the grimFace method like a stamp, making many copies,
as long as we can control it's POSITION, moving it from place to place.
We do this by using parameters.

We must provide X and Y positions that control the position of the face.
For example, we could provide X and Y that tell the position of
the center of the face, e.g. the nose.  Then the commands look
something like this:
grimFace(100,50);
grimFace(50,140);
grimFace(150,140);
Those positions are just a first guess about where the noses belong.
But this won't work, unless we also change the method.
Now the method needs to look like this:
void grimFace(int X, int Y)
{
   ellipse(100,50,100,100);
   ....
}
Now the method "knows" that it is going to receive two parameters
called X and Y.  That is very nice, but it still needs to USE these parameters
to draw the face in the right place.  Then it needs to look like this:
void grimFace(int X, int Y)
{
   ellipse(X,Y,100,100);
   ....
}
Now the head (the big circle) is going to be drawn in a different place
each time the 3 grimFace commands are given.  Then we see this:



OOPS!  We can't just move the big circle - we also need to move all the other
pieces of the face.  Consider the first eye :    ellipse(80,40,20,20);
We can't just write X and Y in place of 80 and 40, because then the eye will
appear in the middle of the face. 

The trick to making the parameters work correctly is to ADD X to every X-coordinate,
and ADD Y to every Y coordinate, like this:

void setup()
{
  size(200,200);
  grimFace(100,50);
  grimFace(50,140);
  grimFace(150,140);
}

void grimFace(int X, int Y)
{
   stroke(0,0,0);
   strokeWeight(2);
   noFill();
   ellipse(100+X,50+Y,100,100);
   fill(0,0,200);
   ellipse(80+X,40+Y,20,20);
   ellipse(120+X,40+Y,20,20);
   stroke(200,0,0);
   strokeWeight(10);
   line(80+X,70+Y,120+X,70+Y);
}

That is almost right, but not quite.  The X and Y numbers are not actually the position
of the new face.  Rather they tell the offset from the original face to the new one. 
That means the X and Y numbers are not actually screen  positions, but rather
distances from the original picture.  So the original face can be drawn with:
      grimFace(0,0);
Then to draw a face directly below it we would use the command:
      grimFace(0,100); 
That is 100 pixels lower than the original face.

What about the face below to the left?  It's center must be about 70 pixels below the first face,
and about 50 pixels to the left.  So the correct command is :  grimFace(-50,70);

Now the 3 face program looks like this.  It's not quite finished, but pretty close.



Programming Practice
 ======= End of Second Lesson ====================================

More Programming Practice


More Parameters for Colors

Any number in a method can be replaced or altered by a parameter.
For example, we could have brown eyes instead of blue eyes.
How can we do that?  The method looks something like this:


void grimFace(int X, int Y)
{
   stroke(0,0,0);
   strokeWeight(2);
   noFill();
   ellipse(100+X,50+Y,100,100);
   fill(0,0,200);
   ellipse(80+X,40+Y,20,20);
   ellipse(120+X,40+Y,20,20);
 .......
}

Now the eye color is determined by this command:

     fill(0,0,200);

To get brown eyes, we would need this command instead:

     fill(60,60,0);

To allow the main program to control the eye color, we need to have parameters
for all 3 color elements - red, green and blue.  Since these parameters are controlling
the eye color, we need to use names like :  eyeRed, eyeGreen, eyeBlue.
So we rewrite the program like this:


void grimFace(int X, int Y, int eyeRed, int eyeGreen, int eyeBlue)
{
   stroke(0,0,0);
   strokeWeight(2);
   noFill();
   ellipse(100+X,50+Y,100,100);
   fill(eyeRed, eyeGreen, eyeBlue);  // use the parameters here
   ellipse(80+X,40+Y,20,20);
   ellipse(120+X,40+Y,20,20);
 .......
}

But now all the grimFace commands must also contain numbers for the eye color:

    grimFace(100,50,0 , 0, 250);     // for blue eyes   

    grimFace(100,50,60, 60, 0);      // for brown eyes 

You can add as many parameters as you want - e.g. change the skin color (fill)
of the entire face, color of the lips, etc.

Practice