1. int numColumns = 8;
   int numRows = 10;
   float gridWidth, gridHeight;
   //blobs movement determined by balls at vertices
   Ball[][]balls = new Ball[numColumns][numRows];
   float radius = 5;
   float vel = 1; //0.2 calm, 1 less so
   //balls movement constrained by invisible rings centred on each ball start point
   Boolean ballCollision = true; //internal collision
   Ball[][]rings = new Ball[numColumns][numRows];
   Boolean ringCollision = false; //normal billiard ball collision
   
   Blob[]blobs = new Blob[2*numColumns*numRows];
   color[]colours = new color[2 * numRows];
   
   int count = 0;
   
   
   void setup()
   {
     size(400, 500);
     background(255);
     smooth();
   
    
     gridWidth = width / (numColumns - 3); //to allow for triangles overlapping edge of stage
     gridHeight = height / (numRows - 3); //2 isn't enough
    
     float ringRadius = min(gridWidth, gridHeight) / 2;
     //populate balls array with triangles' vertices
     //and populate coresponding rings array
     for(int i = 0; i < numColumns; i++)
     {
       for(int j = 0; j < numRows; j++)
       {
         float xpos;
         if(j % 2 == 0) xpos = gridWidth * (i - 1);
         else xpos = gridWidth * (i - 1.5); //otherwise shunt row half a space to the left
         float ypos = gridHeight * (j - 1);
         balls[i][j] = new Ball(xpos, ypos, random(-vel, vel), random(-vel, vel), radius, 0);
         rings[i][j] = new Ball(xpos, ypos, 0, 0, ringRadius, 192);
       }
     }
   }
   
   void draw()
   {
     background(255);
     noStroke();
     count = 0;
    
     for(int j = 0; j < numRows - 1; j++)
     {
       float colour;
       if(j % 2 == 0)
       {
         for(int i = 0; i < numColumns - 1; i++)
         {
           //triangle vertices
           float startX = balls[i][j].x;
           float startY = balls[i][j].y;
           float rightX = balls[i+1][j].x;
           float rightY = balls[i+1][j].y;
           float downRightX = balls[i+1][j+1].x;
           float downRightY = balls[i+1][j+1].y;
           float downLeftX = balls[i][j+1].x;
           float downLeftY = balls[i][j+1].y;
           //messy, Processing won't let me recyle array name
           float[]tXpos0 = {startX, downRightX, downLeftX};
           float[]tYpos0 = {startY, downRightY, downLeftY};
           blobs[count] = new Blob(tXpos0, tYpos0, color(makeColour((startY + downRightY + downLeftY) / 3)));
           count++;
           float[]tXpos1 = {startX, rightX, downRightX};
           float[]tYpos1 = {startY, rightY, downRightY};
           blobs[count] = new Blob(tXpos1, tYpos1, color(makeColour((startY + rightY + downRightY) / 3)));
           count++;
         }
       }
       else
       {
         for(int i = 1; i < numColumns; i++)
         {
           //triangle vertices
           float startX = balls[i][j].x;
           float startY = balls[i][j].y;
           float downRightX = balls[i][j+1].x;
           float downRightY = balls[i][j+1].y;
           float downLeftX = balls[i-1][j+1].x;
           float downLeftY = balls[i-1][j+1].y;
           float leftX = balls[i-1][j].x;
           float leftY = balls[i-1][j].y;
          
           float[]tXpos0 = {startX, downLeftX, leftX};
           float[]tYpos0 = {startY, downLeftY, leftY};
           blobs[count] = new Blob(tXpos0, tYpos0, color(makeColour((startY + downLeftY + leftY) / 3)));
           count++;
           float[]tXpos1 = {startX, downRightX, downLeftX};
           float[]tYpos1 = {startY, downRightY, downLeftY};
          
           blobs[count] = new Blob(tXpos1, tYpos1, color(makeColour((startY + downRightY + downLeftY) / 3)));
           count++;
         }
       }
     }
     //uncomment rings.display() and balls.display(), and comment out blobs.display()
     //to see what's happening behind the scenes
     //uncommenting rings.move() allows the layout to degrade
     for(int j = 0; j < numRows; j++)
     {
       for(int i = 0; i < numColumns; i++)
       {
         balls[i][j].move();
   //      rings[i][j].move();
         checkCollision(rings[i][j], balls[i][j], ballCollision);
    //     rings[i][j].display();
   //      balls[i][j].display();
       }
     }
     for(int k = 0; k < count; k++)
     {
       blobs[k].display();
     }
   }
    
   color makeColour(float value)
   {
     //tortuous mapping to get a nice colour change
     //turquoise could be brighter ...
     float tempRed0 = map(value, 0, height, 0, PI);
     float tempRed1 = map(cos(tempRed0), 1, -1, 255, -50);
     float redBit = max(tempRed1, 6);
    
     float tempGreen, greenBit;
     if(value <= height / 3)
     {
       tempGreen = map(value, 0, height/3, 0, QUARTER_PI);
       greenBit = map(sin(tempGreen), sin(0), sin(QUARTER_PI), 50, 225);
     }
     else
     {
       tempGreen = map(value, height/3, height, QUARTER_PI, HALF_PI);
       greenBit = map(sin(tempGreen), sin(QUARTER_PI), sin(HALF_PI), 225, 150);
     }
    
     float tempBlue = map(value, 0, height, HALF_PI, 2.7*PI);
     float blueBit = max(cos(tempBlue) * 140, 0);
   
     return color(redBit, greenBit, blueBit);
   }
   

