p5.j​​s-使用翻译时的冲突检测

Question

I'm having a problem I can't seem to solve when using the p5 javascript library. Essentially I want to create a random "snake" of circles in p5.js.

My code looks like this.

function setup() {
 createCanvas(400, 400)
  background(220)
  noFill()
  noLoop()
}

function draw() {
  translate(200,200)
  strokeWeight(1)
  for(j=0;j<5;j++) {
        snake() 
  }
}

function snake() {
  rad = 10
  ellipse(0,0,rad,rad)
  push()
  for(i=0;i<100;i++) {
    a = random(0,360)
    translate(rad*sin(a),rad*cos(a))
    ellipse(0,0,rad,rad)
  }
  pop()
}

What I do is create a circle in the centre, then select a random point 360 degrees around that circle at a certain radius from it, and create a new circle there. Then I translate the centre point (the 0,0) to the centre of that new circle and start the process again.

That delivers a snake, but the problem is the circles inevitably start overlapping.

What I want to do is have my code check whether a randomly created new circle will overlap with any of the previous ones, and if it does, select a new location for that circle.

All the approaches to overlap detection in p5.js I encountered so far, however, use distance to calculate whether circles overlap. Which of course the use of translate messes up.

So if anyone has a solution for my problem, feel free to let me know.

Answer 1

You need to store the positions and sizes of the circles in some kind of data structure, like an array. Then check against those circles before you create a new one.

You might be able to do this using the translate() function, but if I were you I would instead do the translation myself. Instead of using the translate() function, keep track of the circle X and circle Y, and move that point as you draw new circles.

This will allow you to work in screen coordinates, which will make it easier to do collision detection .