เขียนโปรแกรมหรือฟังก์ชั่นที่รับจำนวนเต็มบวก N และสร้างรูปแบบวงกลมที่ปรับขนาดนี้ให้พอดีกับภาพพิกเซล N × N:

ภาพนี้เป็นตัวอย่างเอาต์พุตที่ถูกต้องสำหรับ N = 946

ในกรณีที่มันไม่ชัดเจนวงกลมสีฟ้าอ่อนทั้งหมดมีรัศมีเดียวกันและวางในวงกลมสีน้ำเงินเข้มทั้งสี่ในลักษณะเดียวกัน วงกลมสีน้ำเงินเข้มนั้นมีรัศมีเป็นสองเท่าและอยู่ในตำแหน่งที่คล้ายกันในวงกลมสีฟ้าอ่อนขนาดใหญ่

• อาจใช้สีที่ต่างกันสองสีใด ๆ แทนสีน้ำเงินสองเฉด

• สี่เหลี่ยมพื้นหลังไม่จำเป็นต้องมีสี

• ต่อต้านนามแฝงเป็นตัวเลือก

• บันทึกภาพไปยังไฟล์แสดงหรือท่อข้อมูลภาพดิบเพื่อ stdout

• อนุญาตรูปแบบไฟล์ภาพทั่วไปใด ๆ

รหัสที่สั้นที่สุดในหน่วยไบต์ชนะ

บราวนี่ให้คะแนนถ้าคุณขยายมุมมองแบบวนซ้ำของรูปแบบวงกลมนี้ไปยังระดับต่อไป (แยกความแตกต่างนี้ออกจากรายการท้าทายของคุณ)

CJam, 83 ไบต์

"P1"li___,.5f+2.@/f*1fm2m*{[3{_~mh1<[[VX][ZmqV]]_Wff*+@2f*f.+{~mh}$0=}*;0]0#2%}%]S*

ลองออนไลน์

CJam ไม่มีฟังก์ชั่นการส่งออกภาพโดยเฉพาะ รหัสของฉันสร้างภาพใน PBM ASCII สำหรับการโพสต์ฉันแปลงภาพนั้นเป็น PNG โดยใช้ GIMP

โปรดทราบว่าไม่มีฟังก์ชั่นการวาดวงกลมหรืออะไรทำนองนั้นมันใช้ ภาพนั้นคำนวณจากพิกเซลเป็นพิกเซล

องศาที่สูงขึ้นของการแบ่งสามารถสร้างได้ง่ายโดยการเพิ่มค่าคงที่3รอบ ๆ ตรงกลางของรหัส

ภาพองศา 4 และ 5 มีลักษณะดังนี้:

ลำดับโดยรวมของรหัสคือ:

1. สร้างพิกัดของพิกเซลทั้งหมดซึ่งถูกทำให้เป็นมาตรฐานในช่วง [-1.0, 1.0]
2. วนซ้ำพิกเซลทั้งหมด
3. วนซ้ำกว่าหน่วยงานย่อย
4. สำหรับแต่ละส่วนย่อยให้ตรวจสอบว่าพิกเซลอยู่ด้านใน / ด้านนอกและเก็บผลลัพธ์ไว้หรือไม่ มาตราส่วน / แปลพิกัดพิกเซลเป็นระบบพิกัดที่กึ่งกลางของหนึ่งใน 4 วงย่อย เลือกตำแหน่งที่พิกัดแปลงใกล้กับศูนย์กลางมากที่สุด
5. จากผลลัพธ์ไบนารีภายใน / ภายนอกของแต่ละระดับให้ค้นหา 0 แรกที่สอดคล้องกับระดับแรกที่พิกเซลอยู่ด้านนอกและใช้โมดูโล 2 ของมันเพื่อกำหนดสีของพิกเซล

คำอธิบาย:

"P1"    Start of header for PBM ASCII file.
li      Get input n.
__      Two copies for the width/height of the image in the PBM header.
_,      Generate [0 .. n - 1].
.5f+    Add 0.5 to each list entry, since we want to test the pixel centers.
2.@/    Calculate 2.0 / n, which is the distance between two pixels.
f*      Multiply the unscaled pixel coordinates with the pixel distance.
        We now have coordinates in the range [0.0, 2.0].
1fm     Subtract one from each, giving coordinates in range [-1.0, 1.0].
2m*     Cartesian power to calculate all y/x pairs.
{       Start loop over all pixel coordinates.
  [       Start wrapping the inside/outside results for all degrees.
  3{      Start loop over degrees.
    _~mh    Calculate distance from center.
    1<      Compare with 1. This gives inside/outside result for degree.
    [       Start building list of centers for 4 sub-circles.
    [VX]    One is at [0 1]. Note that coordinate order is y/x.
    [ZmqV]  Next one is at [sqrt(3) 0].
    ]       Wrap these two...
    _       ... and copy them.
    Wff*    Mirror all coordinates by multiplying with -1.
    +       Concatenate, giving the centers of all 4 sub-circles.
    @       Get current coordinates to top.
    2f*     Multiply them by 2. Note that the coordinates need to be scaled up by
            a factor 2 to give a circle with half the radius when we test the distance
            to the origin against 1.0.
    f.+     Add the current coordinates to the centers of all 4 sub-circles.
            For each sub-circle, this puts the current coordinates in a coordinate
            space with the origin at the center, and with a radius of 1.0
    {~mh}$  Sort them by distance to the origin...
    0=      ... and take the first one. This picks the sub-circle which has its
            center closest to the current coordinates.
            We now have one coordinate pair, for the closest sub-circle, and are
            ready for the next loop iteration, which tests the next degree of the
            subdivision.
  }*      End loop over degrees.
  ;       Have remaining coordinate pair on stack, pop it.
  0       Add a sentinel for find operation before, so that a 0 is always found.
  ]       End wrapping the inside/outside results for all degrees.
  0#      Find the first 0 (outside) degree.
  2%      Modulo 2 to determine color.
}%      End loop over all pixel coordinates.
]       Wrap the pieces of the PBM header and the pixel list.
S*      Join them with spaces, to produce the necessary spaces for the header.

