47
\$\begingroup\$

it's a-me!

Today's task is simple: write a program, or a function that displays the idle small Mario sprite, from Super Mario Bros, on NES, over a blue background.

Any kind of entry is valid as long as it displays those 12 * 16 pixels anywhere on the screen / window / browser.

(EDIT: the displayed image can be scaled up if your language can't do pixel art. You can also output ASCII art or HTML art, but using the right colors.)

Image (zoomed 400%):

You must use the following colors:

  • blue: #6B8CFF
  • red: #B13425
  • green/brown: #6A6B04
  • orange: #E39D25

Shortest program (in number of characters) wins!

Standard loopholes apply (especially, no network connexion allowed), but hardcoding and displaying an image file in your program is allowed. (entries using this trick will be rank separately)

Here we go!


Current Leaderboard

Shortest answer using code only:

Shortest answer using some kind of hardcoded image:

\$\endgroup\$
  • 2
    \$\begingroup\$ Also, creating a file is not allowed? It has to be displayed? \$\endgroup\$ – Martin Ender Oct 16 '14 at 14:35
  • 1
    \$\begingroup\$ I don't see any pattern in that image. So it all comes down to the best compression one can use in a language. \$\endgroup\$ – Optimizer Oct 16 '14 at 14:36
  • 20
    \$\begingroup\$ Nitpicking: That's Mario, not Super Mario. \$\endgroup\$ – Dennis Oct 16 '14 at 18:57
  • 5
    \$\begingroup\$ What a fun idea...Here's an idea for a sequel challenge: Take the Mario image (Any format) and turn it into an image of Luigi! \$\endgroup\$ – Zibbobz Oct 17 '14 at 18:22
  • 3
    \$\begingroup\$ Can we make a piet program that looks like him? \$\endgroup\$ – Conor O'Brien Oct 10 '15 at 22:45

30 Answers 30

36
\$\begingroup\$

HTML/JS, 206 158 153 102


102

Trick used: save the compressed GIF file as an HTML file, and add <img src=#> at the end

Thanks to this entry: https://codegolf.stackexchange.com/a/39926/10732 by @NiettheDarkAbsol

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

Demo: http://meuziere.free.fr/mario/gif.html


Older versions:

153

Trick used: save the compressed PNG file as an HTML file, and add <img src=#> at the end

‰PNG


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


158

Trick used: setting the trimmed dataURI of a compressed PNG as the SRC of an IMG tag and packing the whole thing in Unicode chars.


Execute that in your JS console:

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


206

Unpacked (206b):

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

Demo


Tools used:

\$\endgroup\$
  • \$\begingroup\$ You don't need the tags. Just use the chrome's data uri and enter it in your url bar. 200 characters \$\endgroup\$ – Optimizer Oct 16 '14 at 16:25
  • \$\begingroup\$ Hm... I considered that dataURI isn't a valid "program". But you're right. All browsers allow dataURIs in the addressbar. \$\endgroup\$ – xem Oct 16 '14 at 16:29
  • \$\begingroup\$ Now you're using a loophole yourself as the OP ;). You're offloading all work to the external/built-in compression of the GIF format. If that's cool we should all go hunting for obscure image formats with the best compression rate now, and I could have saved myself a lot of work writing my own compression. ;) \$\endgroup\$ – Martin Ender Oct 16 '14 at 18:22
  • 2
    \$\begingroup\$ @xem Well, your challenge, your call. But it seems a bit pointless if we're now just looking for the most compressed existing file format. ;) \$\endgroup\$ – Martin Ender Oct 16 '14 at 18:27
  • 1
    \$\begingroup\$ It appears the rawgit link is dead. \$\endgroup\$ – Addison Crump Oct 10 '15 at 20:27
27
\$\begingroup\$

Mathematica, 412 292 252 212 163 148 143 141 characters

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

This uses caret notation ^A for the control character at code point 1. In Mathematica, I can actually embed the character literally, although that leads to all sorts of ugliness when copying things around. Anyway, the above is 2 characters shorter than my former version, and I got those to characters from using base-4 instead of base-5 to encode the colour palette indices. Right now I cannot be bothered to fix the explanation and screenshot below, so I'm leaving you here with the original base-5 version of my answer:


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

I'm encoding the pixels in Unicode characters (yay for counting by characters!).

Here is what it looks like in Mathematica:

enter image description here

Here's how it works:

First we define a function f that turns Unicode strings (passed in as the first argument #) into lists of integers. First we obtain the character codes. Those can be interpreted as digits of a base 65536 number. And then we convert that number to another base, passed in as the second argument #2.

Now let's do that for the longer Unicode string. ToCharacterCode yields this list:

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

Treating this as base 65536:

7933607912575313477287527915733176998797205587959732019781370103381...
4831246938139171755469819519515972565671101475553962564506286523593

And converting to 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}

Those are the colour indices of the pixels, in order blue, red, green, orange. We use those to index into that list of numbers, which is the colour palette.

Now for the colour palette. That's "넴╫賿橫ӣ鴥". We use the above indices to select the correct string. Then we apply our function again, but using base 256. That yields a list of 12 integers:

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

We use ;; range indexing to pull out the relevant slice for the current colour.

Lastly, we just use Partition to split this into rows of 12 and feed it to Image. Voilà!

Edit: With the Unicode packing the RLE was no longer worth it. Removing it saved 50 characters.

Edit: Of course, without RLE, there's also no need to go to base 16.

Edit: And while we're at it, why not Unicode-pack the colour palette, too? (I have a hunch that I can save a little bit more by make the entire colour palette also a single string and using Partition there too. I'll try that later.)

