Năm 2015 , sân bay quốc tế Portland đã bắt đầu thay thế tấm thảm biểu tượng của họ . Tôi muốn bạn viết một chương trình để vẽ tấm thảm cũ của họ thành ít byte nhất có thể.

Tấm thảm:

Thông số kỹ thuật

• Đây là một liên kết đến một hình ảnh pdf có thể mở rộng của một ô. Đầu ra của bạn phải phù hợp với kích thước tương đối và vị trí của hình ảnh đó.

• Tất cả màu sắc trong hình ảnh cuối cùng của bạn phải nằm trong 15 giá trị RGB trong hình ảnh được chỉ định. Chúng được liệt kê dưới đây để thuận tiện cho bạn.

              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
  

• Đầu ra của bạn phải có ít nhất 150x150 pixel và phải là hình vuông. Nếu bạn chọn xuất ra ở định dạng có thể mở rộng như hình ảnh vector, bạn nên khớp chính xác với hình ảnh.

• Bạn có thể xuất hình ảnh ở bất kỳ định dạng hình ảnh có sẵn nào.

• Đây là môn đánh gôn, vì vậy bạn nên cố gắng giảm thiểu số lượng byte trong mã của mình.

HTML thuần túy, 873 byte

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

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

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

Hãy thử trực tuyến!

Giải trình

Một mã tốt là một trình bao bọc:

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

Đây là một biến thể nhỏ trên trình bao bọc Tikz tiêu chuẩn ở chỗ nó cũng có đường kẻ \usepackage{xcolor}để chúng ta có thể tạo màu sắc chính xác.

Điều đầu tiên được thực hiện là line width=20,every node/.style={minimum size=20}]thiết lập các dòng và nút có kích thước phù hợp.

Khi đã xong, chúng tôi xác định màu sắc chúng tôi sẽ sử dụng cho các phần khác nhau của hình ảnh:

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

Bây giờ mọi thứ đã được thiết lập, chúng tôi vẽ nền cho bức tranh vải của chúng tôi:

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

(Tôi sẽ không bao gồm một hình ảnh về điều này bởi vì nó chỉ là một hình vuông teal, nhưng tôi sẽ bao gồm các hình ảnh của bước khác)

Nút đầu tiên chúng ta thêm là nút màu cam ở bên trái của trung tâm của khung vẽ.

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

Bây giờ chúng ta sẽ vẽ các nút màu xanh nhạt và đỏ tươi. Có 7 nút màu xanh và 4 nút màu xanh, nhưng chúng ta có thể vẽ thêm các nút sẽ được che bởi các dòng sau này để chúng ta sẽ vẽ 7 nút.

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

Bây giờ chúng ta sẽ vẽ tất cả các nhóm 3 chấm bằng một \foreachvòng lặp duy nhất

\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]{};}

Bây giờ chúng ta vẽ đúng dòng. Dòng này sẽ là một dòng đơn giản với độ lệch của .35mỗi hướng để phù hợp với kích thước của một nút.

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

Bây giờ chúng ta phải vẽ trong các đường và hình vuông màu xanh đậm trên trục x. Chúng tôi sẽ vẽ chúng với một dòng bằng cách sử dụng một mẫu gạch ngang tùy chỉnh.

Mẫu này là [dash pattern=on20off8.5on162.5off8.5]Điều này tạo ra một hình vuông với một cái đuôi dài. Dòng của chúng tôi sẽ bắt đầu từ dưới cùng và sẽ không bao gồm 2 chu kỳ của mẫu.

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

Và bây giờ chúng ta đã hoàn thành.

tệp PNG bằng chữ, 283 , 234 227 byte

EDIT : Sử dụng dịch vụ nén hình ảnh trực tuyến https://compress-or-die.com/ , điều này đã giảm thêm 7 byte.

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 byte là kích thước thực tế của tệp nhị phân rug.png. Khi được mã hóa trong base64, như được hiển thị trong khối trích dẫn ở trên, nó dài hơn một vài byte (308 byte). Đóng gói rằng trong một đoạn mã html hiển thị hình ảnh ngay lập tức sẽ thêm một vài byte:

HTML, 414 , 343 , 336 byte

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

Chỉnh sửa : Tôi đã xóa các trích dẫn và đóng> như Shaggy đề xuất. Cũng nén hình ảnh xuống 17 khác , 24 byte khác

Toán học, 285 byte

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

Dễ đọc hơn:

 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  }

Các dòng 1 Vang3 xác định tên ngắn cho các hàm, trong đó quan trọng nhất là svẽ một hình vuông có tâm ở tọa độ mà nó nhận được (thực sự gấp 3 lần tọa độ của nó, để chia tỷ lệ phù hợp). Dòng 4 xác định chức năng màu bằng hệ thống RGB "phím tắt" của Mathicala:RGBColor["#xyz"] trong đó xyzcó các chữ số thập lục phân, là viết tắt RGBColor[{17x, 17y, 17z}](để mỗi tọa độ có 16 tùy chọn cách đều nhau chạy từ 0 đến 255). Các lệnh đầu tiên trên dòng 6 Pha10 chuyển đổi màu hiện tại, sử dụng các màu phím tắt gần nhất với năm màu được chỉ định (không có giá trị nào bị tắt hơn 8 khi chúng ta làm tròn đến bội số gần nhất của 17).

Dòng 6 vẽ hình vuông teal lớn. Dòng 7 vẽ đường hình vuông màu đỏ tươi, Dòng 8 vẽ đường hình vuông màu cam và hình vuông màu cam duy nhất. Dòng 9 vẽ đường vuông màu xanh nhạt. Dòng 11 vẽ ba đường chéo của hình vuông màu xanh đậm, cũng như hình vuông màu xanh đậm duy nhất ở phía dưới. Cuối cùng, dòng 12 vẽ ba hình chữ nhật dài màu xanh đậm. Đầu ra dưới đây:

(Mẹo chơi gôn: lệnh Cuboiddành cho các đối tượng đồ họa 3d, chỉ hoạt động tốt trong 2d và ngắn hơn Rectangle.)

Con trăn, 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 byte

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

Chủ nhật đã có câu trả lời Base64 trong khi tôi vẫn đang làm việc này; nếu anh ấy chọn sử dụng nó thì tôi sẽ xóa câu trả lời này.

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

Nếu chuỗi Base64 tự nó là một câu trả lời hợp lệ thì đó chỉ là 335 byte:

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

HTML / SVG + JavaScript (ES6), 500 499 byte

Cần thêm một >thứ tự để nó hoạt động như một Đoạn trích, xem Fiddle này để biết mã thực tế.

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

Giải trình

Một mảng của mảng được ánh xạ tới chức năng a, tạo ra nhái của recttrong HTML, chèn chúng sau khi ban đầu rectvà thiết lập của họ fill, x, y, width& heightcác thuộc tính. Mỗi mảng chứa các giá trị cho các thuộc tính đó, theo thứ tự đó, với bất kỳ giá trị thiếu nào được đặt theo các tham số mặc định của a. Việc dường như không cần thiết r.id++cho phép sử dụng cloneNode()trong khi đảm bảo chỉ có 1 rectvới một idc; Điều này tiết kiệm nhu cầu sử dụng đắt tiền vô lý document.createElementNS("http://www.w3.org/2000/svg","rect").

PHP + SVG, 425 byte

<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 />";

mở rộng

<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

Kết quả của mã trong đoạn mã 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 byte

Số lượng Byte này có thể đạt được bằng cách nén SVG

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