Быстрый старт: от чертежа до галереи

Один чертёж — треугольник и описанная около него окружность — пройдёт весь путь: построение в GeoGebra, экспорт картинки, стиль, анимация и публикация. Минут двадцать. Ничего устанавливать не нужно, всё делается в браузере.

Вот что получится в конце — один и тот же чертёж как файл и как видео.

Картинка: SVG 640×auto в стиле «Мой первый стиль».

Видео: MP4 640×auto, 15 кадров в секунду. Вершина C переезжает, треугольник и угол при ней меняются следом.

1. Регистрация и проект

Зарегистрируйтесь на animageo.ru и подтвердите почту по письму: до подтверждения проекты и стили недоступны.

Дальше — раздел «Проекты» и кнопка «Новый проект». Проект это папка: внутри лежат конструкции одного курса, темы или урока.

① «Новый проект». ② Блок «Или начните с примера»: кнопка «Открыть у себя» копирует готовый чертёж к вам в проект — тогда строить его самому не придётся, а всё остальное на этой странице работает так же.

В окне обязательно только «Название». Наш проект называется «Справка».

«Описание» и «Метки» можно оставить пустыми и заполнить потом.

Внутри пустого проекта нажмите «Создать конструкцию» — откроется редактор с апплетом GeoGebra.

① «Создать конструкцию» — пустой чертёж с нуля. ② В ту же рамку можно перетащить готовый файл: она принимает .ggb и .zip с несколькими файлами.

2. Построение в GeoGebra

Сразу после «Создать конструкцию» редактор пуст. Стоит один раз посмотреть, что где лежит.

① Апплет GeoGebra, вкладки «Алгебра» и «Инструменты». ② Панель «Превью» — пока пусто: «Превью появится после рендера». ③ Панель «Экспорт», ниже — «Результаты экспорта». ④ Кнопка сохранения. ⑤ Переключатель «Изображение / Анимация»: он решает, выгружаете вы кадр или видео.

Чертёж строится пятью инструментами: «Многоугольник», «Окружность по трём точкам», «Середина или центр», «Отрезок» и «Угол».

Четыре из пяти в стартовом наборе палитры не лежат — там есть только «Многоугольник». Остальные открывает кнопка «Больше» в панели «Инструменты», и нажать её нужно дважды: первое нажатие показывает часть набора, второе — весь список с группами «Основные», «Правка», «Построения», «Измерения», «Окружности», «Многоугольники» и другие. Кнопка «Меньше» сворачивает список обратно.

«Многоугольник» — клики по трём будущим вершинам и ещё раз по первой, чтобы замкнуть контур.

Панель раскрыта полностью — видны заголовки групп «Основные» и «Правка»; «Многоугольник» подсвечен рамкой. Справа готов треугольник ABC: имена вершин GeoGebra расставляет сама.

«Окружность по трём точкам» (группа «Окружности») — клики по A, B и C.

Окружность прошла через все три вершины и осталась серой: это цвет GeoGebra по умолчанию, стилем мы займёмся позже.

«Середина или центр» (группа «Построения») — клик по окружности даёт её центр O. Радиус OA дорисуйте инструментом «Отрезок» из группы «Основные»: клик по O, клик по A.

Центр O и уже проведённый радиус OA. Точка O не свободная: она пересчитывается сама, когда двигаются вершины.

«Угол» (группа «Измерения») — три клика по точкам, вершина второй.

Угол при вершине C — 66.9°. Если вместо него получился «внешний», больше 180°, кликните те же три точки в обратном порядке.

Теперь важное. Апплет и панель «Превью» — две разные отрисовки одного чертежа: апплет рисует средствами GeoGebra, а «Превью» показывает работу движка экспорта. В файл попадает второе. Что именно переносится из чертежа, а что переопределяет стиль, разобрано в разделе Построение в GeoGebra.

① Апплет. ② «Превью»: тот же чертёж, но подписи набраны курсивом, а точки другого размера. Под превью написано, что показано: «SVG · 480×auto».

Превью пересчитывается само, пока вы правите чертёж.

Тянем вершину C — «Превью» справа перерисовывается без единого нажатия. В превью здесь уже выбран стиль, им мы займёмся дальше.

Когда чертёж готов, дайте конструкции имя и сохраните её.

① Кнопка сохранения: у новой конструкции её подсказка говорит «Создать конструкцию», у сохранённой — «Сохранить конструкцию». ② Имя правится прямо в поле шапки.

3. Экспорт картинки

