Non-overlapping text in p5.js | Coding Train, Choo choo! | Page 1

heavy dune Nov 17, 2022, 12:41 PM

#

Hello! I am having an issue with a program I'm writing in p5.js. The goal is to create a wall of text that gradually disappears unless you click on specific words to keep them there. So far, I have managed to do that, but I haven't found a way to keep the text from overlapping each other. I watched the video on non-overlapping circles but since rectangles don't have a radius but a height and width, using the distance function doesn't work. Furthermore, I would like for all words in the word file to be displayed, so I can't just not display it if it overlaps and draw another one.
I'm hoping someone here could point me in the right direction regarding this, or maybe someone has ideas on what I could try.

here is the code I have so far (the text is in a separate file from the sketch)
Thanks in advance for any help 🙂

📎 text_memory.txt

round knoll Nov 17, 2022, 1:00 PM

#

How to check if two rectangles are intersecting

https://stackoverflow.com/questions/16005136/how-do-i-see-if-two-rectangles-intersect-in-javascript-or-pseudocode#16012490

Stack Overflow

How do I see if two rectangles intersect in JavaScript or pseudocode?

I have two rectangles which I must return in a function whether they intersect or not.

They are represented by [ x0, y0, x1, y1 ] pairs that represent the top-left and bottom-right corner of the

#

And this should be able to give you the width and height of your text

https://p5js.org/reference/#/p5.Font/textBounds

reference | p5.js

p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

heady igloo Nov 17, 2022, 3:38 PM

#

round knoll And this should be able to give you the width and height of your text https://...

Use textFont() to get the current font to be able to use this

heavy dune Nov 17, 2022, 6:52 PM

#

I tried to make a function to check overlap and it seems to work, but now I have the problem that the while loop doesn't work for some reason. What am I missing? (r45)

📎 textMemory2.txt

round knoll Nov 17, 2022, 8:48 PM

#

I think your problem is you only check if you are overlapping box k, if you overlap you resample position. but after resampling you only check if you are overlapping box k, but not all boxes before that. So after resampling you might be overlapping some other box. Create a function checkAllBoxes(currentBox, allBoxes) which always checks all boxes and return true if there is any overlap, false if not

#

like this (i did no test this)

function checkAllBoxes(currentBox, allBoxes) {
  for(let box of allBoxes) {
    if(box == currentBox) continue
    if(overlapping(box, currentBox)) return true
  }

  return false 
}

#

get rid of for(k) loop and just put while(checkAllBoxes(box, boxes))... instead

#Non-overlapping text in p5.js