Зацикливание цвета на холсте

[Gorodohan]

По ссылке графика просто чудо!
В голове сразу возникают образы игр девяностых и хрипящий звук из пластмассовых колонок.
Спасибо автору за приятные воспоминания.

[MyOtheHedgeFox]

Если не ошибаюсь, это изображение от Mark Ferrari.

www.markferrari.com/gallery/digital/game_art/
Найдите там Fall City: к слову, Марк как раз пишет в этом разделе о технике зацикливания палитры, которую, по его словам, он и выдумал.

[MyOtheHedgeFox]

Гм. Там есть ссылка на автора.

[Straight]

Думаю, дело в том, что в 256-цветной графике нужно Рисовать. Именно так — с большой буквы. А в современной графике у многих почему-то сложилось мнение, что достаточно просто отрендерить.

[unbeliever]

в 16-цветной тоже. Вот совершенно безумная работа с последнего Retro Euskal для ZX Spectrum: artcity.bitfellas.org/index.php?a=show&id=17828

[Mithgol]

[soulburner]

Что-то тут не чисто… Откуда на спектруме розовый цвет? И феолетовый? На спектруме только magenta был — #FF00FF (и менее яркий #880088).

Или эта картинка — это псевдо-результат, которого добиваются быстрой попеременной сменой двух кадров?

[AxisPod]

С учетом оптимизации можно отрисовать 100% чернобелого изображения, если поставить стек на экран и пушить в него изображение, а также залить картинку одним цветом, таким образом и реализован эффект, где на каждый пиксел свой цвет, разве что мерцает сильно.

[AxisPod]

LDIR самая медленная операция работы с памятью и занимает 21 такта на 1 байт, тогда как LDI уже 16 тактов на 1 байт (обычно делал циклы по 256 LDI и заходил в нужную точку этого цикла), а вот PUSH выполняется 11 тактов на 2 байта + LD HL, XX 10 тактов, в итоге получаем 10.5 тактов на 1 байт. Для экрана 6144 на пикселы и 768 байт на цвет, получаем примерно такой расчет 6144 * 10.5 + 768 * 5.5 + 10 = 68746 тактов, здесь получаем для пикселей (11 + 10) / 2 на байт, на заливку одним цветом 11 / 2 на байт и 10 тактов на задание регистра HL. Спектрумы имеют в среднем от 68тысяч (для всяких там медленных ленинградов) и до 71тысячи с лишним для пентагона. Но соответственно, чтобы не видеть луча необходим комп со 128кб озу, для использования второго видеоэкрана.

[AxisPod]

Еще забыл, у наших русских поделок, где было лень нормально перетащить схему, был упрощенный генератор и все команды имели четное кол-во тактов, все нечетные были увеличены на 1.

[SLIDERWEB]

Какой олдскульный хардкор. Невольно вспоминается ответ «думателя» на главный вопрос. (шутка)
А вообще от нынешних гуру такого не услышишь, они уже не оперируют такими низкоуровневыми понятиями как такт, операция и т.п. у них все базируется на функциях, методах, объектах.
Спасибо, понастальгировал.

[3bab00n]

Вообще-то, у Спектрума аппаратно адрес буфера экрана переключался. Начиная с 128K был так называемый теневой экран.

[AxisPod]

Ну это да, но триколор требует 3 картинки, а существует всего 2 видеоэкрана.

[AxisPod]

Возможно Flash Color (для модификации использовался бит мигания итого 32 цвета, не подходит) или Double Color (используется два экрана для отображения, на каждом по 16 цветов итого 16 * 16 = 256 цветов)

[Mithgol]

Строго говоря, реальное число цветов Double Color должно быть уменьшено как минимум вдвое (до 16×8=128) потому, что сочетания исходных цветов коммутативны, то есть попарно идентичны (например, сочетание синего с красным идентично сочетанию красного с синим).

