8000 Merge pull request #26 from anaconda/mattpap/numpy_canvas_example · sudhircw/pyscript@556feda · GitHub
[go: up one dir, main page]
Skip to content

Commit 556feda

Browse files
fpligerfpliger
authored
Merge pull request pyscript#26 from anaconda/mattpap/numpy_canvas_example
Add a visualization with NumPy and canvas
2 parents a612b64 + 6919093 commit 556feda

File tree

4 files changed

+267
-0
lines changed

4 files changed

+267
-0
lines changed

‎pyscriptjs/examples/fractals.py

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import numpy as np
2+
3+
def mandelbrot(width: int, height: int, *,
4+
x: float = -0.5, y: float = 0, zoom: int = 1, max_iterations: int = 100) -> np.array:
5+
"""
6+
From https://www.learnpythonwithrune.org/numpy-compute-mandelbrot-set-by-vectorization/.
7+
"""
8+
# To make navigation easier we calculate these values
9+
x_width, y_height = 1.5, 1.5*height/width
10+
x_from, x_to = x - x_width/zoom, x + x_width/zoom
11+
y_from, y_to = y - y_height/zoom, y + y_height/zoom
12+
13+
# Here the actual algorithm starts
14+
x = np.linspace(x_from, x_to, width).reshape((1, width))
15+
y = np.linspace(y_from, y_to, height).reshape((height, 1))
16+
c = x + 1j*y
17+
18+
# Initialize z to all zero
19+
z = np.zeros(c.shape, dtype=np.complex128)
20+
21+
# To keep track in which iteration the point diverged
22+
div_time = np.zeros(z.shape, dtype=int)
23+
24+
# To keep track on which points did not converge so far
25+
m = np.full(c.shape, True, dtype=bool)
26+
for i in range(max_iterations):
27+
z[m] = z[m]**2 + c[m]
28+
diverged = np.greater(np.abs(z), 2, out=np.full(c.shape, False), where=m) # Find diverging
29+
div_time[diverged] = i # set the value of the diverged iteration number
30+
m[np.abs(z) > 2] = False # to remember which have diverged
31+
32+
return div_time
33+
34+
def julia(width: int, height: int, *,
35+
c: complex = -0.4 + 0.6j, x: float = 0, y: float = 0, zoom: int = 1, max_iterations: int = 100) -> np.array:
36+
"""
37+
From https://www.learnpythonwithrune.org/numpy-calculate-the-julia-set-with-vectorization/.
38+
"""
39+
# To make navigation easier we calculate these values
40+
x_width, y_height = 1.5, 1.5*height/width
41+
x_from, x_to = x - x_width/zoom, x + x_width/zoom
42+
y_from, y_to = y - y_height/zoom, y + y_height/zoom
43+
44+
# Here the actual algorithm starts
45+
x = np.linspace(x_from, x_to, width).reshape((1, width))
46+
y = np.linspace(y_from, y_to, height).reshape((height, 1))
47+
z = x + 1j*y
48+
49+
# Initialize z to all zero
50+
c = np.full(z.shape, c)
51+
52+
# To keep track in which iteration the point diverged
53+
div_time = np.zeros(z.shape, dtype=int)
54+
55+
# To keep track on which points did not converge so far
56+
m = np.full(c.shape, True, dtype=bool)
57+
for i in range(max_iterations):
58+
z[m] = z[m]**2 + c[m]
59+
m[np.abs(z) > 2] = False
60+
div_time[m] = i
61+
62+
return div_time

‎pyscriptjs/examples/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ <h2 class="text-2xl font-bold text-blue-600"><a href="./panel.html" target=”_b
4545
<h2 class="text-2xl font-bold text-blue-600"><a href="./d3.html" target=”_blank”>Simple d3 visualization</a></h2>
4646
<p>Minimal d3 demo demonstrating how to create a visualization</p>
4747

48+
<h2 class="text-2xl font-bold text-blue-600"><a href="./numpy_canvas_fractals.html" target=”_blank”>Fractals with NumPy and canvas</a></h2>
49+
<p>Visualization of Mandelbrot and Julia sets with NumPy and HTML5 canvas</p>
4850

