Pixel-art, épisode 1: affichez Super Mario

47

elle même!

La tâche est simple: écrivez un programme ou une fonction affichant le petit sprite Mario inactif, de Super Mario Bros, sur NES, sur fond bleu.

Tout type d’entrée est valable tant qu’il affiche ces 12 * 16 pixels n’importe où sur l’écran / la fenêtre / le navigateur.

(EDITER: l’image affichée peut être agrandie si votre langue ne sait pas faire de pixel art. Vous pouvez également produire de l’art ASCII ou HTML, mais en utilisant les bonnes couleurs.)

Image (zoomé de 400%):

Vous devez utiliser les couleurs suivantes:

  • bleu: # 6B8CFF
  • rouge: # B13425
  • vert / marron: # 6A6B04
  • orange: # E39D25

Le programme le plus court (en nombre de caractères) gagne!

Les failles standard s'appliquent (en particulier, aucune connexion réseau n'est autorisée), mais le codage en dur et l'affichage d'un fichier image dans votre programme sont autorisés. (les entrées utilisant cette astuce seront classées séparément)

Et c'est parti!


Classement actuel

Réponse la plus courte en utilisant uniquement le code:

Réponse la plus courte en utilisant une sorte d'image codée en dur:

xem
la source
2
En outre, la création d'un fichier n'est pas autorisée? Il doit être affiché?
Martin Ender
1
Je ne vois aucun motif dans cette image. Donc, tout se résume à la meilleure compression que l'on puisse utiliser dans un langage.
Optimiseur
20
Nitpicking: C'est Mario, pas Super Mario.
Dennis
5
Quelle idée amusante… Voici une idée pour un autre défi: Prenez l’image de Mario (n’importe quel format) et transformez-la en une image de Luigi!
Zibbobz
3
Pouvons-nous faire un programme de piet qui lui ressemble?
Conor O'Brien

Réponses:

36

HTML / JS, 206 158 153 102


102

Astuce utilisée: enregistrez le fichier GIF compressé en tant que fichier HTML et ajoutez <img src = #> à la fin

Merci à cette entrée: 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=#>

Démo: http://meuziere.free.fr/mario/gif.html


Versions plus anciennes:

153

Astuce utilisée: enregistrez le fichier PNG compressé en tant que fichier HTML et ajoutez <img src = #> à la fin

‰PNG


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


158

Astuce utilisée: définir l'URI de données ajustée d'un fichier PNG compressé en tant que SRC d'une balise IMG et le tout dans des caractères Unicode.


Exécutez-le dans votre console JS:

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


206

Déballé (206b):

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

Démo


Les outils utilisés:

xem
la source
Vous n'avez pas besoin des balises. Il suffit d'utiliser les données chrome de l'URI et de les saisir dans la barre d'adresse. 200 caractères
Optimiseur
Hm ... J'ai considéré que dataURI n'était pas un "programme" valide. Mais tu as raison. Tous les navigateurs autorisent les dataURI dans la barre d'adresse.
xem
Maintenant, vous utilisez une échappatoire en tant que PO;). Vous déchargez tout votre travail de la compression externe / intégrée du format GIF. Si c'est bien, nous devrions tous maintenant rechercher des formats d'image obscurs avec le meilleur taux de compression, et j'aurais pu économiser beaucoup de travail en écrivant ma propre compression. ;)
Martin Ender
2
@xem Eh bien, votre défi, votre appel. Mais cela semble un peu inutile si nous cherchons maintenant le format de fichier existant le plus compressé. ;)
Martin Ender
1
Il semble que le lien rawgit est mort.
Addison Crump
27

Mathematica, 412 292 252 212 163 148 143 141 caractères

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

