14.1 – Java: Array Lists & Text

Surprise! You’ve actually been learning Java all semester.

Processing is really just a collection of libraries that makes some Java tasks easer (we’ll talk more about libraries further down when we talk about sound). Such as:

• A set of functions for drawing shapes.
• A set of functions for loading and displaying text, images, and video.
• A set of functions for mouse and keyboard interaction.
• A simple development environment to write your code.

All semester long as we’ve been typing in Processing’s window, we’ve been using Processing’s IDE (Integrated Development Environment). We can write Processing (and plain old Java) in other environments, like Eclipse. You can use a tool called “Proclipse” to use Processing in Eclipse.

While the Processing reference has been our bible all semester, we are not limited to the functions listed there. Because we’re actually writing Java, we can use anything in the Java API (which as a warning- is HUGE and hard to look at. We generally use this just for looking things up).

One of these useful Java classes is the ArrayList.

Array Lists

When we were first learning about arrays, I made a big point of telling you that the size of an array couldn’t be changed. Then you found out I was lying when we looked at Processing’s append() function, for resizing arrays. But append only let us tack on a space at the end of the array. What we really want is a flexible sized array that we can add to and delete from on the fly (like when a ball bounces off screen), from the beginning, middle and end.

That’s what Java’s Array List does. Take a look at the Java API documentation to get a sense of what it does- http://docs.oracle.com/javase/1.4.2/docs/api/java/util/Random.html

We’re going to create an ArrayList of a particle object. Here’s the particle class- it’s just a simple ellipse with an xpseed and a yspeed.

class Particle {
  float x;
  float y;
  float xspeed;
  float yspeed;

  Particle() {
    x = mouseX;
    y = mouseY;
    xspeed = random(-1, 1);
    yspeed = random(-1, 1);

  }

  void run() {
    x = x + xspeed;
    y = y + yspeed;
  }

  void gravity() {
    yspeed += 0.1;
  }

  void display() {
    stroke(0);
    fill(0, 75);
    ellipse(x, y, 10, 10);
  }
}

Before, if we wanted to make an array of Particles, we’d say:

Particle [] particles = new Particle[1000];

To declare an ArrayList of particles, this is the syntax:

ArrayList particles;

Note that we don’t have to tell it how big to make the array! This is because we’re going to add to and subtract from it on the fly, we just need to declare a resizable container to do this in.

We still have to initialize the array in setup. Before, we’d use a for loop to go drawer by drawer in the filing cabinet and put a new object in there, like this:

for(int i = 0; i < particles.length; i++){
particles[i] = new Particle();
}

Now we just have to initialize the container-

particles = new ArrayList();

Now we can add particles to the particle container dynamically (aka, in the draw loop). We can only add particle objects to the container- we can’t mix and match data types.

void draw(){
 particles.add(new Particle()); // this will add a particle to the container every time we cycle through the draw loop
}

When we want to call the functions associated with our object, we still need to iterate through the list with a for loop:

for (int i = 0; i < particles.size(); i++) { //note that we call size instead of length- this is dynamic and will update when a particle is added or subtracted
  Particle p = (Particle) particles.get(i); //this is new!
  p.run();
  p.gravity();
  p.display();
}

So this line is new– Particle p = (Particle) particles.get(i); //this is new!

Because ArrayLists are all loosey goosey and allow us to add to and take from them on the fly, the tradeoff is that we have to convert the object back to its original data type when we want to do something to it (like call a function or retreive its x position). The syntax above is called “casting”- it’s telling Processing what data type we’re dealing with. We’ve seen this before when we called int(float x); to return an int to us when rpevious we were dealing with a float.

We can also remove objects from our list very easily. This is a good idea for instances like when a ball travels offscreen and we no longer need it:

if (particles.size() > 100) {
   particles.remove(0);
  }

Here, 0 pertains to the index of the object we want to take away. This is taking away the first object, but we can specify any index number we’d like.

Putting it all together–

ArrayList particles;

void setup() {
  size(400, 400);
  particles = new ArrayList();
}

void draw() {
  background(255);
  particles.add(new Particle());

  for (int i = 0; i < particles.size(); i++) {      
    Particle p = (Particle) particles.get(i);     
    p.run();     
    p.gravity();     
    p.display();   
}   

// Remove the first particle when the list gets over 100.   

if (particles.size() > 100) {
    particles.remove(0);
  }
}

class Particle {
  float x;
  float y;
  float xspeed;
  float yspeed;

  Particle() {
    x = mouseX;
    y = mouseY;
    xspeed = random(-1, 1);
    yspeed = random(-1, 1);

  }

  void run() {
    x = x + xspeed;
    y = y + yspeed;
  }

  void gravity() {
    yspeed += 0.1;
  }

  void display() {
    stroke(0);
    fill(0, 75);
    ellipse(x, y, 10, 10);
  }
}

Text

Text that is treated as actual written word rather than code is called a String. Strings are technically a Java class, and not part of Processing specifically. We’ve seen strings before whenever we’ve printed information out to the console, or loaded in an image-

println("collision!");
myImage = loadImage("myImage.jpg");

Text is stored in the data type Strings. The concept is the same as storing ints, floats, booleans, except this stores an array of characters.

String sometext = "How do I make a String? Just type some letters between quotes!";

A string is technically an object with methods that you can call. Check out the Processing reference page for a full list of the functions you can call on a string.

    String helloworld = "Hello" + "World";

    String message = "The value of x is: " + x;

PFont f;

f = loadFont("HelveticaNeue-Light-24.vlw");

textFont(f, 24);

Call the text( ) function to display text. text() is  just like shape or image drawing, it takes three arguments—the text to be displayed, and the x and y coordinate to display that text.)

text("Mmmmm... Strings... ",10,100);

PFont f; // Declare PFont variable
void setup() {
  size(600, 400);
  f = loadFont("Helvetica-Bold-48.vlw"); // Load Font
}
void draw() {
  background(206, 31, 169);
  textFont(f, 48); //Set the font
  fill(101, 218, 232); //Set the font color
  String myText = "IT'S ALMOST SUMMER"; //Create a string for the textt (optional)
  text (myText, width/2-textWidth(myText)/2, height/2); //Draw the text to the screen
}

If you want to know more about text, like animating text, read Learning Processing Chapter 17.