Пиксель-арт, эпизод 1: дисплей Super Mario


47

это я!

Задача сегодняшнего дня проста: написать программу или функцию, которая отображает небольшой простой спрайт Mario из Super Mario Bros в NES на синем фоне.

Любая запись действительна, если она отображает эти 12 * 16 пикселей в любом месте экрана / окна / браузера.

(РЕДАКТИРОВАТЬ: отображаемое изображение можно увеличить, если ваш язык не может создавать пиксельные рисунки. Вы также можете выводить изображения в формате ASCII или HTML, но используя правильные цвета.)

Изображение (увеличено на 400%):

Вы должны использовать следующие цвета:

  • синий: # 6B8CFF
  • красный: # B13425
  • зеленый / коричневый: # 6A6B04
  • оранжевый: # E39D25

Самая короткая программа (по количеству символов) побеждает!

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

Вот так!


Текущий список лидеров

Кратчайший ответ только с использованием кода:

Кратчайший ответ, используя какое-то жестко закодированное изображение:


2
Кроме того, создание файла не допускается? Это должно отображаться?
Мартин Эндер

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

20
Nitpicking: Это Марио, а не Супер Марио.
Деннис

5
Какая забавная идея ... Вот идея для продолжения: возьмите образ Марио (любой формат) и превратите его в образ Луиджи!
Зиббобз

3
Можем ли мы составить программу, похожую на него?
Конор О'Брайен

Ответы:


36

HTML / JS, 206 158 153 102


102

Используемый трюк: сохраните сжатый файл GIF как файл HTML и добавьте в конце <img src = #>

Благодаря этой записи: https://codegolf.stackexchange.com/a/39926/10732 от @NiettheDarkAbsol

GIF87a  ¡ kŒÿã%jk±4%,       6„‡héj„Af-ÕdÎy\%    …R˜0”ŒÈJ­³I©±²û“ú=ª$±p%i¸•¤ <img src=#>

Демо: http://meuziere.free.fr/mario/gif.html


Старые версии:

153

Используемый трюк: сохраните сжатый файл PNG как файл HTML и добавьте <img src = #> в конце

‰PNG


IHDR         _v”   PLTEjkkŒÿ±4%ã%ó’V   IIDAT×c[ʵj%C€ÍUŸ?|ìíœÿ02„ÿÿÊÐÊàÐÄÈÀ°ŠáÓë~†«ö3üZµž!jÚR‡P x( s6ïåÇ<img src=#>


158

Используемый трюк: установка усеченного dataURI сжатого PNG в качестве SRC тега IMG и упаковка всего этого в символы Unicode.


Выполните это в вашей консоли JS:

document.write(unescape(escape('🁩𫑧𘁳𬡣👤𨑴𨐺𪑭𨑧𩐻𨡡𬱥𝠴𛁩𥡂𣱒𭰰𢱇𩱯𠑁𠑁𣡓𥑨𡑕𩱁𠑁𠑷𠑁𠑁𤑁𩱍𠑁𠑂𩡄𜱡𥑁𠑁𠑄𡡂𣑖𡑖𬑡𭱒𬡪𤀫𮁎𠱘𪡮𤱘𮡫𩱨𥱁𠑁𠑓𥑬𡑑𥡑𢐱𜡍𢑗𮁘𢱅𣁖𬑊𥑏𠑺𥡕𡱮𮠹𛱇𦁺𬰷𤡭𨰯𮡁𮑨𤀯𛱹𪁄𤑅𣑲𩰰𣑔𢑷𣁃𢱧𩑈𥀶𜰶𡱦𝡶𜡍𛱸𨑴𦠴𪁡𭁰𤱂𫱤𤑯𢁧𫱁𭰾').replace(/uD./g,'')))


206

Без упаковки (206b):

<img src=data:image;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQAgMAAABfD3aUAAAADFBMVEVqawRrjP+xNCXjnSXzkghWAAAASUlEQVQI12MIWxXKELVqJUOAzVUGnz9/GXzs7Rmc/zAyhP//yhDQEMrg0MTIwLCKgeHT636Gf6v2M/xatZ4hatpSBodQoHgoAw>

демонстрация


Используемые инструменты:


Вам не нужны теги. Просто используйте данные Chrome URI и введите его в свой URL-адрес. 200 символов
Оптимизатор

Хм ... Я считал, что dataURI не является действительной "программой". Но ты прав. Все браузеры позволяют использовать dataURI в адресной строке.
xem

Теперь вы используете лазейку в качестве ОП;). Вы перекладываете всю работу на внешнее / встроенное сжатие формата GIF. Если это круто, мы все должны сейчас искать неясные форматы изображений с лучшей степенью сжатия, и я мог бы сэкономить много работы, написав собственное сжатие. ;)
Мартин Эндер

2
@ xem Ну, твой вызов, твой звонок. Но это кажется немного бессмысленным, если мы сейчас просто ищем наиболее сжатый из существующих форматов файлов. ;)
Мартин Эндер

1
Похоже, ссылка на rawgit мертва.
Эддисон Крамп

27

Mathematica, 412 292 252 212 163 148 143 141 символов

