Pixel-art, episodio 1: muestra Super Mario


47

¡lo mismo!

La tarea de hoy es simple: escribir un programa o una función que muestre el pequeño Mario Sprite inactivo, de Super Mario Bros, en NES, sobre un fondo azul.

Cualquier tipo de entrada es válida siempre que muestre esos 12 * 16 píxeles en cualquier lugar de la pantalla / ventana / navegador.

(EDITAR: la imagen mostrada se puede ampliar si su idioma no puede hacer pixel art. También puede generar imágenes ASCII o HTML, pero utilizando los colores correctos).

Imagen (zoom 400%):

Debes usar los siguientes colores:

  • azul: # 6B8CFF
  • rojo: # B13425
  • verde / marrón: # 6A6B04
  • naranja: # E39D25

¡El programa más corto (en número de personajes) gana!

Se aplican las lagunas estándar (especialmente, no se permite la conexión de red), pero se permite codificar y mostrar un archivo de imagen en su programa. (las entradas que usan este truco se clasificarán por separado)

¡Aquí vamos!


Tabla de clasificación actual

Respuesta más corta usando solo código:

Respuesta más corta usando algún tipo de imagen codificada:


2
Además, ¿no está permitido crear un archivo? Tiene que ser exhibido?
Martin Ender

1
No veo ningún patrón en esa imagen. Por lo tanto, todo se reduce a la mejor compresión que se puede usar en un idioma.
Optimizador

20
Nitpicking: Ese es Mario, no Super Mario.
Dennis

55
Qué idea más divertida ... He aquí una idea para un desafío de continuación: ¡Toma la imagen de Mario (cualquier formato) y conviértela en una imagen de Luigi!
Zibbobz

3
¿Podemos hacer un programa piet que se parezca a él?
Conor O'Brien

Respuestas:


36

HTML / JS, 206 158 153 102


102

Truco utilizado: guarde el archivo GIF comprimido como un archivo HTML y agregue <img src = #> al final

Gracias a esta entrada: https://codegolf.stackexchange.com/a/39926/10732 por @NiettheDarkAbsol

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

Demostración: http://meuziere.free.fr/mario/gif.html


Versiones mas antiguas:

153

Truco utilizado: guarde el archivo PNG comprimido como un archivo HTML y agregue <img src = #> al final

‰PNG


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


158

Truco utilizado: establecer el dataURI recortado de un PNG comprimido como SRC de una etiqueta IMG y empaquetar todo en caracteres Unicode.


Ejecute eso en su consola JS:

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


206

Sin embalaje (206b):

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

Manifestación


Herramientas utilizadas:


No necesitas las etiquetas. Solo usa el uri de datos de Chrome e ingrésalo en tu barra de URL. 200 caracteres
Optimizador

Hm ... consideré que dataURI no es un "programa" válido. Pero usted está en lo correcto. Todos los navegadores permiten dataURIs en la barra de direcciones.
xem

Ahora está utilizando una escapatoria como OP;). Estás descargando todo el trabajo a la compresión externa / incorporada del formato GIF. Si eso es genial, todos deberíamos buscar formatos de imagen oscuros con la mejor tasa de compresión ahora, y podría haberme ahorrado mucho trabajo escribiendo mi propia compresión. ;)
Martin Ender

2
@xem Bueno, tu desafío, tu llamada. Pero parece un poco inútil si ahora solo estamos buscando el formato de archivo existente más comprimido. ;)
Martin Ender

1
Parece que el enlace rawgit está muerto.
Addison Crump

27

Mathematica, 412 292 252 212 163 148 143 141 caracteres

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

Esto utiliza la notación de intercalación ^Apara el carácter de control en el punto de código 1. En Mathematica, en realidad puedo incrustar el personaje literalmente, aunque eso lleva a todo tipo de fealdad al copiar cosas. De todos modos, lo anterior es 2 caracteres más corto que mi versión anterior, y obtuve esos caracteres usando base-4 en lugar de base-5 para codificar los índices de la paleta de colores. En este momento no puedo molestarme en arreglar la explicación y la captura de pantalla a continuación, así que te dejo aquí con la versión original de base 5 de mi respuesta:


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

Estoy codificando los píxeles en caracteres Unicode (¡sí, para contar por caracteres!).

