Viết chương trình hoặc hàm lấy số nguyên dương N và tạo lại mẫu hình tròn này được chia tỷ lệ để phù hợp với hình ảnh pixel N × N:

Hình ảnh này là một ví dụ đầu ra hợp lệ cho N = 946.

Trong trường hợp không rõ ràng, tất cả các vòng tròn nhỏ màu xanh nhạt có cùng bán kính và được định vị trong bốn vòng tròn màu xanh đậm theo cùng một cách. Các vòng tròn màu xanh đậm có bán kính gấp đôi và có vị trí tương tự trong vòng tròn lớn màu xanh nhạt.

• Bất kỳ hai màu khác biệt trực quan có thể được sử dụng thay cho hai màu xanh lam.

• Hình vuông nền cần phải được tô màu.

• Khử răng cưa là tùy chọn.

• Lưu hình ảnh vào một tập tin, hiển thị nó hoặc đưa dữ liệu hình ảnh thô vào thiết bị xuất chuẩn.

• Bất kỳ định dạng tập tin hình ảnh phổ biến được cho phép.

Mã ngắn nhất tính bằng byte thắng.

Brownie điểm nếu bạn mở rộng các khía cạnh đệ quy của mô hình vòng tròn này thành các cấp độ khác. (Giữ điều này khác biệt với mục thách thức của bạn.)

CJam, 83 byte

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

Dùng thử trực tuyến

CJam không có chức năng đầu ra hình ảnh chuyên dụng. Mã của tôi tạo ra một hình ảnh trong PBM ASCII. Để đăng, tôi đã chuyển đổi hình ảnh đó thành PNG bằng GIMP.

Lưu ý rằng không có chức năng vẽ vòng tròn, hoặc bất cứ thứ gì tương tự, nó được sử dụng. Hình ảnh được tính toán theo pixel.

Mức độ cao hơn của phân ngành có thể dễ dàng được tạo ra bằng cách tăng hằng số 3xung quanh giữa mã.

Hình ảnh độ 4 và 5 trông như thế này:

Trình tự tổng thể của mã là:

1. Tạo tọa độ của tất cả các pixel, được chuẩn hóa thành phạm vi [-1.0, 1.0].
2. Lặp lại trên tất cả các pixel.
3. Vòng lặp trên độ của phân khu.
4. Đối với mỗi phân mục, kiểm tra xem pixel có ở trong / ngoài không và giữ kết quả. Tỷ lệ / dịch tọa độ pixel cho các hệ tọa độ được căn giữa tại một trong 4 vòng tròn phụ. Chọn một trong đó tọa độ biến đổi gần trung tâm nhất.
5. Từ kết quả nhị phân bên trong / bên ngoài của mỗi độ, tìm 0 đầu tiên, tương ứng với độ đầu tiên có pixel ở bên ngoài và lấy modulo 2 của nó để xác định màu của pixel.

Giải trình:

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

Cách tiếp cận này xác định màu của từng tọa độ pixel riêng lẻ bằng cách sử dụng chức năng đệ quy c. c(x,y,0)tái hiện một vòng tròn; c(x,y,1)làm cho một vòng tròn với bốn vòng tròn cắt ra khỏi nó; c(x,y,2)làm cho hình ảnh trong OP. Bất cứ điều gì lớn hơn 2 kiếm được cho tôi điểm brownie.

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

Phiên bản không chơi gôn:

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

Tiền thưởng hình ảnh đệ quy:

PostScript, 335 byte.

%!
/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 không chỉ là một định dạng tệp đồ họa với cả khả năng của vectơ và bitmap, nó thực sự là một ngôn ngữ lập trình hoàn chỉnh dựa trên đối tượng. Đoạn mã trên là một triển khai hàm đệ quy khá đơn giản. Tất cả các toán tử PostScript đều là các hàm và thường được xác định lại chúng để ngưng tụ mã. Lưu ý rằng PostScript sử dụng ký hiệu đảo ngược tiếng Ba Lan (còn gọi là ký hiệu hậu tố).

Thông dịch viên PostScript thường đọc siêu dữ liệu (như kích thước trang và tiêu đề) từ các nhận xét đặc biệt khi bắt đầu tệp; rõ ràng là tôi đã xóa tất cả trừ nhận xét chữ ký PostScript cần thiết %!khỏi mục nhập của tôi, nhưng nó vẫn hiển thị ok trong mọi trình thông dịch PostScript tiêu chuẩn, ví dụ GhostScript hoặc Okular. Nó cũng có thể được xem bằng tiện ích hiển thị đi kèm với ImageMagick / GraphicsMagick.

