# How to add text into randomly generated bubbles

**URL:** <https://discourse.processing.org/t/how-to-add-text-into-randomly-generated-bubbles/26950>\
**Category:** Coding Questions\
**Created:** [January 10, 2021, 2:51pm UTC](https://discourse.processing.org/t/how-to-add-text-into-randomly-generated-bubbles/26950 "2021-01-10T14:51:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![add2fic](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@add2fic](https://discourse.processing.org/u/add2fic)\
**Post date:** [January 10, 2021, 2:51pm UTC](https://discourse.processing.org/t/how-to-add-text-into-randomly-generated-bubbles/26950/1 "2021-01-10T14:51:46Z")

</div>

I found and edited this open processing example, right now it is just creating random bubbles but I want text to appear at the center of these bubbles. For example an array n=[‘A’,‘B’,‘C’] and have them appear in the bubbles. How might I go about doing this? Thank you!

```auto
class line {
  constructor() {
    this.nsX = random(100);
    this.nsY = random(100);
    this.color = color(random(360), 100, 100, 255);
    this.sw = random(width/20, width/3);
    this.aryPoints = [];
  }
  update() {
    this.nsX += _nsRate;
    this.nsY += _nsRate;
    this.aryPoints.unshift([
      width/3 * cos(8*PI*noise(this.nsX)),
      height/3 * sin(8*PI*noise(this.nsY))
    ]);

    while (this.aryPoints.length > _maxPoint-1) {
      this.aryPoints.pop();
    }
  }
  draw() {
    
    stroke(this.color);
    strokeWeight(this.sw);
    push();
    translate(width/2, height/2);
    beginShape();
    for (let i = 0; i < this.aryPoints.length; i++) {
      curveVertex(this.aryPoints[i][0], this.aryPoints[i][1]);
      
    }
    endShape();
    pop();
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 10, 2021, 3:27pm UTC](https://discourse.processing.org/t/how-to-add-text-into-randomly-generated-bubbles/26950/2 "2021-01-10T15:27:05Z")

</div>

> [@add2fic](#):
>
> I found and edited this open processing example

Please link to the original example.

`:)`

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 10, 2021, 7:53pm UTC](https://discourse.processing.org/t/how-to-add-text-into-randomly-generated-bubbles/26950/3 "2021-01-10T19:53:16Z")

</div>

```auto
void setup() { size(600,600); textAlign(3,3); background(0); }
void draw() {
    
     float rx = random(width), ry = random(height);
     circle(rx,ry,5,5);
     text(array[frameCount] + "", rx,ry);
}

```

---

<div class="post-metadata">

**Author:** ![add2fic](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@add2fic](https://discourse.processing.org/u/add2fic)\
**Post date:** [January 10, 2021, 8:50pm UTC](https://discourse.processing.org/t/how-to-add-text-into-randomly-generated-bubbles/26950/4 "2021-01-10T20:50:19Z")

</div>

> **[BUBBLES - OpenProcessing](https://openprocessing.org/sketch/1017825)**

This one!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 10, 2021, 10:24pm UTC](https://discourse.processing.org/t/how-to-add-text-into-randomly-generated-bubbles/26950/5 "2021-01-10T22:24:47Z")

</div>

> [@add2fic](#):
>
> I want text to appear at the center of these bubbles

I provided an example to get the extents of a shape (and random points) and draw text to the midpoints of these.

I did not include the code to determine the min, max and midpoint; this is achievable for a beginner.

You can adapt this to your bubbles.

Here is a Processing Java example:

```auto
float xMin, xMax, yMin, yMax;
float xMidpoint, yMidpoint;

void setup() 
  {
  size(500, 500);
  textSize(16);
  noLoop();
  }

void draw() 
  {
  background(0);
  
  translate(width/2, height/2);
  stroke(255, 0, 0);
  strokeWeight(5);
  
  noFill();
  beginShape(POINTS);
  
  for (int i = 0; i < 4; i++) 
    {
    float x = random(-200, 200);
    float y = random(-200, 200); 
    vertex(x, y);
    
    //xMin = ?
    //yMin = ?
    
    //xMax = ?
    //yMax = ?
    }
  endShape();
  
  stroke(255);
  strokeWeight(1);
  line(xMin,yMin, xMin, yMax);
  line(xMax,yMin, xMax, yMax);
  
  line(xMin,yMin, xMax, yMin);
  line(xMin,yMax, xMax, yMax);
  
  xMidpoint = ?;
  yMidpoint = ?;
  
  textAlign(CENTER, CENTER);
  text("MIDPOINT", xMidpoint, yMidpoint);
  }

```

With vertex():  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d2295597e74e2498dde56ebf11f6ce31594320ec.png)

It also worked with curveVertex():  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/55997ce9163b5aa0ab40acb868f8ec6e86f3514a.png)  
The curves will extend beyond the vertex.

If you are working with arrays of vertices (or otherwise) there are methods to get the min and max values.  
I will leave that exploration with you.

References:  
[Midpoint - Wikipedia](https://en.wikipedia.org/wiki/Midpoint#:~:text=In%20geometry%2C%20the%20midpoint%20is,It%20bisects%20the%20segment).

`:)`

---

<div class="post-metadata">

**Author:** ![add2fic](https://avatars.discourse-cdn.com/v4/letter/a/5f9b8f/32.png) [@add2fic](https://discourse.processing.org/u/add2fic)\
**Post date:** [January 16, 2021, 8:06pm UTC](https://discourse.processing.org/t/how-to-add-text-into-randomly-generated-bubbles/26950/6 "2021-01-16T20:06:05Z")

</div>

Hi this was so helpful so thank you! This took me a while but I got up to this point for my draw function. However, I’m not exactly sure I am doing this right, and I still can’t see the words. Do you have any suggestions on how to fix this?

Thank you!

```auto
  draw() {
    let xMin;
    let xMax;
    let yMin;
    let yMax;

    p.stroke(this.color);
    p.strokeWeight(this.sw);
    p.push();
    p.translate(p.width/2, p.height/2);
    p.beginShape();
    for (let i = 1; i < this.aryPoints.length; i++) {
      p.curveVertex(this.aryPoints[i][0], this.aryPoints[i][1]);
        xMin=this.aryPoints[i][0];
        xMax=this.aryPoints[i][0];
        yMin-this.aryPoints[i][1];
        yMax=this.aryPoints[i][1];
        if(this.aryPoints[i][0] < xMin){
            xMin=this.aryPoints[i][0]
        }
        if(this.aryPoints[i][1] < yMin){
            yMin=this.aryPoints[i][1]
        }
        if(this.aryPoints[i][0] > xMax){
            xMax=this.aryPoints[i][0]
        }
        if(this.aryPoints[i][1] > yMax){
            yMax=this.aryPoints[i][1]
        }
    }

    p.endShape();

let xMidpoint = (xMin+xMax)/2;
  let yMidpoint = (yMin+yMax)/2;
  
  p.textAlign(p.CENTER, p.CENTER);
  p.text("MIDPOINT", xMidpoint, yMidpoint);
  p.fill(0, 102, 153);
    p.pop();
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 17, 2021, 11:20am UTC](https://discourse.processing.org/t/how-to-add-text-into-randomly-generated-bubbles/26950/7 "2021-01-17T11:20:06Z")

</div>

Hello,

You did not provide an array of data so I just worked with your code converted to Java mode and modified to a single array with data (x0, y0, x1, y1…).

This is what I can offer:

> **Example**
>
> ```auto
> float xMin, xMax, yMin, yMax;
> float xMidpoint, yMidpoint;
> 
> int aryPoints[] = new int[16];
> 
> public void settings() 
> {  
> size(500, 500); 
> }
> 
> public void setup() 
> {  
> textSize(16);
>   
> for (int i = 0; i < aryPoints.length; i++) 
> {
> aryPoints[i] = PApplet.parseInt(random(-200, 200));
> }  
>   
> //noLoop();
> }
> 
> public void draw() 
> {
> background(0);
> translate(width/2, height/2);
> draw1();  
> }
>   
> public void draw1() 
> {
> beginShape(); //See reference for other "kinds"
>   
> stroke(255, 0, 0);
> strokeWeight(5);
> noFill();
> push();
> for (int i = 0; i < aryPoints.length-2; i+=2) 
> {
> curveVertex(aryPoints[i], aryPoints[i+1]);
>     
> // First point    
> if(aryPoints[i] < xMin)
> xMin=aryPoints[i];
> 
> if(aryPoints[i] > xMax)
> xMax=aryPoints[i];    
>     
> // Second point    
> if(aryPoints[i+1] < yMin)
> yMin=aryPoints[i+1];
>         
> if(aryPoints[i+1] > yMax)
> yMax=aryPoints[i+1];
> }
>   
> endShape();
> 
> float xMidpoint = (xMin+xMax)/2;
> float yMidpoint = (yMin+yMax)/2;
>   
> textAlign(CENTER, CENTER);
> fill(255, 255, 0);
> stroke(0, 255, 0);
> strokeWeight(5);
> point(xMidpoint, yMidpoint);
> text("MIDPOINT", xMidpoint, yMidpoint-20);
>   
> pop();
> }
> 
> void mouseClicked()
> {
> for (int i = 0; i < aryPoints.length; i++) 
> {
> aryPoints[i] = PApplet.parseInt(random(-200, 200));
> } 
> xMin = xMax = yMin = yMax =0;
> xMidpoint = yMidpoint = 0;  
> }
> 
> ```

Note: My Processing crashed so this was from restored code… that is what Processing does to it behind the scenes.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/af77a1f2503db32cd8a32965fde58992e5b96a6f.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 17, 2021, 11:21am UTC](https://discourse.processing.org/t/how-to-add-text-into-randomly-generated-bubbles/26950/8 "2021-01-17T11:21:36Z")

</div>

This topic is continued here:

> [@Add text into moving bubbles](https://discourse.processing.org/t/add-text-into-moving-bubbles/27128/):
>
> Hi! I’ve asked about this before but I’ve come to a place where I am a little stuck. I am trying to insert text into these generated bubbles that move and also get the text to move along with it. I don’t need the text to distort or anything, just have the location be in the center and update the location as the bubbles move. I am editing something (the bubbles) from open processing, so this is why I am probably quite confused as I don’t think I entirely know what the code is telling me, but this…