4951
<h2 class="text-2xl font-bold text-blue-600"><a href="./repl.html" target=”_blank”>REPL</a></h2>
5052
<p>A Python REPL (Read Eval Print Loop). </p>

‎pyscriptjs/examples/numpy_canvas_fractals.html

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<html>
2+
<head>
3+
<title>Visualization of Mandelbrot and Julia sets with NumPy and HTML5 canvas</title>
4+
<meta charset="utf-8">
5+
6+
<link rel="stylesheet" href="../build/pyscript.css" />
7+
<script defer src="../build/pyscript.js"></script>
8+
9+
<style>
10+
.loading {
11+
display: inline-block;
12+
width: 50px;
13+
height: 50px;
14+
border: 3px solid rgba(255, 255, 255, 0.3);
15+
border-radius: 50%;
16+
border-top-color: black;
17+
animation: spin 1s ease-in-out infinite;
18+
}
19+
20+
@keyframes spin {
21+
to {
22+
transform: rotate(360deg);
23+
}
24+
}
25+
</style>
26+
27+
</head>
28+
<body>
29+
<b>
30+
</b>
31+
<div style="display: flex; flex-direction: row; gap: 1em">
32+
<div>
33+
<div style="text-align: center">Mandelbrot set</div>
34+
<div id="mandelbrot" style="width: 600px; height: 600px">
35+
<div class="loading"></div>
36+
</div>
37+
</div>
38+
<div>
39+
<div style="text-align: center">Julia set</div>
40+
<div id="julia" style="width: 600px; height: 600px">
41+
<div class="loading"></div>
42+
</div>
43+
</div>
44+
</div>
45+
46+
<py-env>
47+
- numpy
48+
- paths:
49+
- /palettes.py
50+
- /fractals.py
51+
</py-env>
52+
53+
<py-script>
54+
from pyodide import to_js
55+
56+
import numpy as np
57+
58+
from palettes import Magma256
59+
from fractals import mandelbrot, julia
60+
61+
from js import (
62+
console,
63+
document,
64+
devicePixelRatio,
65+
ImageData,
66+
Uint8ClampedArray,
67+
CanvasRenderingContext2D as Context2d,
68+
)
69+
70+
def create_canvas(width: int, height: int, target: str) -> Context2d:
71+
pixel_ratio = devicePixelRatio
72+
73+
canvas = document.createElement("canvas")
74+
ctx = canvas.getContext("2d")
75+
76+
canvas.style.width = f"{width}px"
77+
canvas.style.height = f"{height}px"
78+
79+
canvas.width = width*pixel_ratio
80+
canvas.height = height*pixel_ratio
81+
82+
ctx.scale(pixel_ratio, pixel_ratio)
83+
ctx.translate(0.5, 0.5)
84+
85+
ctx.clearRect(0, 0, width, height)
86+
87+
el = document.querySelector(target)
88+
el.replaceChildren(canvas)
89+
90+
return ctx
91+
92+
def color_map(array: np.array, palette: np.array) -> np.array:
93+
size, _ = palette.shape
94+
index = (array/array.max()*(size - 1)).round().astype("uint8")
95+
96+
width, height = array.shape
97+
image = np.full((width, height, 4), 0xff, dtype=np.uint8)
98+
image[:, :, :3] = palette[index]
99+
100+
return image
101+
102+
def draw_image(ctx: Context2d, image: np.array) -> None:
103+
data = Uint8ClampedArray.new(to_js(image.tobytes()))
104+
width, height, _ = image.shape
105+
image_data = ImageData.new(data, width, height)
106+
ctx.putImageData(image_data, 0, 0)
107+
108+
def draw_mandelbrot(width: int, height: int) -> None:
109+
ctx = create_canvas(width, height, "#mandelbrot")
110+
111+
console.log("Computing Mandelbrot set ...")
112+
console.time("mandelbrot")
113+
array = mandelbrot(width, height)
114+
console.timeEnd("mandelbrot")
115+
116+
image = color_map(array, Magma256)
117+
draw_image(ctx, image)
118+
119+
def draw_julia(width: int, height: int) -> None:
120+
ctx = create_canvas(width, height, "#julia")
121+
122+
console.log("Computing Julia set ...")
123+
console.time("julia")
124+
array = julia(width, height)
125+
console.timeEnd("julia")
126+
127+
image = color_map(array, Magma256)
128+
draw_image(ctx, image)
129+
130+
draw_mandelbrot(600, 600)
131+
draw_julia(600, 600)
132+
</py-script>
133+
134+
</body>
135+
</html>