Así es como se ve en Mathematica:

ingrese la descripción de la imagen aquí

Así es como funciona:

Primero definimos una función fque convierte las cadenas Unicode (pasadas como el primer argumento #) en listas de enteros. Primero obtenemos los códigos de caracteres. Esos pueden interpretarse como dígitos de un número base 65536. Y luego convertimos ese número a otra base, pasado como el segundo argumento #2.

Ahora hagamos eso para la cadena Unicode más larga. ToCharacterCodeproduce esta lista:

{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}

Tratando esto como base 65536:

7933607912575313477287527915733176998797205587959732019781370103381...
4831246938139171755469819519515972565671101475553962564506286523593

Y convirtiendo a base 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}

Esos son los índices de color de los píxeles, en orden azul, rojo, verde, naranja. Los usamos para indexar en esa lista de números, que es la paleta de colores.

Ahora para la paleta de colores. Eso es "넴╫賿橫ӣ鴥". Usamos los índices anteriores para seleccionar la cadena correcta. Luego aplicamos nuestra función nuevamente, pero usando la base 256. Eso produce una lista de 12 enteros:

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

Usamos la ;;indexación de rango para extraer el corte relevante para el color actual.

Por último, solo usamos Partitionpara dividir esto en filas 12y alimentarlo Image. Voilà!

Editar: con el paquete Unicode, el RLE ya no valía la pena. Eliminarlo salvó 50 caracteres.

Editar: Por supuesto, sin RLE, tampoco hay necesidad de ir a la base 16.

Editar: Y mientras estamos en eso, ¿por qué no también Unicode-pack la paleta de colores? (Tengo el presentimiento de que puedo ahorrar un poco más al hacer que toda la paleta de colores también sea una sola cadena y usarla Partitionallí también. Lo intentaré más adelante).

Editar: Sí, eso eliminó otros 5 bytes.


1
¿te importaría agregar una captura de pantalla del resultado? (no es que no confíe en su código, pero tengo curiosidad sobre cómo se muestra: ¿en una ventana? ¿un navegador? ¿otra cosa?)
xem

@xem lo hará. Es un entorno REPL capaz de entrada y salida gráfica.
Martin Ender

No estoy seguro, pero ¿estás reflejando la parte inferior de la imagen?
Optimizador

1
@Optimizer No, dudo que pueda hacerlo en menos caracteres de los que estaría guardando.
Martin Ender

Cuando miro en la documentación de Mathematica, no veo ningún uso en tilde, pero parece que lo está utilizando para alimentar el resultado de una función en otra y luego aplicar un argumento adicional a esa segunda función (IntegerDigits). Además, la paleta de colores: al mirar la imagen, parece que solo hay cuatro colores, pero su paleta de colores parece incluir más que eso: {177, 52, 37, 107, 140, 255, 106, 107, 4, 227 , 157, 37}. Al mirar la documentación de Imagen, parece que imprime en escala de grises a menos que se proporcionen opciones adicionales como ColorScale -> RGB.
CryptoCommander

20

Java: 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();}

Simplemente dibuja el sprite desempacando un int para cada columna. Se muestra en un programa completo:

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();
    }
}

Captura de pantalla obligatoria:

soy yo Mario


1
Puede guardar 9 bytes usando un import java.awt.*.
Kevin Cruijssen

15

Código de máquina x86, 102 bytes

Cómo funciona: la imagen se almacena como una imagen de 2 bits utilizando una paleta. Cada fila de la imagen se almacena como 3 bytes, seguido de un 1 byte de la paleta de colores. Esto permite que los datos se carguen como un solo DWORD. Los doce píxeles se emiten enmascarando los 2 bits más bajos del valor, escribiéndolos en la memoria de video y luego desplazando a la derecha el valor completo dos bits. Una vez que se han emitido los píxeles de la fila, el byte de la paleta se escribe en la paleta VGA. Cuando la imagen termina de dibujar, el programa entra en un bucle infinito.

Código de ensamblaje para generar el binario:

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 

Ampliación de imagen.

Salida de muestra: ingrese la descripción de la imagen aquí


10

GIF - 93 bytes

La codificación de la imagen parece estar bien ahora, así que ... ¿yay? :RE

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

Como se ve en Notepad ++