Lưu ý rằng tệp sẽ kết thúc bằng một dòng mới (mà tôi đã bao gồm trong số byte của mình) hoặc trình thông dịch có thể bị đảo lộn.

Tham số kích thước Ncho mã này là 512; nó được chia cho 2 và nhân đôi hai lần để tạo tham số cho lệnh gọi ban đầu của hàm đệ quy f. Độ sâu đệ quy là 2, được đưa ra ngay trước khi fvào 512 2 div dup dup 2 f. Để giữ kích thước nhỏ, đầu ra là đen trắng. Mặc dù bạn có thể đặt bất kỳ độ sâu đệ quy số nguyên không âm hợp lý nào, phiên bản này chỉ có vẻ tốt với độ sâu chẵn.

Hình ảnh này là một đồ họa vector, vì vậy nó có thể được hiển thị ở bất kỳ độ phân giải nào mà không cần pixel hóa, tùy thuộc vào chất lượng & cài đặt của trình thông dịch / máy in PostScript được sử dụng. (FWIW, PostScript sử dụng các đường cong hình khối Bézier để vẽ các cung tròn, với đủ các spline được sử dụng để đảm bảo rằng lỗi luôn nhỏ hơn một pixel trong không gian thiết bị). Để xem nó bằng màn hình của ImageMagick với chất lượng khá cao, bạn có thể làm:

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

các tham số tương tự cũng tốt nếu bạn muốn sử dụng ImageMagick convertđể chuyển đổi nó sang định dạng khác. Ví dụ: đây là phiên bản 640x640 của mã PostScript ở trên được chuyển đổi thành PNG:

Đây là phiên bản lớn hơn một chút, xử lý màu RGB và độ sâu đệ quy kỳ lạ:

%!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ó cũng cho phép bạn đặt tham số kích thước Nvà độ sâu đệ quy dgần đỉnh của tập lệnh.

%!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

Và đây là độ sâu == 4 đầu ra ở định dạng PNG, một lần nữa được tạo bằng cách sử dụng convert (và được tối ưu hóa với optipng ):

Python 2 + PIL, 361 byte

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

Lưu hình ảnh đen trắng vào tập tin c.png:

Về cơ bản, tôi tạo ra một trong những vòng tròn có kích thước bằng một nửa trong ảnh J. Sau đó, tôi sử dụng chính nó như một mặt nạ để vẽ hình lên hình ảnh I, có vòng tròn chính.

Nó có thể được rút ngắn bằng cách sử dụng I.show()vào cuối thay vì I.save("c.png"), nhưng tôi đã không làm cho nó hoạt động trên Python 2. Nếu ai đó có thể xác nhận nó hoạt động trên Python 2 tôi sẽ thay đổi điều đó.

Chương trình sau đây tạo ra hình ảnh như trong câu hỏi (419 byte):

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 ký tự)

Vâng, rất nhiều nhân vật. Nhưng nó tĩnh và hiển thị ở bất kỳ kích thước nào, do đó mang lại cho nó một số tiền thưởng.

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

Đoạn mã có thể xem:

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>

Toán học 336 359 byte

Các đối tượng đồ họa chính là các khu vực được xác định thông qua các kết hợp logic của phương trình.

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

Chủ yếu chỉ là thử nghiệm với JavaFX.

Ảnh chụp màn hình:

Đối với các điểm brownie, thay đổi 2mã ( d(n,2,0,0)) thành một số khác.

Phiên bản cũ, 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();}}

Nó để lại một số cạnh không mong muốn như bạn có thể thấy trong ảnh chụp màn hình này .

JavaScript (ES6), 279

Tạo đệ quy các khung vẽ và thêm khung vẽ con bốn lần vào khung vẽ chính của nó. Ở lớp dưới cùng, khung vẽ là một vòng tròn đơn; khung vẽ đó được đóng dấu bốn lần lên khung vẽ chính, và sau đó khung vẽ đó được đóng dấu bốn lần lên khung vẽ chính cuối cùng.

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

Bản chạy thử:

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)

Với khoảng trắng, các bình luận và nhẹ nhàng vô duyên:

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
)

Điều này có thể dễ dàng tạo ra các lớp đệ quy sâu hơn bằng cách thay đổi giá trị ban đầu o-2hoặc bất kỳ o-zgiá trị lớn hơn .

Lưu ý rằng việc này sẽ chỉ được chạy trong Firefox, do việc sử dụng các tính năng ES6 và sự không nhất quán trong API canvas fillvà clipđối số.