tagir_valeev Jul 30 2010 at 09:41

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

2 min

9.1K

JavaScript*

+92

Comments 97

Stepuk Jul 30 2010 at 09:51

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

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

Sagaris Jul 30 2010 at 09:57

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

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

jeka1202 Jul 30 2010 at 09:58

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

UFO landed and left these words here

Error_403_Forbidden Aug 6 2010 at 14:33

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

jcd Jul 30 2010 at 11:26

aint Jul 30 2010 at 09:55

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

iwuvjhdva Jul 30 2010 at 09:56

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

UFO landed and left these words here

tagir_valeev Jul 30 2010 at 10:15

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

belk Jul 30 2010 at 10:29

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

Anamezon Jul 30 2010 at 10:40

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

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

belk Jul 30 2010 at 10:48

Как-то так.

tagir_valeev Jul 30 2010 at 11:30

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

UFO landed and left these words here

tagir_valeev Jul 30 2010 at 11:38

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

UFO landed and left these words here

BaBL Jul 30 2010 at 10:26

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

UFO landed and left these words here

BaBL Jul 30 2010 at 10:52

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

UFO landed and left these words here

BaBL Jul 30 2010 at 10:54

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

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

UFO landed and left these words here

tagir_valeev Jul 30 2010 at 11:32

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

BaBL Jul 30 2010 at 12:23

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

tagir_valeev Jul 30 2010 at 12:25

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

UFO landed and left these words here

stansult Jul 30 2010 at 20:59

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

stansult Jul 30 2010 at 20:56

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

rednaxi Jul 30 2010 at 10:26

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

UFO landed and left these words here

d0lfin Jul 30 2010 at 09:59

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

Malerok Jul 30 2010 at 10:05

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

LoneCat Jul 30 2010 at 10:07

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

Sagaris Jul 30 2010 at 10:10

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

LoneCat Jul 30 2010 at 10:13

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

tagir_valeev Jul 30 2010 at 10:15

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

LoneCat Jul 30 2010 at 10:23

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

Sagaris Jul 30 2010 at 10:23

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

LoneCat Jul 30 2010 at 10:25

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

Sagaris Jul 30 2010 at 10:28

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

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

Volshebnyi Jul 30 2010 at 10:17

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

rednaxi Jul 30 2010 at 10:19

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

tagir_valeev Jul 30 2010 at 10:20

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

rednaxi Jul 30 2010 at 10:25

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

susl Jul 30 2010 at 10:23

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

out0f0rder Jul 30 2010 at 10:28

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

tagir_valeev Jul 30 2010 at 11:35

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

Alex_MIPT Jul 30 2010 at 10:35

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

Alex_MIPT Jul 30 2010 at 10:37

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

tagir_valeev Jul 30 2010 at 12:06

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

fantaseour Jul 30 2010 at 21:45

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

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

kolesnevg Jul 30 2010 at 10:48

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

tagir_valeev Jul 30 2010 at 11:42

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

CTpaHHoe Jul 30 2010 at 11:01

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

Restorer Jul 30 2010 at 11:18

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

cry_san Jul 30 2010 at 11:49

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

tagir_valeev Jul 30 2010 at 11:53

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

UFO landed and left these words here

tagir_valeev Jul 30 2010 at 12:05

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

UFO landed and left these words here

tagir_valeev Jul 30 2010 at 12:18

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

UFO landed and left these words here

tagir_valeev Jul 30 2010 at 12:25

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

AMCDM Jul 30 2010 at 12:20

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

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

tagir_valeev Jul 30 2010 at 12:21

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

AMCDM Jul 30 2010 at 12:23

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

tagir_valeev Jul 30 2010 at 15:06

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

XaocCPS Jul 30 2010 at 14:29

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

tagir_valeev Jul 30 2010 at 14:49

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

XaocCPS Jul 30 2010 at 15:50

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

Mezomish Jul 30 2010 at 15:54

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

AntiGravitY Jul 30 2010 at 16:09

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

Mezomish Jul 30 2010 at 16:19

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

tagir_valeev Jul 30 2010 at 16:38

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

Mezomish Jul 30 2010 at 16:50

Неа

UFO landed and left these words here

tegger Jul 30 2010 at 19:10

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

tagir_valeev Jul 30 2010 at 19:16

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

tegger Jul 30 2010 at 19:17

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

Yan169 Jul 30 2010 at 20:19

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

Mezomish Jul 30 2010 at 20:23

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

tagir_valeev Jul 30 2010 at 20:28

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

Mezomish Jul 30 2010 at 20:30

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

tagir_valeev Jul 30 2010 at 20:36

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

Yan169 Jul 30 2010 at 20:38

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

Mezomish Jul 30 2010 at 20:40

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

Yan169 Jul 30 2010 at 20:40

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

tagir_valeev Jul 30 2010 at 20:47

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

stansult Jul 30 2010 at 21:12

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

tagir_valeev Jul 30 2010 at 21:18

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

stansult Jul 30 2010 at 21:40

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

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

valkoivo Jul 31 2010 at 08:50

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

tagir_valeev Jul 31 2010 at 11:34

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

valkoivo Jul 31 2010 at 11:42

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

UFO landed and left these words here