🚀 PhysicsCodeLab

Интерактивная платформа для изучения Python, математики и физики

✨ Что это?

PhysicsCodeLab объединяет три дисциплины в единый опыт, где каждая задача требует:

• Понимания физики — что происходит и почему
• Знания математики — как это описать формулами
• Навыков Python — как это реализовать в коде

🎯 Текущий статус: v0.6.0 🎉

✅ Модуль 1: Физика

• Monaco Editor — полноценный редактор кода с подсветкой Python
• Pyodide 0.29.0 — Python 3.13 выполняется в браузере
• Библиотека physicslab — встроенная Python библиотека с классами:
  • World — физический мир
  • Ball — шарики/частицы
  • Platform — платформы
• Canvas Visualization — HTML5 Canvas отрисовка объектов
• Миссия 1.1 "Первый шаг" — полностью функциональна

✅ Модуль 5: Алгебра — ПОЛНАЯ ВЕТКА 5.1 🔥

• Библиотека mathlab — математическая библиотека:
  • Function — создание и вычисление функций
  • Canvas — построение графиков с осями и сеткой
  • Поддержка: sin, cos, sqrt, abs, log, exp, π, e
• MathCanvas — визуализация графиков функций:
  • Координатные оси с стрелками
  • Динамическая сетка
  • Легенда и подписи
  • Поддержка нескольких функций на одном графике
  • Отметка точек (mark_point)
  • Асимптоты (draw_line)
• Панель теории — с формулами KaTeX и подсказками
• Mission Selector — переключение между миссиями

🎛️ 6 МИССИЙ ГОТОВЫ:

Базовые (существующие):

• ✅ 5.1.1 "Что такое функция?" — знакомство с линейными функциями
• ✅ 5.1.2 "Семейство линейных функций" — параметры k и b + ИНТЕРАКТИВНЫЕ СЛАЙДЕРЫ 🎚️
• ✅ 5.1.3 "Квадратичная функция" — параболы + ИНТЕРАКТИВНЫЕ СЛАЙДЕРЫ (a, b, c) 🎚️

Новые (Phase 1):

• ✅ 5.1.4 "Кубическая функция — змейка" — y = x³, точка перегиба
• ✅ 5.1.5 "Гипербола — две половинки" — y = 1/x, асимптоты
• ✅ 5.1.6 "Галерея функций" — обзор всех функций, сравнение роста

🎨 WOW-ФИЧИ (Phase 2):

🎛️ Интерактивные Слайдеры (NEW!)

• Живое управление параметрами — двигай слайдеры и видишь изменения мгновенно
• Debouncing 150ms — плавные обновления без лагов
• Автогенерация кода — код обновляется динамически
• Сброс к defaults — кнопка возврата к начальным значениям
• Keyboard navigation — управление стрелками
• Missions 5.1.2 & 5.1.3 поддерживают слайдеры

✨ UI/UX Enhancement (v0.6.0 - NEW!):

🎭 Performance & Animations

• Page Transitions — плавные переходы между страницами с fade/slide эффектами
• Motion Config — оптимизированные Framer Motion настройки, GPU acceleration
• AnimatedButton — микро-взаимодействия с hover/tap эффектами (4 варианта, 3 размера)
• Haptic Feedback — визуальная обратная связь (Ripple, Shake, Pulse анимации)

🎨 Polish & UX

• Loading Skeletons — 5 типов скелетонов для состояний загрузки
• Error/Empty States — красивые состояния ошибок и пустых данных
• Responsive Design — поддержка планшетов, адаптивные layouts
• Smooth Scrolling — глобальный smooth scroll + scroll reveal анимации
• Accessibility — ARIA labels, focus states, prefers-reduced-motion

🧪 Testing & Quality

• Animation Tests — автоматическое тестирование поддержки анимаций
• Theme Tests — проверка CSS variables, контраста WCAG AA
• Production Build — ✅ готово к деплою

🚧 Что дальше (Roadmap v0.7.0):

• Module 5.2: Трансформации функций
• Module 6: Геометрия
• Module 16: Алгоритмы и структуры данных (спецификация готова)

🛠 Технологический стек

• Frontend: React 18 + TypeScript + Vite
• Styling: Tailwind CSS v3
• Code Editor: Monaco Editor (VS Code engine)
• Python Runtime: Pyodide (WebAssembly)
• Visualization: HTML5 Canvas API
• State Management: Zustand
• Math Rendering: KaTeX (ready to use)

🚀 Быстрый старт

# Установка зависимостей
npm install

# Запуск dev сервера
npm run dev

# Сборка для продакшена
npm run build

Откройте http://localhost:5173

📝 Структура проекта

physicslab/
├── src/
│   ├── components/      # React компоненты
│   ├── hooks/           # Custom hooks (usePython)
│   ├── lib/             # Pyodide loader
│   ├── store/           # Zustand state
│   ├── content/         # Миссии и контент
│   └── types/           # TypeScript типы
├── python/
│   └── physicslab/      # Python библиотека
└── public/              # Статические файлы

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

Модуль 1: Физика

from physicslab import *

# Создаём мир
world = World(gravity=9.81, width=800, height=600)

# Создаём объекты
robot = Ball(x=400, y=300, radius=20, color="blue")
target = Ball(x=400, y=300, radius=30, color="green", fixed=True)

# Добавляем в мир
world.add(robot)
world.add(target)

# Запускаем симуляцию
world.run()

Модуль 5: Математика (NEW! 🔥)

from mathlab import *

# Создаём функции
f = Function("2*x")           # Линейная функция
g = Function("x**2")          # Парабола
h = Function("sin(x)")        # Синусоида

# Вычисляем значения
print(f(5))  # 10
print(g(3))  # 9

# Рисуем графики
canvas = Canvas(x_range=(-5, 5), y_range=(-10, 10))
canvas.plot(f, color="blue", name="y = 2x")
canvas.plot(g, color="red", name="y = x²")
canvas.show()

📄 Лицензия

MIT

👨‍💻 Автор

NeuroHand + Claude Code

---

Статус: 🟢 Активная разработка | Версия: 0.4.0 — 3 миссии готовы!