1. // Ball class
   class Ball
   {
     float x, y;
     float vx, vy;
     float radius;
     color colour = color(0, 0, 255);
    
     float mass = 1.0;
     float gravity = 0.0;
     float bounce = -0.6; // default = -0.6
    
     Ball(float x, float y, float vx, float vy, float radius, color colour)
     {
       this.x = x;
       this.y = y;
       this.vx = vx;
       this.vy = vy;
       this.radius = radius;
       this.mass = radius;
       this.colour = colour;
     }
    
     void move()
     {
   //    vy = vy + gravity;
       y += vy;
       x += vx;
     }
    
     void display()
     {
       fill(colour);
       ellipse(x, y, radius * 2, radius * 2);
     }
   }
    

1.   class Blob //a shape with rounded corners or rounded sides
   {
     float[] xpos, ypos; //vertices
     color colour;
     float[] xoff, yoff; //offsets from vertices
     int numPoints;
     float offset = 2; //2 or 0.3: fraction of each end of line converted to rounded corners
     Boolean niceShape = true; //set offset to < 1 and this to false ...
    
     Blob(float[] xpos, float[] ypos, color colour)
     {
       this.xpos = xpos;
       this.ypos = ypos;
       this.colour = colour;
       init();
     }
    
     void init()
     {
       noStroke();
   
       numPoints = xpos.length;
       xoff = new float[numPoints];
       yoff = new float[numPoints];
     }
    
     void display()
     {
       fill(colour);
      
       if((offset < 1) && (niceShape == true))
       {
         float totalx = 0;
         float totaly = 0;
         for(int i = 0; i < numPoints; i++)
         {
           totalx += xpos[i];
           totaly += ypos[i];
         } 
         float centreX = totalx / numPoints;
         float centreY = totaly / numPoints;
        
         beginShape();
         vertex(xpos[0], ypos[0]);
         for(int i = 0; i < numPoints; i++)
         {
           bezierVertex(xpos[i], ypos[i], centreX, centreY, xpos[(i + 1) % numPoints], ypos[(i + 1) % numPoints]);
         }
         endShape();
       }
          
       else
       {  
         for(int i = 0; i < numPoints; i++)
         {
           float dx = xpos[i] - xpos[(i + 1) % numPoints];
           float dy = ypos[i] - ypos[(i + 1) % numPoints];
           xoff[i] = xpos[i] - dx / offset;
           yoff[i] = ypos[i] - dy / offset;
         }
          
         beginShape();
         vertex(xoff[numPoints - 1], yoff[numPoints - 1]);
         for(int i = 0; i < numPoints; i++)
         {
           bezierVertex(xpos[i], ypos[i], xpos[i], ypos[i], xoff[i], yoff[i]);
         }
         endShape();
       }
     }
   }
      