Панель «Экспорт» — справа, под превью. Для первой выгрузки хватит двух полей: «Формат» и «Размер экспорта». Ещё две ручки — «Крупность» и «Отступ от краёв» — мы всё-таки тронем, иначе оформление выйдет мелким. Про них сразу после снимка.

① Поле выбора стиля: пока стилей нет, в нём стоит «По умолчанию». ② «Формат» — SVG, он подойдёт почти везде. ③ «Размер экспорта» — «640×auto»: высота посчитается по пропорциям чертежа. ④ Кнопка выгрузки; её подпись меняется вслед за форматом. ⑤ «Крупность» — здесь 2.4. ⑥ «Отступ от краёв, px» — здесь 32.

«Крупность» меняет размер оформления — точек, подписей, толщины линий — относительно самого чертежа. Геометрия остаётся на месте, крупнее становится только то, что на ней нарисовано. На 640 px оформление по умолчанию выходит мелковатым, поэтому здесь мы увеличили крупность вдвое: в поле стоит 2.4.

«Отступ от краёв, px» отодвигает чертёж от границ картинки. Крупному оформлению у краёв тесно: без отступа подпись «C» у верхней вершины упиралась в верхний край и обрезалась. Значение 32 убирает это полностью.

Как «Крупность» и «Отступ от краёв» связаны с «Кадром» и «Масштабом» и по каким правилам пересчитываются, написано в разделе Экспорт.

Кнопка ставит задачу на сервер, готовый файл появляется ниже.

① Скачать файл. Глаз рядом показывает его в превью, крестик удаляет результат из списка.

Вот этот самый файл. Стиль ещё не выбран, поэтому цвета, толщины и размеры точек взяты из GeoGebra как есть.

Стиль «По умолчанию». Заметно, что окружность и радиус серые, а треугольник синий: так их нарисовала GeoGebra. Подписи лежат вплотную к чертежу — «66.9°» пришлась прямо на дугу угла.

4. Стиль

Стиль решает, как выглядит результат: палитра, толщины, размеры подписей, заливка. Откройте раздел «Стили» и нажмите «Новый стиль».

① «Новый стиль». Пока стилей нет, такая же кнопка стоит в середине пустого экрана.

Начинать с нуля не нужно: кнопка «Шаблоны» в шапке блока «Цвета» даёт законченный вид одним кликом. Возьмите «Учебный светлый».

① Кнопка «Шаблоны». ② Группа «Под задачу» — в кадр помещается только она; ниже в том же меню лежит группа «Характер»: «Цветной Евклид», «Меловая доска», «Синька (Blueprint)». Слева видно исходное состояние ролей: «Линии», «Точки», «Углы» и «Заливка фигур» стоят на «из GeoGebra».

Шаблон переписывает палитру, размеры и роли, но роль «Линии» он оставляет на «из GeoGebra» — то есть цвет линий по-прежнему берётся из чертежа. Из-за этого после шаблона картинка меняется мало. Переведите «Линии» в «Основной».

① Роль «Линии»: после шаблона в ней всё ещё «из GeoGebra». ② Выбираем «Основной» — теперь окружность и радиус будут цвета палитры, а не серыми из чертежа.

Вторая правка — ниже в том же списке ролей: «Заливка фигур» → «нет». Без неё шаблон заливает не только треугольник, но и описанную окружность, и чертёж выходит мутнее исходного.

Ещё две правки лежат ниже — в блоках «Размеры» и «Настройки».

① «Линии углов» — то же значение 1.10, что стоит в «Линиях» строкой выше. ② Чип «Автораскладка подписей» включён.

«Линии углов» в блоке «Размеры» — толщина дуги угла. Обычным линиям стиль назначает толщину сам, а дуга угла ждёт своего ползунка: пока его не трогали, толщина дуги приходит из чертежа GeoGebra — в нашем случае дуга выходила заметно толще линий. Поставьте «Линии углов» то же значение, что и в «Линиях», — 1.10, — и дуга сравняется с ними.

«Автораскладка подписей» в блоке «Настройки» — движок сам расставляет подписи так, чтобы они не налезали друг на друга, на линии и на маркеры точек. Без неё «66.9°» ложится прямо на дугу, а имена вершин — на сами точки.

Остальное в стиле трогать не обязательно. Что означают палитра, роли и замены цветов, разобрано в разделе Стили.

① Имя стиля правится прямо в поле. ② Кнопка сохранения; оранжевая точка на ней означает несохранённые правки. Крестик рядом закрывает редактор.

Вернитесь в конструкцию и выберите созданный стиль в панели «Экспорт».

① Плитка стиля: мини-чертёж, палитра и три числа — толщина линии, размер точки, радиус углов. Пункт «Без стиля» ниже возвращает вид «По умолчанию».