Ceci utilise la notation caret ^Apour le caractère de contrôle au point de code 1. Dans Mathematica, je peux réellement intégrer le caractère à la lettre, bien que cela conduise à toutes sortes de laideurs lors de la copie. Quoi qu’il en soit, ce qui précède a deux caractères plus courts que ma version précédente, et j’ai reçu ceux qui utilisent l’utilisation de la base 4 au lieu de la base 5 pour coder les index de la palette de couleurs. Pour le moment, je ne peux pas être dérangé pour corriger l'explication et la capture d'écran ci-dessous, je vous laisse donc ici avec la version originale en base 5 de ma réponse:


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

J'encode les pixels en caractères Unicode (oui pour compter par caractères!).

Voici à quoi cela ressemble dans Mathematica:

entrez la description de l'image ici

Voilà comment cela fonctionne:

Nous définissons d’abord une fonction fqui transforme les chaînes Unicode (transmises comme premier argument #) en listes d’entiers. Nous obtenons d’abord les codes de caractères. Ceux-ci peuvent être interprétés comme des chiffres d'un numéro de base 65536. Et ensuite, nous convertissons ce nombre en une autre base, transmise comme second argument #2.

Faisons maintenant cela pour la chaîne Unicode plus longue. ToCharacterCodedonne cette liste:

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

Traiter cela comme base 65536:

7933607912575313477287527915733176998797205587959732019781370103381...
4831246938139171755469819519515972565671101475553962564506286523593

Et en convertissant en 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}

Ce sont les indices de couleur des pixels, dans l'ordre bleu, rouge, vert, orange. Nous utilisons ceux-ci pour indexer dans cette liste de nombres, qui est la palette de couleurs.

Maintenant pour la palette de couleurs. Ça c'est "넴╫賿橫ӣ鴥". Nous utilisons les indices ci-dessus pour sélectionner la chaîne correcte. Ensuite, nous appliquons à nouveau notre fonction, mais en utilisant la base 256, ce qui donne une liste de 12 entiers:

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

Nous utilisons l' ;;indexation de plage pour extraire la tranche appropriée pour la couleur actuelle.

Enfin, nous utilisons simplement Partitionpour scinder cela en lignes 12et l’alimenter Image. Voilà!

Edit: Avec l’emballage Unicode, le RLE n’en valait plus la peine. En le supprimant, vous enregistrez 50 caractères.

Edit: Bien sûr, sans RLE, il n’est pas nécessaire d’aller en base 16.

Edit: Et pendant que nous y sommes, pourquoi ne pas emballer également la palette de couleurs au format Unicode? (Je suis persuadé que je peux économiser un peu plus en transformant la palette de couleurs entière en une seule chaîne et en l'utilisant Partitionégalement. J'essaierai cela plus tard.)

Edit: Oui, cela a supprimé 5 octets supplémentaires.

Martin Ender
la source
1
cela vous dérangerait-il d'ajouter une capture d'écran du résultat? (non pas que je n'ai pas confiance en votre code, mais curieux de savoir comment il est affiché: dans une fenêtre? un navigateur? sinon?)
xem
@xem fera l'affaire. C'est un environnement REPL capable d'entrées et de sorties graphiques.
Martin Ender
Pas sûr, mais reflétez-vous la partie inférieure de l'image?
Optimiseur
1
@Optimizer Non, je doute que je serais capable de le faire avec moins de caractères que je n'en économiserais.
Martin Ender
Dans la documentation de Mathematica, je ne vois aucune utilisation du tilde, mais il apparaît ici que vous l'utilisez pour insérer le résultat d'une fonction dans une autre, puis appliquer un argument supplémentaire à cette seconde fonction (IntegerDigits)? Aussi, la palette de couleurs: en regardant l'image, il semble qu'il n'y ait que quatre couleurs, mais votre palette de couleurs semble inclure plus que cela: {177, 52, 37, 107, 140, 255, 106, 107, 4, 227 , 157, 37}. Dans la documentation de Image, il apparaît que les niveaux de gris sont imprimés, à moins que des options supplémentaires telles que ColorScale -> RGB ne soient fournies.
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();}

Dessine simplement le sprite en décompressant un int pour chaque colonne. Montré dans un programme complet:

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

Capture d'écran obligatoire:

