# Text bounce bounding box?

**URL:** <https://discourse.processing.org/t/text-bounce-bounding-box/9070>\
**Category:** Coding Questions\
**Created:** [March 7, 2019, 1:43pm UTC](https://discourse.processing.org/t/text-bounce-bounding-box/9070 "2019-03-07T13:43:35Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![piet7](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@piet7](https://discourse.processing.org/u/piet7)\
**Post date:** [March 7, 2019, 1:43pm UTC](https://discourse.processing.org/t/text-bounce-bounding-box/9070/1 "2019-03-07T13:43:35Z")

</div>

Hello all. Is it possible to make a bounding box around your text, so when it hits the right side it won’t go beyond the width of my work area? I could minus the text width from the xPos, but that would have to make the text a fixed size and I would prefer it to be random

```auto

float xPos = random(0, 500);
float xspeed = 10;
float direction = 1;
PFont font1;
float textStr;

void setup() {
size (350, 500);
  textStr = random(10, 20);
  
} 

void draw() {
  background (0);
  textSize(textStr);

  fill(255);
  textAlign(LEFT);
  xPos = xPos + direction*xspeed;
  text("this is a test", xPos, 425);
  if (xPos > width) direction = -1;
  if (xPos < 0) direction = 1;
  if (xPos < 0)
    textStr = random(10, 20);
  if (xPos > width)
    textStr = random(10, 20);
} 

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 7, 2019, 1:51pm UTC](https://discourse.processing.org/t/text-bounce-bounding-box/9070/2 "2019-03-07T13:51:35Z")

</div>

could you first play

> **[text() / Reference](https://processing.org/reference/text_.html)**
>
> Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is s…

> text(s, 10, 10, 70, 80); // Text wraps within text box

if that fits your needs

---

<div class="post-metadata">

**Author:** ![piet7](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@piet7](https://discourse.processing.org/u/piet7)\
**Post date:** [March 7, 2019, 2:05pm UTC](https://discourse.processing.org/t/text-bounce-bounding-box/9070/3 "2019-03-07T14:05:10Z")

</div>

it still goes beyond on the right side of the canvas because the text is left aligned I suppose 😕

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 7, 2019, 2:13pm UTC](https://discourse.processing.org/t/text-bounce-bounding-box/9070/4 "2019-03-07T14:13:33Z")

</div>

![2019-03-07_21-12-52_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e5e5c4ecfd8e35892456dc2e70ab6a6dc8ed3889.png)

---

<div class="post-metadata">

**Author:** ![piet7](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@piet7](https://discourse.processing.org/u/piet7)\
**Post date:** [March 7, 2019, 4:03pm UTC](https://discourse.processing.org/t/text-bounce-bounding-box/9070/5 "2019-03-07T16:03:42Z")

</div>

I tried a bunch of things but its still not working. I can’t seem to mix ints and floats so it’s I’ve tried both. The text is there but the animation is gone

```auto
String mytext = "this is a test";
float x1;
float x=x1, y=10, w=width, h=height;

float xPos = random(0, 500);
float xspeed = 10;
float direction = 1;
PFont font1;
float textStr;

void setup() {
  x1=random(0, 500);
size (350, 500);
  textStr = random(10, 20);
  
} 

void draw() {
  background (0);
  textSize(textStr);

  fill(255);
  textAlign(LEFT);
  xPos = xPos + direction*xspeed;
  text("this is a test", x, y, w, h);
  if (xPos > width) direction = -1;
  if (xPos < 0) direction = 1;
  if (xPos < 0)
    textStr = random(10, 20);
  if (xPos > width)
    textStr = random(10, 20);
} 

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 7, 2019, 4:15pm UTC](https://discourse.processing.org/t/text-bounce-bounding-box/9070/6 "2019-03-07T16:15:05Z")

</div>

possibly use the variables for the text boundaries?

```auto
String mytext = "this is a test";
float y=10, w, h;
float xPos = 0;
float xspeed = 10;
float direction = 1;
//PFont font1;
float textStr;

void setup() {
  size (350, 500);
  textStr = random(10, 20);
  h=height-y;
  w=width;
} 

void draw() {
  background (0);
  textSize(textStr);
  fill(255);
  //textAlign(LEFT);
  xPos = xPos + direction*xspeed;
  if (xPos > width) {  
    direction = -1;
    textStr = random(10, 20);
  }
  if (xPos < 0) {     
    direction = 1;
    textStr = random(10, 20);
  }
  w = width-xPos;
  text(mytext, xPos, y, w, h);
} 

```

it is difficult to see what the result of your sketch should be?

---

<div class="post-metadata">

**Author:** ![piet7](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@piet7](https://discourse.processing.org/u/piet7)\
**Post date:** [March 7, 2019, 4:18pm UTC](https://discourse.processing.org/t/text-bounce-bounding-box/9070/7 "2019-03-07T16:18:51Z")

</div>

> it is difficult to see what the result of your sketch should be?

basically a ball bouncing from the left wall to the right wall, but instead of a ball it’s a piece of text.

as of now it keeps going beyond the right wall

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 7, 2019, 4:31pm UTC](https://discourse.processing.org/t/text-bounce-bounding-box/9070/8 "2019-03-07T16:31:58Z")

</div>

> [@piet7](#):
>
> it keeps going beyond the right wall

not in my version as i recalc w

---

<div class="post-metadata">

**Author:** ![piet7](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@piet7](https://discourse.processing.org/u/piet7)\
**Post date:** [March 7, 2019, 5:20pm UTC](https://discourse.processing.org/t/text-bounce-bounding-box/9070/9 "2019-03-07T17:20:07Z")

</div>

you are right! it stays within but not on the same line.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 7, 2019, 5:31pm UTC](https://discourse.processing.org/t/text-bounce-bounding-box/9070/10 "2019-03-07T17:31:22Z")

</div>

ok, no wrap, miss understanding…  
just move to right and back?  
using correct textwidth

```auto
String mytext = "this is a test";
float y=10;
float x = 0;
float xspeed = 10;
float direction = 1;

float textStr;

void setup() {
  size (350, 500);
  textStr = random(10, 20);
} 

void draw() {
  background (0);
  textSize(textStr);
  fill(255);
  //textAlign(LEFT);
  x = x + direction*xspeed;
  if (x > width-textWidth(mytext)) {  
    direction = -1;
    textStr = random(10, 20);
  }
  if (x < 0) {     
    direction = 1;
    textStr = random(10, 20);
  }
  text(mytext, x, y);
} 

```

---

<div class="post-metadata">

**Author:** ![piet7](https://avatars.discourse-cdn.com/v4/letter/p/45deac/32.png) [@piet7](https://discourse.processing.org/u/piet7)\
**Post date:** [March 7, 2019, 5:40pm UTC](https://discourse.processing.org/t/text-bounce-bounding-box/9070/11 "2019-03-07T17:40:19Z")

</div>

exactly, thank you sir.