← Виявлення зіткнень →

Щоб зіткнути точки, використовуйте курсор!

Точка і Точка

Найлегше перевірити зіткнення між двома точками. Щоб перевірити, чи вони торкаються, ми просто перевіряємо, чи збігаються їхні координати X і Y!

if (x1 === x2 && y1 === y2) {
    // точки у спільному пооженні: колізія!
} else {
    // немає колізії
}

Щоб зробити цей код зручнішим для використання, ми можемо обернути його у функцію. Як аргументи ми передаватимемо X/Y координати обох точок. Функція повертатиме логічне значення true або false залежно від того, чи є колізія, чи ні:

function isPointWithPointCollides(x1, y1, x2, y2) {
    if (x1 === x2 && y1 === y2) {
        return true;
    }

    return false;
}

Зверніть увагу на невелике скорочення вище: ми могли б написати else { return false; }, але наш код робить те саме! Нашу версію легше читати й ви до неї звикнете. Думайте про return false; як про значення за замовчуванням, яке буде повернуто, якщо не виконано певних умов.

Звісно цей код (і код наступних прикладів) можна це більше скоротити й ви можете це зробити як показано нижче, але для наочності та читабельності він буде як було показано вище.

function isPointWithPointCollides(x1, y1, x2, y2) {
    // чи координати обох точок у спільному положенні?
    return x1 === x2 && y1 === y2;
}

Маючи під рукою нашу першу функцію виявлення зіткнень, ми можемо створити з нею щось корисне. Пограйтеся з інтерактивним прикладом на початку сторінки, наводячи одну точку на іншу і спостерігайте, як буде змінюватися колір фону!

Ви помітите, що призвести до колізії між точками буває непросто (можете здогадатися чому?) — це питання ви ще зможете спробувати вирішити в першій секції завдань.

Повний код інтерактивного прикладу можна побачити нижче. Спробуйте вставити його в онлайн редактор p5js, запустити його та внести зміни, щоб побачити, як зміниться поведінка:

// змінні для зберігання координат статичної точки
let targetX;
let targetY;

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  noCursor();
  strokeWeight(15); // збільшена жирність точки, щоб краще її бачити

  targetX = width / 2;  // визначення горизонтального центра полотна
  targetY = height / 2; // визначення вертикального центра полотна
}

function draw() {
  // результат перевірки на зіткнення, який повертає наша функція
  let isColliding = isPointWithPointCollides(mouseX, mouseY, targetX, targetY);

  // якщо є колізія, тоді змінюємо колір фону на помаранчевий...
  if (isColliding) {
    background('orange');
  } else {
    // ...якщо ні, тоді фон лишаємо білим
    background(255);
  }

  // малювання статичної точки, яку ми перевірятимемо на зіткнення
  stroke(0, 150, 255);
  point(targetX, targetY);

  // малювання другої точки, що контролюється курсором
  stroke(0, 150);
  point(mouseX, mouseY);
}

// перевірка на перетин двох точок
function isPointWithPointCollides(x1, y1, x2, y2) {
  // чи координати обох точок у спільному положенні?
  if (x1 === x2 && y1 === y2) {
    return true;
  }

  return false;
}

Ця базова структура сторінки (інтерактивний приклад, пояснення, частини коду в тексті й фінальний код із прикладу) буде однаковою в усіх розділах.

Далі: точка і круг