Cached Objects in Processing

Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Repository https://github.com/toboko/processing-elements/tree/master/1-cached-objects
Demo https://editor.p5js.org/toboko/full/s9o6ROtsU

In Processing it is elementary to manage many elements without losing performance. In this article, we will talk about how to cache objects trying to limit their creativity. In what way? Within the draw function, we’ll draw several objects so that we don’t have to overload our memory.

Generic Object

Let’s start by imagining our reference class. Let’s consider, for this example, a generic object GenericObject.

Our first goal is to create a space in which our objects are stored. To do this, we will use the ArrayLists or Arrays of objects to store the necessary information.

That’s how our Processing sketch will look:

GenericObject obj;
ArrayList<GenericObject> objs = new ArrayList<GenericObject>();

void setup() {
    // code here ...
}
void draw() {
    // code here ...
}

At the top of our script, we will then have our global object list visible at setup() and draw() and the object to be cached.

mouseMoved()

Imagine you want to generate an indefinite number of GenericObject objects following a certain event such as mouse movement. We will then write:

void mouseMoved() {
    obj.move(mouseX, mouseY);
    ...
}

Imagine that our GenericObject.move() the method changes the values of the position of our object within the window. This function will be called every time we move the mouse, so we will have various coordinates that will vary. Now we want to save all the positions in the list and cache them. To do this, we can create an object with new GenericObject. Still, this method could be expensive in terms of memory and inefficient. What we will try to do is clone the main object GenericObject o. To do this, you will need to implement the Cloneable interface on our GenericObject class and then override the method:

public class GenericObject implements Cloneable{
    ...
    @Override
    protected Object clone() throws CloneNotSupportedException {
        return super.clone();
    }
}

Cloning

This will help us to exploit the same object, cloning versions of itself without having to call up the memory continuously. What we need now is to clone the element every time we move the pointer. To do this, we will have to create within our sketch a cloneGenericObject(GenericObject g) works that will add the cached elements.

void cloneGenericObject(GenericObject g){
    try {
        if(objs.size() > limit) objs.remove(0);
        objs.add((GenericObject) g.clone());
    } catch(CloneNotSupportedException e) { }
}

Given the implementation of the Cloneable interface, you will need to check for possible exceptions CloneNotSupportedException.

After that we can complete our function mouseMoved():

void mouseMoved() {
    obj.move(mouseX, mouseY);
    cloneGenericObject(obj);
}

Draw

Finally, the draw() function only has to read the elements from our cache and draw them inside the window:

void draw() {
    background(255);
    for (int i = 0; i < objs.size(); i++) {
        GenericObject objx = objs.get(i);
        objx.draw();
    }
}

The background(255) will be needed to delete previous drawings, while objx.draw() is supposed to be a method implemented in our GenericObject class that creates figures or forms drawings. For example:

public class GenericObject implements Cloneable{
    ...
    void draw() {
        fill(green, 50);
        circle(x, y, 10);
    }
    ...
}

Below you can try an example of the script in its javascript version thanks to the porting of p5.js. The code differs from the original Processing code in that it is written in Javascript so that you can find the JavaScript code here and the initial Processing code on GitHub.

Condividi
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Chi è Nils Lewin

Mi chiamo Nicola Bombaci alias Nils Lewin, sono un ingegnere informatico con la passione per la musica e l’audio. Durante la mia crescita professionale ho deciso di fondere questi due mondi apparentemente diversi tra loro.
Articoli Correlati

Lascia una risposta

Iscriviti alla newsletter