# Geomerative - fitting text inside arbitrary shapes?

**URL:** <https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917>\
**Category:** Libraries\
**Created:** [October 27, 2018, 3:26am UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917 "2018-10-27T03:26:58Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Angle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/angle/32/2026_2.png) [@Angle](https://discourse.processing.org/u/Angle)\
**Post date:** [October 27, 2018, 3:26am UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917/1 "2018-10-27T03:26:58Z")

</div>

I’m trying to fit text into shapes, so as to get an effect like so:

 ![Crovasshun_Screenshot_2018-10-20_15-24-28](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d8a67214aa42a3326a664b361a5dd3ac881368e6.png)

I’m using the Geomerative library, but the RShape.contains(RShape) doesn’t seem to be working for me. It always seems to return false, no matter what. Heres a sketch that accurately describes the problem - the small rectangle should turn red when inside the larger one, but it never does, despite intersecting with it, and then not intersecting with it after it goes inside.

```auto
import geomerative.*;

RShape shape;
RShape rect;

void setup(){
  size(600, 600, OPENGL);
  smooth();

  RG.init(this);
  RG.setPolygonizer(RG.ADAPTATIVE);

  RG.ignoreStyles();
  
  shape = RG.getRect(100,100,100,50);
}

void draw(){
  rect = RShape.createRectangle(mouseX, mouseY, 10, 10);
  shape.draw(this);
  if (shape.contains(rect))
    rect.setFill(color(255, 0, 0));
  rect.draw(this);
  RPoint[] ps = shape.getIntersections(rect);
  if (ps != null) {
    for (int i=0; i<ps.length; i++) {
      ellipse(ps[i].x, ps[i].y, 10, 10);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)\
**Post date:** [October 27, 2018, 6:51am UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917/2 "2018-10-27T06:51:58Z")

</div>

The geomerative tutorial example on `contains` finds whether a `RPoint` is contained within an `RShape`, and works OK for me, may’be you could get that to work for you?

---

<div class="post-metadata">

**Author:** ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)\
**Post date:** [October 27, 2018, 1:25pm UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917/3 "2018-10-27T13:25:33Z")

</div>

OK I explored a bit more would something like this be acceptable?

```java
import geomerative.*;

RShape shape;
RShape rect;

void setup(){
  size(600, 600, P2D);
  RG.init(this);
  RG.setPolygonizer(RG.ADAPTATIVE);
  shape = RG.getRect(100,100,100,50);
}

void draw(){
  fill(255);
  rect = RShape.createRectangle(mouseX, mouseY, 10, 10);
  shape.draw(this);
  if (shape.contains(rect.getCentroid())){
    fill(255, 0, 0);
  }
  else{
    fill(255);
  }
  rect.draw(this);
}

```

OR

```java
import geomerative.*;

RShape bounds;
RShape my_rect;

void setup() {
  size(600, 600);
  RG.init(this);
  RG.setPolygonizer(RG.ADAPTATIVE);
  bounds = RG.getRect(105, 105, 95, 45);
}

void draw() {
  fill(255);
  my_rect = RShape.createRectangle(mouseX, mouseY, 10, 10);
  rect(100, 100, 100, 50);
  if (inBounds(my_rect)){
    fill(255, 0, 0);
  } else {
    fill(255);
  }
  my_rect.draw(this);
}

boolean inBounds(RShape shp) {
  RPoint[] pts = shp.getPoints();
  for (int i = 0; i < pts.length; i++) {
    if (!bounds.contains(pts[i]))
    { 
      return false;
    }
  }
  return true;
}

```

For something a bit more sophisticated.

---

<div class="post-metadata">

**Author:** ![Angle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/angle/32/2026_2.png) [@Angle](https://discourse.processing.org/u/Angle)\
**Post date:** [October 27, 2018, 9:23pm UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917/4 "2018-10-27T21:23:42Z")

</div>

Hey, that looks really good, thank you!! I tried the RShape.contains(RPoint[]) and it didn’t work. I didn’t think to just check each of them manually in my own function. Dumb of me, in retrospect. XD

---

<div class="post-metadata">

**Author:** ![Angle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/angle/32/2026_2.png) [@Angle](https://discourse.processing.org/u/Angle)\
**Post date:** [October 27, 2018, 10:31pm UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917/5 "2018-10-27T22:31:34Z")

</div>

Hmm. This is only vaguely related, but how would you suggest I put a buffer zone between the shapes? Should I just make a bounding box with the increased space and text against that? Or is there a better way?

 ![Crovasshun_Screenshot_2018-10-27_16-29-24](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/92127832bdd4c59f3247c668049b154ec85214c9.png)

Is how it looks now, and you can see the problem in question in the upper left.

---

<div class="post-metadata">

**Author:** ![Angle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/angle/32/2026_2.png) [@Angle](https://discourse.processing.org/u/Angle)\
**Post date:** [October 27, 2018, 10:37pm UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917/6 "2018-10-27T22:37:05Z")

</div>

Actually, now that I think about it, maybe I should just make a smaller version of the bounding shape to check against.

---

<div class="post-metadata">

**Author:** ![Angle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/angle/32/2026_2.png) [@Angle](https://discourse.processing.org/u/Angle)\
**Post date:** [October 27, 2018, 11:04pm UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917/7 "2018-10-27T23:04:33Z")

</div>

Also, here’s the code if anyone’s curious. XD

> **[Gregory Sartucci / Crovasshun](https://gitlab.com/AngularAngel/Crovasshun)**
>
> GitLab.com

---

<div class="post-metadata">

**Author:** ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)\
**Post date:** [October 28, 2018, 8:08am UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917/8 "2018-10-28T08:08:21Z")

</div>

I’m quite fond of the geomerative library which is why I answered your original question. It seems that there a few glitches unfinished things as you found with not working `contains(RPoint[] pts)`. I have come up with neater workaround for your original boundary test see this [gist](https://gist.github.com/monkstone/ff22d8725ee03bf8cd4a2638ab0bfb5f).

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 28, 2018, 12:22pm UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917/9 "2018-10-28T12:22:30Z")

</div>

Here’s [**BoundaryTest.java**](https://gist.github.com/monkstone/ff22d8725ee03bf8cd4a2638ab0bfb5f#file-boundarytest-java) converted to “BoundaryTest.pde”: 😸

```auto
import geomerative.*;

Boundary bounds;
RShape my_rect;

void setup() {
  size(600, 600, P2D);
  RG.init(this);
  RG.setPolygonizer(RG.ADAPTATIVE);
  bounds = Boundary.createBoundingRectangle(100, 100, 100, 50);
}

void draw() {
  fill(255);
  my_rect = RShape.createRectangle(mouseX, mouseY, 10, 10);
  bounds.draw();
  drawMyRect(bounds.inside(my_rect));
}

void drawMyRect(boolean inside) {
  if (inside) {
    noStroke();
    fill(255, 0, 0);
  } else {
    stroke(0);
    fill(255);
  }
  my_rect.draw(this);
}

```

---

<div class="post-metadata">

**Author:** ![Angle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/angle/32/2026_2.png) [@Angle](https://discourse.processing.org/u/Angle)\
**Post date:** [October 28, 2018, 3:19pm UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917/10 "2018-10-28T15:19:01Z")

</div>

That actually seems less sophisticated though. It only checks against the bounding rectangle, which means that if you’re dealing with fitting things inside a hexagon, for example, you will occasionally have cases where symbols get invalidated by their corners when they shouldn’t be. Fitting an o against a sloped wall, for example. It’s probably more efficient, but as I only need to run this code when generating graphics, I’m not super concerned about that.

---

<div class="post-metadata">

**Author:** ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)\
**Post date:** [October 28, 2018, 7:06pm UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917/11 "2018-10-28T19:06:52Z")

</div>

Yeah but there’s no reason why you couldn’t implement `createShape(RShape shp)` in a custom Boundary.

[Here is how I did it with test!](https://gist.github.com/monkstone/44aa5ae72d8305d97d990f94b506cdf3)

---

<div class="post-metadata">

**Author:** ![Angle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/angle/32/2026_2.png) [@Angle](https://discourse.processing.org/u/Angle)\
**Post date:** [October 30, 2018, 1:09am UTC](https://discourse.processing.org/t/geomerative-fitting-text-inside-arbitrary-shapes/4917/12 "2018-10-30T01:09:03Z")

</div>

Again, it loses precision. I decided to just scale the characters appropriately to account for the border and leave it at that. You can see my code here: [https://gitlab.com/AngularAngel/Crovasshun/blob/master/src/processingdisplay/ASCIIShape.java](https://gitlab.com/AngularAngel/Crovasshun/blob/master/src/processingdisplay/ASCIIShape.java)

And a screenshot:

 ![Crovasshun_Screenshot_2018-10-29_19-11-08](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/99ef30ce8653d0e0f70985a4f95899a4ecab70f3.png)