Затем уместно уменьшить его ещё далее благодаря тому, что сочетание ярко-красного с чёрным идентично сочетанию двух тёмно-красных (и то же самое для других подобных оттенков).

[unbeliever]

Не надо усложнять. Это обычный Спектрум 128. У него два экрана переключаются 50Hz и суммируется цвет и пиксели. На реальной машине (CRT TV) изображение немного мерцает. Посмотреть такую картинку вполне возможно было еще в 1986 г., но рисовать в такх режимах стали лишь несколько лет назад

[unbeliever]

я хотел донести главное — эту картинку можно просмотреть без аппаратной модификации на классическом Spectrum 128K

[AxisPod]

Такие картинки очень требовательны к тактовому генератору, обычно подобные вещи делаются под пентагон. А на других картинка может съезжать.

[TuKTeeK]

Была бы еще эта «фотореалистичная» графика, настолько реалистичной. Именно поэтому хорошее 2D всегда смотрится выгоднее. Там можно отрисовать безумной красоты спрайты и все будет работать, а в 3 такое же качество ни одна машинка не потянет.

[Sketch_Turner]

»2д — это еще и векторная графика например

Векторная графика это еще и 3Д =) Вся трехмерная графика является векторной, пока не наносят текстуры. Тогда это уже полигональная графика.

»просто потому, что по любым объективным параметрам 3д графика лучше…

Вы ошибаетесь. Фотореалистичное 2Д было уже 15 лет назад (всё тот же Мортал Комбат). А вот фотореалистичного 3Д нет до сих пор. Да даже пиксельное 3Д (воксели) смотрелось порой совершенно шикарно («Бегущий по лезвию»).

»а пиксель — это либо оригинальные решения либо сильная ностальгия =)

Ну вот смотрите. Для таких игр как Марио, Соник или многих других нет ничего лучше, чем пиксельное 2Д. Кастельванию перевели в 3Д и превратили в урода. Марио от 3Д ничего не выиграл. Как и Соник. 3Д тоже хорошо, но повальное увлечение им «слегка» раздражает. Все работают на нВидию и АМД, покупают сверхдорогие карты, тратят мегаваты электричества. А ведь можно сделать шикарную игру и в оычных пикселях, которая пойдет даже на старых компах, а смотреться будет божественно. Вот что важно.

Короче народ хочет пиксели не просто так, а потому что он реально мутным объелся 3Д. Я тут говорю мутным именно потому, что 3Д до си пор частенько мутное, тогда как пиксели — это резкость и сверхчеткость. Впрочем может тут я слегка предвзят. Но согласитесь, реально 3Д стало слишком много.

[TuKTeeK]

Ну аватар положим фотореалистичен, но у меня же нет рендер фермы, да и та 24 кадра в секунду не выдавала.

И я как раз из-за мутного 3D так и не прошел Half-life к примеру или deus ex, да и много каких еще игр, ну не смотрится оно в сравнении с тем что сейчас 3D движки делают.

А вот червячки 1998 года издания я играю до сих пор, и мне на них смотреть приятно. Кстати еще один пример где 3D всяе испоганило, в трехмерные версии я серьезно играть не могу.

Или Clonk rage, Cortex command, Trine наконец. Я думаю очень нескоро я увижу тоже самое в 3D с приятной глазу графикой.

[Sketch_Turner]

»Я не про 15 лет назад говорю, а про сейчас…

Естественно сейчас 2Д может быть еще более фотореалистичным, чем 15 лет назад. Оно не деградирует, вы не подумайте: )

»а сейчас уже есть фотореалистичное 3д — глупо с этим спорить…

Покажи те мне хотя бы одно фотореалистичное 3Д в играх? Мы ведь об играх говорим. Фотореалистичное 3Д даже в фильмах раз-два и всё, бюджет закончился, дальше сами выдумывайте.

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

»скорее он соскучился по играм, в которых главными были история и проработанность диалогов\характеров\etc