c'est moi Mario

Géobits
la source
1
Vous pouvez économiser 9 octets en utilisant un import java.awt.*.
Kevin Cruijssen le
15

Code machine x86, 102 octets

Comment cela fonctionne: L'image est stockée en tant qu'image 2 bits à l'aide d'une palette. Chaque ligne de l'image est stockée sous forme de 3 octets, suivis d'un octet de la palette de couleurs. Cela permet aux données d'être chargées en tant que DWORD unique. Les douze pixels sont générés en masquant les 2 bits les plus bas de la valeur, en les écrivant dans la mémoire vidéo, puis en décalant à droite la valeur entière de deux bits. Une fois que les pixels de la ligne ont été générés, l'octet de palette est écrit dans la palette VGA. Lorsque l'image est terminée, le programme entre dans une boucle infinie.

Code d'assemblage pour générer le binaire:

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 

Bande-annonce codée

Exemple de sortie: entrez la description de l'image ici

Sir_Lagsalot
la source
10

GIF - 93 octets

Le codage en dur de l'image est apparemment correct maintenant, alors ... oui? :RÉ

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

Comme on le voit dans Notepad ++

capture d'écran dans NP ++

En PHP - 131 octets

<? header("Content-Type:image/gif");?>GIF87a  ¡ kŒÿã%jk±4%,       6„‡héj„Af-ÕdÎy\%  …R˜0”ŒÈJ­³I©±²û“ú=ª$±p%i¸•¤  ;
Niet the Dark Absol
la source
1
pouvez-vous s'il vous plaît télécharger votre gif quelque part (ctrlv.in par exemple)? Je voudrais l'utiliser dans mon entrée au lieu de PNG :)
xem
@ NiettheDarkAbsol Je ne suis pas sûr de savoir comment vous avez calculé la taille de cela, mais je compte 150 octets. Quoi qu'il en soit, la notation se fait par caractères, et il semble y avoir 114 caractères.
Martin Ender
2
Eh oui, l'extrait de code PHP me convient (même si vous pouviez supprimer les 2 derniers octets). Mais l'extrait de gif brut n'est pas un programme.
xem
1
@xem: Si le navigateur est considéré comme un "interprète" pour HTML / javascript / etc, et que lui donner l'extrait de gif brut via le même mécanisme entraîne la sortie désirée ... la différence devient petite
Mooing Duck
10

Bash + ImageMagick: 350 331 321 caractères