1. //this is from Keith Peters's Making things move
   //internal collision test and reaction added later
   float dx, dy, dist, overlap;
   
   void checkCollision(Ball ball0, Ball ball1, Boolean internalCollision)
   {
     dx = ball1.x - ball0.x;
     dy = ball1.y - ball0.y;
     dist = sqrt(dx*dx + dy*dy);
    
     if(internalCollision)
     {
       if(dist >= ball0.radius - ball1.radius)
       {
         doCollision(ball0, ball1, true);
       }
     }
     else
     {
       if(dist < ball0.radius + ball1.radius)
       {
         doCollision(ball0, ball1, false);
       }
     }   
   }
      
   void doCollision(Ball ball0, Ball ball1, Boolean internalCollision) 
   {
     //calculate angle, sine and cosine
     float angle = atan2(dy, dx);
     float sine = sin(angle);
     float cosine = cos(angle);
    
     //rotate ball0's position
     PVector pos0 = new PVector(0, 0);
    
     //rotate ball1's position
     PVector pos1 = rotateC(dx, dy, sine, cosine, true);
    
     //rotate ball0's velocity
     PVector vel0 = rotateC(ball0.vx, ball0.vy, sine, cosine, true);
    
     //rotate ball1's velocity
     PVector vel1 = rotateC(ball1.vx, ball1.vy, sine, cosine, true);
    
     //collision reaction
     float vxTotal = vel0.x - vel1.x;
     vel0.x = ((ball0.mass - ball1.mass) * vel0.x + 2 * ball1.mass * vel1.x) / (ball0.mass + ball1.mass);
     vel1.x = vxTotal + vel0.x;
    
     //update positions
     float absV = abs(vel0.x) + abs(vel1.x);
     if(internalCollision)
     {
       overlap = (ball1.radius - ball0.radius) + abs(pos0.x - pos1.x);
     }
     else
     {
       overlap = (ball1.radius + ball0.radius) - abs(pos0.x - pos1.x);
     }
     pos0.x += vel0.x / absV * overlap;
     pos1.x += vel1.x / absV * overlap;
    
     //rotate positions back
     PVector pos0F = rotateC(pos0.x, pos0.y, sine, cosine, false);
     PVector pos1F = rotateC(pos1.x, pos1.y, sine, cosine, false);
    
     //adjust positions to actual screen positions
     ball1.x = ball0.x + pos1F.x;
     ball1.y = ball0.y + pos1F.y;
     ball0.x = ball0.x + pos0F.x;
     ball0.y = ball0.y + pos0F.y;
    
     //rotate velocties back
     PVector vel0F = rotateC(vel0.x, vel0.y, sine, cosine, false);
     PVector vel1F = rotateC(vel1.x, vel1.y, sine, cosine, false);
    
     ball0.vx = vel0F.x;
     ball0.vy = vel0F.y;
     ball1.vx = vel1F.x;
     ball1.vy = vel1F.y;
   }
   
   
   PVector rotateC(float x, float y, float sine, float cosine, boolean anticlock)
   {
     PVector result = new PVector(0, 0);
    
     if(anticlock)
     {
       result.x = x * cosine + y * sine;
       result.y = y * cosine - x * sine;
     }
     else
     {
       result.x = x * cosine - y * sine;
       result.y = y * cosine + x * sine;
     }
     return result;
   }
   

