2015年、ポートランド国際空港は象徴的なカーペットの交換を開始しました。古いカーペットをできる限り少ないバイト数で描画するプログラムを作成してほしい。

カーペット：

仕様書

• これは、1つのタイルのスケーラブルpdfイメージへのリンクです。出力は、その画像の相対的な寸法と配置と一致する必要があります。

• 最終画像のすべての色は、指定された画像のすべてのRGB値の15以内でなければなりません。これらは、便宜上、以下にリストされています。

              Red   Green Blue
  Teal:       0,    168,  142
  Magenta:    168,  108,  185
  Orange:     247,  58,   58
  Light Blue: 90,   166,  216
  Dark Blue:  0,    77,   117
  

• 出力は少なくとも150x150ピクセルで、正方形でなければなりません。ベクター画像のようなスケーラブルな形式で出力することを選択した場合、画像を正確に一致させる必要があります。

• 既存の画像形式で画像を出力できます。

• これはコードゴルフなので、コードのバイト数を最小限に抑えることを目指してください。

純粋なHTML、873バイト

<table width=152 height=152 bgcolor=#0a8><tr><td colspan=7><td bgcolor=#5AD><tr><td><td bgcolor=#057><td colspan=5><td bgcolor=#5AD><tr><td><td><td bgcolor=#057><td colspan=4><td bgcolor=#5AD><tr><td><td><td><td bgcolor=#057><td><td><td><td bgcolor=#5AD><tr><td colspan=7><td bgcolor=#057><td><td><td bgcolor=#057><tr><td colspan=7><td bgcolor=#057><td><td bgcolor=#057><tr><td colspan=7><td bgcolor=#057><td bgcolor=#057><td><td><td><td bgcolor=#F33><td bgcolor=#F33><td bgcolor=#F33><tr><td colspan=6><td bgcolor=#F33><td bgcolor=#057><td colspan=7 bgcolor=#057><tr><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td bgcolor=#A6B><td rowspan=6 bgcolor=#057><tr><td><tr><td><tr><td colspan=11><td bgcolor=#057><tr><td colspan=12><td bgcolor=#057><tr><td colspan=13><td bgcolor=#057><tr><td colspan=7><td bgcolor=#057>

HTML + CSS、625バイト

#l{background:#5AD}th{background:#057}#o{background:#F33}#m>td{background:#A6B

<table width=152 height=152 bgcolor=#0A8><tr><td colspan=7><td id=l><tr><td><th><td colspan=5><td id=l><tr><td><td><th><td colspan=4><td id=l><tr><td><td><td><th><td><td><td><td id=l><tr><td colspan=7><th><td><td><th><tr><td colspan=7><th><td><th><tr><td colspan=7><th><th><td><td><td><td bgcolor=#F33><td bgcolor=#F33><td bgcolor=#F33><tr><td colspan=6><td bgcolor=#F33><th><th colspan=7><tr id=m><td><td><td><td><td><td><td><th rowspan=6><tr><td><tr><td><tr><td colspan=11><th><tr><td colspan=12><th><tr><td colspan=13><th><tr><td colspan=7><th>

TikZ、725の 693 681 671バイト

\documentclass{standalone}\usepackage{xcolor,tikz}\begin{document}\tikz[line width=20,every node/.style={minimum size=20}]{\definecolor{t}{RGB}{0,168,142}\definecolor{m}{RGB}{168,99,185}\definecolor{o}{RGB}{247,58,58}\definecolor{b}{RGB}{90,166,216}\definecolor{d}{RGB}{40,77,117}\fill[t](-7.5,-7.5)rectangle(7.5,7.5);\draw(-1,0)node[fill=o]{};\foreach\x in{1,...,7}{\draw(-\x,-1)node[fill=m]{};\draw(0,\x)node[fill=b]{};}\foreach\x in{1,...,3}{\draw(\x,\x)node[fill=d]{};\draw(3+\x,-3-\x)node[fill=d]{};\draw(-3-\x,3+\x)node[fill=d]{};\draw(4+\x,1)node[fill=o]{};}\draw[d](.65,0)--(7.35,0);\draw[d,dash pattern=on20off8.5on162.5off8.5](0,-7.35)--(0,3.35);}\end{document}