Edit: Yes, that did shave off another 5 bytes.

\$\endgroup\$
  • 1
    \$\begingroup\$ would you mind adding a screenshot of the result? (not that I don't trust your code, but curious about how it's displayed: in a window? a browser? else?) \$\endgroup\$ – xem Oct 16 '14 at 15:02
  • \$\begingroup\$ @xem Will do. It's a REPL environment capable of graphical in- and output. \$\endgroup\$ – Martin Ender Oct 16 '14 at 15:03
  • \$\begingroup\$ Not sure, but are you mirroring the lower portion of the image ? \$\endgroup\$ – Optimizer Oct 16 '14 at 17:07
  • 1
    \$\begingroup\$ @Optimizer No, I doubt I'd be able to do that in less characters than I'd be saving. \$\endgroup\$ – Martin Ender Oct 16 '14 at 17:12
  • \$\begingroup\$ When I look in the Mathematica documentation I don't see any usage on tilde but it appears here that you're using it to feed the result of one function into another and then apply an additional argument to that second function (IntegerDigits)? Also, the color palette: looking at the image, it appears there are only four colors, but your color palette seems to include more than that: {177, 52, 37, 107, 140, 255, 106, 107, 4, 227, 157, 37}. Looking at the documentation for Image, it looks like it prints out grayscale unless additional options like ColorScale --> RGB is provided. \$\endgroup\$ – CryptoCommander Oct 20 '14 at 2:16
20
\$\begingroup\$

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

Simply draws the sprite by unpacking an int for each column. Shown in a full program:

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

Obligatory screenshot:

it's me, mario

\$\endgroup\$
  • 1
    \$\begingroup\$ You can save 9 bytes by using an import java.awt.*. \$\endgroup\$ – Kevin Cruijssen Feb 27 '18 at 8:00
15
\$\begingroup\$

x86 Machine Code, 102 bytes

How it works: The image is stored as a 2-bit image using a palette. Each row of the image is stored as 3 bytes, followed by one 1 byte of the color palette. This allows the data to be loaded as a single DWORD. The twelve pixels are output by masking off the lowest 2 bits of the value, writing them to video memory, and then right-shifting the entire value two bits. Once the pixels for the row have been outputted, the palette byte is written to the VGA palette. When the image is finished drawing, the program enters an infinite loop.

Assembly code to generate the binary:

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 encoded binary, save it as Mario.com to run it: sBPNEMQHvigBgcc0AWatZpOxDInYJAOqZsHrAuL1k7rJA+6EwHXiwxUAVSwFAEANpb5XCbm/fxq5/v4j6b9qP9X/XxqlqFUaqShqAaoAqjgvw/gnPwD8CQ8A8G8FFFBvqVVqb6pVqg==

Sample output: enter image description here

\$\endgroup\$
10
\$\begingroup\$

GIF - 93 bytes

Hardcoding the image is apparently okay now, so... yay? :D

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

As seen in Notepad++

screenshot in NP++

As PHP - 131 bytes

