# A Circle tile instead of square one

**URL:** https://discourse.processing.org/t/a-circle-tile-instead-of-square-one/9140
**Category:** Libraries
**Created:** [March 9, 2019, 10:48am UTC](https://discourse.processing.org/t/a-circle-tile-instead-of-square-one/9140 "2019-03-09T10:48:56Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![l3ehfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/l3ehfar/32/4074_2.png) [@l3ehfar](https://discourse.processing.org/u/l3ehfar)
#### Post date: [March 9, 2019, 10:48am UTC](https://discourse.processing.org/t/a-circle-tile-instead-of-square-one/9140/1 "2019-03-09T10:48:57Z")

</div>

here’s my hexagonal tiling in a square shape, I would like to convert the square shape into a circle one, can anyone help me?

```auto
float unitSize = 15;
float eqTriH = 0.8660254;
int w = 600;
int h = 600;
int cellsX = int(w/(unitSize*3));
int cellsY = int(h/(unitSize*eqTriH*2+eqTriH));
float[][] terrain;
int cols, rows;
int scl=20;
float flying=0;
import processing.sound.*;
Amplitude amp;
AudioIn in;
void setup() {
  fullScreen(P3D);
  cols=w/scl;
  rows=h/scl;
  terrain=new float[cols][rows];
  smooth();
  in = new AudioIn(this, 0);
  in.start();
  amp = new Amplitude(this);

  amp.input(in);
}

void draw() {
  background(51);
  flying-=0.01;
  float yoff=flying;
  for (int y=0; y<rows; y++) {
    float xoff=0;
    for (int x=0; x<cols; x++) {
      terrain[x][y]=map(noise(xoff, yoff), 0, 1, -50, 50);
      xoff+=0.2;
    }
    yoff+=0.2;
  }
  translate(660, 240);
  float vol = amp.analyze();
  for (int i = 0; i < cellsX; i++) {
    for (int j = 0; j < cellsY; j++) {
      noFill();
      stroke(255);
      strokeWeight(0.8);
      beginShape();
      for (int k = 0; k < 6; k++) {
        vertex(unitSize+i*unitSize*3+cos(TWO_PI/6*k)*unitSize, 
          unitSize*eqTriH+j*unitSize*2*eqTriH+sin(TWO_PI/6*k)*unitSize, 
          terrain[i][j]+random(-vol*600, vol*600));
      }
      endShape(CLOSE);
      noFill();
      stroke(255);
      strokeWeight(0.8);
      beginShape();
      for (int k = 0; k < 6; k++) {
        vertex(unitSize*2.5+i*unitSize*3+cos(TWO_PI/6*k)*unitSize, 
          unitSize*eqTriH*2+j*unitSize*2*eqTriH+sin(TWO_PI/6*k)*unitSize, 
          terrain[i][j]+random(-vol*600, vol*600));
      }
      endShape(CLOSE);
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [March 11, 2019, 9:07pm UTC](https://discourse.processing.org/t/a-circle-tile-instead-of-square-one/9140/2 "2019-03-11T21:07:23Z")

</div>

There are several ways you could approach this problem. One is to create a mask that tells you whether to draw a tile or not.

For example, you could use the circle-point collision algorithm to check whether or not a tile on your grid would fall inside a circle.

> **[Collision Detection](http://www.jeffreythompson.org/collision-detection/point-circle.php)**
>
> An online book about collision detection using Processing.

So, given this function:

```auto
// POINT/CIRCLE
boolean pointCircle(float px, float py, float cx, float cy, float r) {

  // get distance between the point and circle's center
  // using the Pythagorean Theorem
  float distX = px - cx;
  float distY = py - cy;
  float distance = sqrt( (distX*distX) + (distY*distY) );

  // if the distance is less than the circle's
  // radius the point is inside!
  if (distance <= r) {
    return true;
  }
  return false;
}

```

…we are going to test each cell x,y against a circle of radius cellsX / 2.0.

So, for example, inside your i,j loop, wrap the rendering of a cell in something like this:

```
 if (pointCircle(i, j, cellsX/2.0, cellsY/2.0, cellsX/2.0)) {

```

A different approach would be to not use a nested x,y loop for rending, and instead either use one loop that winds out from the center, or a loop for nested rings of hexagons. This however would change your render order, which would change your audio data mapping. For discussion of hex rings and winding, see:

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/18365/gradient-rainbow-stroke)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 11, 2019, 9:43pm UTC](https://discourse.processing.org/t/a-circle-tile-instead-of-square-one/9140/3 "2019-03-11T21:43:31Z")

</div>

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/25944/hexagon-pattern)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [March 12, 2019, 5:14pm UTC](https://discourse.processing.org/t/a-circle-tile-instead-of-square-one/9140/4 "2019-03-12T17:14:46Z")

</div>

Interesting, @Chrisir !

Looks like this approach is to create a hexagon class, save an x,y in each hexagon object, and populate them manually in strips by marching through a series of offset for-loops.

> <https://github.com/Kango/Games/blob/master/Settlers3/Tools.pde#L69-L90>

The only thing I don’t like about this approach is that it is hard-coded for one exactly one size, and there is no way to change the board size without rewriting the whole function. That works great for Settlers of Catan, but not as well for a music visualizer.

---

<div class="post-metadata">

### Author: ![l3ehfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/l3ehfar/32/4074_2.png) [@l3ehfar](https://discourse.processing.org/u/l3ehfar)
#### Post date: [March 14, 2019, 7:36am UTC](https://discourse.processing.org/t/a-circle-tile-instead-of-square-one/9140/5 "2019-03-14T07:36:30Z")

</div>

thanks this was so helpful