オンラインでお試しください！

説明

コードの大部分はラッパーです。

\documentclass{standalone}\usepackage{xcolor,tikz}\begin{document}\tikz{...}\end{document}

これは、標準のTikzラッパーのわずかなバリエーションであり\usepackage{xcolor}、色を適切に作成できるように線も含まれています。

最初に行われるline width=20,every node/.style={minimum size=20}]ことは、ラインとノードを適切なサイズに設定することです。

それが完了したら、画像のさまざまな部分に使用する色を定義します。

\definecolor{t}{RGB}{0,168,142}\definecolor{m}{RGB}{168,99,185}\definecolor{o}{RGB}{247,58,58}\definecolor{b}{RGB}{90,166,216}\definecolor{d}{RGB}{40,77,117}

すべての設定が完了したので、キャンバスティールに背景をペイントします。

\fill[t](-7.5,-7.5)rectangle(7.5,7.5);

（これはティールスクエアであるため、この画像は含めませんが、各ステップの画像を含めます）

最初に追加するノードは、キャンバスの中央のすぐ左にあるオレンジ色のノードです。

\draw(-1,0)node[fill=o]{};

次に、ライトブルーとマゼンタのノードを描画します。7つの青いノードと4つの青いノードがありますが、後で線で覆われる追加のノードを描画できるため、それぞれ7つを描画します。

\foreach\x in{1,...,7}{
    \draw(-\x,-1)node[fill=m]{};
    \draw(0,\x)node[fill=b]{};
}

ここで、1つの\foreachループを使用して3つのドットのすべてのグループを描画します

\foreach\x in{1,...,3}{\draw(\x,\x)node[fill=d]{};\draw(3+\x,-3-\x)node[fill=d]{};\draw(-3-\x,3+\x)node[fill=d]{};\draw(4+\x,1)node[fill=o]{};}

次に、正しい線を引きます。この線は.35、ノードのサイズに一致するように各方向のオフセットを持つ単純な線になります。

\draw[d](.65,0)--(7.35,0);

ここで、x軸に濃い青色の線と正方形を描画する必要があります。カスタムダッシュパターンを使用して、1行でそれらを描画します。

このパターンは次のとおりです。[dash pattern=on20off8.5on162.5off8.5]これは、長いソリッドテールを持つ正方形を作成します。ラインは下から始まり、パターンの2サイクルを完全にはカバーしません。

\draw[d,dash pattern=on20off8.5on162.5off8.5](0,-7.35)--(0,3.35);

これで完了です。

リテラルPNGファイル、283、234の 227バイト

編集：オンライン画像圧縮サービスhttps://compress-or-die.com/を使用して、これはさらに7バイトダウンしました。

albn @ alexhi

j:~/tmp$ ls -l carpet3.png
-rw-r--r-- 1 albn albn 227 15. Feb 12:01 carpet3.png
albn@alexhij:~/tmp$ base64 carpet3.png 
iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLn3Ojpapthl
S7nNAAAAj0lEQVR4Ae3ThRHCQBQGYVqgBVq4Fui/Jt4ILks8/80uLvkyOTlkd67EILHojtWEyxQT
Sw6uFS5TTCw/uFa+TDGx/PjS3z+KiS2GcRtgzIqJdboDPomteniCxMTyatXtMiExMcB22amCJ7wG
MbHpBWBiYmJiYmJwAjGx/ncAn0VMrP8dwL+KieXHFyImltoF6oWZiblRTNQAAAAASUVORK5CYII=

227バイトは、バイナリファイルCarpet.pngの実際のサイズです。上記の引用ブロックに表示されているように、base64でエンコードされた場合、数バイト（308バイト）長くなります。画像をすぐにレンダリングするHTMLスニペットにカプセル化すると、さらに数バイト追加されます。

HTML、414、343、336のバイト

<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLn3OjpapthlS7nNAAAAj0lEQVR4Ae3ThRHCQBQGYVqgBVq4Fui/Jt4ILks8/80uLvkyOTlkd67EILHojtWEyxQTSw6uFS5TTCw/uFa+TDGx/PjS3z+KiS2GcRtgzIqJdboDPomteniCxMTyatXtMiExMcB22amCJ7wGMbHpBWBiYmJiYmJwAjGx/ncAn0VMrP8dwL+KieXHFyImltoF6oWZiblRTNQAAAAASUVORK5CYII