<? header("Content-Type:image/gif");?>GIF87a  ¡ kŒÿã%jk±4%,       6„‡héj„Af-ÕdÎy\%  …R˜0”ŒÈJ­³I©±²û“ú=ª$±p%i¸•¤  ;
\$\endgroup\$
  • 1
    \$\begingroup\$ can you please upload your gif somewhere (ctrlv.in for example)? I'd like to use it in my entry instead of PNG :) \$\endgroup\$ – xem Oct 16 '14 at 18:08
  • \$\begingroup\$ @xem adamhaskell.net/img/mario.gif \$\endgroup\$ – Niet the Dark Absol Oct 16 '14 at 18:09
  • \$\begingroup\$ @NiettheDarkAbsol I'm not sure how you counted the size of that, but I count 150 bytes. Regardless, scoring is by characters, and it seems to be 114 characters. \$\endgroup\$ – Martin Ender Oct 16 '14 at 18:12
  • 2
    \$\begingroup\$ Yup, the PHP snippet is fine for me (even if you could remove the last 2 bytes). But the raw gif snippet isn't a program. \$\endgroup\$ – xem Oct 16 '14 at 18:54
  • 1
    \$\begingroup\$ @xem: If the browser is considered an "interpreter" for HTML/javascript/etc, and feeding it the raw gif snippet via the same mechanism results in the desired output... the difference becomes small \$\endgroup\$ – Mooing Duck Oct 18 '14 at 0:16
10
\$\begingroup\$

Bash + ImageMagick: 350 331 321 characters