captura de pantalla en NP ++

Como PHP - 131 bytes

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

1
¿puedes subir tu gif en alguna parte (ctrlv.in por ejemplo)? Me gustaría usarlo en mi entrada en lugar de PNG :)
xem


@NiettheDarkAbsol No estoy seguro de cómo contó el tamaño de eso, pero cuento 150 bytes. De todos modos, la puntuación es por caracteres, y parece ser de 114 caracteres.
Martin Ender

2
Sí, el fragmento de PHP está bien para mí (incluso si pudiera eliminar los últimos 2 bytes). Pero el fragmento de gif sin formato no es un programa.
xem

1
@xem: Si se considera que el navegador es un "intérprete" para HTML / javascript / etc., y al alimentarlo con el fragmento de gif sin formato a través del mismo mecanismo se obtiene el resultado deseado ... la diferencia se vuelve pequeña
Mooing Duck

10

Bash + ImageMagick: 350 331 321 caracteres

(Paleta robada descaradamente de la respuesta de Martin Büttner ).

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:

Salida de muestra:

Mario

Para inspeccionarlo añadir fácilmente -scale 120a convertparámetros 's para obtener una versión a escala 10x:

Mario escala 10


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

Doh Incluso upvoted DigitalTrauma relacionado 's punta , pero siempre me olvido de que {.. }. Gracias, @grawity.
manatwork

8

Octo / XO-Chip , 70 bytes

Octo es un lenguaje ensamblador de alto nivel que se compila en instrucciones codificadas en bytes para la máquina virtual CHIP-8 . Octo proporciona algunas extensiones personalizadas llamadas "XO-Chip" al código de bytes CHIP-8 básico, incluida la capacidad de dibujar mapas de bits de 4 colores a través de planos de bits superpuestos.

Los bytes compilados son los siguientes:

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

mario

Ejecútelo aquí en su navegador: http://johnearnest.github.io/Octo/index.html?gist=33aa37d4717a425ccd4f

Probablemente sea más esclarecedor ver el lenguaje ensamblador de Octo que produce ese bytecode:

: 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 

El programa principal son tres instrucciones de dos bytes. Establezca el registro de índice de memoria ial comienzo del segmento de datos, seleccione el plano de dibujo 3 (3 es una máscara de bits; esto indica que desea dibujar en modo de 4 colores con ambos planos de bits) y luego dibuje un sprite en una posición x e y dada por registrarse v0(inicializado a cero). El 0 final proporciona el tamaño del sprite, que en los conjuntos de instrucciones SuperChip y XO-Chip dibujará un sprite de 16x16. En el modo de 4 colores, un mapa de bits para el primer plano es seguido inmediatamente por un mapa de bits para el segundo plano.

Para ver cómo funcionan los planos, considere este programa modificado que desplaza un plano hacia la derecha después de dibujar Mario:

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 

Si disfruta de esto, le gustaría una de mis otras soluciones escritas con Octo. En realidad, hay un atasco de juego para el mes de octubre basado en esta herramienta.


6

Groovy 417 386

Divertido como el infierno, pero con un terrible recuento de char. GroovyFX necesita

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]])}}}}}}

sin golf:

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) 
            }
          }
      }
    }
  }
}

ingrese la descripción de la imagen aquí


grep()en lugar detoList()
cfrick

5

HTML / JS, 427 408 264 256 239 226 caracteres

Obfuscatweet, 271 270 264 256 239 226 caracteres

Usando obfuscatweet, logré acortar esto a <250: D

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

El siguiente código es en qué consiste.

Truco utilizado: imagen convertida en cadena de base4 de mosaicos de color, convertida en una cadena hexadecimal. El índice de la base 4 denota color (0 = azul, 1 = ROJO, etc.) Se usa CSS con una línea en p porque los divs necesitan contenido para expandirse (también p es más corto). Debido a que CSS necesita comenzar con una letra, 'A' se antepone antes de las etiquetas CSS.

El relleno del CSS proporciona píxeles. Nada de esto usa caracteres Unicode, que de todos modos no estoy muy familiarizado, aunque probablemente iría por debajo de 300 en ese caso. La ventaja relativa de usar el relleno es que puede, como en este caso, hacer explotar la imagen al tamaño que desee que tenga cada píxel. He usado 9 píxeles, pero si gastas un personaje extra, puedes obtener hasta 99 píxeles por píxel representado.


