---

let angle = 0; // Переменная для анимации движения

function setup() {
  // Создаем квадратный холст для 3D графики
  createCanvas(500, 500, WEBGL);
}

function draw() {
  background(255); // Белый фон, как на экране проектора
  
  // Включаем управление мышкой (можно крутить сцену во все стороны)
  orbitControl();  
  
  // Настройки стиля 3D-сетки (как на фото)
  noFill();          // Убираем сплошную заливку, делая фигуры прозрачными
  stroke(0);         // Красим линии сетки в черный цвет
  strokeWeight(0.6); // Делаем линии тонкими и четкими
  
  // Радиус основного вертикального пончика
  let mainRadius = 100; 

  // --- 1. НЕПОДВИЖНЫЙ ВЕРТИКАЛЬНЫЙ ПОНЧИК ---
  push();
    // Наклоняем всю локальную сцену немного вбок (задает угол как на фото)
    rotateY(0.4); 
    // Поворачиваем пончик, чтобы он встал вертикально
    rotateX(HALF_PI); 
    // Рисуем большой пончик (радиус 100, толщина кольца 20)
    torus(mainRadius, 20);
  pop();


  // --- 2. ДВИЖУЩИЙСЯ ГОРИЗОНТАЛЬНЫЙ ПОНЧИК ---
  push();
    // Применяем точно такой же наклон осей, чтобы траектории совпадали
    rotateY(0.4); 
    
    // Каждый кадр увеличиваем угол, чтобы запустить движение
    angle += 0.02; 
    
    // Считаем тригонометрические координаты X и Y для движения по кругу
    let posX = mainRadius * cos(angle);
    let posY = mainRadius * sin(angle);
    
    // Перемещаем центр координат маленького пончика на тело большого
    translate(posX, posY, 0);
    
    // Поворачиваем маленький пончик, чтобы он лежал горизонтально
    rotateX(HALF_PI);
    
    // Рисуем маленький пончик (радиус 42 — чуть шире, чтобы свободно облегать большой)
    torus(42, 13);
  pop();
}