Python 2 + PIL, 262 ไบต์

cวิธีการนี้จะกำหนดสีของแต่ละพิกเซลแต่ละประสานงานโดยใช้ฟังก์ชันเวียน c(x,y,0)วาทกรรมเป็นวงกลม c(x,y,1)ตัดวงกลมที่มีสี่วงกลม c(x,y,2)แสดงผลภาพใน OP อะไรที่มีขนาดใหญ่กว่า 2 ได้รับคะแนนบราวนี่ให้ฉัน

import PIL.Image as I
d=3**.5/2
c=lambda x,y,l=0:c(x,y)&~any(c((x+i)*2,(y+j)*2,l-1)for i,j in[(.5,0),(-.5,0),(0,d),(0,-d)])if l else x*x+y*y<1
z=input()
f=lambda s:2.*s/z-1
I.frombytes("L",(z,z),"".join(" ~"[c(f(i%z),f(i/z),2)]for i in range(z*z))).save("p.png")

รุ่นที่ไม่ใช่กอล์ฟ:

from PIL import Image
import math
def in_shape(x,y, level=0):
    d = math.sqrt(3)/2
    if level == 0:
        return x**2 + y**2 <= 1
    else:
        t = True
        for dx,dy in [(0.5, 0), (-0.5, 0), (0, d), (0,-d)]:
            if in_shape((x+dx)*2, (y+dy)*2, level-1):
                t = False
        return in_shape(x,y) and t

f = lambda s: ((2*s / float(size))-1)

size = input()
img = Image.new("RGB", (size, size))
pix = img.load()
for i in range(size):
    for j in range(size):
        if in_shape(f(i), f(j), 2):
            pix[i,j] = (0,0,0)
        else:
            pix[i,j] = (255,255,255)
img.save("output.png")

ภาพโบนัสพิเศษซ้ำ:

PostScript, 335 ไบต์

%!
/D{def}def/B{bind D}D/E{exch}B/A{add}D/c{3 copy 3 -1 roll A E moveto 0 360 arc}B/f{5 dict begin/d E D/r E D/y E D/x E D gsave x y r c clip d 2 mod setgray x y r c fill d 0 gt{/h 3 sqrt 2 div r mul D/r r 2 div D/d d 1 sub D x r A y r d f x r sub y r d f x y h A r d f x y h sub r d f}if grestore end}B 512 2 div dup dup 2 f showpage

