Сегодня мы создадим эту плавающую иллюзию, где сфера, кажется, движется вверх и вниз по мере того, как движется ее фон.
В p5.js функция setup() запускается один раз, тогда как функция draw() запускается непрерывно в цикле. Подобно холсту художника, мы будем видеть результат нашего кода на холсте браузера. В настройке функции холст создается функцией createCanvas(). Мы можем изменить ширину и высоту нашего холста, изменив значения параметров функции createCanvas(). Чтобы получить доступ к 3D-библиотеке, вам нужно добавить третий параметр WEBGL в функцию createCanvas().
Сначала давайте сделаем мяч, для этого вам нужно написать код в функции draw(), потому что нам нужно вращать наш мяч, а для этого требуется, чтобы функция draw() работала непрерывно. Мяч создается функцией сфера(), которая имеет параметр для радиуса 900. Эта большая сфера будет на заднем плане. Теперь создайте еще одну сферу размером 80.
Теперь мы хотим добавить текстуру к этой сфере, но как мы это сделаем? . Сначала находим текстуру с белым фоном и горизонтальными линиями и загружаем ее в p5.js, теперь нам нужно ее загрузить, чтобы мы могли добавить ее в текстуру. Вот как.
В функцию draw() нам нужно добавить функцию texture(), чтобы оборачивать наше изображение, как оберточная бумага вокруг наших сфер.
Теперь нам нужно повернуть большую сферу, но это не сработает, если мы не сможем предотвратить влияние одной части кода на другую, вот код того, как это делается.
Поскольку он постоянно вращается, мы не получаем эффекта от его движения. Решение этой проблемы состоит в том, чтобы заставить его двигаться вверх и вниз, как пульсирующее движение, используя sin .
Вот и все, вы создали парящую иллюзию.
