manetta
/
prototypes
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2fc85c67f9'
${ noResults }
prototypes/patterns/generating-maps.ipynb

653 lines
80 KiB
Plaintext
Raw Normal View History Unescape Escape

adding patterns notebooks and web-to-print (both wip)
2 years ago
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Generating maps"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Stepping away from random.choice(): writing an algorithm to create ASCII tile maps"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"In order to generate patterns in a non-random way, we might want to move around through our canvas in a **non-linear way**, to make the patterns a bit more complex.\n",
"\n",
"### moving through the canvas\n",
"\n",
"Each character on our \"canvas\" has a specific position and thus is connected to a `x` and `y` coordinate.\n",
"\n",
"How can we do that?\n",
"\n",
"We will use a `list-of-lists`... or in other words: \n",
"\n",
"we make **one big list**, that contains a # of **rows** (**the `y` axis, or *height* of the canvas**), with a # of **characters** (**the `x` axis, or *width* of the canvas**). \n",
"\n",
"To make this `list-of-lists`, we will use a `loop-in-a-loop`:"
]
},
{
"cell_type": "code",
"execution_count": 72,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]]\n"
]
}
],
"source": [
"width = 10\n",
"height = 10\n",
"\n",
"canvas = []\n",
"\n",
"for y in range(height):\n",
" \n",
" row = []\n",
"\n",
" for x in range(width):\n",
" row.append(x)\n",
" \n",
" canvas.append(row)\n",
" \n",
"print(canvas)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Let's print the canvas row for row, to make it easier to see it as a x-y canvas:"
]
},
{
"cell_type": "code",
"execution_count": 73,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n",
"[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n",
"[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n",
"[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n",
"[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n",
"[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n",
"[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n",
"[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n",
"[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n",
"[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n"
]
}
],
"source": [
"for row in canvas:\n",
" print(row)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"\n",
"And let's bring it back into an plain text pattern: turn this `list-of-lists` into a `multiline string`:"
]
},
{
"cell_type": "code",
"execution_count": 74,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"0123456789\n",
"0123456789\n",
"0123456789\n",
"0123456789\n",
"0123456789\n",
"0123456789\n",
"0123456789\n",
"0123456789\n",
"0123456789\n",
"0123456789\n",
"\n"
]
}
],
"source": [
"# canvas is our list-of-lists\n",
"# canvas_string is the plain text version that we want to create\n",
"\n",
"canvas_string = ''\n",
"\n",
"for row in canvas:\n",
" row_string = ''\n",
" for character in row:\n",
" row_string += str(character)\n",
" canvas_string += row_string + \"\\n\"\n",
"\n",
"print(canvas_string)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Let's save this as a function that we can reuse later!"
]
},
{
"cell_type": "code",
"execution_count": 75,
"metadata": {},
"outputs": [],
"source": [
"def plain(canvas):\n",
" canvas_string = ''\n",
" for row in canvas:\n",
" row_string = \"\".join(row)\n",
" canvas_string += row_string + \"\\n\"\n",
"\n",
" return canvas_string"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Now, we can work with the `x` and `y` axes of the canvas, by *slicing* the `canvas`:"
]
},
{
"cell_type": "code",
"execution_count": 76,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"0"
]
},
"execution_count": 76,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"canvas[0][0]"
]
},
{
"cell_type": "code",
"execution_count": 77,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"9"
]
},
"execution_count": 77,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"canvas[1][9]"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### My first algorithm"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Now let's write a short algorithm, to generate a map.\n",
"\n",
"We will start by writing the **rules** of our algorithm.\n",
"\n",
"Let's first think of these rules without writing them in code. \n",
"\n",
"How would you like to generate a pattern?\n",
"\n",
"For example: \n",
"\n",
"**Characters**\n",
"\n",
"* `.` is used as background\n",
"* `░` as light shade\n",
"* `▒` as darker shade\n",
"\n",
"**Rules** \n",
"\n",
"* `░` always appears in horizontal ánd vertical blocks of 3\n",
"\n",
"```\n",
".....\n",
"..░..\n",
".░░░.\n",
"..░..\n",
".....\n",
"```\n",
"\n",
"* `▒` surrounds the blobs of light shade on the left side of each light shadow \n",
"\n",
"```\n",
".....\n",
".▒░..\n",
"▒░░░.\n",
".▒░..\n",
".....\n",
"```\n",
"\n",
"Let's try this!"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"First we create a new canvas and fill it with `.`'s."
]
},
{
"cell_type": "code",
"execution_count": 78,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"....................................................................................................\n",
"\n"
]
}
],
"source": [
"width = 100\n",
"height = 25\n",
"\n",
"canvas = []\n",
"for y in range(height):\n",
" row = []\n",
" for x in range(width):\n",
" row.append('.')\n",
" canvas.append(row)\n",
"\n",
"print(plain(canvas))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Now let's add the light shade..."
]
},
{
"cell_type": "code",
"execution_count": 79,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"░.░.................░..........░............................░.........░░░.........░.................\n",
"░░░░...............░░░........░░░..........................░░░..░......░.......░.░░░................\n",
"░.░.......░.........░..........░...........░................░..░░░............░░░.░.................\n",
".........░░░........░.....................░░░..░................░..............░.............░......\n",
"..........░........░░░.....................░..░░░.............................░.............░░░.....\n",
"...................░░░....░....................░.............................░░░.............░......\n",
"............░.......░....░░░.................░..░..............░...░.........░░░....................\n",
"...░.......░░░............░.....░...........░░░░░░............░░░.░░░.........░.........░...........\n",
"..░░░...░.░.░.......░..........░░░...........░..░....░....░....░...░....░..............░░░..........\n",
"...░...░░░░░.......░░░..........░...................░░░..░░░...........░░░..............░...........\n",
"........░░░░........░░░.......░.....................░░░...░.............░............░.░░░..........\n",
".......░░░░░.........░.......░░░....░................░..░...........................░░░.░...........\n",
"........░.░░.................░░░...░░░..░...░..........░░░........░................░░░..........░...\n",
".....░....░░░.............░...░.....░..░░░.░░░..........░......░.░░░................░..........░░░..\n",
"....░░░....░.............░░░............░.░.░............░....░░░.░......░.░....................░...\n",
"....░░......░.............░...░.....░....░░░............░░░....░░.......░░░░░.......................\n",
"...░░░.....░░░.........░..░..░░░...░░░....░..............░.....░░░.......░.░........................\n",
"....░.......░.........░░░░░░..░.....░....................░......░........░..........................\n",
".......................░..░..░..........................░░░░.░..........░░░.................░.......\n",
"............................░░░░.........................░░░░░░..........░.................░░░.....░\n",
"....................░........░░░░..........................░.░..............................░.....░░\n",
".....░......░......░░░.........░..................................................................░░\n",
"..░.░░░....░░░░.....░...........................................░...............................░..░\n",
".░░░.░.....░░░░░...................░...........................░░░.............................░░░..\n",
"..░░░.......░░░░..................░░░...........................░...............................░...\n",
"\n"
]
}
],
"source": [
"from random import randrange\n",
"\n",
"light_shade = '░'\n",
"\n",
"for y in range(height):\n",
" for x in range(width):\n",
" \n",
" # To work with a degree of chance, \n",
" # we \"roll the dice\" and only add a ░\n",
" # when the number is lower then 5\n",
" random_number = randrange(0, 100, 1)\n",
" if random_number < 3: \n",
" \n",
" # If so, then we add a ░\n",
" canvas[y][x] = light_shade\n",
" \n",
" # Check is there is a character on the left, right, \n",
" # top and bottom AT ALL, before adding them...\n",
" if x - 1 >= 0:\n",
" canvas[y][x - 1] = light_shade\n",
" if x + 1 < width:\n",
" canvas[y][x + 1] = light_shade\n",
" if y - 1 >= 0:\n",
" canvas[y - 1][x] = light_shade\n",
" if y + 1 < height:\n",
" canvas[y + 1][x] = light_shade\n",
" \n",
" else:\n",
" continue\n",
" \n",
"print(plain(canvas))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Now let's add the darker shade..."
]
},
{
"cell_type": "code",
"execution_count": 80,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"░▒░................▒░.........▒░...........................▒░........▒░░░........▒░.................\n",
"░░░░..............▒░░░.......▒░░░.........................▒░░░.▒░.....▒░......▒░▒░░░................\n",
"░▒░......▒░........▒░.........▒░..........▒░...............▒░.▒░░░...........▒░░░▒░.................\n",
"........▒░░░.......▒░....................▒░░░.▒░...............▒░.............▒░............▒░......\n",
".........▒░.......▒░░░....................▒░.▒░░░............................▒░............▒░░░.....\n",
"..................▒░░░...▒░...................▒░............................▒░░░............▒░......\n",
"...........▒░......▒░...▒░░░................▒░.▒░.............▒░..▒░........▒░░░....................\n",
"..▒░......▒░░░...........▒░....▒░..........▒░░░░░░...........▒░░░▒░░░........▒░........▒░...........\n",
".▒░░░..▒░▒░▒░......▒░.........▒░░░..........▒░.▒░...▒░...▒░...▒░..▒░...▒░.............▒░░░..........\n",
"..▒░..▒░░░░░......▒░░░.........▒░..................▒░░░.▒░░░..........▒░░░.............▒░...........\n",
".......▒░░░░.......▒░░░......▒░....................▒░░░..▒░............▒░...........▒░▒░░░..........\n",
"......▒░░░░░........▒░......▒░░░...▒░...............▒░.▒░..........................▒░░░▒░...........\n",
".......▒░▒░░................▒░░░..▒░░░.▒░..▒░.........▒░░░.......▒░...............▒░░░.........▒░...\n",
"....▒░...▒░░░............▒░..▒░....▒░.▒░░░▒░░░.........▒░.....▒░▒░░░...............▒░.........▒░░░..\n",
"...▒░░░...▒░............▒░░░...........▒░▒░▒░...........▒░...▒░░░▒░.....▒░▒░...................▒░...\n",
"...▒░░.....▒░............▒░..▒░....▒░...▒░░░...........▒░░░...▒░░......▒░░░░░.......................\n",
"..▒░░░....▒░░░........▒░.▒░.▒░░░..▒░░░...▒░.............▒░....▒░░░......▒░▒░........................\n",
"...▒░......▒░........▒░░░░░░.▒░....▒░...................▒░.....▒░.......▒░..........................\n",
"......................▒░.▒░.▒░.........................▒░░░░▒░.........▒░░░................▒░.......\n",
"...........................▒░░░░........................▒░░░░░░.........▒░................▒░░░....▒░\n",
"...................▒░.......▒░░░░.........................▒░▒░.............................▒░....▒░░\n",
"....▒░.....▒░.....▒░░░........▒░.................................................................▒░░\n",
".▒░▒░░░...▒░░░░....▒░..........................................▒░..............................▒░.▒░\n",
"▒░░░▒░....▒░░░░░..................▒░..........................▒░░░............................▒░░░..\n",
".▒░░░......▒░░░░.................▒░░░..........................▒░..............................▒░...\n",
"\n"
]
}
],
"source": [
"from random import randrange\n",
"\n",
"light_shade = '░'\n",
"darker_shade = '▒'\n",
"\n",
"for y in range(height):\n",
" for x in range(width):\n",
" \n",
" # First we check if the current character is a light shade\n",
" if canvas[y][x] == light_shade:\n",
" \n",
" # If that is the case, we need to look around, to see if we need to place a shade on the left, right, top or bottom\n",
" \n",
" # Check is there is a left character AT ALL\n",
" if x - 1 >= 0:\n",
" # If so, then we check if the left character is a '.'\n",
" if canvas[y][x - 1] == '.':\n",
" # If so, then we replace it with a dark shade\n",
" canvas[y][x - 1] = '▒'\n",
" \n",
" else:\n",
" continue\n",
" \n",
"print(plain(canvas))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Make your own tiles! "
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Instead of ASCII characters, you could also replace each character with your own tiny png tiles!\n",
"\n",
"If we turn the generated ASCII into HTML, we can replace the ` ` (space) and `.` characters into images.\n",
"\n",
"Let's start with two small tiles. The example below is based on two world tiles from this tileset: https://opengameart.org/content/pixel-world-hex-tileset\n",
"\n",
"![](tile1.png) `tile1.png`\n",
"\n",
"and\n",
"\n",
"![](tile2.png) `tile2.png`"
]
},
{
"cell_type": "code",
"execution_count": 81,
"metadata": {
"scrolled": true,
"tags": []
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"<style>\n",
"div.row{\n",
" clear: both;\n",
"}\n",
"div.row:nth-of-type(odd){\n",
" margin-left: 7px;\n",
"}\n",
"div.row img{\n",
" float: left;\n",
"}\n",
"</style>\n",
"<div class=\"row\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"></div><div class=\"row\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"></div><div class=\"row\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"></div><div class=\"row\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile
]
}
],
"source": [
"from random import choice\n",
"\n",
"tiles = ['tile1.png', 'tile2.png']\n",
"width = 50\n",
"height = 25\n",
"\n",
"html = ''\n",
"\n",
"css = '''<style>\n",
"div.row{\n",
" clear: both;\n",
"}\n",
"div.row:nth-of-type(odd){\n",
" margin-left: 7px;\n",
"}\n",
"div.row img{\n",
" float: left;\n",
"}\n",
"</style>\n",
"'''\n",
"\n",
"html += css\n",
"\n",
"for y in range(height):\n",
" html += '<div class=\"row\">'\n",
" for x in range(width):\n",
" tile = choice(tiles)\n",
" tile_html = f'<img src=\"{ tile }\">'\n",
" html += tile_html\n",
" html += '</div>'\n",
"\n",
"print(html)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"We can use a feature of the Notebooks to preview this HTML here:"
]
},
{
"cell_type": "code",
"execution_count": 82,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<style>\n",
"div.row{\n",
" clear: both;\n",
"}\n",
"div.row:nth-of-type(odd){\n",
" margin-left: 7px;\n",
"}\n",
"div.row img{\n",
" float: left;\n",
"}\n",
"</style>\n",
"<div class=\"row\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"></div><div class=\"row\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"></div><div class=\"row\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"></div><div class=\"row\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile1.png\"><img src=\"tile1.png\"><img src=\"tile2.png\"><img src=\"tile2.png\"><img src=\"til
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"from IPython.core.display import display, HTML\n",
"\n",
"display(HTML(html))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Or save it to a file:"
]
},
{
"cell_type": "code",
"execution_count": 83,
"metadata": {},
"outputs": [],
"source": [
"with open('map.html', 'w+') as out:\n",
" out.write(html)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.7.3"
}
},
"nbformat": 4,
"nbformat_minor": 4
}