
Кубик Рубіка на canvas
Недавні пости про алгоритм складання кубика 5 ст.15 сподвигли мене написати емулятор кубика на канвас. Автором статей про збірку пропонувався свій кубик на OpenGL, але він мені багатьом не сподобався. Сподіваюся, з моїм комусь вдасться освоїти алгоритм швидше. Деякі особливості і переваги:
- Кроссплатформенність, кросбраузерність (IE за браузер не рахуємо), непотрібність інсталятора та інші переваги веб-додатку.
- Підтримка кубиків від 2 ст.12 і до нескінченності (поки грані не стануть сильно маленькими і рендеринг не почне жорстоко гальмувати). В інтерфейс винесено до 11 ст.111, але в бібліотеці обмежень немає.
- Псевдообйомні грані для краси.
- Нескінченний undo-буфер.
- Можливість замісу кубика (shuffle).
- Шари обертаються легко та інтуїтивно, швидко звикаєш. Крутити весь кубик (мишкою із затиснутим шифтом або правою кнопкою) не так легко, але теж можна звикнути.
- Вся бібліотека компактна, розміщується в одному js-файлі і не має ніяких зовнішніх залежностей.
- Ліцензія MIT, а також відкриті і не дуже страшні вихідці дозволяють вставити кубик на ваш сайт і доопрацювати до смаку.
Не знаю, чи варто розповідати про особливості розробки. Було багато складнощів, але всі досить дрібні. Я чомусь полінувався використовувати однорідні координати, через що, зокрема, проекція ортогональна, а не перспективна. Модель рендерінга теж трохи дивна. У загальному вигляді кубик представляється у вигляді 6, 12 або 18 граней, а кожна грань містить до size ^ 2 елементів, кожен елемент - це квадратик. На внутрішніх зрізах, які видно при обертанні, елемент всього один площею на всю межу. Тут підписані 9 видимих граней, інші 9 розташовані симетрично їм:
Потрібно також сортувати межі в правильному порядку, щоб коректно видалялися невидимі частини. Тут правильний порядок - уздовж осі обертання (якщо обертання немає, порядок неважливий).
Об'ємність граней ненаукова: це просто круговий градієнт канвас, центр якого відхиляється в напрямку нормалі. Чесно вважати освітленість по BRDF здалося для цього завдання невиправдано.
Що хотілося ще зробити, але лінь:
- Керування клавіатурою.
- Перед обертанням шарів мишкою підсвічувати шар, що обертається, щоб зменшити кількість помилок. Зараз обертання починається, якщо із затиснутою кнопкою провести мишкою на 50 пікселів у напрямку обертання. Підсвічування можна вмикати на меншій відстані, тоді користувач вчасно зупиниться. Може, це і не потрібно, у мене помилки траплялися рідко.
- Полагодити кубик 2 ст.12, чомусь він не працює. виправлено - дякую fllln
- Зробити перспективну проекцію.
- Збереження/завантаження (можна в cookies).
- Підтримка IE6-8 (ймовірно, радіальний градієнт в excanvas не запрацює).
Якщо хтось хоче зайнятися, то будь ласка. Якщо є питання по коду, ставте, з радістю відповім.