How to add text into randomly generated bubbles

p5.js Coding Questions
1

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!

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();
  }
}
2

Please link to the original example.

:)

3 
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);
}
4

This one!

5

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:

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

It also worked with curveVertex():
image
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.

:)

6

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!

  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();
  }
}
7

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 
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
image502×527 9.5 KB

8

This topic is continued here: