Coding train 9.8: Random circle with no overlap

p5.js Coding Questions
1

Good morning beautiful processing people,

I’ve been following along the coding train random circle with no overlap video trying to recreate the code but using random text characters instead of circles.

I’m encountering difficulties preventing text overlap and simultaneously filling out the canvas because all text characters have random/different dimensions. Any ideas on how I could fix my code in order to fill out the canvas with random text, no overlap and minimal white space.

Skip to the last couple of minutes to see fully working code. (coding train video)

My code below, currently using a for-loop to prevent some overlap because the while-loop wouldn’t work with the break() function, a way around this would also be appreciated,
Thank you!

var keys1 = ;
var array1 = [“+”, “-”, “<”, “>”];

function setup() {
createCanvas(400, 400);
background(220);

//while ( keys1.length< 50)
for (var i = 0; i < 25; i++) {
var keys2 = {
x: random(width),
y: random(height),
};

var overlapping = false;
for (j = 0; j < keys1.length; j++) {
  var other = keys1[j];
  var d = dist(keys2.x, keys2.y, other.x, other.y);
  if (d < 35) {
    overlapping = true;
  }
}

if (!overlapping) {
  keys1.push(keys2);
}

for (i = 0; i < keys1.length; i++) {
  text(array1[0], keys1[i].x, keys1[i].y);
}

}
}
function draw() {}

1 Like