PostScript ไม่ได้เป็นเพียงรูปแบบไฟล์กราฟิกที่มีความสามารถทั้งแบบเวกเตอร์และบิตแมป แต่เป็นภาษาการเขียนโปรแกรมแบบทัวริงที่สมบูรณ์แบบตามวัตถุ รหัสข้างต้นเป็นการใช้งานแบบเรียกซ้ำแบบตรงไปตรงมา ผู้ประกอบการ PostScript ทั้งหมดเป็นฟังก์ชั่นและเป็นเรื่องธรรมดาที่จะกำหนดให้เป็นรหัสย่อ โปรดทราบว่า PostScript ใช้สัญลักษณ์ Reverse Polish (สัญลักษณ์ของ postfix)

โดยทั่วไปล่าม PostScript จะอ่านข้อมูลเมตา (เช่นขนาดหน้าและชื่อเรื่อง) จากความคิดเห็นพิเศษที่จุดเริ่มต้นของไฟล์ เห็นได้ชัดว่าฉันได้ลบทั้งหมดยกเว้นความคิดเห็นลายเซ็น PostScript ที่จำเป็น%!ออกจากรายการของฉัน แต่มันควรจะแสดง ok ในล่าม PostScript มาตรฐานใด ๆ เช่น GhostScript หรือ Okular นอกจากนี้ยังสามารถดูได้โดยใช้ยูทิลิตี้การแสดงผลที่มาพร้อมกับ ImageMagick / GraphicsMagick

โปรดทราบว่าไฟล์ควรลงท้ายด้วยการขึ้นบรรทัดใหม่ (ซึ่งฉันได้รวมไว้ในการนับไบต์ของฉัน) หรือล่ามอาจจะอารมณ์เสีย

พารามิเตอร์ขนาดNสำหรับรหัสนี้คือ 512; มันถูกหารด้วย 2 และทำซ้ำสองครั้งเพื่อสร้างพารามิเตอร์สำหรับการเรียกเริ่มต้นของฟังก์ชันเวียนfเกิด ความลึก recursion เป็น 2 ซึ่งจะได้รับก่อนในf 512 2 div dup dup 2 fเพื่อให้ขนาดเล็กเอาท์พุทเป็นขาวดำ แม้ว่าคุณจะสามารถตั้งค่าความลึกการเรียกซ้ำจำนวนเต็มที่ไม่เป็นลบได้ แต่รุ่นนี้ดูดี แต่มีความลึกเท่ากัน

ภาพนี้เป็นกราฟิกแบบเวกเตอร์ดังนั้นจึงสามารถแสดงผลได้ในความละเอียดใด ๆ โดยไม่ทำให้เป็นพิกเซลขึ้นอยู่กับคุณภาพ & การตั้งค่าของล่าม PostScript / เครื่องพิมพ์ที่ใช้ (FWIW, PostScript ใช้Bézier cubic curves เพื่อวาดส่วนโค้งเป็นวงกลมโดยมีเส้นโค้งเพียงพอที่ใช้เพื่อให้แน่ใจว่าข้อผิดพลาดน้อยกว่าหนึ่งพิกเซลในพื้นที่อุปกรณ์เสมอ) วิธีดูโดยใช้จอแสดงผลของ ImageMagick คุณภาพสูงพอสมควรคุณสามารถทำได้:

display -density 300 -geometry 512x512 -page 512x512

พารามิเตอร์เดียวกันก็ดีเช่นกันหากคุณต้องการใช้ ImageMagick ในconvertการแปลงเป็นรูปแบบอื่น เช่นนี่คือรหัส PostScript ข้างต้น 640x640 ที่แปลงเป็น PNG:

นี่คือรุ่นที่ใหญ่กว่าเล็กน้อยที่จัดการสี RGB และความลึกการวนซ้ำที่แปลก:

