Загрузка данных


// Переменная для угла вращения
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().
}