Excuse my errors. I'm reading a book called Learning Processing by Daniel Shiffman. In chapter I'm having a hard time understanding variables and float with my own sample design coordinates.

Before I begin let me say that this is only an explanation of the concept of variables.  This is not how variables actually work inside of a computer.

A variable is like a box that you give a label to, inside of which is a value.  This is the same thing as in algebra when we say x + 5 = 10.  One way to look at this is to say, "there is a box labeled x with the number 5 inside".  In the language of processing, that would look like this:

1. int x;  //there is a box with an integer inside of it.
2. x = 10 - 5;  //inside the box is the integer 5
3. println(x);  //what's inside the box? 5!

Algebra is powerful.  However, in algebra you can only label the boxes with a letter of the alphabet and the only thing you can put in the box is a number.  In computer programming the nice thing is that you can name the boxes (almost) anything you want, and you can put all sorts of things inside the box.

You could have a box called "name" inside of which is the name "Bob"  

1. String name = "Bob";

Even better, you can have a box called "names" and store a list of multiple names inside of it.  

1. String[] names = {"Bob", "Sue", "David"};

You can have a true or false box called isHappy, and store whether or not someone is happy.

1. boolean isHappy = true;

You could even make boxes of your own.   For example, an apple box called "apples" that stores a list of different apple objects inside (apples you programmed of course).  

1. Apple[] apples = { apple("green"), apple("red") , apple("yellow") }

These are just a few of the different types of "boxes" in Processing.  You'll notice that in both of the previous examples I have used the word int, String, or boolean before I said what the box was called.  This is because Processing won't allow us to put just any old thing in any old box.  The Processing language is what is known as a "strongly typed" language.  Each type of variable gets to have it's own box custom designed to fit the size of the box's content.  This allows Processing to fun faster and more efficiently because it allocated the right amount of space in the warehouse (memory) and will know what to expect when retrieving the box.  Not all languages are like this, some are "loosely typed".  You put what ever you want in the box and they'll figure it out after they open the box up.

As I said, there are many different types of boxes in Processing. When you're just starting out you'll want to know about the following types of boxes.

1) int - A box which contains an integer, a number without a decimal point; 3, 7, 13, 28.

1. int x = 23;

2) float - A box which contains a floating point number, a number with a decimal; 1.0, 4.3, 2.80, 7.28401384000

1. float y = 45.7830

3) char - A box with a single character inside; 'a', 'b', 'c', 'd'

1. char letter = 'a';  // note single quotes ' '

4) String - A box with a series of characters; "Tomato", "Lettuce", "Onion" 

1. String vegetable = "carrot";  // note double quotes " "

5) boolean - a true or false box

1. boolean isMidnight = true; 

5) Array - A list of data; {25, 35, 28, 32}.  Note, you not only have to say it's an array box, but you also have to say what type of array it is.  An array of integers?  Strings?  

1. int[] numbers =  {25, 35, 28, 32};

My hope is that this explanation will either help, or yield more specific questions from you so feel free to follow up!

This my code.

 

 

void setup() {
  size(600,600);
}

 

Now Im trying to do something similar like these codes:

 

float zoogX;
float zoogY;

float eyeR;
float eyeG;
float eyeB;

void setup() {
  size(200,200);        // Set the size of the window
  // Feature #1.  zoogX and zoogY are initialized based on the size of the window. 
  // Note we cannot initialize these variables before the size() function is called
  // since we are using the built-in variables width and height.
  zoogX = width/2;      // Zoog always starts in the middle
  zoogY = height + 100; // Zoog starts below the screen
  smooth();
}

void draw() {

  background(255);  // Draw a white background
 
  // Set ellipses and rects to CENTER mode
  ellipseMode(CENTER);
  rectMode(CENTER);
 
  // Draw Zoog's body
  stroke(0);
  fill(150);
  // Feature #1.  zoogX and zoogY are used for the shape locations.
  rect(zoogX,zoogY,20,100);

  // Draw Zoog's head
  stroke(0);
  fill(255);
  ellipse(zoogX,zoogY-30,60,60);

  // Draw Zoog's eyes
  // Feature #2.  eyeR, eyeG, and eyeB are given random values and used in the fill() function.
  eyeR = random(255);
  eyeG = random(255);
  eyeB = random(255);
  fill(eyeR,eyeG,eyeB);
 
  ellipse(zoogX-19,zoogY-30,16,32);
  ellipse(zoogX+19,zoogY-30,16,32);

  // Draw Zoog's legs
  stroke(150);
  line(zoogX-10,zoogY+50,zoogX-10,height);
  line(zoogX+10,zoogY+50,zoogX+10,height);
 
  // Zoog moves up
  zoogY = zoogY - 1;

}