CSS, 127 119 118 114 100 13 0 caracteres

Cambiar de pa rpelimina la necesidad de display:inline, cuesta +1 char, -15! caracteres!

Se eliminaron todos los colores y se colocaron en una matriz en caracteres JS -87. Luego simplemente eliminé todo el CSS

JS, 300 289 280 275 329 325 caracteres

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>'));}

Traté de cortar todo lo que pude de este JS simple procesando una cadena hexadecimal, pero dado que es mi primer intento, esto es lo lejos que llegué usando solo lo que sé. La escritura HTML ha sido acortada por una función que agrega etiquetas, y las clases usan el valor base 4 para determinar el color a mostrar.

Usando un acortamiento adicional, reemplazó charAt con corchetes [], eliminó la clase A0 y configuró el azul como color predeterminado para p, ahorrando 10 caracteres adicionales. El costo adicional de usar rpetiquetas se compensa con una gran pérdida de CSS.

Compensación adicional de quitar la almohadilla de bucle while para simplemente agregar '000' para el caso de uso y cortar -12 de ella.

Se agregaron JS adicionales para los colores, luego coloque el relleno allí. Noté un error con el relleno que requiere 2 caracteres adicionales para solucionarlo. Compactado un montón de bucles

Archivo HTML, 430 429 419 399 366 342 caracteres

Manifestación

<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>

¡Agradable! Le aconsejaría que elimine todos los saltos de línea en su código y proporcione un enlace para una demostración ( c99.nl ). Como beneficio adicional, puede empacar su entrada en caracteres Unicode usando xem.github.io/obfuscatweet . Eso mejorará tu puntaje.
xem

también, puede eliminar sus etiquetas & lt; html>, colocar la etiqueta & lt; style> al final y eliminar el estilo / y el "}" final de la última regla CSS.
xem

@xem OK, corté todas las líneas y aplasté todo. Intentaré encontrar una manera óptima de dividir el JS para obfuscatweet.
Brújula

1
obfuscatweet acepta cualquier código js (para que pueda poner sus caracteres 289 js allí), o cualquier código html (para que pueda copiar su archivo html aquí). La salida de obfuscatweet se puede ejecutar en la consola de un navegador o en un archivo HTML utilizando la metaetiqueta de juego de caracteres correcta.
xem

psst, olvidó eliminar el último "}" de la parte CSS. Funciona sin eso.
xem

5

MATLAB, 194193 bytes

El código:

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

Y la salida:

Mario

Básicamente, convertí la imagen de Mario para que cada píxel sea un número de 2 bits. Luego codifiqué eso en la base 32, que es la cadena que se muestra en el código. Esta cadena se reforma primero para que sea 5 x 16 (cada fila (12px) de números de 2 bits se codificó en la base 32), luego se volvió a convertir en la base 10. El resultado se convierte una vez más, esta vez en la base 4 produciendo una matriz de 12x16 de Números de 2 bits. Estos números se trazan usando imagesc(). Luego, los colores se asignan utilizando colormap()un mapa de colores personalizado de los valores hexadecimales requeridos.

Divertidamente, un tercio del número de bytes utilizados son solo para hacer que MATLAB establezca los colores correctos después de que se ha trazado. ¡El código de color es casi el mismo número de bytes que toda la cadena base32 !.

Sin corregir el color (eliminar la colormap()llamada), es de 135 bytes, y esta es la salida para el mapa de color predeterminado en MATLAB R2013a:

Mario, sin mapeo


4

JavaScript / CSS / HTML 446 430 407 353 328 316

Jugué al golf tanto como pude y terminé con un poco de HTML / JS sucio, pero lo que sea ... funciona.

Editar : Esto es todo ... Ya terminé.

Editar Realmente hecho esta vez.

JavaScript

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

JSFiddle


El JSFiddle vinculado no contiene la misma versión publicada aquí y no funciona (al menos no para mí en Firefox). Por cierto, para un mejor rendimiento a *{line-height:1}sería de ayuda.
manatwork

@manatwork Inténtalo de nuevo.
SomeShinyMonica

