Здесь мы будем использовать библиотеку JavaScript под названием p5.js для имитации raycasting в JavaScript.
Raycasting состоит из двух частей. Луч, который будет указывать в направлении, и Стена, на которую будет указывать луч. Итак, следуя этой логике, мы хотим иметь два объекта для нашего Raycaster. Класс Рэя и класс Стены. Если мы сможем доказать, что определенный луч указывает на стену, тогда мы сможем вычислить линию до стены и создать raycaster, который покажет то, что видно.
Используя p5.js, у нас есть доступ к нескольким новым методам, которые упрощают для нас весь этот процесс, например, createVector (), который позволяет нам создавать векторный путь между двумя точками, передавая x, y и координата z. Если вы _до_ хотите подробное руководство по ванильному javascript, я бы порекомендовал ЭТО 2-мерное руководство по видимости от Red Blob Games. Есть также действительно хорошее видео на эту тему, которое я использовал в качестве основного ресурса Дэниела Шиффмана здесь.
Вначале мы создадим два класса, которые будут посвящены двум нашим объектам в сцене. Они будут обозначены как Луч и Граница. Мы разделим их между двумя файлами, у нас также будет третий файл, который будет называться скетчем. Здесь будет размещаться основная часть нашего приложения, и здесь мы будем взаимодействовать друг с другом каждым из наших классов и хранить функции setup () и draw ().
Наш конструктор Boundary просто принимает 4 аргумента для x1, y1, x2, y2. Эти точки будут указывать на первую и вторую точки каждой линии, которую мы создаем. Затем мы сохраним эти векторы в двух переменных a и b с помощью createVector (). После этого мы будем использовать show () для отображения / рисования вектора.
Теперь мы хотим направить луч на границу и остановить его. Для этого мы должны вычислить пересечение линии и затем направить «свет» наружу, пока он не пересечется с этой стеной. В этом случае он будет принимать положение и угол, так как мы собираемся присоединить его к точке, которую мы обозначим как частица, чтобы мы могли перемещать ее по карте.
В создаваемом нами методе приведения мы будем вводить массив границ, которые будут созданы на нашем холсте. Имея информацию о стенах, мы будем вычислять, где пересекаются линия границы и луч, используя эту формулу = ›
Сначала мы создаем константу для знаменателя, а затем константы для значения, полученного в результате деления T и U на знаменатель. Мы также создаем проверку, когда T больше 0, но меньше 1 и U больше 0. Если эти проверки пройдены, мы продолжаем и возвращаем точки x и y пересечения, создав вектор и установив для x любые y этого вектора сумму x1 + t (x2 - x1) и y1 + t (y2 - y1 ) соответственно. Если проверка не пройдена, это означает, что линии параллельны и никогда не пересекутся при бесконечном масштабе.
Теперь в нашем классе Particle у нас будут методы конструктора, обновления, просмотра и отображения. Наш конструктор будет иметь позицию, используя ширину и высоту, предоставленные p5js, и массив лучей, которые будут установлены по кругу вокруг нашей позиции. Мы обновим нашу позицию с помощью нашего метода обновления, который установит значения позиций X и Y с тем, что мы ему дадим. Это могут быть статические точки или положение наших мышей значений x и y.
Наш следующий метод будет выглядеть (стены), который будет принимать массив границ, в данном случае стены, и запускать каждый луч из нашего конструктора через нашу функцию приведения из нашего класса Ray, которая даст нам точку пересечения, если луч пересекаются. Мы проверяем, меньше ли расстояние между точкой и границей нашего записанного расстояния, и если да, то мы установим нашу запись на расстояние и нашу ближайшую точку к выходу нашей функции приведения. Отсюда мы возьмем ближайшую переменную, которая выводится, и создадим обводку / линию от нашей позиции до ближайших.x и closest.y и покажем результат в конце для каждого луча в нашем массиве.
Наконец, чтобы собрать все это воедино, мы создаем файл sketch.js, который будет создавать наш холст и рисовать все на экране с помощью методов setup и draw. Сначала мы инициализируем наш массив стен, лучей и частиц, затем создаем холст, вы можете выбрать любой размер, какой хотите. В этом примере мы создадим случайные границы, но вы можете сделать собственные границы или даже установить их так, чтобы границы создавались при щелчке мышью. каждая граница будет сохранена в нашем массиве стен. мы также создадим 4 настраиваемых границы, которые будут размером с весь холст, чтобы действовать как инкапсулирующие стены. наконец, мы создадим наш экземпляр нашей частицы. Теперь все, что нам нужно сделать, это вызвать методы update, show и look (стены) и wallah, все готово! теперь с этими рабочими классами вы можете создать столько частиц, сколько хотите источников света! были сделаны!