編集：シャギーが示唆したように、引用符を削除して閉じました。また、別のダウン画像圧縮17、24バイト

Mathematica、285バイト

e={1,1};r=RGBColor["#"<>#]&;c=Cuboid;s=c[3#-e,3#+e]&;a=Array;b=a[s[{1,-1}#]&,3,#]&;Graphics@{r@"0a8",c[-23e,23e],r@"a6b",a[s@{-#,-1}&,7],r@"f33",a[s@{#,1}&,3,5],s@{-1,0},r@"5ad",a[s@{0,#}&,4,4],r@"057",a[s[e#]&,4,0],b@4,b[-6],s@{0,-7},{-1,2}~c~{1,10},{-1,-2}~c~{1,-19},{2,-1}~c~{22,1}}

読みやすい：

 1  c = Cuboid; e = {1, 1};
 2  s = c[3 # - e, 3 # + e] &;
 3  a = Array; b = a[s[{1, -1} #] &, 3, #] &;
 4  r = RGBColor["#" <> #] &; 
 5  Graphics@{
 6   r@"0a8", c[-23 e, 23 e],
 7   r@"a6b", a[s@{-#, -1} &, 7],
 8   r@"f33", a[s@{#, 1} &, 3, 5], s@{-1, 0},
 9   r@"5ad", a[s@{0, #} &, 4, 4],
10   r@"057",
11    a[s[e #] &, 4, 0], b@4, b[-6], s@{0, -7},
12    {-1, 2}~c~{1, 10}, {-1, -2}~c~{1, -19}, {2, -1}~c~{22, 1}
13  }

行1〜3は、関数の短縮名を定義します。最も重要なのはs、受け取る座標を中心に正方形を描画することです（適切なスケーリングのために、その座標の3倍になります）。4行目は、Mathematicaの「ショートカット」RGBシステムを使用して色関数を定義します。RGBColor["#xyz"]ここで、xyzは16進数の数字を表しますRGBColor[{17x, 17y, 17z}]（したがって、各座標には0から255までの16の等間隔オプションがあります）。行6〜10の最初のコマンドは、指定された5色に最も近いショートカット色を使用して現在の色を切り替えます（17の倍数に丸めたときに値が8を超えることはありません）。

6行目は大きな青緑色の正方形を描きます。7行目はマゼンタの正方形の線を描き、8行目はオレンジ色の正方形の線と1つのオレンジ色の正方形を描きます。行9は、水色の正方形の線を描画します。行11は、3つの対角線の濃い青色の正方形と、下部の1つの濃い青色の正方形を描画します。最後に、行12は3つの長い濃い青色の長方形を描画します。出力は次のとおりです。

（ゴルフのヒント：Cuboid3Dグラフィックスオブジェクトを対象としたコマンドは、2Dでも問題なく機能し、Rectangle。

Python、420

from PIL import Image,ImageDraw
B=0,77,117
I=Image.new('RGB',(300,300),(0,168,142))
r=ImageDraw.Draw(I).rectangle
for x,y,c in['7172737a98cde670123456bcd70112233456666778888888bcde23232323331111300000003333'[x::26]for x in range(26)]:exec'r([W,W,14+W,14+W],[(168,108,185),(247,58,58),(90,166,216),B][%s]);'.replace('W','2+20*0x%s')%(x,y,x,y,c)
r([162,142,296,156],B)
r([142,82,156,136],B)
r([142,162,156,276],B)
I.show()

HTML / SVG、550 542 521バイト

<svg><path fill=#0a8 d="M0 0h152v152H0z"/><path fill=#5ad d="M72 2h8v8h-8zm0 10h8v8h-8zm0 10h8v8h-8zm0 10h8v8h-8z"/><path fill=#057 d="M12 12h8v8h-8zm10 10h8v8h-8zm10 10h8v8h-8zm40 10h8v28h-8zm0 30h8v8h-8zm10-10h8v8h-8zm10-10h8v8h-8zm10-10h8v8h-8zM82 72h68v8H82zM72 82h8v58h-8zm0 60h8v8h-8zm40-30h8v8h-8zm10 10h8v8h-8zm10 10h8v8h-8z"/><path fill=#f33 d="M62 72h8v8h-8zm60-10h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8z"/><path fill=#a6b d="M2 82h8v8H2zm10 0h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8zm10 0h8v8h-8z"

HTML、366バイト

日曜日は、私がまだこれに取り組んでいる間にBase64の回答を得ました。使用することを選択した場合、この回答を削除します。

<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLlaptj3OjrqGXAuAAAAp0lEQVRo3u3YQQqFMAxFUbeQLbiFbsH9r8k3y8CmTiKm7b2Dwv/CgUAD4jF3TYGBRdgKmRqPCQa28gaMZ20KDGz5DQhnbQoMTG2wAcPR/ScY2HeYVw4zBQYWYDUvbRLWFS/lBxhYhM3bpXzMcWBgEVa5U70cpsDAnkf1FxcwMDAwMLBczP8DAwuwmpc2HzMFBhY8qHlp8zFTYGCdyn8GKrhOYBtjv3QDvf+Zic+8bOsAAAAASUVORK5CYII

それ自体のBase64文字列が有効な答えである場合、それはわずか335バイトです：

iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLlaptj3OjrqGXAuAAAAp0lEQVRo3u3YQQqFMAxFUbeQLbiFbsH9r8k3y8CmTiKm7b2Dwv/CgUAD4jF3TYGBRdgKmRqPCQa28gaMZ20KDGz5DQhnbQoMTG2wAcPR/ScY2HeYVw4zBQYWYDUvbRLWFS/lBxhYhM3bpXzMcWBgEVa5U70cpsDAnkf1FxcwMDAwMLBczP8DAwuwmpc2HzMFBhY8qHlp8zFTYGCdyn8GKrhOYBtjv3QDvf+Zic+8bOsAAAAASUVORK5CYII

HTML / SVG + JavaScript（ES6）、500 499バイト

>これがスニペットとして機能するには追加が必要です。実際のコードについてはこのFiddleを参照してください。

[[t="5ad",2],[t,o=12],[t,p=22],[t,q=32],[,o,o],[,p,p],[,q,q],[,42,,28],[],[,v=62,s=82],[,52,92],[,42,102],[,,s,,68],[,s,,58],[,142],[,112,112],[,122,122],[,132,132],[t="f33",,v],[t,v,122],[t,v,132],[t,v,142],[t="a6b",s,2],[t,s,o],[t,s,p],[t,s,q],[t,s,42],[t,s,52],[t,s,v],["0a8",0,0,152,152]].map(x=>a(x[0],x[1],x[2],x[3],x[4]),a=(f="057",y=72,x=72,h=8,w=8)=>(c.after(r=c.cloneNode()),r.id++,r[s="setAttribute"]("fill","#"+f),r[s]("x",x),r[s]("y",y),r[s]("width",w),r[s]("height",h)))

<svg><rect id=c>

説明

配列の配列を関数にマッピングされているaのクローンを作成し、rect最初の後にそれらを挿入し、HTMLにrectし、その設定をfill、x、y、width＆height属性を。各配列には、これらの属性の値がその順序で含まれており、欠損値はのデフォルトパラメータによって設定されますa。一見不必要なためr.id++、の使用は許可されますが、のcはcloneNode()1つだけです。これはばかげて高価なものを使う必要を節約します。rectiddocument.createElementNS("http://www.w3.org/2000/svg","rect")

PHP + SVG、425バイト

<svg><rect x=0 y=0 fill=#00a88e width=150 height=150 /><?foreach(["004d75"=>[[1,1],[2,2],[3,3],[7,14],[7,7],[8,6],[9,5],[10,4],[11,11],[12,12],[13,13],[7,4,0,2],[8,7,6,0],[7,8,0,5]],"5aa6d8"=>[[7,0],[7,1],[7,2],[7,3]],a86cb9=>[[0,8],[1,8],[2,8],[3,8],[4,8],[5,8],[6,8]],f73a3a=>[[6,7],[12,6],[13,6],[14,6]]]as$c=>$p)foreach($p as$v)echo"<rect x={$v[0]}1 y={$v[1]}1 width=".(8+10*$v[2])." height=".(8+10*$v[3])." fill=#$c />";

拡大した

<svg><rect x=0 y=0 fill=#00a88e width=150 height=150 />
<?foreach([
"004d75"=>[[1,1],[2,2],[3,3],[7,14],[7,7],[8,6],[9,5],[10,4],[11,11],[12,12],[13,13],[7,4,0,2],[8,7,6,0],[7,8,0,5]]
,"5aa6d8"=>[[7,0],[7,1],[7,2],[7,3]]
,a86cb9=>[[0,8],[1,8],[2,8],[3,8],[4,8],[5,8],[6,8]]
,f73a3a=>[[6,7],[12,6],[13,6],[14,6]] # Array containing color and position ,width, height of each rect without the background
]as$c=>$p)
  foreach($p as$v)
    echo"<rect x={$v[0]}1 y={$v[1]}1 width=".(8+10*$v[2])." height=".(8+10*$v[3])." fill=#$c />"; # Output the rects

HTMLスニペットのコードの結果

<svg><rect x=0 y=0 fill=#00a88e width=150 height=150 /><rect x=11 y=11 width=8 height=8 fill=#004d75 /><rect x=21 y=21 width=8 height=8 fill=#004d75 /><rect x=31 y=31 width=8 height=8 fill=#004d75 /><rect x=71 y=141 width=8 height=8 fill=#004d75 /><rect x=71 y=71 width=8 height=8 fill=#004d75 /><rect x=81 y=61 width=8 height=8 fill=#004d75 /><rect x=91 y=51 width=8 height=8 fill=#004d75 /><rect x=101 y=41 width=8 height=8 fill=#004d75 /><rect x=111 y=111 width=8 height=8 fill=#004d75 /><rect x=121 y=121 width=8 height=8 fill=#004d75 /><rect x=131 y=131 width=8 height=8 fill=#004d75 /><rect x=71 y=41 width=8 height=28 fill=#004d75 /><rect x=81 y=71 width=68 height=8 fill=#004d75 /><rect x=71 y=81 width=8 height=58 fill=#004d75 /><rect x=71 y=01 width=8 height=8 fill=#5aa6d8 /><rect x=71 y=11 width=8 height=8 fill=#5aa6d8 /><rect x=71 y=21 width=8 height=8 fill=#5aa6d8 /><rect x=71 y=31 width=8 height=8 fill=#5aa6d8 /><rect x=01 y=81 width=8 height=8 fill=#a86cb9 /><rect x=11 y=81 width=8 height=8 fill=#a86cb9 /><rect x=21 y=81 width=8 height=8 fill=#a86cb9 /><rect x=31 y=81 width=8 height=8 fill=#a86cb9 /><rect x=41 y=81 width=8 height=8 fill=#a86cb9 /><rect x=51 y=81 width=8 height=8 fill=#a86cb9 /><rect x=61 y=81 width=8 height=8 fill=#a86cb9 /><rect x=61 y=71 width=8 height=8 fill=#f73a3a /><rect x=121 y=61 width=8 height=8 fill=#f73a3a /><rect x=131 y=61 width=8 height=8 fill=#f73a3a /><rect x=141 y=61 width=8 height=8 fill=#f73a3a />

PHP + SVG、375バイト

このバイト数は、SVGを圧縮することで到達できます

<?=bzdecompress(base64_decode("QlpoNDFBWSZTWY2177gAASSZgEgA/+c/5B3gMAE5TQVtQeig0AAACU0VNMAAAEYIlEnpMKNlGahso2plh0zoaSEpIkukINaC3RWRF74IvArdRF1FcBXrSTFWXTorp2xvpb3k7FbaV62syISgiBEweHhxtWUmgWCsqqaKSEARyAOAEZJJOwYBQqTAWotSrmEXJbBRTYNhCg4RPaKOUUbAX+Fr4VfIrzzIQQkkJCWfMEEOOISTuDkOzgQzDQDNQKu/4K7AZh8L41DddV8iv2LQOBXv+iugriHAr6sK/IrUV1FeRXMV3FdhW8V9KugrmK8CvOQin+LuSKcKEhG2vfcA"));