анімація «Trigonometric Graphs» — точка обертається по одиничному колу, і з її координат «викреслюються» три графіки (sin θ — ордината, cos θ — абсциса, tan θ з асимптотами), поки θ росте від 0 до 4π.
За цим зразком зроблено автономний HTML-інтерактив із трьома вкладками:
Демонстрація — жива анімація як у відео: три ряди (коло + графік), спільний кут θ. Керування: Пуск/Пауза, Скинути, повзунок кута (перетягуй — графік «намотується»), швидкість, перемикачі sin/cos/tan, проєкційних ліній і циклічного програвання. Внизу — живі значення θ, sin, cos, tan (тангенс показує «→ ±∞» біля асимптот). Фосфорне свічення кривих повторює естетику ролика.
Теорія — означення через одиничне коло, таблиця опорних значень (0…360°), властивості кожної функції (період, область значень, парність, нулі, асимптоти) і міні-інтерактив: перетягуєш точку по колу пальцем/мишею — бачиш зелений відрізок sin θ і фіолетовий cos θ.
Практика (обов'язкова, з оцінюванням на 12 балів):
Частина 1 «Влучи в ціль» — 5 завдань: крутиш кут, щоб значення функції збіглося з ціллю (усі 5 цілей перевірено на досяжність);
Частина 2 — тест на 8 запитань (період, область значень, асимптоти, обчислення значень тощо);
разом → оцінка за 12-бальною шкалою, друк результату.
Технічно повністю офлайн, без жодних зовнішніх залежностей і CDN — усе на чистому canvas; ідентифікація учня (ПІБ + клас), захист від повторного проходження через localStorage, брендинг schkrab / Сухоруков Ю.О.
Режим учителя: Ctrl + Shift + A, пароль schkrab2025 — можна скинути результат одного учня або всі результати на пристрої. Пароль зберігається як SHA-256 хеш (у відкритому коді його немає).
Обмеження — те саме, що завжди: localStorage прив'язаний до браузера на пристрої, тож в інкогніто учень міг би пройти вдруге; для класу, який працює разом, цього достатньо.
Тема — тригонометрія (радше 10 клас, алгебра). Якщо це для суміжної роботи чи демонстрації ШІ в навчанні — усе гаразд; якщо ж потрібно адаптувати механіку під географічний зміст (наприклад, графік зміни температури / тривалості дня від широти), теж можу.
поточне значення функції змінюється — і саме воно щомиті малює графік. Точка на колі дає значення (висоту), а «перо» переносить це значення праворуч у часі. У нинішньому інтерактиві цей зв'язок показує пунктирна проєкційна лінія «точка → перо».
