Кубик Рубіка на 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 не запрацює).

Якщо хтось хоче зайнятися, то будь ласка. Якщо є питання по коду, ставте, з радістю відповім.