(Palette shamelessly stolen from Martin Büttner's answer.)

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:

Sample output:

Mario

To inspect it easily add -scale 120 to convert's parameters to get a 10x scaled version:

Mario scaled 10

\$\endgroup\$
  • 2
    \$\begingroup\$ s/185 191 127 185 254 254/1{85,91,27,85} 254{,}/; s/do/{/; s/done/}/ \$\endgroup\$ – grawity Oct 18 '14 at 19:16
  • \$\begingroup\$ Doh. I even upvoted DigitalTrauma's related tip, but I keep forgetting that {..}. Thank you, @grawity. \$\endgroup\$ – manatwork Oct 19 '14 at 14:40
8
\$\begingroup\$

Octo/XO-Chip, 70 bytes

Octo is a high level assembly language that compiles down into bytecoded instructions for the CHIP-8 virtual machine. Octo provides some custom extensions called "XO-Chip" to the basic CHIP-8 bytecode, including the ability to draw 4-color bitmaps via overlaid bitplanes.

The compiled bytes are as follows:

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

Run it here in your browser: http://johnearnest.github.io/Octo/index.html?gist=33aa37d4717a425ccd4f

It is probably more illuminating to see the Octo assembly language which produces that 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 

The main program is three two-byte instructions. Set the memory index register i to the beginning of the data segment, select drawing plane 3 (3 is a bitmask; this indicates you wish to draw in 4 color mode with both bitplanes) and then draw a sprite at an x and y position given by register v0 (initialized to zero). The final 0 provides the size of the sprite, which in the SuperChip and XO-Chip instruction sets will draw a 16x16 sprite. In 4 color mode, a bitmap for the first plane is followed immediately by a bitmap for the second plane.

To see how the planes work, consider this modified program which scrolls one plane to the right after drawing 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 

If you enjoy this you might like one of my other solutions written with Octo. There's actually a game jam going on for the month of October based around this tool.

\$\endgroup\$
6
\$\begingroup\$

Groovy 417 386

Fun as hell, but with a terrible char count. GroovyFX needed

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

enter image description here

\$\endgroup\$
  • \$\begingroup\$ grep() instead of toList() \$\endgroup\$ – cfrick Oct 18 '14 at 22:15
5
\$\begingroup\$

HTML/JS, 427 408 264 256 239 226 chars

Obfuscatweet, 271 270 264 256 239 226 chars

Using obfuscatweet, managed to shorten this down to < 250 :D

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

Code below is what this consists of.

Trick used: converted image to base4 String of color tiles, converted this into a hexadecimal String. Index of the base 4 denotes color (0=blue, 1=RED, etc.) CSS with an inline p is used to because divs need content to expand (also p is shorter). Because CSS needs to begin with a letter, 'A' is prepended before the CSS tags.

Padding from the CSS gives pixels. None of this uses Unicode characters, which I'm not too familiar with anyways, though it'd probably go sub-300 in that case. The relative advantage to using the padding is that you can, as in this case, blow up the image to whatever size you want each pixel to be. I've used 9 pixels, but if you spend an extra character, you can get up to 99 pixels per represented pixel.


CSS, 127 119 118 114 100 13 0 chars

Switching from p to rp removes the need for display:inline, cost +1 char, -15! chars!

Removed all the colors and put it into an array in JS -87 chars. Then I just removed all the css

JS, 300 289 280 275 329 325 chars

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

I tried to cut as much as I could out of this plain JS processing a hex string, but given as it's my first try, this is how far I got using only what I know. The HTML writing has been shortened by a function that adds tags, and the classes use the base 4 value to determine the color to display.

Using additional shortening, replaced charAt with [] brackets, and removed the A0 class and set blue as default color for p, saving additional 10 characters. The additional cost to use rp tags is offset by a huge loss in CSS.

Additional offset from removing the while loop pad to just adding '000' for the use case and slicing -12 from it.

Added additional JS for colors, then put the padding in there. Noticed a bug with the padding that requires 2 extra characters to fix. Compacted a bunch of loops

HTML File, 430 429 419 399 366 342 chars

Demo

<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>
\$\endgroup\$
  • \$\begingroup\$ Nice! I'd advise you to remove all the line breaks in your code, and provide a link for a demo ( c99.nl ). As a bonus, you could pack your entry in Unicode chars using xem.github.io/obfuscatweet. That will improve your score. \$\endgroup\$ – xem Oct 16 '14 at 17:48
  • \$\begingroup\$ also, you can remove your &lt;html> tags, place the &lt;style> tag at the end, and remove the /style and the trailing "}" of the last CSS rule. \$\endgroup\$ – xem Oct 16 '14 at 17:51
  • \$\begingroup\$ @xem OK I cut out all the lines out and squished everything. I'll try and figure out an optimal way to split the JS for obfuscatweet. \$\endgroup\$ – Compass Oct 16 '14 at 18:01
  • 1
    \$\begingroup\$ obfuscatweet accepts any js code (so you can put your 289 js chars there), or any html code (so you can copy your html file here). The output of obfuscatweet can be executed in a browser's console or in a HTML file using the right charset meta tag. \$\endgroup\$ – xem Oct 16 '14 at 18:05
  • \$\begingroup\$ psst, you forgot to remove the last "}" of the CSS part. It works without it. \$\endgroup\$ – xem Oct 17 '14 at 10:51
5
\$\begingroup\$

MATLAB, 194 193 bytes

The code:

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

And the output:

Mario

Basically I converted the Mario image so that each pixel is a 2 bit number. I then encoded that in base 32 which is the string shown in the code. This string is first reshaped to be 5 x 16 (each row (12px) of 2bit numbers was encoded into base 32), then converted back into base 10. The result is converted once again, this time into base 4 yielding a 12x16 array of 2 bit numbers. These numbers are plotted using imagesc(). Then the colours are assigned using colormap() with a custom colour map of the required hex values.

Amusingly, a third of the number of bytes used are just to get MATLAB to set the correct colours after it has been plotted. The colour code is almost the same number of bytes as the entire base32 string!.

Without correcting the colour (remove the colormap() call), it is 135 bytes, and this is the output for the default colour map on MATLAB R2013a:

Mario, no mapping

\$\endgroup\$
4
\$\begingroup\$

JavaScript/CSS/HTML 446 430 407 353 328 316

I golfed as much as I could and ended up with some dirty HTML/JS, but whatever...it works.

Edit: This is it...I'm done.

Edit Seriously done this time.

JavaScript

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

JSFiddle

\$\endgroup\$
  • \$\begingroup\$ The linked JSFiddle doesn't contain the same version as posted here and doesn't work (at least not for me in Firefox). By the way, for nicer output a *{line-height:1} would help. \$\endgroup\$ – manatwork Oct 17 '14 at 12:04
  • \$\begingroup\$ @manatwork Try again. \$\endgroup\$ – SomeShinyMonica Oct 17 '14 at 12:12
  • \$\begingroup\$ Nice. But why the div? Just for my curiosity, I tried an ECMAScript version. Got 372 characters: jsfiddle.net/768h7brb \$\endgroup\$ – manatwork Oct 17 '14 at 12:32
  • \$\begingroup\$ because <div></div> is shorter than document.createElement('div'). And JSFiddle doesn't like document.write \$\endgroup\$ – SomeShinyMonica Oct 17 '14 at 12:37
  • 1
    \$\begingroup\$ Reverse the ternary operator's condition to get rid of comparison's right side: i%12?"":"<br>". \$\endgroup\$ – manatwork Oct 17 '14 at 13:55
4
\$\begingroup\$

Matlab - 449 / 332 305 bytes

partial compression + Using the lower image symetry:

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)

