установить 3 соответствующие точки на прямоугольнике на основе заданного

Question

Идея очень проста, представьте, что у вас есть какой-либо прямоугольник, и вы хотите переместить случайную точку на его границе, я добился этого, выполнив следующее:

var width = 300,
    height = 200,
    margin = 0;

var rnd = function(min, max) {
    return Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + Math.ceil(min);
};

var point = rnd(0, (width * 2) + (height * 2));

var points = [
    { x: 0, y: 0 },
    { x: 0, y: 0 },
    { x: 0, y: 0 },
    { x: 0, y: 0 }
]

var set_point = function(point) {
    var coords = { x: 0, y: 0 };
	
    if(point <= width) { // if on top
        coords.x = point;
        coords.y = -margin;
    } else if(point <= width + height) { // if on the right
        coords.x = width + margin;
        coords.y = point - width;
    } else if(point <= (width * 2) + height) { // if on the bottom
        coords.x = ((width * 2) + height) - point;
        coords.y = height + margin;
    } else { // if on the left
        coords.x = -margin;
        coords.y = ((width * 2) + (height * 2)) - point;
    }
	
    return coords;
};

var test = set_point(point);
points[0].x = test.x;
points[0].y = test.y;

for(var i = 0; i < 1 /*points.length*/; i++) {
	var dot = document.createElement('div');
	dot.className = 'point';
	dot.style.left = points[i].x + 'px';
	dot.style.top = points[i].y + 'px';
	document.querySelector('.rect').appendChild(dot);
}

.rect {
    border:solid 1px #000;
    width:300px;
    height:200px;
    position:absolute;
    top:calc(50% - 100px);
    left:calc(50% - 150px);
}

.point {
    width:10px;
    height:10px;
    position:absolute;
    border-radius:100%;
    border:solid 1px red;
    background:red;
    transform:translate3d(-5px, -5px, 0);
}

<div class="rect"></div>

Так что теперь, когда у меня есть случайная точка и прямоугольник, мне нужно также назначить 3 оставшиеся соответствующие точки, как это:

Я пытался сделать это, используя несколько подходов, но ни один из них, кажется, не работает правильно, у кого-нибудь есть идеи, как получить оставшиеся 3 очка на основе того, что у меня есть?

Answer 1

Вам нужно сгенерировать случайное число от 0 до Math.min(width, height).Давайте назовем это случайное число d.Оттуда координаты ваших точек в прямоугольнике выглядят следующим образом:

• d, 0
• width, d
• width - d, height
• 0, height - d

Вам просто нужно применить этот принцип к вашей реализации.