f=FromDigits[ToCharacterCode@#,2^16]~IntegerDigits~#2&;Image@Partition[f["넴╫賿橫ӣ鴥",256][[3#+1;;3#+3]]/256&/@"吀啐^A媾핮﻽溿뽫ﺩ埿⩕樨ꦪª⿼?ཐᐅ橕ꦪ喪"~f~4,12]

При этом используется ^Aсимвол каретки для управляющего символа в кодовой точке 1. В Mathematica я могу буквально встраивать персонажа, хотя это приводит к всевозможным уродствам при копировании. В любом случае, вышеприведенное на 2 символа короче, чем в моей предыдущей версии, и я получил эти символы из символов, используя base-4 вместо base-5 для кодирования индексов цветовой палитры. Прямо сейчас я не могу потрудиться исправить объяснение и снимок экрана ниже, поэтому я оставляю вас здесь с оригинальной версией моего базового 5 ответа:


f=FromDigits[ToCharacterCode@#,2^16]~IntegerDigits~#2&;Image@Partition[f["넴╫賿橫ӣ鴥",256][[3#-2;;3#]]/256&/@"ᯱ曎㌟뱮䚻륏Σ襺ﺦ您汜豈塘ᙉ雬儥衰ꐰꃾ纔ㆯ쭴뫋澖ᕿ蓉"~f~5,12]

Я кодирую пиксели в Unicode-символах (yay для подсчета по символам!).

Вот как это выглядит в Mathematica:

введите описание изображения здесь

Вот как это работает:

Сначала мы определяем функцию, fкоторая превращает строки Unicode (переданные в качестве первого аргумента #) в списки целых чисел. Сначала мы получаем коды символов. Они могут быть интерпретированы как цифры базового номера 65536. И затем мы конвертируем это число в другую базу, передаваемую как второй аргумент #2.

Теперь давайте сделаем это для более длинной строки Unicode. ToCharacterCodeдает этот список:

{7153, 26318, 13087, 48238, 18107, 47439, 931, 35194, 62191, 65190, \
 24744, 57782, 27740, 35912, 22616, 5705, 38636, 20773, 34928, 42032, \
 41214, 32404, 12719, 52084, 47819, 28566, 5503, 33993}

Рассматривая это как базу 65536:

7933607912575313477287527915733176998797205587959732019781370103381...
4831246938139171755469819519515972565671101475553962564506286523593

И преобразование в базу 5:

{2, 2, 2, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, \
 2, 2, 2, 3, 3, 3, 4, 4, 3, 4, 2, 2, 2, 2, 3, 4, 3, 4, 4, 4, 3, 4, 4, \
 4, 2, 2, 3, 4, 3, 3, 4, 4, 4, 3, 4, 4, 4, 2, 3, 3, 4, 4, 4, 4, 3, 3, \
 3, 3, 2, 2, 2, 2, 4, 4, 4, 4, 4, 4, 4, 2, 2, 2, 2, 3, 3, 1, 3, 3, 3, \
 2, 2, 2, 2, 2, 3, 3, 3, 1, 3, 3, 1, 3, 3, 3, 2, 3, 3, 3, 3, 1, 1, 1, \
 1, 3, 3, 3, 3, 4, 4, 3, 1, 4, 1, 1, 4, 1, 3, 4, 4, 4, 4, 4, 1, 1, 1, \
 1, 1, 1, 4, 4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 2, 2, 1, 1, 1, \
 2, 2, 1, 1, 1, 2, 2, 2, 3, 3, 3, 2, 2, 2, 2, 3, 3, 3, 2, 3, 3, 3, 3, \
 2, 2, 2, 2, 3, 3, 3, 3}

Это индексы цвета пикселей: синий, красный, зеленый, оранжевый. Мы используем их для индексации в этом списке номеров, который является цветовой палитрой.

Теперь о цветовой палитре. Это "넴╫賿橫ӣ鴥". Мы используем вышеупомянутые индексы, чтобы выбрать правильную строку. Затем мы снова применяем нашу функцию, но с использованием базы 256. Это дает список из 12 целых чисел:

{177, 52, 37, 107, 140, 255, 106, 107, 4, 227, 157, 37}

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

Наконец, мы просто используем, Partitionчтобы разделить это на ряды 12и передать его Image. Вуаля!

Редактировать: с упаковкой Unicode RLE больше не стоил того. Удаление его спасло 50 символов.

Изменить: Конечно, без RLE, также нет необходимости идти на базу 16.

Изменить: И в то время как мы на это, почему бы не Unicode-пакет цветовой палитры тоже? (У меня есть предчувствие, что я могу сэкономить немного больше, сделав всю цветовую палитру также одной строкой и используя ее Partitionтам. Я попробую это позже.)

Изменить: Да, это сбрило еще 5 байтов.


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

@xem сделает. Это среда REPL, способная к графическому вводу и выводу.
Мартин Эндер

Не уверен, но вы зеркально отражаете нижнюю часть изображения?
Оптимизатор

1
@ Оптимизатор Нет, я сомневаюсь, что смогу сделать это меньше символов, чем сэкономлю.
Мартин Эндер

Когда я просматриваю документацию Mathematica, я не вижу никакого использования тильды, но здесь выясняется, что вы используете его для передачи результата одной функции в другую и затем применяете дополнительный аргумент к этой второй функции (IntegerDigits)? Кроме того, цветовая палитра: глядя на изображение, кажется, есть только четыре цвета, но ваша цветовая палитра, кажется, включает в себя нечто большее: {177, 52, 37, 107, 140, 255, 106, 107, 4, 227 , 157, 37}. Глядя на документацию по Image, похоже, что она печатает в оттенках серого, если не предоставлены дополнительные опции, такие как ColorScale -> RGB.
CryptoCommander

20

Ява: 398 377

void s(){new java.awt.Frame(){public void paint(java.awt.Graphics g){int i=0,x,m[]={12226,44085194,467839834,0x5abea55a,0x5bbd5d50,0x5ffe9540,0x5ffe9540,0x5aee5d50,531408218,334277466,333492170,0xc02fc2},c[]={7048447,0xB13425,6974212,0xE39D25};for(setSize(99,99);i<192;g.setColor(new java.awt.Color(c[m[x]&3])),m[x]/=4,g.drawLine(x+40,60-i%16,x+40,60-i++%16))x=i/16;}}.show();}

Просто рисует спрайт, распаковывая int для каждого столбца. Показано в полной программе:

class P{
    public static void main(String[]a){
        new P().s();
    }

    void s(){
        new java.awt.Frame(){           
            public void paint(java.awt.Graphics g){
                int i=0,x,m[]={12226,44085194,467839834,0x5abea55a,0x5bbd5d50,0x5ffe9540,
                               0x5ffe9540,0x5aee5d50,531408218,334277466,333492170,0xc02fc2},
                          c[]={7048447,0xB13425,6974212,0xE39D25};
                for(setSize(99,99);i<192;
                    g.setColor(new java.awt.Color(c[m[x]&3])),m[x]/=4,
                    g.drawLine(x+40,60-i%16,x+40,60-i++%16)
                )x=i/16;
            }
        }.show();
    }
}

Обязательный скриншот:

Это я Марио


1
Вы можете сохранить 9 байтов, используя import java.awt.*.
Кевин Круйссен

15

Машинный код x86, 102 байта

Как это работает: изображение сохраняется как 2-битное изображение с использованием палитры. Каждая строка изображения сохраняется в виде 3 байтов, за которыми следует один 1 байт цветовой палитры. Это позволяет загружать данные как один DWORD. Двенадцать пикселей выводятся путем маскировки 2 младших битов значения, записи их в видеопамять, а затем смещения вправо всего значения на два бита. Как только пиксели для строки выведены, байт палитры записывается в палитру VGA. Когда изображение закончено рисование, программа входит в бесконечный цикл.

Сборочный код для генерации двоичного файла:

org 100h
mov al,13h
int 10h
les ax,[bx]

mov si,image_data
draw:
add di,320-12
lodsd
xchg eax,ebx
mov cl,12
row:
mov ax,bx
and al,3
stosb
shr ebx,2
loop row
xchg ax,bx
mov dx,0x3c9
out dx,al
test al,al
jnz draw

image_data: db 21,0,85,0xb1/4, \
5,0,64,0x34/4,            \
165,190,87,0x25/4,        \
185,191,127,0x6b/4,       \
185,254,254,0x8c/4,       \
233,191,106,0xff/4,       \
213,255,95,0x6a/4,        \
165,168,85,0x6b/4,        \
169,40,106,0x4/4,         \
170,0,170,0xe3/4,         \
47,195,248,0x9d/4,        \
63,0,252,0x25/4,          \
15,0,240,111,             \
5,20,80,111,              \
169,85,106,111,           \  
170,85,170 

Двоичный файл в кодировке Base-64, сохраните его как Mario.com для запуска:

Образец вывода: введите описание изображения здесь


10

GIF - 93 байта

Жесткое кодирование изображения теперь вполне нормально, так что ... ага? : D

GIF87a  ¡ kŒÿã%jk±4%,       6„‡héj„Af-ÕdÎy\%    …R˜0”ŒÈJ­³I©±²û“ú=ª$±p%i¸•¤  ;

Как видно в Notepad ++

скриншот в NP ++

Как PHP - 131 байт

<? header("Content-Type:image/gif");?>GIF87a  ¡ kŒÿã%jk±4%,       6„‡héj„Af-ÕdÎy\%  …R˜0”ŒÈJ­³I©±²û“ú=ª$±p%i¸•¤  ;

1
Можете ли вы загрузить свой GIF-файл (например, ctrlv.in)? Я хотел бы использовать его в своей записи вместо PNG :)
xem


@NiettheDarkAbsol Я не уверен, как вы посчитали размер этого, но я считаю 150 байтов. Независимо от этого, оценка ведется по символам, и, похоже, это 114 символов.
Мартин Эндер

2
Да, фрагмент кода PHP мне подходит (даже если вы можете удалить последние 2 байта). Но необработанный фрагмент gif - это не программа.
xem

1
@xem: Если браузер считается «интерпретатором» для HTML / javascript / etc, и подача в него необработанного фрагмента gif через тот же механизм приводит к желаемому результату ... разница становится небольшой
Mooing Duck

10

Bash + ImageMagick: 350 331 321 символов

(Palette бессовестно украдены у Мартина Büttner «S ответ .)

p=(B13425 6B8CFF 6A6B04 E39D25)
for c in 21 0 85 5 0 64 165 190 87 1{85,91,27,85} 254{,} 233 191 106 213 255 95 165 168 85 169 40 106 170 0 170 47 195 248 63 0 252 15 0 240 5 20 80 169 85 106 170 85 170;{
for j in 0 2 4 6;{
d+=(-fill \#${p[c>>j&3]} -draw point\ $[i%12],$[i++/12])
}
}
convert -size 12x16 xc: "${d[@]}" x:

Образец вывода:

Марио

Чтобы проверить это, легко добавьте -scale 120к convertпараметрам, чтобы получить 10-кратную версию:

Марио прибавил 10


2
s/185 191 127 185 254 254/1{85,91,27,85} 254{,}/; s/do/{/; s/done/}/
grawity

Doh. Я даже upvoted DigitalTrauma связанный «s совет , но я забываю , что {.. }. Спасибо, @ Grawity.
manatwork

8

Octo / XO-Chip , 70 байтов

Octo - это язык ассемблера высокого уровня, который компилируется в инструкции с байт-кодом для виртуальной машины CHIP-8 . Octo предоставляет несколько пользовательских расширений, называемых «XO-Chip» для базового байт-кода CHIP-8, включая возможность рисования 4-цветных растровых изображений с помощью наложенных битовых плоскостей.

Скомпилированные байты выглядят следующим образом:

0xA2 0x08 0xF3 0x01 0xD0 0x00 0x1F 0x00 0x3F 0xC0 0x39 0x00 0x51 0x00 0x58 0x80
0x21 0xE0 0x00 0x00 0x3F 0x00 0x7F 0xE0 0xFF 0xF0 0x36 0xC0 0x1F 0x80 0x3F 0xC0
0x39 0xC0 0x70 0xE0 0xF0 0xF0 0x00 0x00 0x00 0x00 0x3F 0x80 0x7F 0xE0 0x7F 0xF0
0x3F 0xE0 0x1F 0xC0 0x37 0x00 0x76 0xE0 0xF0 0xF0 0xE9 0x70 0xE0 0x70 0xC0 0x30
0x00 0x00 0x70 0xE0 0xF0 0xF0

марио

Запустите его здесь в своем браузере: http://johnearnest.github.io/Octo/index.html?gist=33aa37d4717a425ccd4f

Вероятно, более полезно увидеть язык ассемблера Octo, который производит этот байт-код:

: main
    i := mario
    plane 3
    sprite v0 v0 0

: mario
    0x1F 0x00 0x3F 0xC0 0x39 0x00 0x51 0x00 
    0x58 0x80 0x21 0xE0 0x00 0x00 0x3F 0x00 
    0x7F 0xE0 0xFF 0xF0 0x36 0xC0 0x1F 0x80 
    0x3F 0xC0 0x39 0xC0 0x70 0xE0 0xF0 0xF0 
    0x00 0x00 0x00 0x00 0x3F 0x80 0x7F 0xE0 
    0x7F 0xF0 0x3F 0xE0 0x1F 0xC0 0x37 0x00 
    0x76 0xE0 0xF0 0xF0 0xE9 0x70 0xE0 0x70 
    0xC0 0x30 0x00 0x00 0x70 0xE0 0xF0 0xF0 

Основная программа - три двухбайтовые инструкции. Установите регистр индекса памяти iна начало сегмента данных, выберите плоскость рисования 3 (3 - битовая маска; это означает, что вы хотите рисовать в 4-цветном режиме с обеими битовыми плоскостями), а затем нарисуйте спрайт в положениях x и y, заданных как регистр v0(инициализируется в ноль). Последний 0 указывает размер спрайта, который в наборах команд SuperChip и XO-Chip будет рисовать спрайт 16x16. В 4-цветном режиме за битовой картой для первой плоскости сразу же следует битовая карта для второй плоскости.

Чтобы увидеть, как работают плоскости, рассмотрим эту модифицированную программу, которая прокручивает одну плоскость вправо после рисования Марио:

mario2

: main
    i := mario
    plane 3
    sprite v0 v0 0
    plane 2
    scroll-right
    scroll-right
    scroll-right
    scroll-right

: mario
    0x1F 0x00 0x3F 0xC0 0x39 0x00 0x51 0x00 
    0x58 0x80 0x21 0xE0 0x00 0x00 0x3F 0x00 
    0x7F 0xE0 0xFF 0xF0 0x36 0xC0 0x1F 0x80 
    0x3F 0xC0 0x39 0xC0 0x70 0xE0 0xF0 0xF0 
    0x00 0x00 0x00 0x00 0x3F 0x80 0x7F 0xE0 
    0x7F 0xF0 0x3F 0xE0 0x1F 0xC0 0x37 0x00 
    0x76 0xE0 0xF0 0xF0 0xE9 0x70 0xE0 0x70 
    0xC0 0x30 0x00 0x00 0x70 0xE0 0xF0 0xF0 

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


6

Groovy 417 386

Весело как черт, но с ужасным количеством символов. GroovyFX нужен

m=[b:'6B8CFF',r:'B13425',g:'6A6B04',o:'E39D25'];groovyx.javafx.GroovyFX.start{stage(visible:!0){scene(width:60,height:80){flowPane{"3b5r4b2b9r1b2b3g2o1g1o3b1b1g1o1g3o1g3o1b1b1g1o2g3o1g3o1b2g4o4g1b3b7o2b2b2g1r3g4b1b3g1r2g1r3g1b4g4r4g2o1g1r1o2r1o1r1g2o3o6r3o2o8r2o2b3r2b3r2b1b3g4b3g1b4g4b4g".toList().collate 2 each{l->(l[0]as int).times{rectangle(width:5,height:5,fill:"#"+m[l[1]])}}}}}}

ungolfed:

m=[b:'6B8CFF',
   r:'B13425',
   g:'6A6B04',
   o:'E39D25']           

s=5

groovyx.javafx.GroovyFX.start {bd->
  stage(visible: !0) {
    scene(width:s*12, height:s*16) {
      flowPane {
        "3b5r4b 2b9r1b 2b3g2o1g1o3b 1b1g1o1g3o1g3o1b 1b1g1o2g3o1g3o 1b2g4o4g1b 3b7o2b 2b2g1r3g4b 1b3g1r2g1r3g1b 4g4r4g 2o1g1r1o2r1o1r1g2o 3o6r3o 2o8r2o 2b3r2b3r2b 1b3g4b3g1b 4g4b4g"
          .replaceAll(" ", "")
          .toList()
          .collate(2) 
          .each { l->
            t=l[0] as int
            cr=m[l[1]]
            t.times {
              rectangle(width:s, height:s, fill:"#"+cr) 
            }
          }
      }
    }
  }
}

введите описание изображения здесь


grep()вместоtoList()
cfrick

5

HTML / JS, 427 408 264 256 239 226 символов

Obfuscatweet, 271 270 264 256 239 226 символов

Используя obfuscatweet, удалось сократить это до <250: D

document.write(unescape(escape('🁳𨱲𪑰𭀾𨰽𦰢𝡂𞁃𡡆𘠬𘡂𜐳𝀲𝐢𛀢𝡁𝡂𜀴𘠬𘡅𜰹𡀲𝐢𧐻𨐽𙰰𜐵𝐰𜀰𝐵𝐵𝀰𠑂𡑃𜀲𡑆𡑆𠰲𡑂𡡂𡠲𠡆𡑁𞀰𜱆𡡆𜀰𠐶𠐰𜀲𠐶𞑁𞁁𠐵𝑁𠑆𞑄𝰶𡡆𡀵𝐷𡡆𝐵𝐵𡠰𝐴𜐵𜀲𠐰𜁁𞁁𠐰𜁁𠐧𞱷𪑴𪀨𩁯𨱵𫑥𫡴𚑦𫱲𚁩🐰𞱩🀹𝠻𭱲𪑴𩐨𙰼𨡲🠧𚐩𮱨🐨𙰰𜀰𙰫𬁡𬡳𩑉𫡴𚁡𛡳𫁩𨱥𚁩𛁩𚰽𝠩𛀱𝠩𛡴𫱓𭁲𪑮𩰨𝀩𚐮𬱬𪑣𩐨𛐱𜠩𞱦𫱲𚁪🐰𞱪🀱𜠻𭱲𪑴𩐨𙰼𬡰𘁳𭁹𫁥🐢𬁡𩁤𪑮𩰺𜐠𞀻𨡡𨱫𩱲𫱵𫡤𞠣𙰫𨱛𪁛𪠫𚱝𧐫𙰢🠼𛱲𬀾𙰩𚐻𯐼𛱳𨱲𪑰𭀾').replace(/uD./g,'')))

Код ниже, из чего он состоит.

Используемый трюк: преобразование изображения в base4 Строка цветных плиток, преобразованная в шестнадцатеричную строку. Индекс основания 4 обозначает цвет (0 = синий, 1 = КРАСНЫЙ и т. Д.). CSS со встроенным p используется для того, чтобы элементам div нужно содержимое для расширения (также p короче). Поскольку CSS должен начинаться с буквы, перед тегами CSS ставится «A».

Отступ от CSS дает пиксели. Ничто из этого не использует символы Юникода, с которыми я в любом случае не слишком знаком, хотя в этом случае он, вероятно, будет меньше 300. Относительное преимущество использования отступов состоит в том, что вы можете, как в этом случае, увеличить изображение до любого размера, который вы хотите, чтобы каждый пиксель был. Я использовал 9 пикселей, но если вы потратите дополнительный символ, вы можете получить до 99 пикселей на каждый представленный пиксель.


CSS, 127 119 118 114 100 13 0 символов

Переключение с pна rpустраняет необходимость display:inline, стоимость +1 символ, -15! символы!

Убрал все цвета и поместил его в массив в JS -87 символов. Тогда я просто удалил все CSS

JS, 300 289 280 275 329 325 символов

c=["6B8CFF","B13425","6A6B04","E39D25"];a='0155000555540ABEC02EFEFC2EBFBF2BFEA803FFF00A6A002A69A8AA55AAF9D76FFD557FF5555F0541502A00A8AA00AA';with(document)for(i=0;i<96;write('<br>')){h=('000'+parseInt(a.slice(i,i+=6),16).toString(4)).slice(-12);for(j=0;j<12;write('<rp style="padding:1 8;background:#'+c[h[j++]]+'"></rp>'));}

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

Используя дополнительное сокращение, заменили charAt скобками [], удалили класс A0 и установите синий цвет в качестве цвета по умолчанию для p, сохранив дополнительные 10 символов. Дополнительные затраты на использование rpтегов компенсируются огромными потерями в CSS.

Дополнительное смещение от удаления панели цикла while до простого добавления '000' для варианта использования и выделения -12 из него.

Добавлены дополнительные JS для цветов, затем поместите туда отступы. Заметил ошибку с отступом, которая требует 2 дополнительных символа для исправления. Уплотненная связка петель

HTML-файл, 430 429 419 399 366 342 символа

демонстрация

<script>c=["6B8CFF","B13425","6A6B04","E39D25"];a='0155000555540ABEC02EFEFC2EBFBF2BFEA803FFF00A6A002A69A8AA55AAF9D76FFD557FF5555F0541502A00A8AA00AA';with(document)for(i=0;i<96;write('<br>')){h=('000'+parseInt(a.slice(i,i+=6),16).toString(4)).slice(-12);for(j=0;j<12;write('<rp style="padding:1 8;background:#'+c[h[j++]]+'"></rp>'));}</script>

Приятно! Я бы посоветовал вам удалить все разрывы строк в вашем коде и предоставить ссылку для демонстрации ( c99.nl ). В качестве бонуса вы можете упаковать свою запись в символы Юникода, используя xem.github.io/obfuscatweet . Это улучшит ваш счет.
xem

также вы можете удалить свои теги & lt; html>, поместить тег & lt; style> в конце и удалить / style и завершающий "}" из последнего правила CSS.
xem

@ xem Хорошо, я вырезал все строки и сжал все. Я постараюсь найти оптимальный способ разделения JS для obfuscatweet.
Компас

1
obfuscatweet принимает любой js-код (чтобы вы могли поместить туда свои 289 js-символы) или любой html-код (чтобы вы могли скопировать html-файл здесь). Вывод obfuscatweet может быть выполнен в консоли браузера или в файле HTML, используя правильный метатег charset.
xem

psst, вы забыли удалить последний "}" части CSS. Это работает без этого.
xem

5

MATLAB, 194 193 байта

Код:

imagesc(dec2base(base2dec(reshape('5FVQL5VVVT50A4L4HA594GAHA45A015DAL551G2L41GO101VO0A7FMAANVVAAVVVQ5VLVL40L8100L80',5,[])',32),4)-48);colormap([106 107 4;107 140 255;227 157 37;177 52 37]/255)

И вывод:

Марио

По сути, я преобразовал изображение Марио так, чтобы каждый пиксель представлял собой 2-битное число. Затем я закодировал это в базе 32, которая является строкой, показанной в коде. Эта строка сначала преобразуется в 5 x 16 (каждая строка (12 пикселей) из 2-битных чисел была закодирована в базу 32), затем преобразована обратно в базу 10. Результат снова конвертируется, на этот раз в базу 4, получая массив 12x16 2-х разрядные числа. Эти числа построены с использованием imagesc(). Затем цвета назначаются colormap()с помощью пользовательской карты цветов с необходимыми шестнадцатеричными значениями.

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

Без корректировки цвета (удаления colormap()вызова) он составляет 135 байт, и это вывод для цветовой карты по умолчанию на MATLAB R2013a:

Марио, без картирования


4

JavaScript / CSS / HTML 446 430 407 353 328 316

Я играл в гольф столько, сколько мог, и в итоге получил немного грязного HTML / JS, но что угодно ... это работает.

Редактировать : Вот и все ... Я сделал.

Редактировать Серьезно сделано на этот раз.

JavaScript

for(i=0;i<192;)document.body.innerHTML+=(i%12?"":"<br>")+"<font color=#"+["6B8CFF","B13425","6A6B04","E39D25"]["000111110000001111111110002223323000023233323330023223332333022333322220000333333300002212220000022212212220222211112222332131131233333111111333331111111133001110011100022200002220222200002222"[i++]]+">█"

JSFiddle


Связанный JSFiddle не содержит ту же версию, что и здесь, и не работает (по крайней мере, не для меня в Firefox). Кстати, для более приятного вывода *{line-height:1}помог бы.
manatwork

@manatwork Попробуйте еще раз.
SomeShinyMonica

Приятно. Но почему div? Просто для любопытства я попробовал версию ECMAScript. Получил 372 символа: jsfiddle.net/768h7brb
manatwork

потому что <div></div>короче document.createElement('div'). И JSFiddle не нравитсяdocument.write
SomeShinyMonica

1
Реверс состояния тройного оператора, чтобы избавиться от правой части сравнения : : i%12?"":"<br>".
manatwork

4

Matlab - 449/332 305 байт

частичное сжатие + использование нижней симметрии изображения:

a=[0,0];b=[2,2];c=[3,3];d=[a,0];f=[b,2];g=[c,3];h=[b,b];i=[a,a];k=[1,1];l=[0,f,1,2;h,k;c,2,1,3,1;g,k,1;c,k,k;a,k,1,0;0,f,a;h,a];imshow(uint8([d,k,1,k,i;a,k,k,k,k,1,0;a,f,c,2,3,d;0,2,3,2,g,2,g,0;0,2,3,b,g,2,g;0,b,c,c,h,0;d,g,g,3,a;a,b,1,f,i;[l fliplr(l)]]),[107 140 255;177 52 37;106 107 4;227 157 37]/255)

- Частично сжатая версия (332 байта):

a=[0,0]
b=[2,2]
c=[3,3]
d=[a,0]
e=[1,1,1]
f=[b,2]
g=[c,3]
h=[b,b]
i=[a,a]
imshow(uint8([d,e,1,1,i;a,e,e,e,0;a,f,c,2,3,d;0,2,3,2,g,2,g,0;0,2,3,b,g,2,g;0,b,c,c,h,0;d,g,g,3,a;a,b,1,f,i;0,f,1,b,1,f,0;h,e,1,h;c,2,1,3,1,1,3,1,2,c;g,e,e,g;c,e,e,1,1,c;a,e,a,e,a;0,b,2,i,f,0;h,i,h]),[107 140 255;177 52 37;106 107 4;227 157 37]/255)

Полностью несжатый вариант (449 байт):

imshow(uint8([0,0,0,1,1,1,1,1,0,0,0,0;0,0,1,1,1,1,1,1,1,1,1,0;0,0,2,2,2,3,3,2,3,0,0,0;0,2,3,2,3,3,3,2,3,3,3,0;0,2,3,2,2,3,3,3,2,3,3,3;0,2,2,3,3,3,3,2,2,2,2,0;0,0,0,3,3,3,3,3,3,3,0,0;0,0,2,2,1,2,2,2,0,0,0,0;0,2,2,2,1,2,2,1,2,2,2,0;2,2,2,2,1,1,1,1,2,2,2,2;3,3,2,1,3,1,1,3,1,2,3,3;3,3,3,1,1,1,1,1,1,3,3,3;3,3,1,1,1,1,1,1,1,1,3,3;0,0,1,1,1,0,0,1,1,1,0,0;0,2,2,2,0,0,0,0,2,2,2,0;2,2,2,2,0,0,0,0,2,2,2,2]),[107 140 255;177 52 37;106 107 4;227 157 37]/255)

Вывод в обоих случаях (очевидно, увеличенный на экране, реальный 12x16pix):
MarioMagnified


Эй, я задавался вопросом, будет ли кто-нибудь использовать симметрию как-нибудь. Я не мог найти способ с тем методом, с которым я наконец-то пошел.
Неровный

4

C 4999 байт

Это абсолютно не может конкурировать с некоторыми из ответов здесь, но я думал, что я бы дал ответ C на выстрел. Код представляет собой одну длинную строку, поэтому здесь есть ссылка для вставки. Если вы предпочитаете, вот кодировка Base64 GZIP-кода:

H4sICAzFGFYCA21hcmlvLmMA3Zc9DsIwDIXv0qndUqchkXwUurAgdYiFEEyIu4NYaZBI7PzNT3Lsz4mf408bjdPjct3odh6HVeujdgg4K4vzohCM8esdjHOpkrVoALUtIrBX8y1R04DKNCGZmTp85CVdAHifYuxO3mElIlju6xaRICOgCo4pD64PoiTzHnkZcHYnRhAYcEEpFznxB1mXP4TdS/KeVGYPZbmVaQHlnRVZFi65OkhoGodq+RHrby4xsTj8i6RmapXrPvfa0Q8ZWZY1/UPbSiC7Z2bYA7r0zla57Xmo8sOEzxdNYIXFhxMAAA==

Примечательно, что для работы не требуются внешние библиотеки.

Требуется терминал xterm, Konsole или GNOME, поскольку он использует расширение RGB для кодов выхода цвета ANSI для вывода правильных цветов (ANSI не определяет оранжевый цвет). По понятным причинам ideone не будет работать. Он может быть запущен в Windows под Cygwin, который использует xterm (на самом деле, именно так я и тестировал). MSYS может работать; Я не уверен.

Вывод на мою машину (xterm):

это я, Марио!


2
-1 не кратно 10
Конор О'Брайен

Извините, речь шла о счете
Конор О'Брайен,

4

Excel VBA, 310 307 295 байт

Функция анонимного окна VBE Immediates, которая выводит Mario в объект Activesheet в ячейках A1:L16

o=2465251:Cells.RowHeight=48:a[A1:L16],-29589:a[C4:K5,D3:I7,J7,L5,A11:L13],o:a[C3:E3,H3:H4,B4:B6,C6,D4:D5,E5,I5,H6:K6,C8:H8,B9:K10,A10:L10,C11,J11,B15:D16,A16,I15:K16,L16],289642:a[D1:H1,C2:K2,E8:E10,F10:H10,H9,D11:I13,C13:E14,H13:J14],2438321:a[E11,H11],o

Помощник SubРутина

Sub a(r,c):r.Interior.Color=c:End Sub

Безголовая версия

Public Sub b()
    o = 2465251
    Cells.RowHeight = 48
    a [A1:L16], -29589
    a [C4:K5,D3:I7,J7,L5,A11:L13], o
    a [C3:E3,H3:H4,B4:B6,C6,D4:D5,E5,I5,H6:K6,C8:H8,B9:K10,A10:L10,C11,J11,B15:D16,A16,I15:K16,L16], 289642
    a [D1:H1,C2:K2,E8:E10,F10:H10,H9,D11:I13,C13:E14,H13:J14], 2438321
    a [E11,H11], o
End Sub


Private Sub a(ByRef r As Range, ByVal c As Integer)
    r.Interior.Color = c
End Sub

-3 байта для удаления пробелов -12 байтов для использования [...]нотации над Range(...)нотацией; переход от шестнадцатеричных цветов к цветам int

Выход

Это я


3

Баш 346

чистый bash с VT100, как escape-последовательности (извините, нет оранжевого в этой палитре)

C="  "
B="\033[44m$C"
R="\033[41m$C"
G="\033[42m$C"
O="\033[43m$C"
N="\033[00m\n"
A="BBBRRRRRBBBBNBBRRRRRRRRRBNBBGGGOOGOBBBNBGOGOOOGOOOBNBGOGGOOOGOOONBGGOOOOGGGGBNBBBOOOOOOOBBNBBGGRGGGBBBBNBGGGRGGRGGGBNGGGGRRRRGGGGNOOGRORRORGOONOOORRRRRROOONOORRRRRRRROONBBRRRBBRRRBBNBGGGBBBBGGGBNGGGGBBBBGGGGN"
while read -n1 v
do
  printf "${!v}"
done <<< "$A"

1
Вы можете уменьшить его, используя массив для палитры вместо отдельных символов. Поскольку объявляемые ассоциативные массивы длинные, лучше перекодировать их в целые числа. 295-символьная версия вашего кода: pastebin.com/d0LW0HM1
manatwork

3

Pyth, 83 байта

Отказ от ответственности: это не победивший кандидат, потому что некоторые языковые функции были созданы после публикации вопроса.

.wc16@Lc4CM"±4%kÿjkã%"jC"T\0UP\0Z¾Õnþýn¿¿kþ©WÿõZ*Uj(©ª\0ªøÃ/ü\0?ð\0PjU©ªUª"4

Вот шестнадцатеричный дамп:

00000000   2E 77 63 31  36 40 4C 63  34 43 4D 22  B1 34 25 6B  .wc16@Lc4CM".4%k
00000010   8C FF 6A 6B  04 E3 9D 25  22 6A 43 22  54 5C 30 55  ..jk...%"jC"T\0U
00000020   50 5C 30 01  5A BE D5 6E  FE FD 6E BF  BF 6B FE A9  P\0.Z..n..n..k..
00000030   57 FF F5 5A  2A 55 6A 28  A9 AA 5C 30  AA F8 C3 2F  W..Z*Uj(..\0.../
00000040   FC 5C 30 3F  F0 5C 30 0F  50 14 05 6A  55 A9 AA 55  .\0?.\0.P..jU..U
00000050   AA 22 34                                            ."4

Вы также можете скачать программу здесь и запустить ее с

python3 pyth.py mario.pyth

Это создает файл o.png:

Марио

Объяснение:

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

.wc16@Lc4CM"..."jC"..."4
                  "..."   the colors of the image, 2 bit per pixel
                 C        convert these bytes to a number
                j      4  and convert it to base 4 (extracting the colors)
           "..."          the hexcodes of the 4 colors (3 byte per color)
         CM               convert each byte into its number
       c4                 split into 4 lists
     @L                   for each pixel, pick the correct list of color-list
  c16                     split into 16 rows
.w                        save it as "o.png"

Работает ли это в последней версии Pyth до того, как задание было опубликовано?
lirtosiast

@ThomasKwa Да, забыл. Я отредактирую информацию.
Якуб

2

Обработка 2 - 359 символов

Я увидел этот вызов и сразу подумал о функции pixel [] Processing. Я надеялся, что это будет короче, но я все еще довольно доволен результатом, учитывая, что это моя первая попытка код-гольфа.

int i,l;i=l=0;size(12,16);loadPixels();for(char c:"3b5r6b9r3b3g2o1g1o4b1g1o1g3o1g3o2b1g1o2g3o1g3o1b2g4o4g4b7o4b2g1r3g5b3g1r2g1r3g1b4g4r4g2o1g1r1o2r1o1r1g5o6r5o8r2o2b3r2b3r3b3g4b3g1b4g4b4g".toCharArray()){while(l>0){pixels[i]=#6B8CFF;if(c=='r')pixels[i]=#B13425;if(c=='g')pixels[i]=#6A6B04;if(c=='o')pixels[i]=#E39D25;i++;l--;}if(c<58){l=c-48;}}updatePixels();

ungolfed:

int i,l;i=l=0;
size(12,16);
loadPixels();
for(char c:"3b5r6b9r3b3g2o1g1o4b1g1o1g3o1g3o2b1g1o2g3o1g3o1b2g4o4g4b7o4b2g1r3g5b3g1r2g1r3g1b4g4r4g2o1g1r1o2r1o1r1g5o6r5o8r2o2b3r2b3r3b3g4b3g1b4g4b4g".toCharArray())
{
    while(l>0)
    {
        pixels[i]=#6B8CFF;
        if(c=='r')pixels[i]=#B13425;
        if(c=='g')pixels[i]=#6A6B04;
        if(c=='o')pixels[i]=#E39D25;
        i++;
        l--;
    }
    if(c<58){l=c-48;}
}
updatePixels();

Вы можете скачать обработку здесь


2

Javascript 515

str='';
"000111110000|001111111110|002223323000|023233323330|023223332333|022333322220|000333333300|002212220000|022212212220|222211112222|332131131233|333111111333|331111111133|001110011100|022200002220|222200002222"
.split("|").forEach(function(ov, ok) {
str += '<div>'
    ov.split("").forEach(function(iv, ik) {
    str += '<div style="width:1px;height:1px;background-color:' + ['#6B8CFF','#B13425','#6A6B04','#E39D25'][iv] + ';display:inline-block"></div>';
    });
    str+= '</div>';
});
document.write(str);

только что заработал, все равно придется идти и играть в гольф


1
Вы можете заменить divs, составляющие строки, на встроенный тег по умолчанию. Я не проверял это, но использование aдолжно работать. Вы также можете использовать backgroundвместо background-color.
NinjaBearMonkey

2

Perl - Ungolfed 927

Я буду играть в гольф позже. Первый раз пробую Image::Magick.

#!/usr/local/bin/perl
use Image::Magick;
use strict;
use warnings;

my @p = (
[0,0,0,1,1,1,1,1,0,0,0,0],
[0,0,1,1,1,1,1,1,1,1,1,0],
[0,0,2,2,2,3,3,2,3,0,0,0],
[0,2,3,2,3,3,3,2,3,3,3,0],
[0,2,3,2,2,3,3,3,2,3,3,3],
[0,2,2,3,3,3,3,2,2,2,2,0],
[0,0,0,3,3,3,3,3,3,3,0,0],
[0,0,2,2,1,2,2,2,0,0,0,0],
[0,2,2,2,1,2,2,1,2,2,2,0],
[2,2,2,2,1,1,1,1,2,2,2,2],
[3,3,2,1,3,1,1,3,1,2,3,3],
[3,3,3,1,1,1,1,1,1,3,3,3],
[3,3,1,1,1,1,1,1,1,1,3,3],
[0,0,1,1,1,0,0,1,1,1,0,0],
[0,2,2,2,0,0,0,0,2,2,2,0],
[2,2,2,2,0,0,0,0,2,2,2,2],
);
my $image = Image::Magick->new;
$image->Set(size=>'12x16');
$image->ReadImage('canvas:white');
for my $i (0..$#p) {
    for (0..(@{$p[$i]} - 1)) {
        my $color;
        $color = ($p[$i][$_] < 1 ? "#6B8CFF" : $p[$i][$_] < 2 ? "#B13425" : $p[$i][$_] < 3 ? "#6A6B04" : "#E39D25");
        print "$i : $_ : $color \n";
       $image->Set("pixel[$_,$i]"=> $color);
    }
}
#$image->Write("mario.png");
$image->Display();

Я уверен, что у нас их много, но вот мой: Марио!


2

Bash для печати: 179 158 байт

Вдохновлен ответом пользователя 2485710 .

Вы должны настроить свой терминал, чтобы точно соответствовать цветам.

eval "$(base64 -d<<</AD/8AAD9Wm/2amr2Wpq1qlX/qqv9RX/1RRXVQBVpIIaqAAqoAAK8DwP1f9XVf9V|xxd -b -c3 -g0|cut -c10-33|sed $'s/../\e[4$[2#&+1]m \e[0m/g;s/^/echo /')"

это то, что я вижу . Я делаю что-то неправильно?
ardnew

2
@ardnew: BSD base64 использует -Dдля декодирования и -dдля отладки .
Деннис

2

Tcl 298

package require base64
set d [base64::decode AVUABVVUCr7ALv78Lr+/K/6oA//wCmoAKmmoqlWq+ddv/VV/9VVfBUFQKgCoqgCq]
binary scan $d B* z
set i 0
foreach {a b} [split $z ""] {
if {$i % 12 == 0} {puts "\033\[0m"}
puts -nonewline "\033\[4[string map {00 4 01 1 10 2 11 3} $a$b];m  "
incr i
}
puts "\033\[0m"

Это изображение размером 2 бита на пиксель в базе 64. Пиксели сопоставляются с escape-кодами ANSI.

введите описание изображения здесь


Даже не пытаясь, ваш код кажется немного пригодным для игры в
sergiol

2

JavaScript - 256 символов (161 обфус-а-твит)

d=v=>{for(i=v&15;i--;)O.innerHTML+=`<i style="color:#${'6B8CFF6A6B04B13425E39D25'.substr(x%4*6,6)}">█</i>`+(++f%12?'':'<br>');x++},f=x=0,[..."fhilsswsssuss££cgÓdcddc¤g£stcucds³c¹cefefcc¤c§"].map(v=>(d(v=v.charCodeAt(0)-99),d(v>>4)))
<p id=O>

введите описание изображения здесь

Метод:

  1. Используя битовую маску, 63x8-битная строка предоставляет массив значений 126x4-бит, состоящий из чисел в диапазоне 0-9. (Удивительно ... спасли 63 символа, перейдя 4-битные, но потратили 50 символов, распаковывая биты снова, смеется. Тем не менее, 13 символов - это 13 символов! :-)
  2. 4 цвета краски циклически отображаются в следующем порядке: B, G, R, O. На каждой итерации для текущего цвета отображается 0-9 делений (с разрывом строки каждые 12-е)

Чтобы определить оптимальный порядок цветового цикла, я запустил алгоритм сжатия по необработанным данным для каждой из 24 перестановок [R, G, B, O] и выбрал одну, дающую наименьший выходной сигнал (126 был лучшим, наименее оптимальным был около 150 с чем-то)

ETA обнаружил это только после прочтения других ответов, используя obfusca-твит ...

eval(unescape(escape`𩀽𭠽🡻𩡯𬠨𪐽𭠦𜐵𞱩𛐭𞰩𣰮𪑮𫡥𬡈𥁍𣀫👠🁩𘁳𭁹𫁥🐢𨱯𫁯𬠺𘰤𮰧𝡂𞁃𡡆𝡁𝡂𜀴𠠱𜰴𜠵𡐳𞑄𜠵𙰮𬱵𨡳𭁲𚁸𙐴𚠶𛀶𚑽𘠾ﶈ�𛱩🡠𚰨𚰫𩠥𜐲🰧𙰺𙰼𨡲🠧𚐻𮀫𚱽𛁦👸🐰𛁛𛠮𛠢𩡨𪑬𬱳𭱳𬱳𭑳𬲣𸱣𩳓𩁣𩁤𨲤𩲣𬱴𨱵𨱤𬲳𨲹𨱥𩡥𩡣𨲤𨲧𘡝𛡭𨑰𚁶🐾𚁤𚁶👶𛡣𪁡𬡃𫱤𩑁𭀨𜀩𛐹𞐩𛁤𚁶🠾𝀩𚐩𒠼𬀠`.replace(/u../g,'')))

Дальнейшие идеи. - Попробуйте 3-битный диапазон данных 0-6, с редкими 7,8,9, получающими дополнительно 4 каждый: 60000N. - Проверяйте перестановки цветового цикла во всех направлениях и на скоростях, отличных от горизонтального, по одному пикселю за раз. Попробуйте несколько проходов рендеринга, чтобы цвета могли быть наслоены.


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

1

Javascript, 253 240 238 236

Obfuscatweet ed источник - 253 240 238 236

document.write(unescape(escape('🁳𨱲𪑰𭀾𘠵𫐲𫰹𫑨𜰰𞐷𫁯𩰹𜐰𜑰𪰹𮡰𝱵𞑶𭁸𭰹𜱱𭐸𞐸𝡷𭰹𭑯𩱫𞐳𨱳𬁨𞐶𪡭𪡥𞐶𬁬𫡵𞐶𭠷𮐲𞑭𝐸𜀹𭁨𮡯𞐳𨡥𨰵𘠮𬱰𫁩𭀨𞐩𛡦𫱲𡑡𨱨𚁦𭑮𨱴𪑯𫠨𨰩𮱤👤𫱣𭑭𩑮𭀻𨰽𬁡𬡳𩑉𫡴𚁣𛀳𝠩𛡴𫱓𭁲𪑮𩰨𝀩𞱷𪁩𫁥𚁣𛡬𩑮𩱴𪀼𜐲𚑣🐢𜀢𚱣𞱣𛡳𬁬𪑴𚀢𘠩𛡦𫱲𡑡𨱨𚁦𭑮𨱴𪑯𫠨𭠩𮱤𛡷𬡩𭁥𚀢🁰𘁳𭁹𫁥🐧𩁩𬱰𫁡𮐺𪑮𫁩𫡥𞱰𨑤𩁩𫡧𞠹𞱢𨑣𪱧𬡯𭑮𩀺𘰢𚱛𘠶𠠸𠱆𡠢𛀢𝡁𝡂𜀴𘠬𘡅𜰹𡀲𝐢𛀢𠠱𜰴𜠵𘡝𦰫𭡝𚰢𙰾🀯𬀾𘠩𯐩𞱤𛡷𬡩𭁥𚀢🁢𬠾𘠩𯐩🀯𬱣𬡩𬁴🠠').replace(/uD./g,'')))

Необъяснимый - 395 370 365 361

<script>"5m2o9mh3097log9101pk9zp7u9vtxw93qu8986ww9uogk93csph96jmje96plnu96v7y29m5809thzo93bec5".split(9).forEach(function(c){d=document;c=parseInt(c,36).toString(4);while(c.length<12)c="0"+c;c.split("").forEach(function(v){d.write("<p style='display:inline;padding:9;background:#"+["6B8CFF","6A6B04","E39D25","B13425"][+v]+"'></p>")});d.write("<br>")})</script>

Спасибо @compass за <p>трюки с тегами и @xem за 2 (5) символов.

демонстрация

Он преобразует данные из базы 36 и преобразует в базу 4.


Я не могу проверить это, но я не думаю, что padding:9делает что-либо без юнита после него. Вы также можете использовать однобуквенный элемент типа aили, qкоторый неявно встроен, вместо p.
NinjaBearMonkey

@hsl Я обновил демонстрационную ссылку, и она хорошо работает, по крайней мере, в моих Chrome, Firefox и Safari на Mac.
Закуска

-2 байта: заменить "|" на 9 в строке и раскол. Кроме того, вы используете 3 раза «document.write», вы должны поместить его в переменную, чтобы сохранить, например, 24b)
xem

@xem Спасибо, что напомнили мне трюк с разделением номера. И поскольку мы не можем назначить document.writeпеременную (мы должны использовать document.write.bind(document)), лучше всего было присвоить documentпеременную.
Закуска

или вы можете сделать это в первый раз: (d = document) [w = "write"] (/ * что написать * /) и просто сделать это после: d [w] ("Hi")
xem

1

JavaScript ES6 (HTML + CSS), 199 307 3195 3630

Используя Obfusc-a-твит :

eval(unescape(escape('𬰽𦱝𒠧𜰹𮡲𬀳𝁤𩡬𜱪𩱴𜐴𨡷𭐵𝁢𪱣𩠴𝱰𜡨𜱦𫁹𭀳𪑮𪀱𝀵𝀸𞐶𫑳𫱡𞑰𩡥𝰹𭁺𝑲𞑤𝁢𜰳𝁨𩁸𝀵𩀴𞐶𫠹𩱱𙰮𫑡𭁣𪀨𛰮𮰵𯐯𩰩𛡦𫱲𡑡𨱨𚀨𫠬𪐩🐾𦰮𛠮𬁡𬡳𩑉𫡴𚁮𛀳𝠩𛡴𫱓𭁲𪑮𩰨𝀩𧐮𩡯𬡅𨑣𪀨𚁭𛁪𚐽🡳𛡰𭑳𪀨𪠫𜐫𙱰𮀠𙰫𚀫𪐫𜐩𚰧𬁸𘀣𙰫𦰧𠠱𜰴𜠵𙰬𙰶𠠸𠱆𡠧𛀧𝡁𝡂𜀴𙰬𙱅𜰹𡀲𝐧𧑛𚱭𧐩𚐩𒡤𫱣𭑭𩑮𭀮𭱲𪑴𩐨𙰼𬀠𬱴𮑬𩐽𘡷𪑤𭁨𞠱𬁸𞱨𩑩𩱨𭀺𜑰𮀻𨡯𮀭𬱨𨑤𫱷𞠧𚱳𚰧𘠧𚐠').replace(/uD./g,'')))

Это отображает спрайт без использования каких-либо изображений или нескольких элементов; он просто неправильно использует box-shadowсвойство CSS для создания каждого пикселя. Попробуйте это на http://jsbin.com/pozohiyezo/ . Эта необъяснимая версия состоит из 307 символов :

s=[]
'39zrp34dfl3jgt14bwu54bkcf47p2h3flyt3inh1454896msoa9pfe79tz5r9d4b334hdx45d496n9gq'.match(/.{5}/g).some((n,i)=>[...parseInt(n,36).toString(4)].forEach((m,j)=>s.push(j+1+'px '+(+i+1)+'px #'+['B13425','6B8CFF','6A6B04','E39D25'][+m])))
document.write('<p style="width:1px;height:1px;box-shadow:'+s+'"')

Это оригинальная, ванильно-HTML-версия. Смотрите это в действии на http://jsfiddle.net/gfeLn1ey/1/ .

<p style="width:1px;height:1px;box-shadow:4px 1px 0 #B13425,5px 1px 0 #B13425,6px 1px 0 #B13425,7px 1px 0 #B13425,8px 1px 0 #B13425,12px 1px 0 #6B8CFF,3px 2px 0 #B13425,4px 2px 0 #B13425,5px 2px 0 #B13425,6px 2px 0 #B13425,7px 2px 0 #B13425,8px 2px 0 #B13425,9px 2px 0 #B13425,10px 2px 0 #B13425,11px 2px 0 #B13425,12px 2px 0 #6B8CFF,3px 3px 0 #6A6B04,4px 3px 0 #6A6B04,5px 3px 0 #6A6B04,6px 3px 0 #E39D25,7px 3px 0 #E39D25,8px 3px 0 #6A6B04,9px 3px 0 #E39D25,12px 3px 0 #6B8CFF,2px 4px 0 #6A6B04,3px 4px 0 #E39D25,4px 4px 0 #6A6B04,5px 4px 0 #E39D25,6px 4px 0 #E39D25,7px 4px 0 #E39D25,8px 4px 0 #6A6B04,9px 4px 0 #E39D25,10px 4px 0 #E39D25,11px 4px 0 #E39D25,12px 4px 0 #6B8CFF,2px 5px 0 #6A6B04,3px 5px 0 #E39D25,4px 5px 0 #6A6B04,5px 5px 0 #6A6B04,6px 5px 0 #E39D25,7px 5px 0 #E39D25,8px 5px 0 #E39D25,9px 5px 0 #6A6B04,10px 5px 0 #E39D25,11px 5px 0 #E39D25,12px 5px 0 #E39D25,2px 6px 0 #6A6B04,3px 6px 0 #6A6B04,4px 6px 0 #E39D25,5px 6px 0 #E39D25,6px 6px 0 #E39D25,7px 6px 0 #E39D25,8px 6px 0 #6A6B04,9px 6px 0 #6A6B04,10px 6px 0 #6A6B04,11px 6px 0 #6A6B04,12px 6px 0 #6B8CFF,4px 7px 0 #E39D25,5px 7px 0 #E39D25,6px 7px 0 #E39D25,7px 7px 0 #E39D25,8px 7px 0 #E39D25,9px 7px 0 #E39D25,10px 7px 0 #E39D25,12px 7px 0 #6B8CFF,3px 8px 0 #6A6B04,4px 8px 0 #6A6B04,5px 8px 0 #B13425,6px 8px 0 #6A6B04,7px 8px 0 #6A6B04,8px 8px 0 #6A6B04,12px 8px 0 #6B8CFF,2px 9px 0 #6A6B04,3px 9px 0 #6A6B04,4px 9px 0 #6A6B04,5px 9px 0 #B13425,6px 9px 0 #6A6B04,7px 9px 0 #6A6B04,8px 9px 0 #B13425,9px 9px 0 #6A6B04,10px 9px 0 #6A6B04,11px 9px 0 #6A6B04,12px 9px 0 #6B8CFF,1px 10px 0 #6A6B04,2px 10px 0 #6A6B04,3px 10px 0 #6A6B04,4px 10px 0 #6A6B04,5px 10px 0 #B13425,6px 10px 0 #B13425,7px 10px 0 #B13425,8px 10px 0 #B13425,9px 10px 0 #6A6B04,10px 10px 0 #6A6B04,11px 10px 0 #6A6B04,12px 10px 0 #6A6B04,1px 11px 0 #E39D25,2px 11px 0 #E39D25,3px 11px 0 #6A6B04,4px 11px 0 #B13425,5px 11px 0 #E39D25,6px 11px 0 #B13425,7px 11px 0 #B13425,8px 11px 0 #E39D25,9px 11px 0 #B13425,10px 11px 0 #6A6B04,11px 11px 0 #E39D25,12px 11px 0 #E39D25,1px 12px 0 #E39D25,2px 12px 0 #E39D25,3px 12px 0 #E39D25,4px 12px 0 #B13425,5px 12px 0 #B13425,6px 12px 0 #B13425,7px 12px 0 #B13425,8px 12px 0 #B13425,9px 12px 0 #B13425,10px 12px 0 #E39D25,11px 12px 0 #E39D25,12px 12px 0 #E39D25,1px 13px 0 #E39D25,2px 13px 0 #E39D25,3px 13px 0 #B13425,4px 13px 0 #B13425,5px 13px 0 #B13425,6px 13px 0 #B13425,7px 13px 0 #B13425,8px 13px 0 #B13425,9px 13px 0 #B13425,10px 13px 0 #B13425,11px 13px 0 #E39D25,12px 13px 0 #E39D25,1px 14px 0 #6B8CFF,2px 14px 0 #6B8CFF,3px 14px 0 #B13425,4px 14px 0 #B13425,5px 14px 0 #B13425,6px 14px 0 #6B8CFF,7px 14px 0 #6B8CFF,8px 14px 0 #B13425,9px 14px 0 #B13425,10px 14px 0 #B13425,11px 14px 0 #6B8CFF,12px 14px 0 #6B8CFF,1px 15px 0 #6B8CFF,2px 15px 0 #6A6B04,3px 15px 0 #6A6B04,4px 15px 0 #6A6B04,5px 15px 0 #6B8CFF,6px 15px 0 #6B8CFF,7px 15px 0 #6B8CFF,8px 15px 0 #6B8CFF,9px 15px 0 #6A6B04,10px 15px 0 #6A6B04,11px 15px 0 #6A6B04,12px 15px 0 #6B8CFF,1px 16px 0 #6A6B04,2px 16px 0 #6A6B04,3px 16px 0 #6A6B04,4px 16px 0 #6A6B04,5px 16px 0 #6B8CFF,6px 16px 0 #6B8CFF,7px 16px 0 #6B8CFF,8px 16px 0 #6B8CFF,9px 16px 0 #6A6B04,10px 16px 0 #6A6B04,11px 16px 0 #6A6B04,12px 16px 0 #6A6B04,6px 6px 0 5px #6B8CFF"

TIL, вы не можете закрыть тег <p :)
xem

этот код может иметь очень хорошее сжатие в таком инструменте, как regpack. Вот пример из 729b (хотя для написания HTML используется JS): goo.gl/7fF7kx
xem

@xem Я даже не задумывался о создании кода с помощью JS, но я смог сделать его намного дешевле, следуя шаблону кода.
NinjaBearMonkey

1

Javascript, 256 или 245, 252 или 241

256

document.write("k6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld".replace(/./g,function(x){return new Array((x=parseInt(x,36))&7).join("<li style=padding:4%;float:left;background:#"+['B13425','6A6B04','6B8CFF','E39D25'][x>>3]+">")}))

Грустно переопределять 256, но 245 возможно, если использовать непечатаемые символы:

document.write(btoa(">§ç©­ª¥j¦¬jÈÚ©»²&ív[-½ÍÙÈåÚÚÚ­êÙ«»»køÉ\\Ù]").replace(/./g,function(x){return new Array((x=parseInt(x,36))&7).join("<li style=padding:4%;float:left;background:#"+["B13425","6A6B04","6B8CFF","E39D25"][x>>3]+">")}))

Существует некоторая проблема с отправкой решения с непечатными символами. Аргумент btoaдолжен быть результатом atob("ij6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld")добавления 1 символа длины для экранирования от обратной косой черты.

Сократите оба решения на 4 символа: нам не нужно новое для создания массива.

252

document.write("k6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld".replace(/./g,function(x){return Array((x=parseInt(x,36))&7).join("<li style=padding:4%;float:left;background:#"+['B13425','6A6B04','6B8CFF','E39D25'][x>>3]+">")}))

241

document.write(btoa("©ùêG+j©Z©«²6ªnƬ»]Ëeog&sför'yv¶¶«z¶jîîçãâ>$rVÚÙ]").replace(/./g,function(x){return Array((x=parseInt(x,36))&7).join("<li style=padding:4%;float:left;background:#"+['B13425','6A6B04','6B8CFF','E39D25'][x>>3]+">")}))

В этой версии экранирование не требуется. В btoaаргументе «S является результатомatob("k6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclbaidld")


Я заметил проблему, не связанную с печатью, и мою последнюю проблему. Я думал , что это только обугливается 8, 9 и 13 , если это помогает (хотя я мог бы легко ошибиться)
ухабистая

1

Perl, 266 260 257 249 245 байт

$_="444111114444441111111114442223323444423233323334423223332333422333322224444333333344442212224444422212212224222211112222332131131233333111111333331111111133441114411144422244442224222244442222";s/\d/\033[4$&m  /g;s/.{84}/$&\033[00m\n/g;print

Для написания вывода в стиле VT100 используется подход, аналогичный bash-решению user2485710. Удаляет явное N для новой строки, вставляя новую строку каждые 12 "vt100 пикселей", 12 * 7 = 84.


1

SmileBASIC, 147 136 символов

P$="xxxxxxxx
FOR I=0TO 191C=ASC("xxxxxxxxxxxxxxxxxxxxxxxx"[I/8])>>I MOD 8*2AND 3GPSET I/16,15AND I,ASC(P$[C*2])<<16OR ASC(P$[C*2+1])NEXT

Выход (обрезано): Скриншот

Я заменил все символы в строках данных на x's', вот коды символов (в UCS-2):
P$(Палитра): FF6B,8CFF,FFB1,3425,FF6A,6B04,FFE3,D925
Данные изображения:0000,83F8,0A80,A3FA,8BE4,A5EA,BEA5,A55A,7EE5,0575,BFF5,0156,BFF5,0156,BBA5,0575,3AF4,A55A,3BC4,A5EA,0BC4,A3FA,0300,83F8

Палитра хранится в виде строки, каждый цвет (32 бита) хранится в двух символах (16 бит каждый). Данные изображения (2 бита на пиксель) сохраняются в другой строке (8 пикселей на символ).
К счастью, задача оценивается в символах, поскольку этот файл значительно больше, если он сохраняется в UTF-8.


1

05AB1E , 87 байт (не конкурирует)

•8,vkJíÝ1¢tt6,9XÂck$XSãõO©Ú"›qf®¸Ì#}„K0ÝCìxý}É~ð_áú•4BSvy•3«WKyÛòèz*Ðeb•16B6ôè'#ì})12ô»

Попробуйте онлайн!

Выходы:

#B13425 #B13425 #B13425 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #B13425 #B13425 #B13425 #B13425
#B13425 #B13425 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #B13425
#B13425 #B13425 #6A6B04 #6A6B04 #6A6B04 #E39D25 #E39D25 #6A6B04 #E39D25 #B13425 #B13425 #B13425
#B13425 #6A6B04 #E39D25 #6A6B04 #E39D25 #E39D25 #E39D25 #6A6B04 #E39D25 #E39D25 #E39D25 #B13425
#B13425 #6A6B04 #E39D25 #6A6B04 #6A6B04 #E39D25 #E39D25 #E39D25 #6A6B04 #E39D25 #E39D25 #E39D25
#B13425 #6A6B04 #6A6B04 #E39D25 #E39D25 #E39D25 #E39D25 #6A6B04 #6A6B04 #6A6B04 #6A6B04 #B13425
#B13425 #B13425 #B13425 #E39D25 #E39D25 #E39D25 #E39D25 #E39D25 #E39D25 #E39D25 #B13425 #B13425
#B13425 #B13425 #6A6B04 #6A6B04 #6B8CFF #6A6B04 #6A6B04 #6A6B04 #B13425 #B13425 #B13425 #B13425
#B13425 #6A6B04 #6A6B04 #6A6B04 #6B8CFF #6A6B04 #6A6B04 #6B8CFF #6A6B04 #6A6B04 #6A6B04 #B13425
#6A6B04 #6A6B04 #6A6B04 #6A6B04 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6A6B04 #6A6B04 #6A6B04 #6A6B04
#E39D25 #E39D25 #6A6B04 #6B8CFF #E39D25 #6B8CFF #6B8CFF #E39D25 #6B8CFF #6A6B04 #E39D25 #E39D25
#6A6B04 #6A6B04 #6A6B04 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6A6B04 #6A6B04 #6A6B04
#6A6B04 #6A6B04 #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6B8CFF #6A6B04 #6A6B04
#B13425 #B13425 #6B8CFF #6B8CFF #6B8CFF #B13425 #B13425 #6B8CFF #6B8CFF #6B8CFF #B13425 #B13425
#B13425 #6A6B04 #6A6B04 #6A6B04 #B13425 #B13425 #B13425 #B13425 #6A6B04 #6A6B04 #6A6B04 #B13425
#6A6B04 #6A6B04 #6A6B04 #6A6B04 #B13425 #B13425 #B13425 #B13425 #6A6B04 #6A6B04 #6A6B04 #6A6B04

Потому что 05AB1E не может делать цвета или графику любого рода ... Если это не приемлемо, я удалю это.


Вы могли бы написать обертку Bash и сказать, что ваше решениеBash + 05AB1E
Павел

1
@Pavel Я думал об этом, думаю, я схожу к этому решению с кем-то другим; P.
Волшебная Урна Осьминога

Я не могу сказать, что это «выигрывает», но, пожалуйста, сохраняйте это, так как это отличный результат для компрессии :)
xem

0

Синклер Бейсик - 573 байта

ОК, поэтому Спектрум не может отображать цвета RGB, как указано, поэтому использовал максимально возможный.

10 let x=0:let y=0:let i=0
20 let a$="1c2e1f2i1c4c6b461d4646c46c1b464b6c46c14b6d4d1d6g1d4b24c1e4c24b24c14d2d4d6b4262b6246e2f6e2c1b2c6b1b2c1b2c1c4c1d4c14d1d4d"
30 let l=len a$
40 let i=i+1:let c=1:let p=0:let k=val a$(i)
50 if a$(i+1)>="a" then let c=code a$(i+1)-96:let i=i+1
60 print at y,x;ink k;"\::":let p=p+1:let x=x+1:if x=12 then let x=0:let y=y+1
70 if p<c then goto 60
80 if i<l then goto 40

Строка - это цвет (1 = синий, 2 = красный и т. Д.), За которым следует буква, представляющая, сколько раз повторяется этот блок (принимая значение ASCII минус 96, чтобы оно стало 1,2,3 и т. Д.). Число без буквы после него просто рисует один блок.

"\::"в строке 60 показано, как ввести графику в текстовом редакторе, прежде чем превратить его в файл TAP для загрузки в эмулятор Fuse. (Отображается в виде сплошного графического блока на экране).

Каждое ключевое слово в бейсике Sinclair составляет один байт, включая число из команды PEEK после его генерации.

Это Марио


0

Perl - 399 171 байт

use MIME::Base64;$_='R0lGODdhDAAQAKEEAGuM/+OdJWprBLE0JSwAAAAADAAQAAACNoSHaAvpaoQMQQRmLdUXZM55XCUJDIVSmDCUjMhKrQSzSamxAbKP+5P6PQaqBiSxcCVpuJWkAAA7';
print decode_base64($_)

Записывает GIF-файл в стандартный вывод.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.