1. //gridBlobs - allonestring
   //invisible grid contrains motion
   int numColumns = 6; //must be at least 3
   int numRows = 4; //must be at least 3
   float gridSizeX, gridSizeY;
   
   //invisible balls provide corners of blobs
   Ball[][]balls = new Ball[numColumns][numRows];
   float radius = 0;
   float vel = 0.5;
   
   //blob colour componenents determined by dist from centrestage
   //and angle from rotating hueAngle
   Blob[][]blobs = new Blob[numColumns-1][numRows-1];
   float stageDiagonal;
   float hueAngle0, hueAngleInc0;
   float hueAngle1, hueAngleInc1;
   float colourInc = 0.02;
   
   void setup()
   {
     size(400, 300);
     background(255);
     smooth();
     noStroke();
    
     //need stageDiagonal for colour mapping later
     float totalWidth = width + 2 * gridSizeX;
     float totalHeight = height + 2 * gridSizeY;
     stageDiagonal = sqrt(totalWidth*totalWidth + totalHeight*totalHeight) / 2;
     //set up rotation of colour components
     hueAngle0 = random(TWO_PI);
     hueAngle1 = random(TWO_PI);
     hueAngleInc0 = random(-colourInc, colourInc);
     hueAngleInc1 = random(-colourInc, colourInc);
   
     //top and bottom row and left and right columns are offstage
     //they're there to allow blobs to overlap stageedge
     gridSizeX = width / (numColumns - 2);
     gridSizeY = height / (numRows - 2);
    
     //populate Balls array with balls, one in each gridcell
     for(int i = 0; i < numColumns; i++)
     {
       for(int j = 0; j < numRows; j++)
       {
         float startX = gridSizeX * (random(i, i + 1) - 1);
         float startY = gridSizeY * (random(j, j + 1) - 1);
         balls[i][j] = new Ball(startX, startY, random(-vel, vel), random(-vel, vel), radius, 0);
         balls[i][j].bounce = -1;
       }
     }
   }
   
   void draw()
   {
     background(255);
     noStroke();
    
     //move (and display) balls checking for collision with invisible grid
     for(int i = 0; i < numColumns; i++)
     {
       for(int j = 0; j < numRows; j++)
       {
         balls[i][j].move();
   //      balls[i][j].display();
         float offsetx = ((i % numColumns) - 1) * gridSizeX;
         float offsety = ((j % numRows) - 1) * gridSizeY;
         checkWalls(balls[i][j], offsetx, offsety, gridSizeX, gridSizeY);
       }
     }
    
     //create and colour blobs
     //provide point in current gridcell, in one to right, in one to below right and one below
     for(int i = 0; i < numColumns-1; i++)
     {
       for(int j = 0; j < numRows-1; j++)
       {
         float[]xpos = {balls[i][j].x, balls[i+1][j].x, balls[i+1][j+1].x, balls[i][j+1].x};
         float[]ypos = {balls[i][j].y, balls[i+1][j].y, balls[i+1][j+1].y, balls[i][j+1].y};
        
         //find centre of blob and its distance and angle from stagecentre
         float centreX = 0;
         for(int k = 0; k < 4; k++) centreX += xpos[k];
         float centreY = 0;
         for(int k = 0; k < 4; k++) centreY += ypos[k];
         float dx = width / 2 - centreX / 4;
         float dy = height / 2 - centreY / 4;
         float centreAngle = atan2(dy, dx);
         float centreDist = dist(width / 2, height / 2, centreX / 4, centreY / 4);
        
         //some mapping to vary colour components
         //sin and cos used to provide nice flow
         float someHue0 = map(sin(centreAngle - hueAngle0) * centreDist, -stageDiagonal, stageDiagonal, 0, 255);
         float someHue1 = map(cos(centreAngle - hueAngle1) * centreDist, -stageDiagonal, stageDiagonal, 0, 255);
         float someHue2 = 255 - ((someHue0 + someHue1) / 2); //arbitrary manipulation to determine third colour component
         float blobAlpha = someHue2 - (someHue0 + someHue1); //some arbitrary manipulation to vary alpha
   
         //arbitrary colour creation from components (I like this best)
         color blobColour = color(someHue2, someHue0, someHue1, map(blobAlpha, -510, 255, 0, 255));
   
         blobs[i][j] = new Blob(xpos, ypos, blobColour);
         blobs[i][j].display();
       }
     }
     //rotate the colour angle so that the blobs change colour
     hueAngle0 += hueAngleInc0;
     hueAngle1 += hueAngleInc1;
   }
   

Ball class

