Skip to content

Commit 4cb6d55

Browse files
jediejedie
committed
Merge branch 'gh-pages' of github.com:jedie/pypyjs-examples into gh-pages
2 parents 40c8f79 + ad672af commit 4cb6d55

File tree

2 files changed

+101
-65
lines changed

2 files changed

+101
-65
lines changed

‎mandelbrot_enhanced.html‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@
77
noscript {
88
color: #f00;
99
}
10-
button {
11-
display:none;
12-
}
1310
pre {
1411
width: 100%;
1512
height: 20%;
@@ -19,30 +16,30 @@
1916
overflow: auto;
2017
}
2118
#mandelbrot {
22-
display: block;
19+
display:block;
2320
border: 1px solid #000;
2421
margin: 0 auto;
2522
}
23+
.after_load {
24+
display:none;
25+
}
2626
</style>
2727
</head>
2828
<body>
2929
<div class='container'>
3030
<div class="row">
3131
<div class="col-sm-12">
3232
<h1>PyPy.js - enhanced Mandelbrot</h1>
33-
<p>
34-
Render Mandelbrot fractal with <a href="http://pypyjs.org">PyPy.js</a>
35-
</p>
3633
<a href="https://github.com/jedie/pypyjs-examples"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
3734
<noscript><h3>Please enable JavaScript for using PyPy.js</h3></noscript>
3835
</div>
3936
</div>
40-
<div class="row">
37+
<div class="row after_load">
4138
<div class="col-sm-12">
4239
<canvas id="mandelbrot" width="768" height="432"></canvas>
4340
</div>
4441
</div>
45-
<div class="row">
42+
<div class="row after_load">
4643
<div class="col-sm-12">
4744
<div class="progress">
4845
<div class="progress-bar progress-bar-info progress-bar-striped" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
@@ -51,36 +48,39 @@ <h1>PyPy.js - enhanced Mandelbrot</h1>
5148
</div>
5249
</div>
5350
</div>
54-
<div class="row">
51+
<div class="row after_load">
5552
<div class="col-sm-12">
56-
<form class="form-inline" role="form" action="">
53+
<form class="form-inline" id="data_form" role="form" action="">
54+
<div class="form-group form-group-sm">
5755
<p>
58-
Interesting values are: <strong>-2.4 -1.0 0.4 -0.4</strong>
56+
Interesting values are:<br/>
57+
<strong>-2.4 -1.0 0.4 -0.4</strong>
5958
or <strong>-0.2 -0.1 1.1 1.0</strong>
6059
or <strong>-0.15 -0.05 0.95 0.9</strong>
6160
or <strong>-1.65 -1.60 -0.01 0.01</strong>
6261
or <strong>-1.64 -1.62 0.01 0.02</strong>
62+
or <strong>-0.0191 -0.0192 1.0001 1.0</strong>
6363
</p>
64-
<div class="form-group">
64+
<div class="input-group input-group-sm">
6565
<label for="left">left:</label>
66-
<input type="number" id="left" min="-100" max="100" step="0.01" value="-2.5">
66+
<input type="number" id="left" min="-100" max="100" step="0.0001" value="-2.5">
6767

6868
<label for="right">right:</label>
69-
<input type="number" id="right" min="-100" max="100" step="0.01" value="1">
69+
<input type="number" id="right" min="-100" max="100" step="0.0001" value="1.5">
7070

7171
<label for="top">top:</label>
72-
<input type="number" id="top" min="-100" max="100" step="0.01" value="1.4">
72+
<input type="number" id="top" min="-100" max="100" step="0.0001" value="1.4">
7373

