양의 정수 N을 취하고 N × N 픽셀 이미지에 맞게 크기가 조정 된이 패턴의 원을 재생성하는 프로그램 또는 함수를 작성하십시오.

이 이미지는 N = 946에 대한 유효한 출력 예입니다.

명확하지 않은 경우 모든 작은 밝은 파란색 원의 반지름이 동일하고 네 개의 진한 파란색 원에 같은 방식으로 배치됩니다. 진한 파란색 원은 반지름의 두 배이며 큰 연청색 원에 유사하게 위치합니다.

• 두 개의 파란색 음영 대신 시각적으로 다른 두 가지 색상을 사용할 수 있습니다.

• 배경 사각형은 색상이 필요합니다.

• 앤티 앨리어싱은 선택 사항입니다.

• 이미지를 파일로 저장하거나 표시하거나 원시 이미지 데이터를 표준 출력으로 파이프하십시오.

• 모든 공통 이미지 파일 형식이 허용됩니다.

바이트 단위의 가장 짧은 코드가 이깁니다.

이 원형 패턴의 재귀 적 측면을 추가 수준으로 확장하면 브라우니 포인트. (챌린지 항목과 구분하십시오.)

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로 변환했습니다.

원 그리기 기능 또는 이와 유사한 기능은 사용되지 않았습니다. 이미지는 픽셀 단위로 계산됩니다.

3코드 중간 주위의 상수를 늘림으로써 더 높은 세분화를 쉽게 만들 수 있습니다 .

정도 4와 5 이미지는 다음과 같습니다.

코드의 전체 순서는 다음과 같습니다.

1. [-1.0, 1.0] 범위로 정규화 된 모든 픽셀의 좌표를 생성합니다.
2. 모든 픽셀을 반복합니다.
3. 세분화 정도를 반복합니다.
4. 각 세분에 대해 픽셀이 내부 / 외부에 있는지 확인하고 결과를 유지하십시오. 픽셀 좌표를 4 개의 서브-서클 중 하나를 중심으로하는 좌표계로 스케일 / 번역한다. 변환 된 좌표가 중심에 가장 가까운 것을 선택하십시오.
5. 각 정도의 이진 내부 / 외부 결과에서 픽셀이 바깥 쪽 인 1도에 해당하는 첫 번째 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.

파이썬 2 + PIL, 262 바이트

이 방법은 재귀 함수를 사용하여 각 개별 픽셀 좌표의 색상을 결정합니다 c. c(x,y,0)원을 렌더링합니다. c(x,y,1)4 개의 원을 잘라낸 원을 렌더링합니다. 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는 벡터 및 비트 맵 기능을 모두 갖춘 그래픽 파일 형식 일뿐 아니라 실제로 객체 기반 Turing-complete 프로그래밍 언어입니다. 위의 코드는 매우 간단한 재귀 함수 구현입니다. 모든 PostScript 연산자는 함수이며 코드를 압축하도록 재정의하는 것이 일반적입니다. 포스트 스크립트는 역 폴란드 표기법을 사용합니다. (일명 postfix 표기법)을 사용합니다.

포스트 스크립트 인터프리터는 일반적으로 파일 시작시 특수 주석에서 메타 데이터 (예 : 페이지 크기 및 제목)를 읽습니다. 분명히 필자는 필자의 필수 PostScript 서명 주석 %!을 제외한 모든 항목을 제거했지만 여전히 표준 PostScript 인터프리터 (예 : GhostScript 또는 Okular)에서 ok로 표시되어야합니다. ImageMagick / GraphicsMagick과 함께 제공 되는 디스플레이 유틸리티를 사용하여 볼 수도 있습니다 .

파일은 줄 바꿈으로 끝나야합니다 (내 바이트 수에 포함) 또는 인터프리터가 화를 낼 수 있습니다.

N이 코드 의 크기 매개 변수 는 512입니다. 재귀 함수의 초기 호출에 대한 매개 변수를 만들기 위해 2로 나눠지고 두 번 복제됩니다 f. 재귀 깊이는 2이며 fin 바로 직전에 제공 됩니다 512 2 div dup dup 2 f. 크기를 작게 유지하려면 출력이 흑백입니다. 음이 아닌 정수 재귀 깊이를 합리적인 수준으로 설정할 수 있지만이 버전은 균일 한 깊이에서만 잘 보입니다.

이 이미지는 벡터 그래픽이므로 사용 된 PostScript 인터프리터 / 프린터의 품질 및 설정에 따라 픽셀 화없이 모든 해상도로 표시 할 수 있습니다. (FWIW에서 PostScript는 베 지어 큐빅 커브를 사용하여 원호를 그리고 충분한 스플라인을 사용하여 오류가 장치 공간에서 항상 1 픽셀 미만인지 확인합니다). ImageMagick의 디스플레이 를 사용하여 합리적인 품질로 보려면 다음을 수행하십시오.

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

ImageMagick을 사용 convert하여 다른 형식으로 변환 하려는 경우에도 동일한 매개 변수가 좋습니다 . 예를 들어 PNG로 변환 된 위의 PostScript 코드의 640x640 버전은 다음과 같습니다.

다음은 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

또한 스크립트 상단 근처에 size 매개 변수 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

그리고 다음은 PNG 형식의 depth == 4 출력이며, 변환을 사용하여 다시 생성 하고 optipng로 최적화되었습니다 .

파이썬 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")있지만 파이썬 2에서는 작동하지 않았습니다. 누군가 파이썬 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}]

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

이 스크린 샷 에서 볼 수 있듯이 원하지 않는 가장자리가 남습니다 .

자바 스크립트 (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값 을 변경하여 더 깊은 재귀 계층을 쉽게 생성 할 수 있습니다 .

ES6 기능을 사용하고 캔버스 API fill및 clip인수의 불일치로 인해 제출은 Firefox에서만 실행됩니다 .