-- Partially compressed version (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)

Fully uncompressed version (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)

Output in both cases (magnified on screen obviously, the real one is 12x16pix):
MarioMagnified

\$\endgroup\$
  • \$\begingroup\$ Hey I wondered if anyone would exploit the symmetry somehow. I couldn't fnd a way with the method I finally went with. \$\endgroup\$ – Bumpy Jul 20 '17 at 14:40
4
\$\begingroup\$

C, 4999 bytes

This absolutely cannot compete with some of the answers here, but I thought I'd give a C answer a shot. The code is one single long line, so here is a pastebin link. If you'd prefer, here is a base64 encoding of the gzipped code:

H4sICAzFGFYCA21hcmlvLmMA3Zc9DsIwDIXv0qndUqchkXwUurAgdYiFEEyIu4NYaZBI7PzNT3Lsz4mf408bjdPjct3odh6HVeujdgg4K4vzohCM8esdjHOpkrVoALUtIrBX8y1R04DKNCGZmTp85CVdAHifYuxO3mElIlju6xaRICOgCo4pD64PoiTzHnkZcHYnRhAYcEEpFznxB1mXP4TdS/KeVGYPZbmVaQHlnRVZFi65OkhoGodq+RHrby4xsTj8i6RmapXrPvfa0Q8ZWZY1/UPbSiC7Z2bYA7r0zla57Xmo8sOEzxdNYIXFhxMAAA==

Notable in that it requires no external libraries to run.

