• fullscreen
  • colourCollision01.pde
  • ArrayList bars;
    PGraphics buffer;
    // list taken from: http://listverse.com/2010/11/23/top-10-shocking-historical-beliefs-and-practices/
    String[] beliefs = {"Wife Selling", "Tobacco Smoke Enema", "Rabbit Test", "Mrs Winslow’s Soothing Syrup", "Lobotomy", "Big Nose George", "Drapetomania", "Divine Right of Kings", "Mimizuka", "Female Hysteria"};
    
    PFont font;
    
    void setup() {
      size(600,300, JAVA2D);
      
      buffer = createGraphics(width, height, JAVA2D);
      buffer.beginDraw();
      int numBars = beliefs.length;
      
      bars = new ArrayList();
      int leftOffset = int((width/numBars)/2);
      int spacing = 10;
      int barWidth = int((width - leftOffset*2 - spacing*numBars) /numBars);
      
      for(int i=0; i<numBars; i++) {
        Bar newBar = new Bar(leftOffset + (spacing + barWidth) *i,
                             height, 
                             barWidth, 
                             (int)random(50,height-50), 
                             beliefs[i]);
        bars.add(newBar);
        // draw the bar to the buffer using -(i+1) as the colour
        // Note that Processing colours are negative ints ;)
        buffer.fill(-(i+1));
        // it's important that the stroke either matches the above colour or isn't there!
        buffer.noStroke();
        buffer.rectMode(CORNERS);
        buffer.rect(newBar.x, newBar.y, newBar.x+newBar.w, newBar.y-newBar.h);
      }
      buffer.endDraw();
      font = loadFont("ArialMT-12.vlw");
      textFont(font);
    }
    
    void draw() {
      background(0,100,100);
      for(int i=0; i<bars.size(); i++) {
        Bar thisBar = (Bar) bars.get(i);
        thisBar.display();
      }
      
      // get the colour from the buffer matching the mouse position
      int bufferColour = buffer.get(mouseX,mouseY);
      // check that there is a colour present
      if(bufferColour != 0) {
        // Convert the colour to the matching index in the ArrayList
        int index = -(bufferColour+1);
        Bar thisBar = (Bar) bars.get(index);
        thisBar.showLabel();
      }
    }
    
    class Bar {
      int x;
      int y;
      int w;
      int h;
      String label;
      float txtWidth;
      float txtHeight;
      
      Bar(int x, int y, int w, int h, String label){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.label = label;
        txtWidth = textWidth(label);
        txtWidth += 10;
        txtHeight = textAscent();
        txtHeight *= 1.5;
      }
      
      void display() {
        rectMode(CORNERS);
        fill(#ff9900);
        stroke(0);
        rect(x,y,x+w,y-h);
      }
      
      void showLabel() {
        rectMode(CORNERS);
        fill(#ffbb22);
        stroke(0);
        rect(x,y,x+w,y-h);
        rectMode(CENTER);
        fill(#eeeeee);
        rect(x+txtWidth/4, y-20-txtHeight/4, txtWidth, txtHeight);
        fill(0);
        textAlign(CENTER);
        text(label, x+txtWidth/4, y-20);
      }
    }
    

    code

    tweaks (0)

    about this sketch

    This sketch is running as Java applet, exported from Processing.

    license

    advertisement

    blindfish

    Colour based retrieval of objects from an ArrayList

    Add to Faves Me Likey@! 4
    You must login/register to add this sketch to your favorites.

    An example of using the colour of pixels in a buffer image to retrieve an object from an ArrayList.

    The principle is simple enough: when objects are created and added to the ArrayList you draw a 'hit-area' to a buffer image using a fill colour that 'matches' the index of the object in the ArrayList. This means that rather than doing hit-detection on all your objects each frame you can simply use the colour in the buffer corresponding to the mouse position to directly retrieve the object from the ArrayList and, for example, call a method on that object.

    blindfish
    23 Nov 2010
    This approach is probably more suitable to the 'static' display of large amounts of data; since any performance gains achieved through this method of 'collision detection' might be negated by the need to update the buffer each frame.

    Also, there are obviously some improvements and optimisations that could be made to this - e.g. it probably makes sense to make the drawing of the 'hit area' to the buffer a method of the class; then you'd at least have the option to update this each frame. I should also have been less lazy and used the pixels[] approach to getting the pixel colour from the buffer.
    blindfish
    7 Dec 2010
    I just noticed that I already had an example of this principle in my favorites! It seems only fair to reference it as I'm sure it was in the back of my mind when I came up with this demo:

    http://www.openprocessing.org/visuals/?visualID=7554

    The only difference is that my version uses elements and a buffer both drawn directly in the sketch, rather than externally created images.
    dotlassie
    28 Dec 2010
    Nice use of the ArrayListverse class.
    eoin
    19 Mar 2011
    blindfish,this great, lovely work. I have just used it to feed in a .tsv file of just over 150 values and it looks good. I'm going to ask a complete newbie question though: is there any easy way, like say a .sort(), to order the arraylist, so that the bars go from the biggest to the smallest value?
    blindfish
    20 Mar 2011
    Glad you've found it useful :)
    Not really intended as a demonstration of working with ArrayLists specifically though... This looks like a good place to start:

    http://mindprod.com/jgloss/sort.html
    You need to login/register to comment.