(Palette volée sans vergogne de la réponse 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:

Exemple de sortie:

Mario

Pour inspecter ajouter facilement -scale 120aux convertparamètres de » pour obtenir une version réduite 10x:

Mario à l'échelle 10

homme au travail
la source
2
s/185 191 127 185 254 254/1{85,91,27,85} 254{,}/; s/do/{/; s/done/}/
Grawity
Doh. J'ai même upvoted DigitalTrauma connexes de pointe , mais je continue à oublier que {.. }. Merci, @grawity.
manatwork
8

Octo / XO-Chip , 70 octets

Octo est un langage d'assemblage de haut niveau qui est compilé en instructions bytecodées pour la machine virtuelle CHIP-8 . Octo fournit des extensions personnalisées appelées "XO-Chip" au bytecode de base de CHIP-8, notamment la possibilité de dessiner des bitmaps 4 couleurs via des plans superposés.

Les octets compilés sont les suivants:

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

Exécutez-le ici dans votre navigateur: http://johnearnest.github.io/Octo/index.html?gist=33aa37d4717a425ccd4f

Il est probablement plus éclairant de voir le langage d'assemblage Octo qui produit ce 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 

Le programme principal comprend trois instructions sur deux octets. Définissez le registre d’indexation de la mémoire iau début du segment de données, sélectionnez le plan de dessin 3 (3 est un masque de bits; cela indique que vous souhaitez dessiner en mode 4 couleurs avec les deux plans bitmap), puis dessinez un sprite à une position x et y donnée par registre v0(initialisé à zéro). Le 0 final indique la taille de l'image-objet qui, dans les jeux d'instructions SuperChip et XO-Chip, dessine une image-objet 16x16. En mode 4 couleurs, un bitmap pour le premier plan est suivi immédiatement par un bitmap pour le second plan.

Pour voir comment les avions fonctionnent, considérons ce programme modifié qui fait défiler un avion à droite après avoir dessiné 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 vous aimez cela, vous aimerez peut-être une de mes autres solutions écrites avec Octo. Il y a en fait un jeu vidéo en cours pour le mois d'octobre basé sur cet outil.

JohnE
la source
6

Groovy 417 386

Amusant, mais avec un nombre de personnages terrible. GroovyFX nécessaire

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

entrez la description de l'image ici

Will Lp
la source
grep()au lieu detoList()
cfrick
5

HTML / JS, 427 408 264 256 239 226 caractères

Obfuscatweet, 271 270 264 256 239 226 caractères

Obfuscatweet a réussi à réduire ce nombre à <250: D

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

Le code ci-dessous est ce en quoi cela consiste.

Astuce utilisée: image convertie en base4 Chaîne de carreaux de couleur, convertie en chaîne hexadécimale. L'index de la base 4 indique la couleur (0 = bleu, 1 = ROUGE, etc.) Le CSS avec un en-ligne p est utilisé car les div ont besoin de contenu pour se développer (p est également plus court). Comme CSS doit commencer par une lettre, la lettre A est ajoutée avant les balises CSS.

Le rembourrage du CSS donne des pixels. Rien de tout cela n'utilise des caractères Unicode, avec lesquels je ne suis pas très familier, même si, dans ce cas, il passerait probablement au-dessous de 300. L'avantage relatif de l'utilisation du remplissage est que vous pouvez, comme dans ce cas, agrandir l'image à la taille souhaitée pour chaque pixel. J'ai utilisé 9 pixels, mais si vous dépensez un caractère supplémentaire, vous pouvez obtenir jusqu'à 99 pixels par pixel représenté.


CSS, 127 119 118 114 100 13 0 caractères

Passer de pà rpsupprime le besoin de display:inline, coûte +1 caractère, -15! les caractères!

Suppression de toutes les couleurs et mise dans un tableau dans JS -87 caractères. Puis je viens de supprimer tous les css

JS, 300 289 280 275 329 325 caractères

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

J'ai essayé de couper autant que possible de cette plaine JS en traitant une chaîne hexagonale, mais étant donné que c'est mon premier essai, voici à quel point je n'ai utilisé que ce que je sais. L'écriture HTML a été raccourcie par une fonction qui ajoute des balises et les classes utilisent la valeur de base 4 pour déterminer la couleur à afficher.

Utilisation de raccourcissements supplémentaires, remplacement de charAt par des crochets [], suppression de la classe A0 et définition du bleu en tant que couleur par défaut pour p, enregistrement de 10 caractères supplémentaires. Le coût supplémentaire lié à l'utilisation des rpbalises est compensé par une énorme perte de CSS.

Décalage supplémentaire de la suppression du pad de boucle while pour ajouter simplement '000' pour le cas d'utilisation et en découper -12.

Ajout de JS supplémentaire pour les couleurs, puis mettre le rembourrage dedans. Remarqué un bug avec le remplissage qui nécessite 2 caractères supplémentaires à corriger. Compacté un tas de boucles

Fichier HTML, 430 429 419 399 366 342 caractères

Démo

<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>
Boussole
la source
Agréable! Je vous conseillerais de supprimer tous les sauts de ligne de votre code et de fournir un lien pour une démonstration ( c99.nl ). En prime, vous pouvez compiler votre entrée en caractères Unicode en utilisant xem.github.io/obfuscatweet . Cela améliorera votre score.
xem
vous pouvez également supprimer vos balises & lt; html>, placer la balise & lt; style> à la fin et supprimer le / style et les "}" suivants de la dernière règle CSS.
xem
@xem OK, j'ai coupé toutes les lignes et tout écrasé. Je vais essayer de trouver un moyen optimal de scinder le JS pour obfuscatweet.
Compass
1
obfuscatweet accepte tout code js (vous pouvez donc y mettre vos 289 caractères js) ou tout code html (vous pouvez donc copier votre fichier html ici). La sortie de obfuscatweet peut être exécutée dans la console du navigateur ou dans un fichier HTML à l'aide de la méta-balise méta appropriée.
xem
psst, vous avez oublié de supprimer le dernier "}" de la partie CSS. Cela fonctionne sans elle.
xem
5

MATLAB, 194 193 octets

Le code:

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

Et la sortie:

Mario

Fondamentalement, j'ai converti l'image de Mario afin que chaque pixel soit un nombre de 2 bits. J'ai ensuite encodé cela en base 32 qui est la chaîne montrée dans le code. Cette chaîne est tout d’abord remodelée à 5 x 16 (chaque rangée (12px) de nombres à 2 bits a été codée en base 32), puis reconvertie en base 10. Le résultat est à nouveau converti, cette fois en base 4, donnant un tableau 12x16 de 2 nombres de bits. Ces nombres sont tracés en utilisant imagesc(). Ensuite, les couleurs sont affectées à l'aide colormap()d'une carte de couleurs personnalisée des valeurs hexadécimales requises.

De manière amusante, un tiers du nombre d'octets utilisés sert simplement à ce que MATLAB définisse les couleurs correctes une fois tracées. Le code de couleur est presque le même nombre d'octets que la chaîne base32 entière !.

Sans corriger la couleur (supprimer l' colormap()appel), il s'agit de 135 octets. Voici la sortie de la palette de couleurs par défaut sur MATLAB R2013a:

Mario, pas de cartographie

Tom Carpenter
la source
4

JavaScript / CSS / HTML 446 430 407 353 328 316

J'ai joué au golf autant que j'ai pu et je me suis retrouvé avec du HTML / JS sale, mais peu importe ... ça marche.

Edit : C'est ça ... J'ai fini.

Edit Sérieusement fait cette fois.

JavaScript

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

JSFiddle

SomeShinyMonica
la source
Le lien JSFiddle ne contient pas la même version que celle publiée ici et ne fonctionne pas (du moins pas pour Firefox dans Firefox). À propos, pour une sortie plus agréable, un *{line-height:1}serait utile.
manatwork
@manatwork Essayez à nouveau.
SomeShinyMonica
Agréable. Mais pourquoi le div? Juste pour ma curiosité, j'ai essayé une version ECMAScript. Vous avez 372 caractères: jsfiddle.net/768h7brb
manatwork
car <div></div>est plus court que document.createElement('div'). Et JSFiddle n'aime pasdocument.write
SomeShinyMonica
1
Inverser la condition de l'opérateur ternaire pour se débarrasser du côté droit de comparaison: i%12?"":"<br>".
manatwork
4

Matlab - 449/332 305 octets

compression partielle + Utilisation de la symétrie inférieure de l'image:

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)

- Version partiellement compressée (332 octets):

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)