Agradable. ¿Pero por qué el div? Solo por curiosidad, probé una versión ECMAScript. Consiguió 372 caracteres: jsfiddle.net/768h7brb
manatwork

porque <div></div>es más corto que document.createElement('div'). Y a JSFiddle no le gustadocument.write
SomeShinyMonica

1
Revertir la condición del operador ternario para deshacerse del lado derecho de la comparación: i%12?"":"<br>".
manatwork

4

Matlab - 449/332305 bytes

compresión parcial + Usando la simetría de imagen inferior

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)

- Versión parcialmente comprimida (332 bytes):

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)

Versión completamente sin comprimir (449 bytes):

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)

Salida en ambos casos (obviamente ampliada en la pantalla, la real es de 12x16 píxeles):
MarioMagnificado


Hola, me preguntaba si alguien explotaría la simetría de alguna manera. No pude encontrar una manera con el método que finalmente elegí.
Bumpy

4

C, 4999 bytes

Esto absolutamente no puede competir con algunas de las respuestas aquí, pero pensé que le daría una oportunidad a una respuesta C. El código es una sola línea larga, así que aquí hay un enlace pastebin. Si lo prefiere, aquí hay una codificación en base64 del código comprimido:

H4sICAzFGFYCA21hcmlvLmMA3Zc9DsIwDIXv0qndUqchkXwUurAgdYiFEEyIu4NYaZBI7PzNT3Lsz4mf408bjdPjct3odh6HVeujdgg4K4vzohCM8esdjHOpkrVoALUtIrBX8y1R04DKNCGZmTp85CVdAHifYuxO3mElIlju6xaRICOgCo4pD64PoiTzHnkZcHYnRhAYcEEpFznxB1mXP4TdS/KeVGYPZbmVaQHlnRVZFi65OkhoGodq+RHrby4xsTj8i6RmapXrPvfa0Q8ZWZY1/UPbSiC7Z2bYA7r0zla57Xmo8sOEzxdNYIXFhxMAAA==

Cabe destacar que no requiere bibliotecas externas para ejecutarse.

Requiere el terminal xterm, Konsole o GNOME, ya que utiliza la expansión RGB a los códigos de escape de color ANSI para generar los colores correctos (ANSI no define el naranja). Por razones obvias, ideone no funcionará. Se puede ejecutar en Windows con Cygwin, que usa xterm (de hecho, así es como lo probé). MSYS podría funcionar; No estoy seguro.

Salida en mi máquina (xterm):

¡Soy yo, mario!


2
-1 no es múltiplo de 10
Conor O'Brien

Lo sentimos, fue en referencia a la puntuación
Conor O'Brien

4

Excel VBA, 310 307 295 Bytes

Función de ventana inmediata anónima de VBE que genera un Mario al objeto Activesheet en las celdas 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

SubRutina de ayuda a

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

Versión sin golf

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 bytes para eliminar espacios en blanco -12 bytes para usar [...]notación sobre Range(...)notación; cambiando de colores hexadecimales a colores int

Salida

Lo mismo


3

Bash 346

puro golpe con VT100 como secuencias de escape (lo siento, no hay naranja en esa paleta)

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
Puede reducirlo utilizando una matriz para la paleta en lugar de caracteres separados. Como declarar matrices asociativas es largo, es mejor recodificarlo a enteros. Una versión de 295 caracteres de su código: pastebin.com/d0LW0HM1
manatwork

3

Pyth, 83 bytes

Descargo de responsabilidad: este no es un candidato ganador, porque algunas de las características del lenguaje se crearon después de publicar la pregunta.

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

Aquí hay un volcado hexadecimal:

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

También puede descargar el programa aquí y ejecutarlo con

python3 pyth.py mario.pyth

Esto crea un archivo o.png:

Mario

Explicación:

Solo hay 4 colores diferentes, por lo tanto, solo necesito 2 bits para guardar el color de cada píxel.

.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"

¿Funciona esto en la última versión de Pyth antes de que se publicara el desafío?
lirtosiast

@ThomasKwa Sí, lo olvidé. Editaré una información.
Jakube

2

Procesando 2 - 359 caracteres

Vi este desafío e inmediatamente pensé en la función pixel [] de Processing. Esperaba que fuera más corto, pero todavía estoy bastante contento con el resultado teniendo en cuenta que este es mi primer intento de golf de código.

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();