1. // Ball class
   class Ball
   {
     float x, y;
     float vx, vy;
     float radius;
     color colour = color(0, 0, 255);
    
     float mass = 1.0;
     float gravity = 0.0;
     float bounce = -0.6; // default = -0.6
    
     Ball(float x, float y, float vx, float vy, float radius, color colour)
     {
       this.x = x;
       this.y = y;
       this.vx = vx;
       this.vy = vy;
       this.radius = radius;
       this.colour = colour;
     }
    
     void move()
     {
   //    vy = vy + gravity;
       y += vy;
       x += vx;
     }
    
     void display()
     {
       fill(colour);
       ellipse(x, y, radius * 2, radius * 2);
     }
   }

Blob class

1. class Blob //a shape with rounded corners
   {
     float[] xpos, ypos; //vertices
     color colour;
     float[] xoffcw, yoffcw; //"clockwise" offsets from vertices
     int numPoints;
     int offset = 2; //2 or 3: fraction of each end of line converted to rounded corners
    
     Blob(float[] xpos, float[] ypos, color colour)
     {
       this.xpos = xpos;
       this.ypos = ypos;
       this.colour = colour;
       init();
     }
    
     void init()
     {
       noStroke();
       numPoints = xpos.length;
       xoffcw = new float[numPoints];
       yoffcw = new float[numPoints];
     }
    
     void display()
     {
       for(int i = 0; i < numPoints; i++)
       {
         float dx = xpos[i] - xpos[(i + 1) % numPoints];
         float dy = ypos[i] - ypos[(i + 1) % numPoints];
         xoffcw[i] = xpos[i] - dx / offset;
         yoffcw[i] = ypos[i] - dy / offset;
       } 
      
       fill(colour);
       beginShape();
       vertex(xoffcw[numPoints - 1], yoffcw[numPoints - 1]);
       for(int i = 0; i < numPoints; i++)
       {
         int j = (i + numPoints - 1) % numPoints;
         bezierVertex(xpos[i], ypos[i], xpos[i], ypos[i], xoffcw[i], yoffcw[i]);
       }
       endShape();
     }
   }
   

checkWalls tab (function)

1. void checkWalls(Ball ball, float offsetx, float offsety, float gridSizeX, float gridsizeY)
   {
     if(ball.x + ball.radius > offsetx + gridSizeX)
     {
       ball.x = offsetx + gridSizeX - ball.radius;
       ball.vx *= ball.bounce;
     }
     else if(ball.x < offsetx + ball.radius)
     {
       ball.x = offsetx + ball.radius;
       ball.vx *= ball.bounce;
     }
     else if(ball.y > offsety + gridSizeY - ball.radius)
     {
       ball.y = offsety + gridSizeY - ball.radius;
       ball.vy *= ball.bounce;
     }
     else if(ball.y < offsety + ball.radius)
     {
       ball.y = offsety + ball.radius;
       ball.vy *= ball.bounce;
   }
   } 
   

1. int numBlobs;
   blob[] blobs;
   color[] colour;
   float bRadius = 100;
2. int numVertices;
   float[][] xBlobVertices, yBlobVertices; //all the vertices used by a blob
   float[] xShared, yShared; //vertices shared by blobs (one for each blob)
   int numUnshared;
   float[][] xUnshared, yUnshared; //vertices not shared
3. float moveMin = -0.5;
   float moveMax = 0.5;
