Кубик Рубика на canvas

[Stepuk]

>> IE за браузер не считаем

Дальше не читал.

[Sagaris]

хорошо, что не:

> >> Кубик Рубика
>
> Дальше не читал.

[jeka1202]

Пора переходить на что-то нормальное а не зацикливаться на старом.

[Error_403_Forbidden]

Меня всегда удивляло — какое другим людям дело, какой у меня браузер? Кому какое дело, на каком языке я пишу? Кому какое дело, какая у меня ОС?
Так нет же, всегда находятся такие, кто будет кричать — ставь файрфокс! Ставь оперу! Ставь Виндоуз! Линух форева!
Личный вопрос можно? Какое вам дело, что у кого-то стоит IE? Лично мне нет до этого никакого дела.

[jcd]

[aint]

на этот раз пятницо явилось в образе Кубика Рубика:)

[iwuvjhdva]

Вы просто умничка!

[tagir_valeev]

Цвета легко настраиваются. Скажите шесть хороших цветов в формате #rrggbb, я заменю :-)

[belk]

Используйте оригинальные цвета кубика.
Красный: #FF0000
Оранжевый: #FF8000
Жёлтый: #FFEB00
Белый: #FFFFFF
Синий: #0000FF
Зелёный: #00DC00

[Anamezon]

И не забудьте:
Белый напротив желтого,
Синий напротив зеленого,
Красный напротив оранжевого.
И с одной стороны видны белый, синий и красный так, что белый сверху, синий справа, а красный слева.

Так будет максимально верно.

[belk]

Как-то так.

[tagir_valeev]

Сделал, только зелёный поставил сильно темнее. А то приведённые цвета — пытка для дихроматов :-) У меня вроде был в детстве кубик с тёмно-зелёным.

[tagir_valeev]

Градиенты отключаются кнопкой Flat над кубиком.

[BaBL]

Вебсторейдж тут не гуд вариант. Его надо юзать разве что на действия в сессию. Сохранение должно быть именно на сервере, иначе пришел с работы дамой и Бааа! жди понедельника.

[BaBL]

а что их синхронизировать? запомнили на сервере id юзера + текущее расположение блоков.

[BaBL]

энд? какое страшное слово… наверное это будет первый сайт в интернете с «авторизацией».

нашли чем ежа пугать.

[tagir_valeev]

Можно просто кодировать статус в строчку, которую человек может закинуть себе на флэшку или переслать по е-мейлу и потом назад вставить в поле для загрузки. Не хочется добавлять к этому сервер-сайд код.

[BaBL]

тогда прямая дорога к мошенничеству =) на клиентсайде реализовать сколь-нибудь действенную защиту нереально.

[tagir_valeev]

Ну это не тот случай, чтобы защита нужна была. Чемпионат по сборке кубиков онлайн? :-) Программы должны помогать людям, даже если человек хочет читерить :-)

[stansult]

почему бы и нет?
сделать сайт с авторизацией, рекордами и соревнованиями (как мелькавший тут тетрис), и с вашим «рубик-движком» :)

[stansult]

у меня прочиталось «пришел с работы дáмой» — долго думал :)

[rednaxi]

У меня в IE9 работает

[d0lfin]

шикарно, а из Shuffle (animated) при 11x11 вообще можно скринсейвер делать

[Malerok]

Спасибо, в детстве небыло, хоть сейчас покручу

[LoneCat]

Что-то по-моему перспектива — наоборот, задняя стенка больше передней.

[Sagaris]

визуальный эффект. Глаз привык к перспективе.

[LoneCat]

Да нет, не визуальный, вот посмотрите например на стандартное положение кубика, верхние грани, левая и правая не параллельны, ну и если кубик повернуть фронтально — то задняя стенка немного — но выпирает.

[tagir_valeev]

Правда-правда визуальный эффект :-)

[LoneCat]

Я даже в графическом редакторе проверил… и правда визуальный эффект… жуть :)