sin golf:

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();

puedes descargar el procesamiento aquí


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);

solo lo tengo funcionando, todavía tengo que entrar y jugar golf


1
Puede reemplazar los correos divelectrónicos que forman las filas con una etiqueta que está en línea de forma predeterminada. No lo he probado, pero usar adebería funcionar. También puede usar en backgroundlugar de background-color.
NinjaBearMonkey

2

Perl - Ungolfed 927

Tendré que jugar golf más tarde. Primera vez probando 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();

Estoy seguro de que tenemos muchos de estos, pero aquí está el mío: Mario!


2

Bash para imprimir: 179 158 bytes

Inspirado por la respuesta del usuario 2485710 .

Necesita ajustar su terminal para que coincida exactamente con los colores.

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 /')"

Esto es lo que veo . ¿Estoy haciendo algo mal?
ardnew

2
@ardnew: BSD base64 usos -Dpara decodificar y -dde depuración .
Dennis

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"

Es una imagen de 2 bits por píxel en base 64. Los píxeles se asignan a códigos de escape ansi.

ingrese la descripción de la imagen aquí


Sin siquiera intentarlo, su código parece un poco golfable: tio.run/…
sergiol

2

JavaScript: 256 caracteres (161 obfusc-a-tuiteado)

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>

ingrese la descripción de la imagen aquí

Método:

  1. Usando el enmascaramiento de bits, una cadena de 63x8 bits proporciona una matriz de valores de 126x4 bits que consta de números en el rango 0-9. (Frustrantemente ... salvé 63 caracteres al pasar 4 bits, pero gasté 50 caracteres desempacando los bits nuevamente jajaja. ¡Aún así, 13 caracteres son 13 caracteres! :-)
  2. Los 4 colores de pintura se ciclan en el orden: B, G, R, O. En cada iteración, se representan 0-9 divs para el color actual (con un salto de línea cada 12)

Para determinar el orden óptimo para el ciclo de color, ejecuté el algoritmo de compresión contra los datos sin procesar para cada una de las 24 permutaciones de [R, G, B, O] y seleccioné el que producía el resultado más corto (126 fue el mejor, el menos óptimo fue alrededor de 150 y tantos)

ETA descubrió esto solo después de leer las otras respuestas usando obfusca-tweet ...

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

Otras ideas - Pruebe el rango de datos de 3 bits 0-6, con el raro 7,8,9 ganando 4 extra cada uno: 60000N. - verifique las permutaciones del ciclo de color en todas las direcciones y velocidades que no sean horizontalmente un píxel a la vez. - pruebe múltiples pases de renderizado para que los colores se puedan superponer.


Oh, me di cuenta de que se trata de caracteres, no de byes, por lo que probablemente podría haber reducido a la mitad los datos nuevamente utilizando los caracteres de 16 bits.
Bumpy

1

Javascript, 253 240 238 236

Obfuscatweet ed source - 253 240 238 236

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

No ofuscado - 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>

Gracias a @compass por los <p>trucos de la etiqueta, y @xem por 2 (5) caracteres.

Manifestación

Convierte datos de la base 36 y convierte a la base 4.


No puedo probarlo, pero no creo que haga padding:9nada sin una unidad después. También puede usar un elemento de una sola letra como ao qque está implícitamente en línea, en lugar de p.
NinjaBearMonkey

@hsl He actualizado el enlace de demostración, y funciona bien al menos mi Chrome, Firefox y Safari en Mac.
Snack

-2 bytes: reemplace "|" por 9 en la cadena y la división. Además, utiliza 3 veces "document.write", debe ponerlo en una variable para guardar, como, 24b)
xem

@xem Gracias por recordarme el truco de división de números. Y como no podemos asignar document.writea la variable (deberíamos usar document.write.bind(document)), lo mejor que pude fue asignar documenta la variable.
Snack

o, puede hacer esto la primera vez: (d = documento) [w = "escribir"] (/ * cosas para escribir * /), y hacer eso después de: d [w] ("Hola")
xem

1

JavaScript ES6 (HTML + CSS), 199307 3195 3630

Usando Obfusc-a-tweet :

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

