BEE_TO text manipulation

I know it is a bad pun but I couldn’t help noticing it (bee in beeto).

I really liked the examples we dealt with in class, and for my assignment I decided to try to mix some of the different functions in these examples in addition to others to have a unique product.

So I made use of the geomerative with circle class file, the bounce logic, the drawing of a hexagonal polygon, and the logic of drawing a grid.

I decided that my theme would be that of bees and that the idea of having things vibrating in place fits it well. I looked up the color palette of a beehive, and I made the text particles bounce off the borders if they hit them. This was how it looked at first.

Then I decided to increase the speed so it fits the theme more, increased the size proportionally, added the hexagon grid classes, and adjusted the friction, initial speed, and the numericals involved with bringing the hexagons back home.

This is how the final things looks like where the background randomly changes color just as it would be in real life.

https://youtu.be/17Bj16mcsKQ

The main code drawing on everything:

import geomerative.*;
RFont font;
RPoint[] pnts;
Hexagon[] hexas;
int amountPerPoint;
int index;
HexGrid g;
color[] mainpallet = {  #985b10, #6b4701};
int rad, nwide, nhigh, shade;

void setup() {
  size(1000, 640);
  
  RG.init(this);

  font = new RFont("Raleway-Regular.ttf", 280, RFont.CENTER);
  pnts = getPoints("Bee_to");
  amountPerPoint = 4;
  
  rad=20;
  nhigh = (height/((rad*3)/2));
  nwide = int(width/(sqrt(3)*rad))+1;
  
  g = new HexGrid(nwide, nhigh, rad);
  g.display();
  
  hexas = new Hexagon[pnts.length*amountPerPoint];
  
  index = 0;
  
  for (int i = 0; i < pnts.length*amountPerPoint; i += amountPerPoint) {
    for (int j = 0; j < amountPerPoint; j++) {
      int k = i + j;
      hexas[k] = new Hexagon(width/2 + pnts[index].x + random(-2, 2), height/1.65 + pnts[index].y + random(-2, 2), random(8, 18));
    }
    index++;
  }
  
  
   
}

void draw() {
   background(107,71,1);
   
   shade = int(random(0,1));
   g.display();
   
   for (int i =0; i < hexas.length; i++) {
     hexas[i].seekHome();
     hexas[i].update();
     hexas[i].display(6);
     hexas[i].checkEdges();
   }
   
   for(int i=0; i < 5 ; i++)
  {
    Hbackground selected = g.getHex(int(random(nwide)), int(random(nhigh)));
    selected.setFillColour(mainpallet[int(random(2))]);
  }
}

void mousePressed() {
  for (int i = 0; i < hexas.length; i++){
    hexas[i].xSpeed = random(-30, 30);
    hexas[i].ySpeed = random(-30, 30);
    hexas[i].seek = false;
  }
  //delay(200);
}

void mouseReleased(){
  for (int i = 0; i < hexas.length; i++) {
    hexas[i].seek = true;
  }
  //delay(200);
}

RPoint[] getPoints(String str) {
  RCommand.setSegmentLength (20);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
  RGroup grp;

  grp = font.toGroup(str);
  grp = grp.toPolygonGroup();
  return grp.getPoints();
}

Individual hexagons in background:

//this code was inspired from this website http://louisc.co.uk/?p=2554

class Hbackground {
 float centx;
 float centy;
 float radius;
 float angle = TWO_PI / 6;
 boolean fill = false;
 color c;
 
 Hbackground( float x, float y, float r ){
 centx = x;
 centy = y;
 radius = r;
 }
 
//The draw function will define the fill values and calculate the coordinates
 void display() {
   if(fill)
     fill(c);
   else
    noFill();
   
  
   beginShape();
     for (float a = PI/6; a < TWO_PI; a += angle) {
       float sx = centx + cos(a) * radius;
       float sy = centy + sin(a) * radius;
       vertex(sx, sy);
     }
     
     stroke(137,104,0);
     strokeWeight(4);
   endShape(CLOSE);
 }
 
 void setFillColour(color col)
 {
 fill = true;
 c = col;
 }
}

Grid of hexagons in background:

//this code was inspired from this website http://louisc.co.uk/?p=2554

class HexGrid {
  Hbackground[][] grid; //Our 2D storage array of Hexagon Objects
  int cols, rows;
  float radius;
 
  //Class Constructor required the grid size and cell radius
  HexGrid(int nocol, int norow, int rad)
  {
    //Define our grid parameters
    cols = nocol;
    rows = norow;
    radius=float(rad);
 
    //2D Matrix of Hexagon Objects
    grid=new Hbackground[cols][rows];
 
    //Lets assign the inital x,y coordinates outside the loop
    int x = int(sqrt(3)*radius);
    int y = int(radius);
 
    //These two nested for loops will cycle all the columns in each row
    //and calculate the coordinates for the hexagon cells, generating the
    //class object and storing it in the 2D array.
    for( int i=0; i < rows ; i++ ){
      for( int j=0; j < cols; j++)
      {
        grid[j][i] = new Hbackground(x, y, radius);
        x+=radius*sqrt(3); //Calculate the x offset for the next column
      }
      y+=(radius*3)/2; //Calculate the y offset for the next row
      if((i+1)%2==0)
        x=int(sqrt(3)*radius);
      else
        x=int(radius*sqrt(3)/2);
    }
  }
 
  //This function will redraw the entire table by calling the draw on each
  //hexagonal cell object
  void display()
  {
    for( int i=0; i < rows ; i++ ){
      for( int j=0; j < cols; j++)
      {
        grid[j][i].display();
      }
    }
  }
 
  //This function will return the hexagonal cell object given its column and row
  Hbackground getHex(int col, int row)
  {
    return grid[col][row];
  }
 
}

Individual hexagons making the text:

class Hexagon {
  float x, y, homeX, homeY;
  float xSpeed, ySpeed;
  float hWidth;
  boolean seek;
  char letter;
  float dirX, dirY;

  Hexagon(float _x, float _y, float _width ) {
    homeX = x = _x;
    homeY = y = _y;
    xSpeed = ySpeed = 0;
    hWidth = _width;
    seek = true;
  }

  void update() {
    x += xSpeed;
    y += ySpeed;
    xSpeed *= .95;
    ySpeed *= .95;
  }

  void display(int npoints) {
    float angle = TWO_PI / npoints;
    beginShape();
      fill(246,224,0);
      stroke(249,201,1);
      for (float a = PI/6; a < TWO_PI; a += angle) {
        float sx = x + cos(a) * hWidth;
        float sy = y + sin(a) * hWidth;
        vertex(sx, sy);
      }
      strokeWeight(2);
    endShape(CLOSE);
  }

  void seekHome() {
    if (seek) {
      dirX = homeX-x;
      dirY = homeY-y;
      dirX*=.009;
      dirY*=.009;
      xSpeed+=dirX;
      ySpeed+=dirY;
    }
  }

  void checkEdges() {
    if (y>height - hWidth) {
      ySpeed *= -1;
    }
    if (y< hWidth) {
      ySpeed *= -1;
    }
    if (x>width - hWidth) {
      xSpeed *= -1;
    }
    if (x< hWidth) {
      xSpeed *= -1;
    }
  }
}

 

Leave a Reply