%!PS-Adobe-3.0
/D{def}def/N 512 D/d 2 D/B{bind D}D/E{exch}B/A{add}D/c{3 copy 3 -1 roll A E moveto 0 360 arc}B/k{2 mod 0 eq{.3 .6 .9}{0 .2 .5}ifelse setrgbcolor}B d 1 A k 0 0 N N rectfill/f{5 dict begin/d E D/r E D/y E D/x E D gsave x y r c clip d k x y r c fill d 0 gt{/h 3 sqrt 2 div r mul D/r r 2 div D/d d 1 sub D x r A y r d f x r sub y r d f x y h A r d f x y h sub r d f}if grestore end}B N 2 div dup dup d f showpage

นอกจากนี้ยังช่วยให้คุณสามารถตั้งค่าพารามิเตอร์ขนาดNและความลึกของการเรียกซ้ำdใกล้ด้านบนของสคริปต์

%!PS-Adobe-3.0
%%BoundingBox: 0 0 640 640
%%Title: Circle fractal
%%Creator: PM 2Ring
%%Creationdate: (Oct 29 2015)
%%Pages: 1 1
%%EndComments

% for http://codegolf.stackexchange.com/questions/61989/circular-blues

% ----------------------------------------------------------------------

16 dict begin

%Total image width & height in points / pixels
/N 640 def

%Maximum recursion depth
/Depth 4 def

% ----------------------------------------------------------------------

%Draw a circle centred at (x,y), radius r. x y r circle -
/circle{
    3 copy      % x y r  x y r
    3 -1 roll   % x y r  y r x
    add exch    % x y r  x+r y
    moveto
    0 360 arc 
}bind def

% ----------------------------------------------------------------------

%Select 1st color if n is even, select 2nd color if n is odd. n color -
/color{
    2 mod 0 eq
    {.36 .6 .9}
    {0 .25 .5}
    ifelse
    setrgbcolor
}bind def

%Do background square
Depth 1 add color
0 0 N N rectfill

/Q 3 sqrt 2 div def

%Recursive circle pattern. x y r Depth cfrac -
/cfrac{
    5 dict begin
    /Depth exch def
    /r exch def
    /y exch def
    /x exch def

    gsave
    x y r circle clip
    Depth color
    x y r circle fill

    Depth 0 gt
    {
        /dy Q r mul def
        /r r 2 div def
        /Depth Depth 1 sub def 

        x r add y r Depth cfrac
        x r sub y r Depth cfrac
        x y dy add r Depth cfrac
        x y dy sub r Depth cfrac
    }if
    grestore
    end
}bind def

%Call it!
N 2 div dup dup Depth cfrac

showpage

% ----------------------------------------------------------------------

%%Trailer
end
%%EOF

และนี่คือความลึก == 4 เอาต์พุตในรูปแบบ PNG ซึ่งสร้างขึ้นอีกครั้งโดยใช้การแปลง (และปรับให้เหมาะสมกับoptipng ):

Python 2 + PIL, 361 ไบต์

import PIL.Image as p,PIL.ImageDraw as d
W=input()
q=W/4
h=2*q
t=3*q
e=W/8
o=int(q*3**.5)
I,J=[p.new("1",(s,s),s>h)for s in[W,h]]
Q=lambda i,x,y,s=q,c=0:d.Draw(i).ellipse((x,y,x+s,y+s),fill=c)
Q(I,0,0,W)
Q(J,0,0,h,1)
[Q(J,k,e)for k in[0,q]]
[Q(J,e,e+k/2)for k in[-o,o]]
[I.paste(1,k,J)for k in[(0,q,h,t),(h,q,4*q,t),(q,q-o,t,t-o),(q,q+o,t,t+o)]]
I.save("c.png")

บันทึกภาพเป็นขาวดำไปยังไฟล์ c.png :

Jฉันเป็นพื้นสร้างหนึ่งในครึ่งวงกลมขนาดในภาพ จากนั้นฉันใช้ตัวเองเป็นหน้ากากในการวาดรูปร่างลงบนภาพIซึ่งมีวงกลมหลัก

มันอาจจะสั้นลงโดยใช้ I.show()ในตอนท้ายแทนที่จะเป็นI.save("c.png")แต่ฉันไม่ได้ทำงานกับ Python 2 ถ้ามีคนสามารถยืนยันได้ว่ามันทำงานบน Python 2 ฉันจะเปลี่ยนเป็นอย่างนั้น

