Skip to content

Commit

Permalink
Update bench.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@JosuaKrause
JosuaKrause authored Oct 26, 2023
1 parent c2fec2f commit 6dc5840
Showing 1 changed file with 122 additions and 107 deletions.
229 changes: 122 additions & 107 deletions bench.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,20 @@
}
}

body {
display: flex;
justify-content: center;
}

h3 {
font-size: 1.25em;
font-weight: 500;
}

svg {
max-width: 99vw;
}

footer {
position: fixed;
bottom: 0;
Expand All @@ -60,116 +74,117 @@
</style>
</head>
<body>
<span onclick="runBench();" style="cursor: pointer; text-decoration: underline;">Run!</span>
<span id="result"></span>
<svg style="width: 780px; height: 600px; margin: 0; padding: 0; display: block;">
<rect x="0" y="0" width="100%" height="100%" style="stroke: black; stroke-width: 1; fill: none;"></rect>
<g id="grects"></g>
<path id="path" fill="cornflowerblue" opacity="0.5" stroke="black"></path>
</svg>
<script>
function runBench() {
var grects = document.getElementById("grects");
var path = document.getElementById("path");
var span = document.getElementById("result");
span.textContent = "Running!";
while(grects.firstChild) {
grects.removeChild(grects.firstChild);
}
var rectanglesA = [];
var rectanglesB = [];
for(var x = 0;x < 12;x += 1) {
for(var y = 0;y < 9;y += 1) {
var isA = (x & 1) !== (y & 1);
var rects = isA ? rectanglesA : rectanglesB;
var coords = {
"x": x * 60 + 40,
"y": y * 60 + 40,
"width": 40,
"height": 40,
};
rects.push(coords);
var newRect = grects.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "rect"));
newRect.setAttribute("x", coords["x"]);
newRect.setAttribute("y", coords["y"]);
newRect.setAttribute("width", coords["width"]);
newRect.setAttribute("height", coords["height"]);
newRect.setAttribute("fill", isA ? "cornflowerblue" : "crimson");
newRect.setAttribute("stroke", "black");
}
}

setTimeout(function() {
var pad = 5;
var bubbles = new BubbleSet();

function doRun() {
var list = bubbles.createOutline(
BubbleSet.addPadding(rectanglesA, pad),
BubbleSet.addPadding(rectanglesB, pad),
null
);
var outline = new PointPath(list).transform([
new ShapeSimplifier(0.0),
new BSplineShapeGenerator(),
new ShapeSimplifier(0.0),
]);
return outline.toString();
<h3>Benchmark of Bubblesets</h3>
<span onclick="runBench();" style="cursor: pointer; text-decoration: underline;">Run!</span>
<span id="result"></span>
<svg style="width: 780px; height: 600px; margin: 0; padding: 0; display: block;">
<rect x="0" y="0" width="100%" height="100%" style="stroke: black; stroke-width: 1; fill: none;"></rect>
<g id="grects"></g>
<path id="path" fill="cornflowerblue" opacity="0.5" stroke="black"></path>
</svg>
<script>
function runBench() {
var grects = document.getElementById("grects");
var path = document.getElementById("path");
var span = document.getElementById("result");
span.textContent = "Running!";
while(grects.firstChild) {
grects.removeChild(grects.firstChild);
}

var runs = 5;
var res = null;
for(var warm = 0;warm < runs;warm += 1) {
var tmp = doRun();
if(res && res !== tmp) {
console.warn("inconsistent result");
return;
var rectanglesA = [];
var rectanglesB = [];
for(var x = 0;x < 12;x += 1) {
for(var y = 0;y < 9;y += 1) {
var isA = (x & 1) !== (y & 1);
var rects = isA ? rectanglesA : rectanglesB;
var coords = {
"x": x * 60 + 40,
"y": y * 60 + 40,
"width": 40,
"height": 40,
};
rects.push(coords);
var newRect = grects.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "rect"));
newRect.setAttribute("x", coords["x"]);
newRect.setAttribute("y", coords["y"]);
newRect.setAttribute("width", coords["width"]);
newRect.setAttribute("height", coords["height"]);
newRect.setAttribute("fill", isA ? "cornflowerblue" : "crimson");
newRect.setAttribute("stroke", "black");
}
res = tmp;
}
var time = null;
timer("benchmark");
for(var warm = 0;warm < runs;warm += 1) {
var finalRes = doRun();
if(finalRes !== res) {
console.warn("inconsistent end result");

setTimeout(function() {
var pad = 5;
var bubbles = new BubbleSet();

function doRun() {
var list = bubbles.createOutline(
BubbleSet.addPadding(rectanglesA, pad),
BubbleSet.addPadding(rectanglesB, pad),
null
);
var outline = new PointPath(list).transform([
new ShapeSimplifier(0.0),
new BSplineShapeGenerator(),
new ShapeSimplifier(0.0),
]);
return outline.toString();
}
time = timerEnd("benchmark");
}
span.textContent = (2*runs) + " runs; " + time + "ms avg. per run";
path.setAttribute("d", finalRes);
}, 100);
}

function timeNow() {
return window.performance.now();
}

var timers = {};
function timer(name) {
timers[name + '_start'] = timeNow();
timers[name + '_amount'] = 0;
timers[name + '_sum'] = 0;
timers[name + '_avg'] = 0;
}

function timerEnd(name) {
var now = timeNow();
var time = now - timers[name + '_start'];
timers[name + '_start'] = now;
timers[name + '_amount'] += 1;
timers[name + '_sum'] += time;
timers[name + '_avg'] = timers[name + '_sum'] / timers[name + '_amount'];
return timers[name + '_avg'];
}
</script>
<footer>
<div class="footer-style">
© jk 2023
<a href="https://github.com/JosuaKrause/bubblesets-js" target="_blank">
[source]
</a>
</div>
</footer>

var runs = 5;
var res = null;
for(var warm = 0;warm < runs;warm += 1) {
var tmp = doRun();
if(res && res !== tmp) {
console.warn("inconsistent result");
return;
}
res = tmp;
}
var time = null;
timer("benchmark");
for(var warm = 0;warm < runs;warm += 1) {
var finalRes = doRun();
if(finalRes !== res) {
console.warn("inconsistent end result");
}
time = timerEnd("benchmark");
}
span.textContent = (2*runs) + " runs; " + time + "ms avg. per run";
path.setAttribute("d", finalRes);
}, 100);
}

function timeNow() {
return window.performance.now();
}

var timers = {};
function timer(name) {
timers[name + '_start'] = timeNow();
timers[name + '_amount'] = 0;
timers[name + '_sum'] = 0;
timers[name + '_avg'] = 0;
}

function timerEnd(name) {
var now = timeNow();
var time = now - timers[name + '_start'];
timers[name + '_start'] = now;
timers[name + '_amount'] += 1;
timers[name + '_sum'] += time;
timers[name + '_avg'] = timers[name + '_sum'] / timers[name + '_amount'];
return timers[name + '_avg'];
}
</script>
<footer>
<div class="footer-style">
© jk 2023
<a href="https://github.com/JosuaKrause/bubblesets-js" target="_blank">
[source]
</a>
</div>
</footer>
</body>
</html>

0 comments on commit 6dc5840

Please sign in to comment.