ปูพรมที่สนามบิน


17

ในปี 2015 สนามบินนานาชาติพอร์ตแลนด์เริ่มเปลี่ยนพรมที่โดดเด่นของพวกเขา ฉันต้องการให้คุณเขียนโปรแกรมเพื่อวาดพรมเก่าแก่ของพวกเขาในเวลาไม่กี่ไบต์เท่าที่จะทำได้

พรม:

หนึ่งแผ่น

ข้อมูลจำเพาะ

  • ที่นี่คือลิงค์ไปยังภาพ PDF ที่ปรับขนาดได้ของไทล์เดียว ผลลัพธ์ของคุณควรตรงกับขนาดและตำแหน่งของภาพนั้น

  • สีทั้งหมดในภาพสุดท้ายของคุณควรอยู่ภายใน 15 ของทุกค่า RGB ในภาพที่ระบุ เหล่านี้มีการระบุไว้ด้านล่างเพื่อความสะดวกของคุณ

                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 พิกเซลและควรเป็นสี่เหลี่ยมจัตุรัส หากคุณเลือกที่จะส่งออกในรูปแบบที่ปรับขนาดได้เช่นภาพเวกเตอร์คุณควรจับคู่ภาพให้ตรงกัน

  • คุณสามารถส่งออกภาพในรูปแบบภาพใด ๆ ที่มีอยู่ก่อนหน้า

  • นี่คือดังนั้นคุณควรตั้งเป้าที่จะลดจำนวนไบต์ในรหัสของคุณ



@Hahaholic ฉันไม่คิดว่าเป็นเช่นนั้นฉันถูกสุ่มบนวิกิพีเดียและฉันตีหน้า อย่างไรก็ตามฉันอาจเคยเห็นมันใน reddit ก่อนมือ
โพสต์ Rock Garf Hunter

1
มันต้องเป็นภาพสองมิติหรือเป็นแบบที่มองจากมุมที่เฉพาะเจาะจงหรือไม่?
devRicher

คำตอบ:


9

เพียว 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>


9

ติค, 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]{};
}

เส้นทางคดเคี้ยว

ตอนนี้เราจะวาดกลุ่มทั้งหมดของ 3 จุดโดยใช้\foreachลูปเดียว

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

สุดท้าย

และตอนนี้เราเสร็จแล้ว


คุณสามารถใช้ตัวเลขเพื่อแสดงสี RGB ใน Tikz แทนการพิมพ์ออฟเซ็ต RGB ได้หรือไม่?
Yytsi

@ TuukkaX ฉันคิดอย่างนั้น แต่ฉันไม่สามารถคิดออก หากคุณรู้ว่าฉันจะรู้สึกขอบคุณที่ได้รู้แจ้ง
โพสต์ Rock Garf Hunter