Ооо! Этой фигни навалом на приставках от Нинтенды. Нет уж, такое народ не особо хочет. Во всяком случае известную Кастельванию и Мегамена совершенно испортили как раз тем, что игровой процесс длиться 5 минут, а потом на пол часа диалогов.

Народ не настольгирует. Народ хочет иметь право выбора. А выбора как такового нет. Либо 3Д, либо инди-игры, которые весьма своеобразны.

»Но далеко не многие более молодые собратья согласятся, что 2д марио на денди лучше чем какой-нибудь 3д марио

Даже я не соглашусь, что Марио на денди лучше. Вы бы еще Атари вспомнили.: ) Речь идет о современном 2Д, на секундочку, а не о старых играх.

[Sketch_Turner]

»Зачем кастельванию и мегамана делать с очень дорогой и проработанной 2д графикой? оно ведь не окупится…

А разработчики этих игр и не знают. Зачем-то делают. Почему-то окупается: )

»по-моему народ как раз сделал выбор… — >> Либо 3Д, либо инди-игры

Либо Путин, либо Медведев.

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

Да. Я вижу разницу между 320*240 и 256 цветами в прошлом десятилетии и 1920*1080 и 16 миллионов цветов в этом: ) И это не говоря о том, сколько слоев можно использовать в играх на современных мощностях (причем каждый слой можно сделать анимированным).

»и как это связано с пиксель-артом из этого топика?

Никак. Вы первым сказали о том, что 3Д объективно лучше. Я вам сказал, что современное 3Д как минимум не может выдавать фотореализм, и пошло поехало.

[kozlice]

просто потому, что по любым объективным параметрам 3д графика лучше…

Не знаю, какие параметры считаете объективными вы, но сравните трёхмерную стратегическую карту ниваловских пятых «Героев», где можно по полчаса гонять уродливую модельку, изображающую героя, через бесконечное полиговно окружающего мира в поисках какого-нибудь сундука, который «удачно» запихнули под дерево левел-дизайнеры, попадая в тупики из-за того, что визуально невозможно оценить, пройдёшь ли через данный кусок ландшафта, и идеально ясную карту в HoMM 3.

[Sketch_Turner]

Во-во! Доходит до смешного — Mortal Kombat 3, вышедший 15 лет назад смотрится на порядок реалистичнее и лучше по графике, чем современный его трехмерный собрат.

Тоже самое касательно Кастелвании, местами Марио, Соника и прочих-прочих…

В 2Д можно нарисовать просто шикарные картины с миллионами движущихся слоев, и процессору это ничего не будет стоить. Но делают фиговое 3Д вместо этого. Непорядок.

[Imenem]

Скорее уже связь «плохая графика (старые технологии) => интересный сюжет в играх», «хорошая графика (новые технологии) => нет сюжета».

[Mithgol]

YOBA-графики? А что это такое? Google ничего хорошего по этому слову не находит: какие-то секс-товары да чучмеки.

[olegchir]

Bydlo Approved? В английском языке уже появилось слово bydlo?!

[AlexChudd]

русский мем же
YOBA ← ёба (типичное междометие)

[Goodkat]

lurkmore.ru/Y.O.B.A.
Или у Мицгола Луркоморье тоже забанено? :)

[naum]

Не говорите Мицголу про лурк. Он, мягко говоря, не в его вкусе :)

[n1tra]

что есть есть YOBA?

[n1tra]

спасибо keksn за ответ

[prov]

чем то родным повеяло

[FractalizeR]

«массивного массива» исправьте, пожалуйста. И, мне кажется, цвета на экране не «переменялись», а просто «менялись».

[Mithgol]

Мне так больше нравится.

[Imposeren]

тучного массива, грузного массива, тяжелого массива, большого массива… Интересно чего занимательного можно придумать? Грузный массив пока, как по мне, выглядит самым подходящим

