tagir_valeev 30 июл 2010 в 13:41

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

2 мин

8.9K

JavaScript*

+92

Комментарии 97

Stepuk 30 июл 2010 в 13:51

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

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

-65

Sagaris 30 июл 2010 в 13:57

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

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

+18

jeka1202 30 июл 2010 в 13:58

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

НЛО прилетело и опубликовало эту надпись здесь

Error_403_Forbidden 6 авг 2010 в 18:33

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

jcd 30 июл 2010 в 15:26

aint 30 июл 2010 в 13:55

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

iwuvjhdva 30 июл 2010 в 13:56

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

НЛО прилетело и опубликовало эту надпись здесь

tagir_valeev 30 июл 2010 в 14:15

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

belk 30 июл 2010 в 14:29

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

Anamezon 30 июл 2010 в 14:40

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

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

belk 30 июл 2010 в 14:48

Как-то так.

tagir_valeev 30 июл 2010 в 15:30

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

НЛО прилетело и опубликовало эту надпись здесь

tagir_valeev 30 июл 2010 в 15:38

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

НЛО прилетело и опубликовало эту надпись здесь

BaBL 30 июл 2010 в 14:26

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

НЛО прилетело и опубликовало эту надпись здесь

BaBL 30 июл 2010 в 14:52

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

НЛО прилетело и опубликовало эту надпись здесь

BaBL 30 июл 2010 в 14:54

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

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

НЛО прилетело и опубликовало эту надпись здесь

tagir_valeev 30 июл 2010 в 15:32

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

BaBL 30 июл 2010 в 16:23

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

tagir_valeev 30 июл 2010 в 16:25

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

НЛО прилетело и опубликовало эту надпись здесь

stansult 31 июл 2010 в 00:59

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

stansult 31 июл 2010 в 00:56

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

rednaxi 30 июл 2010 в 14:26

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

НЛО прилетело и опубликовало эту надпись здесь

d0lfin 30 июл 2010 в 13:59

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

Malerok 30 июл 2010 в 14:05

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

LoneCat 30 июл 2010 в 14:07

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

Sagaris 30 июл 2010 в 14:10

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

LoneCat 30 июл 2010 в 14:13

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

tagir_valeev 30 июл 2010 в 14:15

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

LoneCat 30 июл 2010 в 14:23

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

Sagaris 30 июл 2010 в 14:23

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

LoneCat 30 июл 2010 в 14:25

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

Sagaris 30 июл 2010 в 14:28

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

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

Volshebnyi 30 июл 2010 в 14:17

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

rednaxi 30 июл 2010 в 14:19

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

tagir_valeev 30 июл 2010 в 14:20

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

rednaxi 30 июл 2010 в 14:25

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

susl 30 июл 2010 в 14:23

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

out0f0rder 30 июл 2010 в 14:28

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

tagir_valeev 30 июл 2010 в 15:35

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

Alex_MIPT 30 июл 2010 в 14:35

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

Alex_MIPT 30 июл 2010 в 14:37

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

tagir_valeev 30 июл 2010 в 16:06

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

fantaseour 31 июл 2010 в 01:45

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

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

kolesnevg 30 июл 2010 в 14:48

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

tagir_valeev 30 июл 2010 в 15:42

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

CTpaHHoe 30 июл 2010 в 15:01

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

Restorer 30 июл 2010 в 15:18

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

cry_san 30 июл 2010 в 15:49

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

tagir_valeev 30 июл 2010 в 15:53

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

НЛО прилетело и опубликовало эту надпись здесь

tagir_valeev 30 июл 2010 в 16:05

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

НЛО прилетело и опубликовало эту надпись здесь

tagir_valeev 30 июл 2010 в 16:18

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

НЛО прилетело и опубликовало эту надпись здесь

tagir_valeev 30 июл 2010 в 16:25

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

AMCDM 30 июл 2010 в 16:20

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

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

tagir_valeev 30 июл 2010 в 16:21

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

AMCDM 30 июл 2010 в 16:23

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

tagir_valeev 30 июл 2010 в 19:06

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

XaocCPS 30 июл 2010 в 18:29

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

tagir_valeev 30 июл 2010 в 18:49

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

XaocCPS 30 июл 2010 в 19:50

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

Mezomish 30 июл 2010 в 19:54

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

AntiGravitY 30 июл 2010 в 20:09

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

Mezomish 30 июл 2010 в 20:19

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

tagir_valeev 30 июл 2010 в 20:38

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

Mezomish 30 июл 2010 в 20:50

Неа

НЛО прилетело и опубликовало эту надпись здесь

tegger 30 июл 2010 в 23:10

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

tagir_valeev 30 июл 2010 в 23:16

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

tegger 30 июл 2010 в 23:17

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

Yan169 31 июл 2010 в 00:19

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

Mezomish 31 июл 2010 в 00:23

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

tagir_valeev 31 июл 2010 в 00:28

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

Mezomish 31 июл 2010 в 00:30

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

tagir_valeev 31 июл 2010 в 00:36

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

Yan169 31 июл 2010 в 00:38

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

Mezomish 31 июл 2010 в 00:40

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

Yan169 31 июл 2010 в 00:40

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

tagir_valeev 31 июл 2010 в 00:47

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

stansult 31 июл 2010 в 01:12

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

tagir_valeev 31 июл 2010 в 01:18

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

stansult 31 июл 2010 в 01:40

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

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

valkoivo 31 июл 2010 в 12:50

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

tagir_valeev 31 июл 2010 в 15:34

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

valkoivo 31 июл 2010 в 15:42

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

НЛО прилетело и опубликовало эту надпись здесь

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Показать лучшие за всё время

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

Комментарии 97

Публикации

Истории