소개

갑작스럽지만, 아무런 맥락도 없고, 만델브로 집합을 그리고 싶어졌습니다.
만델브로 집합 (Wikipedia)

↓이런 녀석↓


단지 그릴 뿐이라면 재미있지 않기 때문에, Google Map처럼 스크롤하거나 확대하거나…라고 하는 것을 해 보자… 라고 생각 조금 손을 움직여 보았습니다.

먼저 완성품…

먼저 완제품을 연결해 둡니다. 목표로서는 이 링크 대상 과 같은 일을 하고 싶다는 것입니다.

기술선정

Google Map과 같은 지도의 앱을 만들고 싶다면 몇 가지 옵션이 있습니다. 이번에는 타일 이미지를 준비하고 Leaflet .

타일 ​​이미지

지도 앱에서 일반적인 것이 축척, 위도, 경도마다 지도의 이미지를 준비하고 그것을 연결하여 표시하는 방법. 국토 지리원의 사이트에서 알기 쉽게 설명되고 있으므로 자세한 것은 그쪽을 참조해 주세요.
지리원지도 | 지리원 타일 사양

상기 링크처에서 도시되어 있는 것과 같은 형태로 줌 레벨마다의 타일 분할해 보면, 이런 느낌이 됩니다.


일반적으로 타일 한 이미지의 크기는 256x256픽셀입니다. (Retina 용이라면 512x512 픽셀을 사용하는 것도있는 것 같습니다)

이 이미지를 {z}/{x}/{y}.png라는 경로에 배치합니다. (z는 줌 레벨, x, y는 줌 레벨에서의 이미지 위치)

Leaflet

자세한 내용은 Leaflet 사이트를 참조하십시오.

일본어 설명은 Wikipedia

Leaflet은 널리 이용되는 웹지도를 위해 자바스크립트 도서관 이다. 2011년에 최초로 발매되었다. 모바일 및 데스크톱 플랫폼의 대부분을 지원하며 HTML5와 CSS3를 지원합니다. OpenLayers나 Google Maps API(영어판)와 함께 가장 인기 있는 JavaScript 지도 라이브러리의 하나이며, FourSquare, Pinterest, Flickr 등의 유명한 사이트에서 사용되고 있다.

그렇게 됩니다.
위와 같은 타일 이미지를 사용하여 웹에서 지도를 표시하는 데 자주 사용됩니다. (지리원 타일을 사용하여지도보기도 간단)

지도 표시용으로 사용되는 Leaflet을 이번과 같이 지도가 아닌 이미지 표시에 사용하는 방법에 대해서는 이 기사의 계속에 기재하고 싶습니다.

만델브로 집합의 타일 이미지 만들기

에서 만델브로 집합의 타일 이미지를 만드는 것입니다.

-2-2i~2+2i의 범위를 줌 레벨 0으로 묘화 하면, -2~2의 4의 범위를 256 분할로 계산하는 것이므로, 1 픽셀당 4/256=1/64 단위로 계산한다 됩니다.
줌레벨 1이라면 타일 1장당 2의 범위를 256분할하므로 1픽셀당 2/256=1/128, 줌레벨 2라면 1/256… 갑니다.

실제로 Python으로 계산하여 PNG에 저장하는 소스는 여기. github 에도 있습니다.

mandelbrot.py

"""マンデルブロ集合を描画する."""
from argparse import ArgumentParser
from itertools import product
from os import makedirs, path

import numpy
from PIL import Image
from tqdm import tqdm


def main():
    """メイン関数."""
    parser = ArgumentParser()
    parser.add_argument('outdir')
    parser.add_argument('level', type=int)
    args = parser.parse_args()
    outpath = path.join(args.outdir, str(args.level))
    tile_num = 2 ** args.level
    tile_wid = 4.0 / tile_num

    lefttop = -2.0+2.0j
    delta = tile_wid / 256

    xylist = list(product(range(tile_num), range(tile_num)))
    for x, y in tqdm(xylist):
        img = get_image(lefttop + x * tile_wid - (y * tile_wid) * 1j, delta)
        outpath = path.join(args.outdir, str(args.level), str(x))
        makedirs(outpath, exist_ok=True)
        imgname = path.join(outpath, f'{y}.png')
        img.save(imgname)


def get_image(lefttop, delta):
    """マンデルブロ集合のpillowイメージを取得する

    Arguments:
        lefttop {complex} -- 左上
        delta {float} -- 1pxの差

    Returns:
        Image -- 作成したイメージ
    """
    imgarray = numpy.zeros((256, 256), dtype=numpy.uint8)

    for rstep, istep in product(range(256), range(256)):
        c = lefttop + rstep * delta - (istep * delta) * 1j
        z = 0
        for i in range(256):
            z = z ** 2 + c
            if abs(z) > 2:
                imgarray[istep][rstep] = 255 - i
                break

    img = Image.fromarray(imgarray)
    return img


if __name__ == "__main__":
    main()

1픽셀마다 어리석게 계산하는 처리로 하고 있습니다.

python mandelbrot.py docs/tiles/grayscale 2

그렇다면 줌 레벨 2 타일을 docs/tiles/grayscale 디렉토리 아래에 출력하는 동작이 됩니다.

마지막으로

우선은 타일 화상의 생성까지를 이 기사에 썼습니다.
그 타일 이미지를 Leaflet을 사용해 실제로 표시하는 곳에 대해서는 계속의 기사에 기재하고 싶습니다.
↓
계속 을 썼습니다.