2015 년 포틀랜드 국제 공항 은 상징적 인 카펫을 교체하기 시작했습니다 . 오래된 카펫을 가능한 한 몇 바이트로 그리는 프로그램을 작성하고 싶습니다.

카펫 :

명세서

• 다음 은 한 타일의 확장 가능한 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]{};
}

이제 단일 \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 축에 진한 파란색 선과 사각형으로 그려야합니다. 사용자 지정 대시 패턴을 사용하여 한 줄로 그립니다.

이 패턴은 [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 바이트가 줄어 들었습니다.

알븐 @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

편집 : Shaggy가 제안한대로 따옴표를 닫고>를 닫습니다. 또한 다른 17 , 24 바이트 로 이미지를 압축

수학, 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 시스템을 사용하여 색상 기능을 정의합니다. 16 진수는 RGBColor["#xyz"]여기서 각 좌표는 0에서 255까지 16 개의 동일 간격 옵션을 나타냅니다. 6 ~ 10 행의 첫 번째 명령은 지정된 5 색에 가장 가까운 바로 가기 색을 사용하여 현재 색을 전환합니다 (가장 가까운 17의 배수로 반올림 할 때 8보다 큰 값이 해제되지 않음).xyzRGBColor[{17x, 17y, 17z}]

6 번 줄은 큰 청록색 사각형을 그립니다. 줄 7은 자홍색 사각형의 선을, 줄 8은 주황색 사각형의 선과 단일 주황색 사각형을 그립니다. 선 9는 연한 파란색 사각형의 선을 그립니다. 11 번 줄은 진한 파란색 사각형의 대각선 3 개와 아래쪽의 단일 진한 파란색 사각형을 그립니다. 마지막으로 12 행은 세 개의 긴 진한 파란색 사각형을 그립니다. 출력은 다음과 같습니다.

(골프 팁 : Cuboid3d 그래픽스 객체를위한 명령 은 2d에서 잘 작동하며보다 짧습니다 Rectangle.)

파이썬, 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 바이트

이것이 코드 >조각으로 작동하려면 추가 코드 가 필요 합니다. 실제 코드는 이 바이올린 을 참조하십시오 .

[[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. 겉보기에 불필요한 것은 c 와 1 이 항상 있도록 보장하면서 r.id++사용할 수 있습니다 . 이렇게하면 엄청나게 비싼 것을 사용할 필요가 없습니다 .cloneNode()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"));