Requires xterm, Konsole, or GNOME terminal, because it uses the RGB expansion to the ANSI color escape codes to output the correct colors (ANSI doesn't define orange). For obvious reasons, ideone won't work. It can be run in Windows under Cygwin, which uses xterm (in fact, that's how I tested it). MSYS might work; I'm not sure.

Output on my machine (xterm):

it's a me, mario!

\$\endgroup\$
  • 2
    \$\begingroup\$ -1 is not a multiple of 10 \$\endgroup\$ – Conor O'Brien Oct 31 '15 at 21:12
  • \$\begingroup\$ Sorry, it was in reference to the score \$\endgroup\$ – Conor O'Brien Oct 31 '15 at 21:20
4
\$\begingroup\$

Excel VBA, 310 307 295 Bytes

Anonymous VBE Immediates Window function that outputs a Mario to the Activesheet object at cells 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

Helper SubRoutine a

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

Ungolfed Version

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 for removing whitespace -12 bytes for using [...] notation over Range(...) notation; changing over from hex colors to int colors

Output

It'sa Me

\$\endgroup\$
3
\$\begingroup\$

Bash 346

pure bash with VT100 like escape sequences ( sorry no orange in that palette )

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"
\$\endgroup\$
  • 1
    \$\begingroup\$ You could reduce it by using an array for the palette instead of separate characters. As declaring associative arrays is long, better recode it to integers. A 295 character version of your code: pastebin.com/d0LW0HM1 \$\endgroup\$ – manatwork Oct 17 '14 at 11:01
3
\$\begingroup\$

Pyth, 83 bytes

Disclaimer: This isn't a winning candidate, because some of the language features were created after posting the question.

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

Here's a hex-dump:

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

You can also download the program here and run it with

python3 pyth.py mario.pyth

This creates a file o.png:

Mario

Explanation:

There are only 4 different colors, therefore I only need 2 bits to save the color of each pixel.

.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"
\$\endgroup\$
  • \$\begingroup\$ Does this work in the last version of Pyth before the challenge was posted? \$\endgroup\$ – lirtosiast Oct 10 '15 at 21:41
  • \$\begingroup\$ @ThomasKwa Yeah, forgot. I'll edit a info. \$\endgroup\$ – Jakube Oct 10 '15 at 22:02
2
\$\begingroup\$

Processing 2 - 359 characters

I saw this challenge and immediately thought of Processing's pixel[] function. I was hoping it would be shorter but i'm still fairly happy with the result considering this is my first attempt at code 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();

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

you can download processing here

\$\endgroup\$
2
\$\begingroup\$

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

just got it working, still have to go in and golf it up

\$\endgroup\$
  • 1
    \$\begingroup\$ You can replace the divs that make up the rows with a tag that is inline by default. I haven't tested it, but using a should work. You can also use background instead of background-color. \$\endgroup\$ – NinjaBearMonkey Oct 17 '14 at 1:11
2
\$\begingroup\$

Perl - Ungolfed 927

I'll have to golf this later. First time trying out 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();

I'm sure we have plenty of these but here's mine: Mario!

\$\endgroup\$
2
\$\begingroup\$

Bash Printable: 179 158 Bytes

Inspired by user2485710's answer.

You need to tune your terminal to match colors exactly.

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 /')"
\$\endgroup\$
  • \$\begingroup\$ this is what i see. am i doing something wrong? \$\endgroup\$ – ardnew Oct 20 '14 at 23:35
  • 2
    \$\begingroup\$ @ardnew: BSD base64 uses -D for decode and -d for debug. \$\endgroup\$ – Dennis Oct 21 '14 at 4:08
2
\$\begingroup\$

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"

It's a 2 bits per pixel image in base 64. Pixels are mapped to ansi escape codes.

enter image description here

\$\endgroup\$
  • \$\begingroup\$ Without even trying, your code seems a little bit golfable: tio.run/… \$\endgroup\$ – sergiol Jun 8 '18 at 1:16
2
\$\begingroup\$

JavaScript - 256 characters (161 obfusc-a-tweeted)

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>

enter image description here

Method:

  1. Using bitmasking, a 63x8-bit string provides a 126x4-bit value array consisting of numbers in the range 0-9. (Frustratingly... saved 63 characters by going 4-bit, but spent 50 characters unpacking the bits again lol. Still, 13 chars is 13 chars! :-)
  2. The 4 paint colours are cycled in the order: B, G, R, O. At each iteration, 0-9 divs are rendered for the current color (with a line break every 12th)

To determine the optimal order for the color cycle, I ran the compression algorithm against the raw data for each of 24 permutations of [R, G, B, O] and selected the one yielding the shortest output (126 was best, least optimal was around 150-something)

ETA discovered this only after reading the other answers using obfusca-tweet...

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

Further ideas. - Try 3-bit data range 0-6, with the rare 7,8,9 gaining 4 extra each: 60000N. - check color cycle permutations in all directions and speeds other than horizontally one pixel at a time. - try multiple render passes so colors can be layered.

\$\endgroup\$
  • \$\begingroup\$ D'oh it just dawned that this is about chars not byes, so could probably have halved the data again using the 16-bit chars. \$\endgroup\$ – Bumpy Jul 18 '17 at 13:40
1
\$\begingroup\$

Javascript, 253 240 238 236

Obfuscatweeted source - 253 240 238 236

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

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

Thanks to @compass for the <p> tag tricks, and @xem for 2(5) chars.

Demo

It converts data from base 36, and converts to base 4.

\$\endgroup\$
  • \$\begingroup\$ I can't test it, but I don't think padding:9 Does anything without a unit after it. You could also use a single-letter element like a or q that is implicitly inline, instead of p. \$\endgroup\$ – NinjaBearMonkey Oct 17 '14 at 3:03
  • \$\begingroup\$ @hsl I've updated demo link, and it works well at least my Chrome, Firefox and Safari on Mac. \$\endgroup\$ – Snack Oct 17 '14 at 3:08
  • \$\begingroup\$ -2 bytes: replace "|" by 9 in the string and the split. Also, you use 3 times "document.write", you should put it in a var to save, like, 24b) \$\endgroup\$ – xem Oct 17 '14 at 7:36
  • \$\begingroup\$ @xem Thanks for reminding me the number split trick. And since we can't assign document.write to variable (we should use document.write.bind(document)), my best was assigning document to variable. \$\endgroup\$ – Snack Oct 17 '14 at 7:50
  • \$\begingroup\$ or, you can do this the first time: (d=document)[w="write"](/* things to write */), and just do that after: d[w]("Hi") \$\endgroup\$ – xem Oct 17 '14 at 8:11
1
\$\begingroup\$

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

Using Obfusc-a-tweet:

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

This displays the sprite without using any images or multiple elements; it just misuses the CSS box-shadow property to create each pixel. Try it at http://jsbin.com/pozohiyezo/. This unobfuscated version is 307 characters:

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

This is the original, plain-vanilla HTML version. See it in action at 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"
\$\endgroup\$
  • \$\begingroup\$ TIL, you can not close a <p tag :) \$\endgroup\$ – xem Oct 17 '14 at 8:18
  • \$\begingroup\$ this code can have a very good compression in a tool like regpack. Here's an example in 729b (JS is used to write the HTML, though): goo.gl/7fF7kx \$\endgroup\$ – xem Oct 17 '14 at 8:46
  • \$\begingroup\$ @xem I had actually not even considered generating the code with JS, but I was able to make it much shorter buy following the code's pattern. \$\endgroup\$ – NinjaBearMonkey Oct 17 '14 at 23:53