ฉันไม่รู้จัก Tikz เลยดังนั้นไม่สามารถช่วยได้ :( อย่างไรก็ตามถ้าฉันเข้าใจกฎของคุณเกี่ยวกับ "ภายใน 15 ของทุก ๆ RGB" คุณสามารถเปลี่ยน 108 เป็น 99 ได้เนื่องจากข้อผิดพลาดต่ำกว่า 15
Yytsi

@ TuukkaX ขอบคุณ!
โพสต์ Rock Garf Hunter

การใช้\definecolorกับHTMLข้อกำหนด (แทนRGB) ช่วยให้คุณระบุสีโดยใช้เลขฐานสิบหก
Julian Wolf

6

ไฟล์ 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=

carpet3.png

ไบต์ 227 มีขนาดที่แท้จริงของไฟล์ binary 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 ไบต์


1
ฉันไม่คิดว่าไฟล์ตัวอักษรถือว่าเป็นภาษาการเขียนโปรแกรมที่ถูกต้องที่นี่ในรหัสกอล์ฟ มันขึ้นอยู่กับ OP ไม่ว่าจะถูกต้องหรือไม่
สหาย SparklePony

1
คุณอาจจะถูกต้อง แต่แม้กระทั่งคำอธิบายของแท็ก kolmogorov-complex บนcodegolf.stackexchange.com/tags/kolmogorov-complexity/infoระบุถึงสตริงที่ซับซ้อนซึ่งการแสดงที่สั้นที่สุดอาจจะพิมพ์ได้อย่างแท้จริง หากสตริงตัวอักษรถูกพิจารณาว่าเป็น "วิธีแก้ปัญหากรณีที่แย่ที่สุด" สำหรับโค้ดเบสกอล์ฟไฟล์ภาพตัวอักษรอาจถูกพิจารณาว่าเป็น "โซลูชันเคสที่แย่ที่สุด" กับโค้ดเบสกอล์ฟ แก้ไข: ฉันโพสต์ไฟล์เพียงเพราะฉันแปลกใจว่าจริง ๆ แล้วมันสั้นกว่าโซลูชั่นอื่น ๆ ที่โพสต์ก่อนหน้านี้ (หลังจากนำชิ้นส่วนเวลาที่ไม่จำเป็นออกจากไฟล์)
วันอาทิตย์ที่

ถ้าถึงฉันแล้วฉันก็สบายดี
โพสต์ร็อค Garf Hunter

2
ด้วยการบีบอัดเล็กน้อยคุณสามารถทำให้มันลดลงได้ นอกจากนี้ยังวางเครื่องหมายคำพูดต่อท้ายและปิด= >นี่คือรุ่น 366 ไบต์ที่ฉันทำงานก่อนที่ฉันจะเห็นคำตอบของคุณ:<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYBAMAAADq7D0SAAAAD1BMVEUAqI4ATXWobLlaptj3OjrqGXAuAAAAp0lEQVRo3u3YQQqFMAxFUbeQLbiFbsH9r8k3y8CmTiKm7b2Dwv/CgUAD4jF3TYGBRdgKmRqPCQa28gaMZ20KDGz5DQhnbQoMTG2wAcPR/ScY2HeYVw4zBQYWYDUvbRLWFS/lBxhYhM3bpXzMcWBgEVa5U70cpsDAnkf1FxcwMDAwMLBczP8DAwuwmpc2HzMFBhY8qHlp8zFTYGCdyn8GKrhOYBtjv3QDvf+Zic+8bOsAAAAASUVORK5CYII
Shaggy

1
@ComradeSparklePony โดยทั่วไปเราไม่ต้องการคำตอบด้านการเขียนโปรแกรมภาษาสำหรับคำถามเช่นนี้: codegolf.meta.stackexchange.com/questions/3610/…
isaacg

5

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 กำหนดฟังก์ชั่นสีโดยใช้ระบบ RGB "ทางลัด" ของ Mathematica RGBColor["#xyz"]ซึ่งxyzเป็นตัวเลขฐานสิบหกRGBColor[{17x, 17y, 17z}] (เพื่อให้แต่ละพิกัดมี 16 ตัวเลือกเว้นระยะเท่ากันเรียกใช้จาก 0 ถึง 255) คำสั่งแรกบนบรรทัดที่ 6-10 สลับสีปัจจุบันโดยใช้สีช็อตคัตที่ใกล้เคียงที่สุดกับห้าสีที่กำหนดไว้ (ไม่มีค่าใดถูกปิดมากกว่า 8 เมื่อเราปัดเศษเป็นหลายค่าที่ใกล้ที่สุด 17)

บรรทัดที่ 6 วาดสี่เหลี่ยมจัตุรัสขนาดใหญ่ เส้นที่ 7 ลากเส้นสี่เหลี่ยมสีม่วงแดง, เส้นที่ 8 ลากเส้นสี่เหลี่ยมสีส้มและสี่เหลี่ยมสีส้มเดี่ยว บรรทัดที่ 9 วาดเส้นของสี่เหลี่ยมสีฟ้าอ่อน บรรทัดที่ 11 วาดเส้นทแยงมุมสามเส้นของสี่เหลี่ยมสีน้ำเงินเข้มรวมถึงสี่เหลี่ยมสีน้ำเงินเข้มเดี่ยวที่ด้านล่าง ในที่สุดเส้น 12 จะลากสี่เหลี่ยมสีน้ำเงินเข้มยาวสามเส้น เอาท์พุทอยู่ด้านล่าง:

พอร์ตแลนด์

(เคล็ดลับกอล์ฟ: คำสั่งCuboidซึ่งมีไว้สำหรับวัตถุกราฟิก 3 มิติทำงานได้ดีใน 2d และสั้นกว่าRectangle)


2

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

1

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"


1

HTML, 366 ไบต์

วันอาทิตย์ได้รับคำตอบให้กับ Base64 ขณะที่ฉันยังทำงานกับสิ่งนี้อยู่ ถ้าเขาเลือกที่จะใช้มันฉันจะลบคำตอบนี้

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

หากสตริง Base64 เป็นของตัวเองเป็นคำตอบที่ถูกต้องนั่นเป็นเพียง 335 ไบต์:

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

1

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แต่ละอาร์เรย์มีค่าสำหรับแอตทริบิวต์เหล่านั้นอยู่ในลำดับที่มีค่าที่ขาดหายไปจะถูกกำหนดโดยค่าเริ่มต้นของ ดูเหมือนไม่จำเป็นr.id++ช่วยให้การใช้งานcloneNode()ในขณะที่มั่นใจว่ามีเพียง 1 rectกับidc; document.createElementNS("http://www.w3.org/2000/svg","rect")นี้จะช่วยประหยัดจำเป็นที่จะต้องใช้ราคาแพงขัน


1

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"));
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.