[Mithgol]

Переменил на «обширного массива».

[wpm1]

В Шене есть «массивный тип»

[FractalizeR]

Ну и самомнение у вас, однако… Полное непринятие любой критики…
Удачи.

[Imposeren]

Толку от критики без конструктивных советов? Про массив не посоветовали ничего — не поменял. Ну а «переменялись» — стиль автора. Как бы этот стиль не ненавидели или любили, но благодаря ему сразу понятно кто пишет (=

[FractalizeR]

У Mithgol, конечно, самомнение велико, но не стоит считать, что он тупой неуч. Он и сам прекрасно найдет, чем заменить этот «массивный массив». Кстати, уже заменил.

[tagir_valeev]

Родной сердцу ordered dithering.

[Imposeren]

Тут он похоже просто как дань оптимизации появлися(= Т.е. что бы уменьшить размер «меньшего» массива. А вообще да, круто смотрится

[tagir_valeev]

Это понятно, но Флойд-Штайнберг-то лучше бы смотрелся, я думаю :-)

[Imposeren]

В статике да. А при анимации — или всю область придётся перерисовывать, или (при перерисовывании округлённых вверх, например) вся прелесть алгоритма пропадёт

[tagir_valeev]

Во-первых, не думаю, что благодаря дизерингу экономится существенная часть пикселей. Вот, к примеру, пиксели, которые меняются на картинке с водопадом:
xmages.net/storage/10/1/0/f/a/upload/9b169bae.png
(получено попиксельным сравнением двух разных кадров анимации).

Основной объём водопада всё равно перерисовывается целиком. Ну и мне не кажется, что алгоритм упорядоченного дизеринга здесь имеет особое преимущество. На полоске загрузки Windows 95, которая была анимирована именно таким способом, используется дизеринг Флойда-Штайнберга.

[Imposeren]

О! Круто (= Я там особо не копался, так что только бегло оценивал. Действительно, различные методы дизеринга не особо будут влиять на набор пикселей.

Может и лучше с Ф-Ш дизерингом было-бы. Но и в таком методе тоже есть свой шарм. Спасибо что не поленились сравнить(=

[MasterFlo]

Эх мая старинькая 8-битная приставочка, втертые в ноль джойстики (паяльник), катриджи без крышечек, 5 рублев кажись поменять с пройденной игрой на другой катридж :)

[braintorch]

Это просто прекрасно. Во всех смыслах.

[z4kk]

Немогу насмотрется.
Завораживает до мурашек по спине…

[ant_Ti]

Вот это действительно WOW эффект

[oxpa]

Вот так «хорошо не забытое старое» становится «новым». Приятно посмотреть!

[marvin]

Мне вот инетресно. Он сначала это рисуте это в графическом редакторе, а потом переводит в JS-код, или как?

[Mithgol]

Судя по подписи, рисует даже не сам он, а Марк Феррари. Кодер просто сочинил холстовый зацикливатель цвета. Но и то нехило.

[marvin]

Угу. Но картинки – офигенны, должен признать. Сразу вспоминается времена прехисторика и прочих голден эксов…

[marvin]

интересно*
рисует*

Отвечаю себе сам: он битмап загружает с сервера в виде массива, а потом просто помещает его на канву. На сервере же для конвертации картинки в такой битмап используется небольшая программа на C++.

[Kakysha]

ДаЮ все верно, странно что автор это упустил. Источник:

Mark's scenes are actually Amiga IFF / ILBM files, originally created with Deluxe Paint in DOS. I had to write a converter program which parses the files and extracts the pixels, the palette colors, and all the cycling information, and writes it out as something Javascript can understand. The data is stored as JSON on disk. My converter script is written in C++, but included in the source package if you are interested.

[MyOtheHedgeFox]

Он сконвертировал анимированные таким образом LBM-файлы.

[punch]

Убедительно.

[novoselov]

Зацикливание цвета пикселов во браузере решается сбором пикселов и зацикленным сдвигом цветовой палитры, вместо обхода массивного массива программист может переменять палитру, чтобы тотчас переменялись цвета на экране.

Кто-то понял написанное с первого раза?
«Зацикливание цвета» — это циклическая смена цветов
«зацикленным сдвигом» — это циклический сдвиг

Но массивный массив говна в мозге автора уже сложно переменять.

[novoselov]

холстовый зацикливатель цвета — это ппц -феерия

[Ryotsuke]

Помним-помним эту технологию :)

[pcmaniac]

Та, там как раз в заголовке bmp-хи (которая logo.sys) указывался цвет, с которого по нулевой (или 255-й, уже не помню) вращалась палитра.
Я для винды себе каждые 2-3 недели новое лого загрузчика делал. В основном всякие кислотные фракталы. Для пиксель арта как-то руки не оттуда растут))

