I'm posting a mockup of a problem I am trying to solve in a larger project. Basically, I need the width of a stripe that's being hovered over (in a canvas of vertical stripes) to scale up in width. That part is easy. The hard part is scaling all the other stripes down and offsetting them so that all still fill the space but flex their size to accommodate the one that is now fatter...

In this mockup, I'm scaling one stripe up and I have a strategy in place for scaling all other stripes down by a factor, but I'm stuck on trying to figure out how to offset the positions. 

Can you recommend a better way to approach this, or a way to finish what I've begun?

Thanks so much.. Michael

2. ArrayList<Stripe> stripes;
3. public int numStripes = 7;
4. 
   
5. void setup(){
6.     size(700,400);
7.     smooth();
8.     rectMode(CENTER);
9.     colorMode(HSB, 360,100,100);
10.     stripes = new ArrayList<Stripe>();
11.     for(int i=0; i<numStripes; i++){
12.        stripes.add( new Stripe( (width-50) - i*100 ) );
13.     }
14. }
15. void draw(){
16.   background(300);
17.   
18.   for(int i=0; i<stripes.size(); i++){
19.      Stripe s = stripes.get(i);
20.      
21.      s.checkHover();
22.      if(s.hover){
23.         for(int j=0; j<stripes.size(); j++){
24.            if(j!=i){
25.               //pass in xpos so in the class we can 
26.               //determine if it's position should be offset
27.               //to the left or right.
28.               stripes.get(j).scaleYourself(s.xpos); 
29.            }
30.         }
31.      }
32.      
33.      s.display(); 
34.   }
35.   
36. }
37. 
    
38. //--------------------------
40. public class Stripe{
41.    public float xpos;
42.    private float w, oldw, targetw;
43.    public float h;
44.    public boolean hover;
45.    private float scaleFactor;
46.    private float xoff;
47.    private float rh;
48.    
49.    public Stripe(float xpos){  
50.        oldw = 100;
51.        targetw = oldw;
52.        rh = random(200,300);
53.        this.xpos = xpos;
54.        h = random(360);
55.        scaleFactor = 1.5;
56.    }
57.    
58.    public void display(){
59.       noStroke();
60.       fill(h, 90,90);
61.       rect(xpos+xoff, height/2, w, rh);
62.       stroke(0);
63.       line(xpos+xoff, 0, xpos+xoff,height);
64.    }
65.    
66.    public void checkHover(){
67.       if( abs(dist(mouseX,0, xpos, 0)) < 5 ){
68.          scaleFactor = 1.5;
69.          hover = true;
70.       } else {
71.          scaleFactor = 1;
72.          hover = false;
73.       }
74.       
75.       targetw = oldw*scaleFactor;
76.       w += (targetw - w) * 0.1;
77.    }
78.    public void scaleYourself(float comparex){
79.       int direction;
80.       if(this.xpos < comparex){
81.          direction = -1;
82.       } else {
83.          direction = 1;
84.       }
85. 
    
86.       xoff = 0;//
87. 
    
88.       
89.       scaleFactor = 1.0 - (numStripes / (oldw*1.5 - oldw));
90.       targetw = oldw*scaleFactor;
91.       w += (targetw - w) * 0.1;
92.    }
93.   
94. }