Esto muestra el sprite sin usar imágenes o elementos múltiples; simplemente usa mal la box-shadowpropiedad CSS para crear cada píxel. Pruébelo en http://jsbin.com/pozohiyezo/ . Esta versión no ofuscada tiene 307 caracteres :

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+'"')

Esta es la versión HTML original y simple. Véalo en acción en 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, no puede cerrar una etiqueta <p :)
xem

Este código puede tener una muy buena compresión en una herramienta como Regpack. Aquí hay un ejemplo en 729b (JS se usa para escribir el HTML, sin embargo): goo.gl/7fF7kx
xem

@xem En realidad ni siquiera había considerado generar el código con JS, pero pude hacerlo mucho más corto siguiendo el patrón del código.
NinjaBearMonkey

1

Javascript, 256 o 245252 o 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]+">")}))

Es triste anular 256, pero 245 es posible si usa caracteres no imprimibles:

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]+">")}))

Hay algún problema al enviar la solución con caracteres no imprimibles. El argumento de btoatiene que ser el resultado de atob("ij6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld")1 símbolo de longitud agregado para escapar de la barra invertida.

Acorte ambas soluciones por 4 símbolos: no necesitamos nuevas para la creación de matrices.

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]+">")}))

No se necesita escapar en esta versión. El btoaargumento de 's es el resultado deatob("k6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclbaidld")


Noté el problema no imprimible en este y mi último desafío también. Pensé que solo serían los caracteres 8, 9 y 13 si eso ayuda (aunque podría confundirme fácilmente)
Bumpy

1

Perl, 266 260 257 249 245 bytes

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

Utiliza un enfoque similar a la solución bash de user2485710 para escribir una salida de estilo VT100. Elimina la N explícita para nueva línea insertando una nueva línea cada 12 "vt100 píxeles", 12 * 7 = 84.


1

SmileBASIC, 147 136 caracteres

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

Salida (recortada): captura de pantalla

Reemplacé todos los caracteres en las cadenas de datos con x's, aquí están los códigos de caracteres (en UCS-2):
P$(Paleta): FF6B,8CFF,FFB1,3425,FF6A,6B04,FFE3,D925
Datos de imagen:0000,83F8,0A80,A3FA,8BE4,A5EA,BEA5,A55A,7EE5,0575,BFF5,0156,BFF5,0156,BBA5,0575,3AF4,A55A,3BC4,A5EA,0BC4,A3FA,0300,83F8

La paleta se almacena en una cadena, cada color (32 bits) se almacena en dos caracteres (16 bits cada uno). Los datos de la imagen (2 bits por píxel) se almacenan en otra cadena (8 píxeles por carácter).
Afortunadamente, el desafío se puntúa en caracteres, ya que este archivo es significativamente más grande si se guarda en UTF-8.


1

05AB1E , 87 bytes (no competidor)

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

Pruébalo en línea!

Salidas:

#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

Porque 05AB1E no puede hacer colores o gráficos de ningún tipo ... Si esto no es aceptable, lo eliminaré.


Podrías escribir un contenedor Bash y decir que tu solución esBash + 05AB1E
Pavel

1
@Pavel Estaba pensando en hacer eso, supongo que voy a emparejar esta solución con la de otra persona; P.
Urna mágica del pulpo

No puedo decir que "gana", pero manténgalo, ya que es un excelente puntaje de compresión :)
xem

0

Sinclair BASIC - 573 bytes

OK, por lo que Spectrum no puede mostrar los colores RGB como se especifica, por lo que he usado lo más cercano posible.

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

La cadena es el color (1 = azul, 2 = rojo, etc.) seguido de una letra para representar cuántas veces se repite ese bloque (tomando el valor ASCII menos 96 para convertirse en 1,2,3, etc.). Un número sin letra después de que solo dibuja un bloque.

"\::"en la línea 60 se explica cómo ingresar gráficos en un editor de texto antes de convertirlo en un archivo TAP para cargarlo en el emulador Fuse. (Se muestra como un gráfico de bloque sólido en la pantalla).

Cada palabra clave es un byte en Sinclair BASIC, ha incluido un recuento de un comando PEEK después de que se generó.

Es un Mario


0

Perl - 399 171 bytes

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

Escribe el archivo gif en stdout.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.