‎pyscriptjs/examples/palettes.py

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import numpy as np
2+
3+
Magma256 = np.array([
4+
[0x00, 0x00, 0x03], [0x00, 0x00, 0x04], [0x00, 0x00, 0x06], [0x01, 0x00, 0x07],
5+
[0x01, 0x01, 0x09], [0x01, 0x01, 0x0b], [0x02, 0x02, 0x0d], [0x02, 0x02, 0x0f],
6+
[0x03, 0x03, 0x11], [0x04, 0x03, 0x13], [0x04, 0x04, 0x15], [0x05, 0x04, 0x17],
7+
[0x06, 0x05, 0x19], [0x07, 0x05, 0x1b], [0x08, 0x06, 0x1d], [0x09, 0x07, 0x1f],
8+
[0x0a, 0x07, 0x22], [0x0b, 0x08, 0x24], [0x0c, 0x09, 0x26], [0x0d, 0x0a, 0x28],
9+
[0x0e, 0x0a, 0x2a], [0x0f, 0x0b, 0x2c], [0x10, 0x0c, 0x2f], [0x11, 0x0c, 0x31],
10+
[0x12, 0x0d, 0x33], [0x14, 0x0d, 0x35], [0x15, 0x0e, 0x38], [0x16, 0x0e, 0x3a],
11+
[0x17, 0x0f, 0x3c], [0x18, 0x0f, 0x3f], [0x1a, 0x10, 0x41], [0x1b, 0x10, 0x44],
12+
[0x1c, 0x10, 0x46], [0x1e, 0x10, 0x49], [0x1f, 0x11, 0x4b], [0x20, 0x11, 0x4d],
13+
[0x22, 0x11, 0x50], [0x23, 0x11, 0x52], [0x25, 0x11, 0x55], [0x26, 0x11, 0x57],
14+
[0x28, 0x11, 0x59], [0x2a, 0x11, 0x5c], [0x2b, 0x11, 0x5e], [0x2d, 0x10, 0x60],
15+
[0x2f, 0x10, 0x62], [0x30, 0x10, 0x65], [0x32, 0x10, 0x67], [0x34, 0x10, 0x68],
16+
[0x35, 0x0f, 0x6a], [0x37, 0x0f, 0x6c], [0x39, 0x0f, 0x6e], [0x3b, 0x0f, 0x6f],
17+
[0x3c, 0x0f, 0x71], [0x3e, 0x0f, 0x72], [0x40, 0x0f, 0x73], [0x42, 0x0f, 0x74],
18+
[0x43, 0x0f, 0x75], [0x45, 0x0f, 0x76], [0x47, 0x0f, 0x77], [0x48, 0x10, 0x78],
19+
[0x4a, 0x10, 0x79], [0x4b, 0x10, 0x79], [0x4d, 0x11, 0x7a], [0x4f, 0x11, 0x7b],
20+
[0x50, 0x12, 0x7b], [0x52, 0x12, 0x7c], [0x53, 0x13, 0x7c], [0x55, 0x13, 0x7d],
21+
[0x57, 0x14, 0x7d], [0x58, 0x15, 0x7e], [0x5a, 0x15, 0x7e], [0x5b, 0x16, 0x7e],
22+
[0x5d, 0x17, 0x7e], [0x5e, 0x17, 0x7f], [0x60, 0x18, 0x7f], [0x61, 0x18, 0x7f],
23+
[0x63, 0x19, 0x7f], [0x65, 0x1a, 0x80], [0x66, 0x1a, 0x80], [0x68, 0x1b, 0x80],
24+
[0x69, 0x1c, 0x80], [0x6b, 0x1c, 0x80], [0x6c, 0x1d, 0x80], [0x6e, 0x1e, 0x81],
25+
[0x6f, 0x1e, 0x81], [0x71, 0x1f, 0x81], [0x73, 0x1f, 0x81], [0x74, 0x20, 0x81],
26+
[0x76, 0x21, 0x81], [0x77, 0x21, 0x81], [0x79, 0x22, 0x81], [0x7a, 0x22, 0x81],
27+
[0x7c, 0x23, 0x81], [0x7e, 0x24, 0x81], [0x7f, 0x24, 0x81], [0x81, 0x25, 0x81],
28+
[0x82, 0x25, 0x81], [0x84, 0x26, 0x81], [0x85, 0x26, 0x81], [0x87, 0x27, 0x81],
29+
[0x89, 0x28, 0x81], [0x8a, 0x28, 0x81], [0x8c, 0x29, 0x80], [0x8d, 0x29, 0x80],
30+
[0x8f, 0x2a, 0x80], [0x91, 0x2a, 0x80], [0x92, 0x2b, 0x80], [0x94, 0x2b, 0x80],
31+
[0x95, 0x2c, 0x80], [0x97, 0x2c, 0x7f], [0x99, 0x2d, 0x7f], [0x9a, 0x2d, 0x7f],
32+
[0x9c, 0x2e, 0x7f], [0x9e, 0x2e, 0x7e], [0x9f, 0x2f, 0x7e], [0xa1, 0x2f, 0x7e],
33+
[0xa3, 0x30, 0x7e], [0xa4, 0x30, 0x7d], [0xa6, 0x31, 0x7d], [0xa7, 0x31, 0x7d],
34+
[0xa9, 0x32, 0x7c], [0xab, 0x33, 0x7c], [0xac, 0x33, 0x7b], [0xae, 0x34, 0x7b],
35+
[0xb0, 0x34, 0x7b], [0xb1, 0x35, 0x7a], [0xb3, 0x35, 0x7a], [0xb5, 0x36, 0x79],
36+
[0xb6, 0x36, 0x79], [0xb8, 0x37, 0x78], [0xb9, 0x37, 0x78], [0xbb, 0x38, 0x77],
37+
[0xbd, 0x39, 0x77], [0xbe, 0x39, 0x76], [0xc0, 0x3a, 0x75], [0xc2, 0x3a, 0x75],
38+
[0xc3, 0x3b, 0x74], [0xc5, 0x3c, 0x74], [0xc6, 0x3c, 0x73], [0xc8, 0x3d, 0x72],
39+
[0xca, 0x3e, 0x72], [0xcb, 0x3e, 0x71], [0xcd, 0x3f, 0x70], [0xce, 0x40, 0x70],
40+
[0xd0, 0x41, 0x6f], [0xd1, 0x42, 0x6e], [0xd3, 0x42, 0x6d], [0xd4, 0x43, 0x6d],
41+
[0xd6, 0x44, 0x6c], [0xd7, 0x45, 0x6b], [0xd9, 0x46, 0x6a], [0xda, 0x47, 0x69],
42+
[0xdc, 0x48, 0x69], [0xdd, 0x49, 0x68], [0xde, 0x4a, 0x67], [0xe0, 0x4b, 0x66],
43+
[0xe1, 0x4c, 0x66], [0xe2, 0x4d, 0x65], [0xe4, 0x4e, 0x64], [0xe5, 0x50, 0x63],
44+
[0xe6, 0x51, 0x62], [0xe7, 0x52, 0x62], [0xe8, 0x54, 0x61], [0xea, 0x55, 0x60],
45+
[0xeb, 0x56, 0x60], [0xec, 0x58, 0x5f], [0xed, 0x59, 0x5f], [0xee, 0x5b, 0x5e],
46+
[0xee, 0x5d, 0x5d], [0xef, 0x5e, 0x5d], [0xf0, 0x60, 0x5d], [0xf1, 0x61, 0x5c],
47+
[0xf2, 0x63, 0x5c], [0xf3, 0x65, 0x5c], [0xf3, 0x67, 0x5b], [0xf4, 0x68, 0x5b],
48+
[0xf5, 0x6a, 0x5b], [0xf5, 0x6c, 0x5b], [0xf6, 0x6e, 0x5b], [0xf6, 0x70, 0x5b],
49+
[0xf7, 0x71, 0x5b], [0xf7, 0x73, 0x5c], [0xf8, 0x75, 0x5c], [0xf8, 0x77, 0x5c],
50+
[0xf9, 0x79, 0x5c], [0xf9, 0x7b, 0x5d], [0xf9, 0x7d, 0x5d], [0xfa, 0x7f, 0x5e],
51+
[0xfa, 0x80, 0x5e], [0xfa, 0x82, 0x5f], [0xfb, 0x84, 0x60], [0xfb, 0x86, 0x60],
52+
[0xfb, 0x88, 0x61], [0xfb, 0x8a, 0x62], [0xfc, 0x8c, 0x63], [0xfc, 0x8e, 0x63],
53+
[0xfc, 0x90, 0x64], [0xfc, 0x92, 0x65], [0xfc, 0x93, 0x66], [0xfd, 0x95, 0x67],
54+
[0xfd, 0x97, 0x68], [0xfd, 0x99, 0x69], [0xfd, 0x9b, 0x6a], [0xfd, 0x9d, 0x6b],
55+
[0xfd, 0x9f, 0x6c], [0xfd, 0xa1, 0x6e], [0xfd, 0xa2, 0x6f], [0xfd, 0xa4, 0x70],
56+
[0xfe, 0xa6, 0x71], [0xfe, 0xa8, 0x73], [0xfe, 0xaa, 0x74], [0xfe, 0xac, 0x75],
57+
[0xfe, 0xae, 0x76], [0xfe, 0xaf, 0x78], [0xfe, 0xb1, 0x79], [0xfe, 0xb3, 0x7b],
58+
[0xfe, 0xb5, 0x7c], [0xfe, 0xb7, 0x7d], [0xfe, 0xb9, 0x7f], [0xfe, 0xbb, 0x80],
59+
[0xfe, 0xbc, 0x82], [0xfe, 0xbe, 0x83], [0xfe, 0xc0, 0x85], [0xfe, 0xc2, 0x86],
60+
[0xfe, 0xc4, 0x88], [0xfe, 0xc6, 0x89], [0xfe, 0xc7, 0x8b], [0xfe, 0xc9, 0x8d],
61+
[0xfe, 0xcb, 0x8e], [0xfd, 0xcd, 0x90], [0xfd, 0xcf, 0x92], [0xfd, 0xd1, 0x93],
62+
[0xfd, 0xd2, 0x95], [0xfd, 0xd4, 0x97], [0xfd, 0xd6, 0x98], [0xfd, 0xd8, 0x9a],
63+
[0xfd, 0xda, 0x9c], [0xfd, 0xdc, 0x9d], [0xfd, 0xdd, 0x9f], [0xfd, 0xdf, 0xa1],
64+
[0xfd, 0xe1, 0xa3], [0xfc, 0xe3, 0xa5], [0xfc, 0xe5, 0xa6], [0xfc, 0xe6, 0xa8],
65+
[0xfc, 0xe8, 0xaa], [0xfc, 0xea, 0xac], [0xfc, 0xec, 0xae], [0xfc, 0xee, 0xb0],
66+
[0xfc, 0xf0, 0xb1], [0xfc, 0xf1, 0xb3], [0xfc, 0xf3, 0xb5], [0xfc, 0xf5, 0xb7],
67+
[0xfb, 0xf7, 0xb9], [0xfb, 0xf9, 0xbb], [0xfb, 0xfa, 0xbd], [0xfb, 0xfc, 0xbf],
68+
], dtype="uint8")

0 commit comments

Comments
 (0)
0