[Sagaris]

Вы знаете, я не поверю, что человек осознанно программировал обратную перспективу. А то, что аксонометрия дает легкий эффект обратной перспективы — общеизвестно.

[LoneCat]

Человек вполне себе осознанно может ошибаться :) в том числе при реализации перспективы.

[Sagaris]

Это ж как нужно ошибиться? ;) Это из разряда:
— Что вы делаете в моей машине?
— Ой, я просто ошибся и сел не в свою!
;)

ЗЫ Undo после Shuffle прикольно работает ;)

[Volshebnyi]

Просто изометрия. То, что задняя грань такая же по длине как передняя можно легко проверить.

[rednaxi]

Для IE есть excanvas(http://code.google.com/p/explorercanvas/), IE9 превью умеют работать с канвасом — почему бы и не допилить?

[tagir_valeev]

Написал же — лень :-) Я знаю про excanvas и использовал её.

[rednaxi]

Кстати проверил в IE9 Platform Preview 1.9.7874.6000 — работает
img186.imageshack.us/img186/423/41967575.png

[susl]

перспективу бы не изометрическую и все было бы отлично :)

[out0f0rder]

Еще бы, для ленивых владельцев разобранного кубика, сделать инструмент для быстренькой пошаговой сборки :)

[tagir_valeev]

Кнопка shuffle кладёт вращения в undo-буфер. Поэтому можно после shuffle нажать 50 раз undo, и кубик вернётся в исходное состояние =)

[Alex_MIPT]

Управление — лучшее из тех, что я видел (и делал:)).
Единственное, надо перспективу сделать, чтоб во время поворота самого кубика мозг не нагревался и будет великолепно.

[Alex_MIPT]

Ах, да забыл, вращение кубика шифтом неудобно, идеально, когда всё ложится на мышь, например вместо зажатия шифта можно сделать зажатие правлй кнопки (всё равно не используется)

[tagir_valeev]

Сделал. На вебе обычно не стоит закладываться на правую кнопку (к примеру, пользователь может запретить переопределять контекстно меню в опциях Javascript). Кроме того есть мако-юзеры без правой кнопки :-) Так что я оставил шифт как альтернативу.

[fantaseour]

у оперы на «зажатая правая кнопка+движение влево-вправо» повешены гестуры, т.е. взад-вперед по истории страниц можно бегать. Повернул Ваш кубик влево, отпустил правую кнопку и обратно на хабр попал :)

так, что шифт очень даже нужен.

[kolesnevg]

lany — искренне восхищаюсь ;)
сколько вы потратили времени если не секрет?

[tagir_valeev]

Пару дней с перерывами. Чистого времени — не знаю… Часов 15, может…

[CTpaHHoe]

Спасибо, всё очень понравилось.

[Restorer]

перспективную проекцию бы. делается просто, плюсов — много.

[cry_san]

Самый простой способ: снять на видео «Shuffle (animated)» и прокручивая обратно — решить головоломку.
Даешь высокие технологии! :)

[tagir_valeev]

Нажмите после shuffle (необязательно animated) кнопку undo 50 раз (можно быстро подряд) и наслаждайтесь =)

[tagir_valeev]

Сделал, но у меня не было такой проблемы. Посмотрите, помогло ли :-)

[tagir_valeev]

А, вы про эти команды. Я думал, про мышиные эвенты на самом канвасе. Сейчас лучше?

[tagir_valeev]

Ну если подскажете, что дописать, то допишу :-)

[AMCDM]

Багофича:
если усердно крутить кубик, то он увеличивается или уменьшается:

dl.dropbox.com/u/1604499/capture-2.mp4
(1,2 Мб если заботитесь о траффике)

[tagir_valeev]

404.
Там есть кнопки zoomIn/zoomOut. Может, вы их случайно нажали?

[AMCDM]

Сорри, сейчас будет.

[tagir_valeev]