1
\$\begingroup\$

Javascript, 256 or 245 252 or 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]+">")}))

It's sad to override 256, but 245 is possible if use nonprintable characters:

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

There is some problem with submitting solution with nonprintable characters. The argument of btoa have to be the result of atob("ij6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld") with 1 symbol of length added for escaping backslash.

Shorten both solutions by 4 symbols: we don't need new for array creation.

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 escaping is needed in this version. The btoa's argument is result of atob("k6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclbaidld")

\$\endgroup\$
  • \$\begingroup\$ I noticed the non-printable problem on this and my last challenge too. I thought it was only chars 8, 9 & 13 if that helps (though I could easily be mistaken) \$\endgroup\$ – Bumpy Jul 16 '17 at 18:30
1
\$\begingroup\$

Perl, 266 260 257 249 245 bytes

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

Uses approach similar to user2485710's bash solution to write a VT100 style output. Strips the explicit N for newline by inserting a newline every 12 "vt100 pixels", 12 * 7 = 84.

\$\endgroup\$
1
\$\begingroup\$

SmileBASIC, 147 136 characters

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

Output (cropped): screenshot

I replaced all the characters in the data strings with x's, here are the character codes (in UCS-2):
P$ (Palette): FF6B,8CFF,FFB1,3425,FF6A,6B04,FFE3,D925
Image data: 0000,83F8,0A80,A3FA,8BE4,A5EA,BEA5,A55A,7EE5,0575,BFF5,0156,BFF5,0156,BBA5,0575,3AF4,A55A,3BC4,A5EA,0BC4,A3FA,0300,83F8

The palette is stored in a string, each color (32 bits) is stored in two characters (16 bits each). The image data (2 bits per pixel) is stored in another string (8 pixels per character)
Luckily, the challenge is scored in characters, since this file is significantly larger if saved in UTF-8.

\$\endgroup\$
1
\$\begingroup\$

05AB1E, 87 bytes (Non-competing)

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

Try it online!

Outputs:

#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

Because 05AB1E can't do colors, or graphics of any kind... If this isn't acceptable I'll delete it.

\$\endgroup\$
  • \$\begingroup\$ You could write a Bash wrapper and say your solution is Bash + 05AB1E \$\endgroup\$ – Pavel Feb 7 '17 at 21:07
  • 1
    \$\begingroup\$ @Pavel I was thinking of doing that, guess I'll go mate this solution with someone else's ;P. \$\endgroup\$ – Magic Octopus Urn Feb 7 '17 at 21:22
  • \$\begingroup\$ I can't say it "wins" but please keep it, as it's a great compression score :) \$\endgroup\$ – xem Feb 8 '17 at 8:38
0
\$\begingroup\$

Sinclair BASIC - 573 bytes

OK, so the Spectrum can't show RGB colours as specified, so have used the closest possible.

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

The string is the colour (1=blue, 2=red etc) followed by a letter to represent how many times that block repeats (by taking the ASCII value minus 96 to become 1,2,3 etc). A number without a letter after it just draws one block.

"\::" in line 60 is how to enter graphics in a text editor before turning into a TAP file to load into Fuse emulator. (Shows as a solid block graphic on screen).

Each keyword is one byte in Sinclair BASIC, have included a count from a PEEK command after it was generated.

It's-a Mario

\$\endgroup\$
0
\$\begingroup\$

Perl - 399 171 bytes

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

Writes the gif file to stdout.

\$\endgroup\$

protected by Community Oct 21 '14 at 11:34

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.