[lsdima]

Арт впечатляет. Но технологию делающую то-же самое, что и 8-битные приставки на компьютерах мощностью в тысячи раз больше — иначе как «некро» не назовешь.

[Imposeren]

А как же телефоны?(= Да и там приставки, а тут всепожирающий (в зависимости от реализации конечно) яваскрипт!

[Mithgol]

Если сравнивать непредвзято, то будут не тысячи раз, а примерно сотни. Например, «Amiga 1000», если веровать статье в Википедии, был оборудован процессором с частотою 7,14 МГц (менее 1 MIPS) и памятью 256 — 512 килобайтов.

[lsdima]

Мощность != количество МГц.

[Mithgol]

Правильно, но я ведь и число MIPS процитировал.

[iTYR]

Я оторваться не могу — 8 бит(!), качество рисунков, качество анимации. Так тепло когда на это смотришь.

[Ryotsuke]

Очень люблю пиксель-арт, даже хотел бы обои. Но попробуй найти что-нибудь качественное на современные разрешения. Я так и не нашел :(

[Imposeren]

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

[Spyd3r]

SeaScape отчетливо напоминает Каладан, с Дюны…
Прям вспомнил игру Dune — RPG +)

[TheShock]

Очень красиво.
Но количество кадров небольшое. Чтобы ускорить — имело смысл все варианты отрисовать в буфер и из буфера накладывать изображения. Это позволило бы делать очень быструю анимацию.
Я так понимаю, ухищрения оптимизаций тех времен не действует в нынешних условиях. Надо искать другие приёмы

[TheShock]

т.е. как пример безумной красоты на джаваскрипте — отлично. но, я так понимаю, пользы в плане оптимизаций оно не имеет

[TheShock]

большинство спрайтов напомнили мне Кираандию

[valyard]

А главное, совсем не тормозит.

Это ж не флэш.

[Mithgol]

До Вас тут никто Ваш флэш ни единым словом не упомянул — но, видать, даже это Вам досадно.

[valyard]

наш флэш

[GreyCat]

Поясните, как int 10h относится к VESA, а еще для чего его хоть кто-либо использовал, кроме переключения режимов?

[GreyCat]

То, что Вы показали, не имеет никакого отношения к VESA. Прямой доступ в видеопамять шикарно использовался для программирования MCGA/VGA адаптеров, там никаких банков нет, 320*200*8 имеет линейное пространство размером ровно в в 64000 байт — пиши хоть точечно-побайтно, хоть в циклах — как душе угодно.

Смена палитры в MCGA/VGA проводилась через запись в порт 0x3c8.

[XaBoK]

Прекрасно работает на андройде (нексус) и айфоне — совсем не тормозит

[Yareactor]

Как это можно делать? В чём? Хочу научиться!

[Mithgol]

Как сказано выше, использовались файлы в формате Amiga IFF / ILBM, созданные в графическом редакторе «Deluxe Paint» под DOS.

[Yareactor]

Хм. Посовременнее бы что-нибудь, чем под Dos.
Я хорошо работаю в Photoshop, но как задать в нём сдвиг палитры — я не знаю.
Надеялся, что есть какой-то способ делать это в современных графических редакторах, или хотя бы какой-то небольшой программкой задавать сдвиг палитры.

[OneManStartup]

1) Открываешь фотошоп.
2) Рисуешь картинку.
3) Дублируешь во втором кадре (анимация в фотошопе уже давно).
4) Меняешь цвет нужных тебе пикселей.
5) Профит.

