// Переменная для угла вращения
let rotationAngle = 0;
function setup() {
// Создаем 3D-холст 600 на 600 пикселей
createCanvas(600, 600, WEBGL);
// Устанавливаем frameRate, чтобы анимация была плавной (по умолчанию 60)
frameRate(60);
}
function draw() {
// Светло-серый фон
background(220);
// Включаем lights(), чтобы видеть объем
lights();
// Включаем normalMaterial(), чтобы грани были цветными
// (тогда lights() можно не использовать, но оставим для примера)
// В нашем случае это сделает пончики цветными, как на картинке
normalMaterial();
// --- ЧАСТЬ 1. НЕПОДВИЖНЫЙ ВЕРТИКАЛЬНЫЙ ПОНЧИК ---
// Мы используем push() и pop(), чтобы изоляция поворотов не влияла друг на друга
push();
// 1. Поворачиваем пончик, чтобы он стоял вертикально.
// rotateX(HALF_PI) поворачивает его на 90 градусов.
rotateX(HALF_PI);
// 2. Смещаем его немного вправо и вверх, чтобы он был как () на картинке.
translate(80, -50, 0);
// 3. Устанавливаем сам наклон.
// На картинке он немного наклонен вправо.
// Я использую rotateZ, потому что мы его уже повернули.
rotateZ(0.2);
// Рисуем большой пончик (радиус 120, толщина 20)
torus(120, 20);
pop(); // Возвращаемся в центр сцены
// --- ЧАСТЬ 2. ВРАЩАЮЩИЙСЯ ГОРИЗОНТАЛЬНЫЙ ПОНЧИК ---
push();
// 1. Передвигаем пончик вправо, туда, где стоит вертикальный пончик
// translate(80, -50, 0);
// Угол вращения постоянно увеличивается
rotationAngle += 0.02;
// 2. Вращаем саму ось координат, чтобы следующий translate сдвинул пончик по кругу.
// Я использую rotateY, так как вращение должно быть вертикальным вокруг вертикальной оси.
rotateY(rotationAngle);
// 3. Сдвигаем маленький пончик на расстояние, чтобы он крутился ВОКРУГ большого.
// 120 (радиус большого) + небольшое расстояние (30), чтобы они не касались.
translate(150, 0, 0);
// 4. Поворачиваем его, чтобы сам пончик лежал горизонтально.
rotateX(HALF_PI);
// Рисуем маленький пончик (радиус 35, толщина 10)
torus(35, 10);
pop(); // Возвращаемся в центр сцены
// Если убрать lights(), то в режиме normalMaterial() они будут цветными,
// что еще более наглядно показывает грани и вращение.
// Можете попробовать убрать lights() и fill().
}