7474
<label for="bottom">bottom:</label>
75-
<input type="number" id="bottom" min="-100" max="100" step="0.01" value="-1.4">
76-
77-
<label for="iterations">iterations:</label>
78-
<input type="number" id="iterations" min="1" max="200" step="1" value="40">
75+
<input type="number" id="bottom" min="-100" max="100" step="0.0001" value="-1.4">
7976
</div>
80-
<div class="form-group">
77+
<div class="input-group input-group-sm">
78+
<label for="iterations">iterations:</label>
79+
<input type="number" id="iterations" min="1" max="400" step="1" value="40">
8180
<button id="pause" class="btn btn-default">pause</button>
8281
<button id="update" class="btn btn-default">update</button>
8382
</div>
83+
</div>
8484
</form>
8585
</div>
8686
</div>
@@ -135,7 +135,7 @@ <h1>PyPy.js - enhanced Mandelbrot</h1>
135135
out = $("#output");
136136
vm.stdout = vm.stderr = function(data) {
137137
out.append(data);
138-
out.scrollTop(out.prop("scrollHeight")); // scoll down
138+
out.scrollTop(out.prop("scrollHeight")); // auto scroll down
139139
}
140140
vm.stdout.reset = vm.stderr.reset = function(data) {
141141
out.empty();
@@ -146,11 +146,11 @@ <h1>PyPy.js - enhanced Mandelbrot</h1>
146146
vm.stdout.reset();
147147

148148
var py_filename="mandelbrot_enhanced.py";
149-
vm.stdout("load '" + py_filename + "'...");
149+
vm.stdout("request '" + py_filename + "'...");
150150
$.get( py_filename, function( data ) {
151+
$(".after_load").slideDown("slow");
152+
vm.stdout("exec...");
151153
console_exec( data );
152-
}).done(function() {
153-
vm.stdout("OK\n");
154154
}).fail(function() {
155155
vm.stderr("error!");
156156
});

‎mandelbrot_enhanced.py‎

Lines changed: 76 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
from __future__ import absolute_import, print_function
22

3-
print("imports...")
4-
53
import time# after imports
64
import random# add comments
7-
import math# as work-a-round
85
import sys# for:
96
from colorsys import hsv_to_rgb# https://github.com/rfk/pypyjs/issues/109
107

118
import js# from PyPy.js
129

10+
11+
PY2 = sys.version_info[0] == 2
12+
if PY2:
13+
# Python 2
14+
range = xrange
15+
16+
1317
CANVAS_ID="#mandelbrot"
1418
PROGRESS_BAR_ID="#progress-bar"
1519

20+
1621
class jQuery(object):
1722
def __init__(self):
1823
self.jquery = js.globals["$"]
@@ -57,6 +62,40 @@ def reset(self):
5762
self.context = self.canvas.getContext('2d')
5863

5964

65+
def interlace_generator(limit):
66+
def gen_pow(limit):
67+
interlace_steps = []
68+
step=0
69+
while True:
70+
value = 2**step
71+
if value>=limit:
72+
return interlace_steps
73+
interlace_steps.append(value)
74+
step+=1
75+
interlace_steps = gen_pow(limit)
76+
interlace_steps.reverse()
77+
#~ print("interlace_steps:", interlace_steps)
78+
79+
pos = 0
80+
step = 1
81+
iteration = 0
82+
size = interlace_steps[iteration]
83+
84+
while True:
85+
yield (pos, size)
86+
pos += (size * step)
87+
88+
if pos>limit:
89+
step = 2
90+
iteration += 1
91+
try:
92+
size = interlace_steps[iteration]
93+
except IndexError:
94+
return
95+
96+
pos = size
97+
98+
6099
class Mandelbrot(object):
61100
"""
62101
FIXME: interlace rendering is not accurate, yet!
@@ -78,18 +117,18 @@ def reset(self):
78117
self.y = 0
79118
self.step = self.height // 4
80119
self.line_count = 0
81-
self.rendered_lines = []
82120
self.last_update = self.start_time = time.time()
83121
self.last_pos = 0
84122
self.done = False
123+
self.interlace_generator = interlace_generator(self.height)
85124

86125
def setup(self):
87126
self.left = float(jquery.get_by_id("#left").val())
88127
self.right = float(jquery.get_by_id("#right").val())
89128
self.top = float(jquery.get_by_id("#top").val())
90129
self.bottom = float(jquery.get_by_id("#bottom").val())
91130

92-
print("%.2f %.2f %.2f %.2f" % (self.left, self.right, self.top, self.bottom))
131+
print("%f %f %f %f" % (self.left, self.right, self.top, self.bottom))
93132

94133
self.iterations = int(jquery.get_by_id("#iterations").val())
95134

@@ -190,7 +229,7 @@ def _render_line(self, canvas, color_func, y, left, right, top, bottom, width, h
190229
top + y * (bottom - top) / height
191230
)
192231
norm = abs(z) ** 2
193-
for count in xrange(iterations):
232+
for count in range(iterations):
194233
if norm <= 4:
195234
z = z * z + c
196235
norm = abs(z * z)
@@ -204,40 +243,29 @@ def render_mandelbrot(self):
204243
if not self.running or self.done:
205244
return
206245

207-
rect_height = 1
208-
# rect_height = self.step # FIXME
209246
next_return = time.time() + 0.5
210247
while time.time() < next_return:
211-
if self.y >= self.height:
212-
if self.step <= 1:
213-
self.done = True
214-
duration = time.time() - self.start_time
215-
self.display_stats() # Should display 100% ;)
216-
print(len(self.rendered_lines), "lines are rendered")
217-
msg = "%ix%ipx Rendered in %iSec." % (self.width, self.height, duration)
218-
print(msg)
219-
print(" --- END --- ")
220-
return
221-
222-
# canvas.draw_rect(x=0, y=0, r=128, g=0, b=0, alpha=128, width=self.step, height=self.height) # debug
223-
self.step = int(math.floor(self.step / 2.0))
224-
# rect_height = self.step # FIXME
225-
self.y = 0
226-
print("Render step: %i" % self.step)
227-
228-
if self.y not in self.rendered_lines:
229-
self._render_line(
230-
self.canvas,
231-
self.color_func,
232-
self.y,
233-
self.left, self.right, self.top, self.bottom,
234-
self.width, self.height, self.iterations,
235-
rect_height
236-
)
237-
self.line_count += 1
238-
self.rendered_lines.append(self.y)
239-
240-
self.y += self.step
248+
try:
249+
y, size = self.interlace_generator.next()
250+
except StopIteration:
251+
self.done = True
252+
duration = time.time() - self.start_time
253+
self.display_stats() # Should display 100% ;)
254+
print(len(self.rendered_lines), "lines are rendered")
255+
msg = "%ix%ipx Rendered in %iSec." % (self.width, self.height, duration)
256+
print(msg)
257+
print(" --- END --- ")
258+
return
259+
260+
self._render_line(
261+
self.canvas,
262+
self.color_func,
263+
y,
264+
self.left, self.right, self.top, self.bottom,
265+
self.width, self.height, self.iterations,
266+
rect_height=size
267+
)
268+
self.line_count += 1
241269

242270
self.display_stats()
243271

@@ -270,8 +298,6 @@ def display_stats(self):
270298
mandelbrot = Mandelbrot(canvas)
271299
mandelbrot.setup()
272300

273-
jquery.jquery("h1").append(" - " + mandelbrot.color_func.__name__)
274-
275301
@js.Function
276302
def pause_mandelbrot(event):
277303
if mandelbrot.running:
@@ -298,6 +324,16 @@ def update_mandelbrot(event):
298324
update_button = jquery.get_by_id("#update")
299325
update_button.click(update_mandelbrot)
300326

327+
328+
@js.Function
329+
def data_form_change(event):
330+
print("form, changed:")
331+
update_mandelbrot(event)
332+
333+
data_form = jquery.get_by_id("#data_form")
334+
data_form.change(data_form_change)
335+
336+
301337
@js.Function
302338
def render_mandelbrot():
303339
mandelbrot.render_mandelbrot()

0 commit comments

Comments
 (0)