Version entièrement décompressée (449 octets):

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)

Sortie dans les deux cas (agrandie à l'écran évidemment, le vrai est 12x16pix):
MarioMagnified

Hoki
la source
Hey je me demandais si quelqu'un exploiterait la symétrie d'une manière ou d'une autre. Je ne pouvais pas trouver un moyen avec la méthode que j'avais finalement choisie.
Bumpy
4

C, 4999 octets

Cela ne peut absolument pas rivaliser avec certaines des réponses ici, mais je pensais donner une réponse rapide à un C. Le code est une seule longue ligne, donc voici un lien pastebin. Si vous préférez, voici un encodage base64 du code gzippé:

H4sICAzFGFYCA21hcmlvLmMA3Zc9DsIwDIXv0qndUqchkXwUurAgdYiFEEyIu4NYaZBI7PzNT3Lsz4mf408bjdPjct3odh6HVeujdgg4K4vzohCM8esdjHOpkrVoALUtIrBX8y1R04DKNCGZmTp85CVdAHifYuxO3mElIlju6xaRICOgCo4pD64PoiTzHnkZcHYnRhAYcEEpFznxB1mXP4TdS/KeVGYPZbmVaQHlnRVZFi65OkhoGodq+RHrby4xsTj8i6RmapXrPvfa0Q8ZWZY1/UPbSiC7Z2bYA7r0zla57Xmo8sOEzxdNYIXFhxMAAA==

Notable en ce qu'il ne nécessite aucune bibliothèque externe à exécuter.

Requiert xterm, Konsole ou GNOME, car il utilise l’extension RVB des codes d’échappement de couleur ANSI pour produire les couleurs correctes (l’ANSI ne définit pas l’orange). Pour des raisons évidentes, ideone ne fonctionnera pas. Il peut être exécuté sous Windows sous Cygwin, qui utilise xterm (en fait, c'est comme ça que je l'ai testé). MSYS pourrait fonctionner; Je ne suis pas sûr.

Sortie sur ma machine (xterm):

C'est moi, Mario!

Mego
la source
2
-1 n'est pas un multiple de 10
Conor O'Brien
Désolé, c'était en référence à la partition
Conor O'Brien
4

Excel VBA, 310 307 295 octets

Anonymous VBE Immediates fonction Window qui sort un Mario à l’objet Activesheet au niveau des cellules 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

Aide d' Subune routine

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

Version non-golfée

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 octets pour supprimer les espaces -12 octets pour utiliser [...]notation sur Range(...)notation; passage des couleurs hexagonales aux couleurs int

Sortie

Elle même

Taylor Scott
la source
3

Bash 346

pure bash avec VT100 comme des séquences d'échappement (désolé, pas d'orange dans cette 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"
utilisateur2485710
la source
1
Vous pouvez le réduire en utilisant un tableau pour la palette au lieu de caractères distincts. Comme la déclaration de tableaux associatifs est longue, il est préférable de la recoder en entiers. Une version de 295 caractères de votre code: pastebin.com/d0LW0HM1
manatwork
3

Pyth, 83 octets

Avertissement: Ce n'est pas un candidat gagnant, car certaines fonctionnalités linguistiques ont été créées après la publication de la question.

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

Voici un vidage hexadécimal:

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

Vous pouvez également télécharger le programme ici et l’exécuter avec

python3 pyth.py mario.pyth

Cela crée un fichier o.png:

Mario

Explication:

Il n'y a que 4 couleurs différentes, donc je n'ai besoin que de 2 bits pour enregistrer la couleur de chaque 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"
Jakube
la source
Est-ce que cela fonctionne dans la dernière version de Pyth avant la publication du défi?
lirtosiast
@ThomasKwa Ouais, j'ai oublié. Je vais éditer une info.
Jakube
2

Traitement 2 - 359 caractères

J'ai vu ce défi et j'ai immédiatement pensé à la fonction pixel [] de Processing. J'espérais que ce serait plus court mais je suis quand même assez satisfait du résultat vu que c'est ma première tentative de 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();

vous pouvez télécharger le traitement ici

Bubalou
la source
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);

