---

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

function setup() {
  createCanvas(500, 500, WEBGL);
}

function draw() {
  background(255); // Белый фон, как на проекторе
  orbitControl();  // Мышкой всё ещё можно крутить всю сцену
  
  // Делаем стиль "сетки", как на фото:
  noFill();        // Выключаем заливку (пончики будут прозрачными)
  stroke(0);       // Рисуем только линии черным цветом
  strokeWeight(0.5); // Делаем линии сетки тоненькими и аккуратными
  
  // Радиус большого пончика
  let R = 100; 

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


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