โปรแกรมต่อไปนี้สร้างภาพตามคำถาม (419 ไบต์):

import PIL.Image as p,PIL.ImageDraw as d
W=int(input())
q=W/4
h=2*q
t=3*q
e=W/8
o=int(q*3**.5)
I,J=[p.new(["1","RGB"][s>h],(s,s),s>h and"rgb(13,55,125)")for s in[W,h]]
Q=lambda i,x,y,s=q,c=0:d.Draw(i).ellipse((x,y,x+s,y+s),fill=c)
Q(I,0,0,W,"rgb(97,140,224)")
Q(J,0,0,h,1)
[Q(J,k,e)for k in[0,q]]
[Q(J,e,e+k/2)for k in[-o,o]]
[I.paste("rgb(13,55,125)",k,J)for k in[(0,q,h,t),(h,q,4*q,t),(q,q-o,t,t-o),(q,q+o,t,t+o)]]
I.save("c.png")

SVG (1249 ตัวอักษร)

ใช่ตัวละครมากมาย แต่มันคงที่และแสดงผลในทุกขนาดดังนั้นมันจึงให้โบนัส

<svg xmlns="http://www.w3.org/2000/svg"><path d="M15,33c-2.5,0-4.6,1.9-4.9,4.3c2.8,1.6,6.1,2.6,9.5,2.6c0.3-0.6,0.4-1.3,0.4-2C20,35.2,17.8,33,15,33zM15,7c2.8,0,5-2.2,5-5c0-0.7-0.1-1.4-0.4-2c-3.5,0.1-6.7,1-9.5,2.6C10.4,5.1,12.5,7,15,7zM25,33c-2.8,0-5,2.2-5,5c0,0.7,0.1,1.4,0.4,2c3.5-0.1,6.7-1,9.5-2.6C29.6,34.9,27.5,33,25,33zM25,7c2.5,0,4.6-1.9,4.9-4.3C27.1,1,23.9,0.1,20.4,0C20.1,0.6,20,1.3,20,2C20,4.7,22.2,7,25,7zM35,28.7C34.8,26,32.6,24,30,24s-4.8,2.1-5,4.7c-3-1.7-5-5-5-8.7c0,3.7-2,6.9-5,8.7C14.8,26,12.6,24,10,24S5.2,26,5,28.7c-3-1.7-5-5-5-8.7c0,7.4,4,13.9,10,17.3c0.1-1.2,0.4-2.4,0.8-3.4c0.9-1.9,2.3-3.5,4.1-4.5c0,0,0,0,0.1,0c0.2,2.6,2.3,4.7,5,4.7s4.8-2.1,5-4.7c0,0,0,0,0.1,0c1.8,1,3.2,2.6,4.1,4.5c0.5,1.1,0.8,2.2,0.8,3.4c6-3.5,10-9.9,10-17.3C40,23.7,38,26.9,35,28.7zM5,11.3c0.2,2.6,2.3,4.7,5,4.7s4.8-2.1,5-4.7c3,1.7,5,5,5,8.7c0-3.7,2-6.9,5-8.7c0.2,2.6,2.3,4.7,5,4.7s4.8-2.1,5-4.7c3,1.7,5,5,5,8.7c0-7.4-4-13.9-10-17.3c-0.1,1.2-0.4,2.4-0.8,3.4C28.3,8,26.8,9.6,25,10.6c0,0,0,0-0.1,0C24.8,8,22.6,6,20,6s-4.8,2.1-5,4.7c0,0,0,0-0.1,0c-1.8-1-3.2-2.6-4.1-4.5C10.4,5,10.1,3.9,10,2.6C4,6.1,0,12.6,0,20C0,16.3,2,13,5,11.3z"/><circle cx="15" cy="20" r="5"/><circle cx="5" cy="20" r="5"/><circle cx="35" cy="20" r="5"/><circle cx="25" cy="20" r="5"/></svg>

ตัวอย่างข้อมูลที่ดูได้:

svg { fill: #9FD7FF; background: #2176AA; }

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 40 40">
  <path d="M15,33c-2.5,0-4.6,1.9-4.9,4.3c2.8,1.6,6.1,2.6,9.5,2.6c0.3-0.6,0.4-1.3,0.4-2C20,35.2,17.8,33,15,33zM15,7c2.8,0,5-2.2,5-5c0-0.7-0.1-1.4-0.4-2c-3.5,0.1-6.7,1-9.5,2.6C10.4,5.1,12.5,7,15,7zM25,33c-2.8,0-5,2.2-5,5c0,0.7,0.1,1.4,0.4,2c3.5-0.1,6.7-1,9.5-2.6C29.6,34.9,27.5,33,25,33zM25,7c2.5,0,4.6-1.9,4.9-4.3C27.1,1,23.9,0.1,20.4,0C20.1,0.6,20,1.3,20,2C20,4.7,22.2,7,25,7zM35,28.7C34.8,26,32.6,24,30,24s-4.8,2.1-5,4.7c-3-1.7-5-5-5-8.7c0,3.7-2,6.9-5,8.7C14.8,26,12.6,24,10,24S5.2,26,5,28.7c-3-1.7-5-5-5-8.7c0,7.4,4,13.9,10,17.3c0.1-1.2,0.4-2.4,0.8-3.4c0.9-1.9,2.3-3.5,4.1-4.5c0,0,0,0,0.1,0c0.2,2.6,2.3,4.7,5,4.7s4.8-2.1,5-4.7c0,0,0,0,0.1,0c1.8,1,3.2,2.6,4.1,4.5c0.5,1.1,0.8,2.2,0.8,3.4c6-3.5,10-9.9,10-17.3C40,23.7,38,26.9,35,28.7zM5,11.3c0.2,2.6,2.3,4.7,5,4.7s4.8-2.1,5-4.7c3,1.7,5,5,5,8.7c0-3.7,2-6.9,5-8.7c0.2,2.6,2.3,4.7,5,4.7s4.8-2.1,5-4.7c3,1.7,5,5,5,8.7c0-7.4-4-13.9-10-17.3c-0.1,1.2-0.4,2.4-0.8,3.4C28.3,8,26.8,9.6,25,10.6c0,0,0,0-0.1,0C24.8,8,22.6,6,20,6s-4.8,2.1-5,4.7c0,0,0,0-0.1,0c-1.8-1-3.2-2.6-4.1-4.5C10.4,5,10.1,3.9,10,2.6C4,6.1,0,12.6,0,20C0,16.3,2,13,5,11.3z"/>
  <circle cx="15" cy="20" r="5"/>
  <circle cx="5" cy="20" r="5"/>
  <circle cx="35" cy="20" r="5"/>
  <circle cx="25" cy="20" r="5"/>
</svg>

Mathematica 336 359 ไบต์

วัตถุกราฟิกหลักเป็นพื้นที่ที่กำหนดผ่านการรวมกันของสมการเชิงตรรกะ

r=Red;i=ImplicitRegion;m=i[-2<x<2&&-2<y<2,{x,y}];n=Input[];
t[a_,b_,c_]:=i[(x+a)^2+(y+b)^2<=c,{x,y}];
a_~f~b_:={t[a,b,1],t[-.5+a,b,1/4],t[.5+a,b,1/4],t[a,b-.865,1/4],t[a,b+.865, 1/4]}
g@d_:=RegionIntersection[m,BooleanRegion[#1&&!#2&&!#3&&!#4&&!#5&,d]]
RegionPlot[{m,t[0,0,4],g@f[1,0],g@f[-1,0],g@f[0,1.75], 
g@f[0, -1.75]},ImageSize->n,PlotStyle->{r,Blue,r,r,r,r}]

Java, 550

import javafx.application.*;import javafx.scene.*;import javafx.scene.layout.*;import javafx.scene.shape.*;import javafx.stage.*;public
class C extends Application{static long n;Shape d(float m,float k,float x,float y){float h=m/2;Shape
s=new Circle(x+h,y+h,h);return k>0?s.subtract(s,s.union(s.union(s.union(d(h,k-1,x,y+m/4),d(h,k-1,x+h,y+m/4)),d(h,k-1,x+m/4,y-m*.183f)),d(h,k-1,x+m/4,y+m*.683f))):s;}public
void start(Stage s){s.setScene(new Scene(new Pane(d(n,2,0,0))));s.show();}public
static void main(String[]a){n=Long.valueOf(a[0]);launch();}}

ส่วนใหญ่เป็นเพียงการทดลองกับ JavaFX

ภาพหน้าจอ:

สำหรับคะแนนบราวนี่ให้เปลี่ยน2รหัส ( d(n,2,0,0)) เป็นตัวเลขอื่น

รุ่นเก่า 810

import javafx.application.*;import javafx.scene.*;import javafx.scene.canvas.*;import javafx.scene.effect.*;import javafx.scene.layout.*;import javafx.scene.paint.*;import javafx.stage.*;public
class C extends Application{static long n;Canvas c;GraphicsContext g;void
d(float m,float k,float x,float y){if(k>0){float
h=m/2;g.save();g.beginPath();g.arc(x+h,y+h,h,h,0,360);g.clip();g.fillRect(x,y,m,m);d(h,k-1,x,y+m/4);d(h,k-1,x+h,y+m/4);d(h,k-1,x+m/4,y-m*.183f);d(h,k-1,x+m/4,y+m*.683f);g.restore();}}public
void start(Stage s){c=new Canvas(n,n);g=c.getGraphicsContext2D();g.setGlobalBlendMode(BlendMode.DIFFERENCE);g.setFill(Color.TAN);g.fillRect(0,0,n,n);d(n,3,0,0);Pane
p=new Pane();p.getChildren().add(c);s.setScene(new Scene(p));s.show();}public
static void main(String[]a){n=Long.valueOf(a[0]);launch();}}

มันออกจากขอบที่ไม่พึงประสงค์บางอย่างที่คุณเห็นในภาพหน้าจอนี้

JavaScript (ES6), 279

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

(n,o=0)=>(r=o-2&&f(n/2,o+1),c=document.createElement`canvas`,X=c.getContext`2d`,d=(x,Q)=>(X.drawImage(r,x,k+Q*k*Math.sqrt(3)),d),c.width=c.height=n,m=n/2,k=n/4,X.fillStyle=o%2||"red",X.fill(X.clip(X.arc(m,m,m,0,7))),r&&d(0,0)(m,0)(k,-1)(k,1),o?c:location=c.toDataURL`image/jpeg`)

การสาธิตที่รันได้:

f = function (n) {var o = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];return r = o - 2 && f(n / 2, o + 1), c = document.createElement("canvas"), X = c.getContext("2d"), d = function (x, y) {return X.drawImage(r, x, y || k), d;}, c.width = c.height = n, m = n / 2, k = n / 4, q = k * Math.sqrt(3), X.fillStyle = o % 2 || "red", X.arc(m, m, m, 0, 7),X.clip(),X.fill(), r && d(0)(m)(k, k - q)(k, k + q), o || (location = c.toDataURL("image/jpeg")), c;};f(400)

ด้วยพื้นที่ว่างความคิดเห็นและไม่รุนแรงนัก:

f=(n,o=0)=>(
    // recursively create another canvas if we're not at the deepest layer
    var r;
    if(o < 2) { r = f(n/2,o+1); }

    // create this canvas
    c=document.createElement("canvas"),
    c.width=c.height=n,
    X=c.getContext("2d"),

    // helpful postions
    m=n/2, k=n/4, q=k*Math.sqrt(3),

    // draw a circle and clip future draws within this circle
    // either fills red (the shortest color name) or a non-color that defaults to black
    X.fillStyle= o%2 || "red",
    X.arc(m,m,m,0,7),
    X.clip(),
    X.fill(),

    // define a chainable `drawImage` alias (the `d` function returns itself)
    d=(x,y)=>(X.drawImage(r,x,y),d)

    // if we have a recursive canvas, draw it four times by chaining `d`
    if(r) { d(0,k)(m,k)(k,k-q)(k,k+q); }

    // if this is the top-layer (o==0), show the final jpeg
    if(o == 0) { location = c.toDataURL("image/jpeg"); }

    // return this canvas, to be used recursively
    c
)

สิ่งนี้สามารถสร้างชั้นของการเรียกซ้ำได้ง่ายขึ้นโดยการเปลี่ยนค่าเริ่มต้นo-2หรือo-zค่าที่มากขึ้น

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