Je viens juste de le faire fonctionner, je dois encore y aller et jouer au golf

Professeur Allman
la source
1
Vous pouvez remplacer les divs qui composent les lignes par une balise intégrée par défaut. Je ne l'ai pas testé, mais utiliser adevrait marcher. Vous pouvez également utiliser backgroundau lieu de background-color.
NinjaBearMonkey
2

Perl - Ungolfed 927

Je vais devoir jouer au golf plus tard. Première fois essayer 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();

Je suis sûr que nous en avons beaucoup, mais voici le mien: Mario!

hmatt1
la source
2

Bash imprimable: 179 158 octets

Inspiré par la réponse de user2485710 .

Vous devez régler votre terminal pour faire correspondre les couleurs exactement.

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 /')"
Souris
la source
c'est ce que je vois . Est-ce que je fais quelque chose de mal?
lundi
2
@ardnew: BSD base64 utilisations -Dpour le décodage et -dpour le débogage .
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"

C'est une image de 2 bits par pixel en base 64. Les pixels sont mappés sur les codes d'échappement ansi.

entrez la description de l'image ici

wolfhammer
la source
Sans même essayer, votre code semble un peu golfable: tio.run/…
sergiol
2

JavaScript - 256 caractères (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>

entrez la description de l'image ici

Méthode:

  1. À l'aide du masquage, une chaîne de 63 x 8 bits fournit un tableau de valeurs de 126 x 4 bits constitué de nombres compris entre 0 et 9. (Frustrant ... sauvé 63 caractères en 4-bit, mais passé 50 caractères à décompresser les bits encore lol. Pourtant, 13 caractères est de 13 caractères! :-)
  2. Les 4 couleurs de peinture sont cyclées dans l'ordre: B, G, R, O. A chaque itération, 0-9 divs sont rendus pour la couleur actuelle (avec un saut de ligne tous les 12 ans).

Pour déterminer l'ordre optimal du cycle de couleur, j'ai exécuté l'algorithme de compression en fonction des données brutes pour chacune des 24 permutations de [R, V, B, O] et j'ai sélectionné celui qui donnait la sortie la plus courte (126 était la meilleure, la moins optimale environ 150 environ)

ETA a découvert cela seulement après avoir lu les autres réponses en utilisant obfusca-tweet ...

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

Autres idées. - Essayez la plage de données 3 bits 0-6, les rares 7,8,9 gagnent 4 supplémentaires chacun: 60000N. - vérifiez les permutations du cycle de couleur dans toutes les directions et à des vitesses autres qu'horizontalement, pixel par pixel. - essayez plusieurs passes de rendu afin que les couleurs puissent être superposées.

Bumpy
la source
D'oh il vient juste de se rendre compte qu'il s'agit de caractères pas byes, donc aurait probablement pu réduire de moitié les données à nouveau en utilisant les caractères 16 bits.
Bumpy
1

Javascript, 253 240 238 236

Obfuscatweet ed source - 253 240 238 236

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

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

Merci à @compass pour les <p>astuces de balises et à @xem pour 2 (5) caractères.

Démo

Il convertit les données de la base 36 et les convertit en base 4.

Casse-croûte
la source
Je ne peux pas le tester, mais je ne pense pas qu'il fasse padding:9quoi que ce soit sans unité après. Vous pouvez également utiliser un élément d'une seule lettre comme aou qqui est implicitement en ligne, au lieu de p.
NinjaBearMonkey
@hsl J'ai mis à jour le lien de démonstration, et cela fonctionne bien au moins mon Chrome, Firefox et Safari sur Mac.
Snack
-2 octets: remplacer "|" par 9 dans la chaîne et la scission. De plus, vous utilisez 3 fois "document.write", vous devriez le mettre dans un
fichier
@ xem Merci de me rappeler le truc du numéro. Et comme nous ne pouvons pas affecter document.writede variable (nous devrions utiliser document.write.bind(document)), le mieux est d’affecter documentune variable.
Snack
ou, vous pouvez le faire la première fois: (d = document) [w = "write"] (/ * choses à écrire * /), et faites-le simplement après: d [w] ("Hi")
xem
1

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

Utiliser Obfusc-a-tweet :

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

Cela affiche l'image-objet sans utiliser d'images ni plusieurs éléments; il utilise simplement la box-shadowpropriété CSS pour créer chaque pixel. Essayez-le sur http://jsbin.com/pozohiyezo/ . Cette version non obscurcie contient 307 caractères :

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

Ceci est la version originale, HTML vanille. Voyez-le en action sur 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"
NinjaBearMonkey
la source
TIL, vous ne pouvez pas fermer une balise <p :)
xem
Ce code peut avoir une très bonne compression dans un outil comme regpack. Voici un exemple en 729b (cependant, JS est utilisé pour écrire le code HTML): goo.gl/7fF7kx
xem
@xem Je n'avais même pas envisagé de générer le code avec JS, mais j'ai été en mesure de le rendre beaucoup plus court en suivant le modèle du code.
NinjaBearMonkey
1

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