Ага, интересная бага. После последней модификации вращения в матрице преобразований стала накапливаться погрешность. Сделал нормализацию матрицы, спасибо.

[XaocCPS]

автор, добавьте заголовок HTML5 doctype html и ie9 автоматом переключится в режим поддержки стандартов и все заработает

[tagir_valeev]

Сейчас лучше?

[XaocCPS]

да, все работает, спасибо

[Mezomish]

Спасибо автору, поразмялся немного. К управлению, действительно, привыкаешь довольно быстро.

[AntiGravitY]

Чуть попроще.

[Mezomish]

Так этот-то из полностью собранного делается в 4 поворота :)

[tagir_valeev]

А так собрать слабо? :D

[Mezomish]

Неа

[tegger]

Небольшая проблема: shuffle иногда крутит один и тот же слой несколько раз подряд в разных направлениях.

[tagir_valeev]

Я знаю. Ну пускай, вам что ли жалко? :-) Если кажется, что замес недостаточно сложный, нажмите шаффл ещё раз :-)

[tegger]

Не жалко. Клевая игрушка:)

[Yan169]

Спасибо! Мне понравилось!

[Mezomish]

А вот это мне точно слабо о_О

[tagir_valeev]

Насколько я понимаю, это делается аналогично схемам K11-K13 из алгоритма 5×5, любой из которых будто бы естественно расширяется на любые внутренние кубики. Но выглядит красиво, да :-)

[Mezomish]

Я ничего, кроме как 2x2x2 и 3x3x3, не пробовал ни разу.
За что Вам ещё раз отдельное спасибо — сейчас кручу 4x4x4 :)

[tagir_valeev]

Да я тоже на своей программе большие размеры впервые попробовал :-) Теперь хочу уже купить хардварный 5×5 =)

[Yan169]

Это собирается так же, как и окошки выше.
1) Любой центральный синий слой вращаем в сторону белого
2) Любой красный в сторону белого
3) Синий обратно
4) Красный обратно
В результате 4 поворотов получаем 1 синий «пиксель» на белом фоне.
Аналогично можно собрать любую двухцветную картинку. За это я и люблю многомерные кубики. Жаль у меня только 7*7*7 есть, уже хочу 11*11*11 и больше. )

[Mezomish]

А-а, блин, точно! Спасибо :)

[Yan169]

Ссылка вела сюда: habrahabr.ru/blogs/javascript/100576/#comment_3112249. Парсер скушал.

[tagir_valeev]

И правда просто :-)

[stansult]

я нажал Shuffle (animated), потом понял, что это надолго, и нажал Shuffle (fast)
он сработал, но Shuffle (animated) продолжился :)
есть ли способ остановить/отменить Shuffle (animated)?

[tagir_valeev]

Есть. Надо нажать Reset :-)
Можно написать отдельную функцию в три строчки, которая очистит очередь анимации.

[stansult]

я имел в виду — остановить без ресета, с сохранением уже имеющегося Shuffle
интуитивно я нажал Shuffle (fast) именно затем, чтоб Shuffle (animated) прекратился

на самом деле — это всё плюшки :)
сделано супер!

[valkoivo]

Меня предыдущие посты сподвигли на написание on-line решалки для кубика. Пока программа показывает только процесс решения по пунктам. Теперь думаю, как бы визуализировать процесс, чтобы показывала что-то типа видео-ролика с поворотами граней.

[tagir_valeev]

Ну если вы на JS пишете, то прикручивать решатель к моему коду совсем несложно. Загоняйте очередную комбинацию в cube.addSliceRotation, затем ждите, пока cube.animationQueue не опустеет, тогда продолжайте. Текущее состояние кубика в cube.state[грань][номер_элемента], взаимное расположение граней в cube.neighbors. Можно прикрутить к анимации callback, чтобы после завершения текущей анимации управление назад переходило к решателю.

[valkoivo]

Надо будет попробовать.