[Yareactor]

Я знаю, как делать анимацию в фотошопе. А до этого в имейдж реди, а до этого в гиф аниматоре.
Так, как говорите вы, получится анимированный гиф, с фиксированной палитрой, кучей кадров, со всем вытекающим весом изображения.

Вопрос в том, как сделать сдвиг палитры?
Тот способ, о котором говорите вы, этого не даст сделать.

[MyOtheHedgeFox]

Сдвиг палитры впервые увидел только в названном выше редакторе.

[TheShock]

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

[OneManStartup]

ну тогда если знаете as3, то во флеше могу предположить можно менять цвета пикселей. Я просто не понял, что вы хотите получить на выходе. Для чего это нужно.
А вес изображения это не самое плохое если учесть что там не будет нагрузки на процы, что в мобильных приложениях очень важно.
Если в фотошопе просто делать кадры только с изменяемыми пикселями то вполне будет хорошая скорость и меньший вес.
Минусовать то зачем :)

[Yareactor]

Нет, c экшн-скриптом я не знаком. Равно как и с флешем знаком очень поверхностно.
Насколько я понимаю, раньше эта технология со сдвигом палитры позволяла писать смену цвета сразу в видео-память, что не нагружало процессор. Насколько я понимаю, сейчас этого сделать нельзя. Но было бы хорошо.
Вы на результат посмотрите, представьте, что это можно сделать на мобильной платформе. Маленький вес, низкая нагрузка на процессор.
В фотошопе я могу делать кадры с изменяемыми пикселями, и анимацию могу сделать. Но на выходе будет анимированный гиф, а если учесть, что он будет, например, 640x480 и при этом иметь палитру 256 цветов, да кадров штук 30 — то весить он будет несколько мегабайт, а то и десятков.

А я и не минусовал (впрочем, как и всегда) — моя карма этого делать не позволяет. :)

[TheShock]

посмотрите в Гимпе «окна» — «прикрепляющиеся диалоги» — «цветовая карта»

[ruzzz]

Имено атмосфера старого граф. редактора под DOS может дать вдохновение на создание таких картинок :)

[Lungo]

Осталось придумать сюжет, дорисовать персонажей и будет игра, какой-нибуть олдскул квестик

[RedSadnessTint]

Кризис отдыхает!)
Атмосферой так точно)

[Error_403_Forbidden]

Помнится, как я в начале 90-х на своей машинке экспериментировал с палитрой… Эххх… :)

[iblesq]

На Нексусе смотрится как ролик, все цвета сглажены. Очень красиво.

[iwuvjhdva]

Собственно в том, что сделал Джо, ничего достойного внимания (кроме картинки из старой игры) нет. Это очевидная эмуляция palette shifting, и технически в ее реализации нет вообще ничего примечательного.

Настоящий palette shifting был основан на том, что на старых адаптерах цвета, видимые на экране, можно было менять записью значений RGB в соответствующие порты адаптера мгновенно, без обращения к видеопамяти.

[ArtyShocK]

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

[Mithgol]

Этот вопрос был чуть выше.

[ArtyShocK]

Ой, точно. Спасибо

[Richard]

Дивные рисунки!

[Toxya]

Ждем S.C.U.M.M реализованный на HTML5? )))

[AlienZzzz]

как же я давно не ностальгировал!

[dmitriykardash]