Il est triste de remplacer 256, mais 245 est possible si vous utilisez des caractères non imprimables:

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

Il y a un problème avec la solution d'envoi avec des caractères non imprimables. L'argument de btoadoit être le résultat de atob("ij6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclcidld")avec 1 symbole de longueur ajouté pour échapper à la barre oblique inversée.

Raccourcissez les deux solutions de 4 symboles: nous n’avons pas besoin de nouvelles pour la création de tableaux.

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

Aucune échappement n'est nécessaire dans cette version. L' btoaargument de est le résultat deatob("k6n56kcraqlaqasasjaqbsasibtdlstlb2cmc2b2cid5dra2q3q2au7u55rj4j4kclbaidld")

Qwertiy
la source
J'ai remarqué le problème non imprimable sur ceci et mon dernier défi aussi. Je pensais que ce n'était que les personnages 8, 9 et 13 si cela peut aider (même si je peux facilement me tromper)
Bumpy
1

Perl, 266 260 257 249 245 octets

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

Utilise une approche similaire à la solution bash de user2485710 pour écrire une sortie de style VT100. Enlève le N explicite de nouvelle ligne en insérant une nouvelle ligne tous les 12 "vt100 pixels", 12 * 7 = 84.

steve
la source
1

SmileBASIC, 147 136 caractères

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