4. 
   void setup()
   {
     size(500, 500);
     smooth();
     noStroke();
    
     numBlobs = (int)random(2, 10);
     numVertices = (int)random(3, 10); //shapes must have at least 3 vertices
     numUnshared = numVertices - 3; // unshared vertices (total - 2 shared - centre)
    
     blobs = new blob[numBlobs];
     colour = new color[numBlobs];
    
     xShared = new float[numBlobs];
     yShared = new float[numBlobs]; 
     xUnshared = new float[numBlobs][numUnshared];
     yUnshared = new float[numBlobs][numUnshared];
    
     float angle = TWO_PI / (numBlobs * 2);
     float angleInc = random(HALF_PI); //some random initial rotation
     //find shortRadius (length from blob centres to unshared vertices)
     float dx = bRadius * (cos(2 * angle) - cos(angle));
     float dy = bRadius * (sin(2 * angle) - sin(angle));
     float shortRadius = sqrt(dx*dx + dy*dy);
5.   for(int i = 0; i < numBlobs; i++)
     {
       colour[i] = color(random(255), random(255), random(255), 10);
       //shared vertices are evenly spaced around the origin
       float beta = (2 * i * angle) + angleInc; //angles to shared vertices
       xShared[i] = bRadius * cos(beta);
       yShared[i] = bRadius * sin(beta);
6.     for(int j = 0; j < numUnshared; j++)
       {
         float gamma = ((2 * i + 1) * angle) + angleInc; //angles to blob centres
         //spread out from each blob centre are the unshared vertices
         float sectorPart = (PI + angle) / (numUnshared + 1);
         float initialAngle = gamma - sectorPart * (numUnshared - 1) / 2.0;
         float delta = initialAngle + j * sectorPart;
         xUnshared[i][j] = bRadius * cos(gamma) + shortRadius * cos(delta);
         yUnshared[i][j] = bRadius * sin(gamma) + shortRadius * sin(delta);
       }
     }
   }
7. void draw()
   {
     fill(255, 1);
     rect(0, 0, width, height);
    
     xBlobVertices = new float[numBlobs][numVertices];
     yBlobVertices = new float[numBlobs][numVertices];
8.   //each blob needs numVertices vertices
     //the origin
     //the [i]th shared vertex
     //the numUnshared respective unshared vertices
     //the (i+1)th shared vertex
     for(int i = 0; i < numBlobs; i++)
     {
       xBlobVertices[i][0] = 0;
       yBlobVertices[i][0] = 0;
       xBlobVertices[i][1] = xShared[i];
       yBlobVertices[i][1] = yShared[i];
      
       for(int j = 0; j < numUnshared; j++)
       {
         xBlobVertices[i][j + 2] = xUnshared[i][j];
         yBlobVertices[i][j + 2] = yUnshared[i][j];
       }
      
       xBlobVertices[i][numVertices - 1] = xShared[(i + 1) % numBlobs];
       yBlobVertices[i][numVertices - 1] = yShared[(i + 1) % numBlobs];
     } 
9.   for(int b = 0; b < numBlobs; b++)
     {
       blobs[b] = new blob(xBlobVertices[b], yBlobVertices[b], colour[b]);
     }
     translate(width / 2, height / 2);
     for(int b = 0; b < numBlobs; b++)
     {
       blobs[b].display();
     }
    
     //jiggle all the vertices except the centre one
     for(int i = 0; i < numBlobs; i++)
     {
       xShared[i] += random(moveMin, moveMax);
       yShared[i] += random(moveMin, moveMax);
       for(int j = 0; j < numUnshared; j++)
       {
         xUnshared[i][j] += random(moveMin, moveMax);
         yUnshared[i][j] += random(moveMin, moveMax);
       }
     }
   }
10. class blob //a shape with rounded corners
    {
      float[] xpos, ypos; //vertices
      color colour;
      float[] xoffcw, yoffcw; //"clockwise" offsets from vertices
      int n;
      int offset = 3; //fraction of each end of line converted to rounded corners
     
      blob(float[] xpos, float[] ypos, color colour)
      {
        this.xpos = xpos;
        this.ypos = ypos;
        this.colour = colour;
        init();
      }
     
      void init()
      {
        noStroke();
11.     n = xpos.length;
        xoffcw = new float[n];
        yoffcw = new float[n];
      }
     
      void display()
      {
        for(int i = 0; i < n; i++)
        {
          float dx = xpos[i] - xpos[(i + 1) % n];
          float dy = ypos[i] - ypos[(i + 1) % n];
          xoffcw[i] = xpos[i] - dx / offset;
          yoffcw[i] = ypos[i] - dy / offset;
        } 
       
        fill(colour);
        beginShape();
        vertex(xoffcw[n - 1], yoffcw[n - 1]);
        for(int i = 0; i < n; i++)
        {
          int j = (i + n - 1) % n;
          bezierVertex(xpos[i], ypos[i], xpos[i], ypos[i], xoffcw[i], yoffcw[i]);
        }
        endShape();
      }
    }