Skip to content

WEB_INTERFACE_README.md

Latest commit

 

History

History
242 lines (188 loc) · 9.18 KB

WEB_INTERFACE_README.md

File metadata and controls

242 lines (188 loc) · 9.18 KB

Web-интерфейс для изучения фракталов

🌐 Описание

Интерактивный веб-интерфейс для визуализации и изучения 7 математических фракталов. Приложение построено на Spring Boot с REST API и использует HTML5 Canvas для рендеринга.

🚀 Запуск приложения

Способ 1: Maven

mvn spring-boot:run

Способ 2: JAR файл

mvn clean package
java -jar target/comp_graph-1.0-SNAPSHOT.jar

Способ 3: IDE

Запустите класс fractals.web.FractalWebApplication

Приложение будет доступно по адресу: http://localhost:8080

📋 Доступные фракталы

1. Множество Мандельброта

  • Итеративная функция: f(z) = z² + c, z₀ = 0
  • Интерактивность: Клик для увеличения области
  • Параметры: Максимум итераций (10-500)

2. Множество Жюлиа

  • Итеративная функция: f(z) = z² + c (константа)
  • Интерактивность: Клик для увеличения области
  • Параметры:
    • C (действительная часть): -2.0 до 2.0
    • C (мнимая часть): -2.0 до 2.0
    • Максимум итераций: 10-500

3. Треугольник Серпинского

  • Рекурсивное деление треугольника
  • Параметры: Глубина рекурсии (1-8)

4. Снежинка Коха

  • L-система с правилом F → F-F++F-F
  • Параметры: Порядок рекурсии (0-6)

5. Дерево Пифагора

  • Фрактальное дерево на основе теоремы Пифагора
  • Параметры:
    • Глубина рекурсии (1-15)
    • Угол ветвления (0.1-1.5)

6. Фрактальный ландшафт

  • Алгоритм Midpoint Displacement
  • Параметры:
    • Seed (1-99999)
    • Шероховатость (0.1-1.5)

7. Фрактал Ляпунова

  • Показатель Ляпунова для логистического отображения
  • Синий = стабильность, Красный = хаос
  • Параметры: Последовательность (A/B, например "AABAB")

🎮 Управление

  • Выбор фрактала: Кликните на кнопку в боковой панели
  • Изменение параметров: Используйте элементы управления в панели
  • Рендеринг: Нажмите кнопку "🎨 Отрисовать"
  • Сброс: Нажмите кнопку "🔄 Сброс" для возврата к начальным параметрам
  • Zoom (Мандельброт/Жюлиа): Кликните на области для увеличения в 3 раза
  • Координаты: Отображаются при движении мыши по canvas

🏗️ Архитектура

Backend (Spring Boot)

src/main/java/fractals/web/
├── FractalWebApplication.java  # Главный класс приложения
├── FractalController.java      # REST API для генерации фракталов
└── HomeController.java         # Контроллер главной страницы

REST API эндпоинты:

  • GET /api/fractals/list - Список доступных фракталов
  • POST /api/fractals/mandelbrot - Генерация Мандельброта
  • POST /api/fractals/julia - Генерация Жюлиа
  • POST /api/fractals/sierpinski - Генерация Серпинского
  • POST /api/fractals/lyapunov - Генерация Ляпунова

Frontend (HTML/CSS/JavaScript)

src/main/resources/
├── templates/
│   └── index.html              # Главная страница
└── static/
    ├── css/
    │   └── style.css           # Стили
    └── js/
        ├── fractal-engine.js   # Движок рендеринга Canvas
        └── app.js              # Логика приложения

Модули JavaScript:

  • FractalEngine: Класс для рендеринга фракталов на Canvas
  • app.js: Управление UI, API запросы, обработка событий

🎨 Технологии

Backend

  • Spring Boot 2.7.18 - Web framework
  • Spring Web - REST API
  • Thymeleaf - Template engine
  • Gson - JSON serialization

Frontend

  • HTML5 Canvas - Графический рендеринг
  • Vanilla JavaScript - Без внешних зависимостей
  • CSS3 - Gradient backgrounds, animations

📊 Алгоритмы рендеринга

Server-side (Java)

  • Множество Мандельброта
  • Множество Жюлиа
  • Треугольник Серпинского
  • Фрактал Ляпунова

Client-side (JavaScript)

  • Снежинка Коха
  • Дерево Пифагора
  • Фрактальный ландшафт

🔧 Конфигурация

Файл: src/main/resources/application.properties

server.port=8080
spring.application.name=Fractal Explorer
spring.thymeleaf.cache=false
logging.level.fractals.web=INFO

📦 Зависимости

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.10.1</version>
</dependency>

🧪 Тестирование

Проверка API

# Список фракталов
curl http://localhost:8080/api/fractals/list

# Мандельброт
curl -X POST http://localhost:8080/api/fractals/mandelbrot \
  -H "Content-Type: application/json" \
  -d '{"width":800,"height":600,"xMin":-2.5,"xMax":1.0,"yMin":-1.2,"yMax":1.2,"maxIterations":100}'

# Серпинский
curl -X POST http://localhost:8080/api/fractals/sierpinski \
  -H "Content-Type: application/json" \
  -d '{"depth":6}'

Проверка веб-интерфейса

Откройте в браузере: http://localhost:8080

🎯 Особенности

  1. Адаптивный дизайн - Grid layout с боковой панелью
  2. Gradient backgrounds - Красивый фиолетовый градиент
  3. Индикатор загрузки - Spinner во время генерации
  4. Координаты в реальном времени - Для Мандельброта/Жюлиа
  5. Интерактивный zoom - Клик для увеличения области
  6. Цветовая схема HSV - Плавные цветовые переходы
  7. Изометрическая проекция - Для фрактального ландшафта

📝 Примеры использования

Исследование Мандельброта

  1. Выберите "Множество Мандельброта"
  2. Установите Максимум итераций: 200
  3. Нажмите "Отрисовать"
  4. Кликните на интересную область для zoom
  5. Повторяйте для более детального просмотра

Изменение Жюлиа

  1. Выберите "Множество Жюлиа"
  2. Измените C (действительная): -0.4
  3. Измените C (мнимая): 0.6
  4. Нажмите "Отрисовать"
  5. Экспериментируйте с разными значениями C

Генерация ландшафта

  1. Выберите "Фрактальный ландшафт"
  2. Измените Seed для нового ландшафта
  3. Настройте Шероховатость (0.5 = гладкий, 1.5 = грубый)
  4. Нажмите "Отрисовать"

🐛 Известные ограничения

  • Canvas размер фиксирован (800x600)
  • Высокие значения итераций могут замедлить генерацию
  • Нет сохранения изображений (можно добавить)
  • Zoom работает только для Мандельброта/Жюлиа

🔜 Возможные улучшения

  • Сохранение фракталов в PNG
  • WebGL для ускорения рендеринга
  • 3D визуализация некоторых фракталов
  • История параметров (undo/redo)
  • Анимация изменения параметров
  • Экспорт параметров в JSON

📄 Лицензия

Учебный проект - Computer Graphics Course 2025

Автор: Computer Graphics Project Team Дата: 2025-10-05 Версия: 1.0