Sortie (recadrée): capture d'écran

J'ai remplacé tous les caractères dans les chaînes de données par x's, voici les codes de caractères (en UCS-2):
P$(Palette): FF6B,8CFF,FFB1,3425,FF6A,6B04,FFE3,D925
Données d'image: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 palette est stockée dans une chaîne, chaque couleur (32 bits) est stockée dans deux caractères (16 bits chacun). Les données d'image (2 bits par pixel) sont stockées dans une autre chaîne (8 pixels par caractère).
Heureusement, le défi est noté en caractères, car ce fichier est considérablement plus volumineux s'il est enregistré en UTF-8.

12Me21
la source
1

05AB1E , 87 octets (non concurrents)

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

Essayez-le en ligne!

Les sorties:

#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

Parce que 05AB1E ne peut pas faire de couleurs, ni de graphiques de toutes sortes ... Si cela n’est pas acceptable, je le supprime.

Urne Magique De Pieuvre
la source
Vous pouvez écrire un wrapper Bash et dire que votre solution estBash + 05AB1E
Pavel
1
@Pavel Je pensais faire ça, je suppose que je vais faire cohabiter cette solution avec celle de quelqu'un d'autre; P.
Urne Magique Octopus
Je ne peux pas dire «gagne», mais conservez-le, car c'est un excellent score de compression :)
xem
0

Sinclair BASIC - 573 octets

OK, le spectre ne peut donc pas afficher les couleurs RVB spécifiées. Vous avez donc utilisé le plus près 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

La chaîne est la couleur (1 = bleu, 2 = rouge, etc.) suivie d'une lettre pour représenter le nombre de répétitions de ce bloc (en prenant la valeur ASCII moins 96 pour devenir 1,2,3, etc.). Un nombre sans lettre après ne dessine qu'un bloc.

"\::"La ligne 60 indique comment entrer des graphiques dans un éditeur de texte avant de passer à un fichier TAP à charger dans l’émulateur Fuse. (Affiche sous forme de bloc graphique à l’écran).

Chaque mot clé correspond à un octet dans Sinclair BASIC et inclut un nombre à partir d’une commande PEEK après sa génération.

C'est un Mario

Brian
la source
0

Perl - 399 171 octets

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

Ecrit le fichier gif sur stdout.

steve
la source