Выгрузите SVG ещё раз и сравните с первым файлом.

До: стиль «По умолчанию». Цвета из GeoGebra, дуга угла толще линий, подписи вплотную: «66.9°» лежит на дуге.

После: «Мой первый стиль» — единая палитра вместо синего с серым, без заливки, дуга угла одной толщины с линиями, подписи отодвинуты от точек и от дуги.

Стиль живёт отдельно от чертежа

Стиль — самостоятельная сущность, а не часть конструкции. Один стиль можно выбрать для всех конструкций курса; поправите стиль — обновятся все.

5. Анимация

Анимация — тот же чертёж, снятый в нескольких состояниях. Переключитесь в шапке на «Анимация»: внизу появится таймлайн.

① Переключатель на «Анимация». ② Каретка на нуле; дорожка кадров под линейкой пока пуста. ③ «Добавить кадр» — снимок текущего состояния встанет туда, где стоит каретка. ④ «Длительность»: сколько секунд пойдёт в видео, здесь 5. Строки «Переменные» на снимке нет — в этом чертеже нет числовых ползунков, двигаться будет свободная точка.

Оставьте каретку на нуле и нажмите «Добавить кадр» — это начальное состояние.

① Первый кадр встал на 0.0s. Кнопка сменила подпись на «Кадр сохранен» — значит, чертёж и кадр совпадают.

Теперь передвиньте каретку вперёд, потяните вершину C в апплете и снова нажмите «Добавить кадр».

① Второй кадр на 4.5 s; между кадрами протянулась дорожка. ② Вершина C уже переехала — угол при ней стал 72.7°, окружность и центр пересчитались сами.

Двух кадров достаточно: всё, что между ними, движок достроит сам. Проверьте кнопкой воспроизведения над таймлайном.

Воспроизведение прямо в апплете: каретка идёт по таймлайну, вершина C едет между двумя кадрами.

Сохраняйте кадр сразу

Пока правка не сохранена в кадр, она живёт только в апплете. Перемотка или клик по другому кадру возвращают чертёж к сохранённому состоянию — и спрятанный объект снова станет видимым.

Остаётся выгрузить видео. В режиме анимации панель «Экспорт» показывает видеоформаты и FPS.

① Иконка play без подписи, подсказка при наведении — «Быстрый черновик MP4 (150p5)»: быстрый предпросмотр в низком разрешении, чтобы проверить движение. ② «Формат» — MP4. ③ «Размер экспорта» — «640×auto». ④ FPS: 15 вместо 30 считается заметно быстрее. ⑤ «Экспорт MP4» — настоящий рендер, он идёт в медленную очередь.

Готовый MP4 — те же 640×auto, 15 кадров в секунду и «Мой первый стиль», что были заданы в панели.

Как делать появление и исчезновение объектов, переходы и подсветки, написано в разделе Анимация.

6. Публикация

Кнопка «Поделиться конструкцией» в шапке редактора открывает окно с двумя способами отдать работу наружу.

① «Прямая ссылка» вида animageo.ru/shared/… — открывается у любого, даже без регистрации. ② «Встраивание (iframe)» — фрагмент для Notion, Moodle или своей страницы. Внизу «Сбросить ссылку» (старая перестанет работать) и «Отключить доступ».

По ссылке открывается страница публичного просмотра.

Имя работы, счётчики просмотров и «мне нравится», переключатель «SVG / MP4»: картинка и видео лежат на одной странице. Здесь она снята глазами автора — с боковым меню, аватаром и кнопкой «Редактировать»; у постороннего боковое меню и «Редактировать» не показываются, а шапка выглядит как на следующем снимке.

Отдельной галочки «показывать в галерее» в окне нет. В галерею работа попадает сама, когда у неё включена публичная ссылка и есть готовый экспорт — картинка или видео. Отключите доступ, и она оттуда исчезнет; сам чертёж при этом останется у вас.

Галерея глазами постороннего: в шапке «Войти» и «Регистрация». У каждой карточки видно, какие экспорты есть у работы — «SVG», «PNG», «MP4».

Куда дальше

• Построение в GeoGebra — что из чертежа переносится в экспорт, а что переопределяет стиль.
• Стили — палитра, роли и замены цветов; почему роль сильнее замены.
• Экспорт — какой формат для чего, «Кадр», «Масштаб» и «Крупность», массовый экспорт всего курса.
• Анимация — появление и исчезновение, переходы, диапазон, ускорение рендера.
• Публикация и ссылки — прямая ссылка, iframe, снятие публикации.