Skip to content

Commit 9d7e803

Browse files
martinleopoldmartinleopold
committed
demo cleanup
1 parent 4d20f1b commit 9d7e803

File tree

5 files changed

+153
-134
lines changed

5 files changed

+153
-134
lines changed

‎demo/draw.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
class SimpleCanvas {
2+
constructor(selector, width, height) {
3+
this.width = width;
4+
this.height = height;
5+
this.canvas = document.querySelector('canvas');
6+
this.ctx = this.canvas.getContext('2d');
7+
this.canvas.width = width;
8+
this.canvas.height = height;
9+
this.canvas.style.width = width/2 + 'px';
10+
this.canvas.style.height = height/2 + 'px';
11+
}
12+
13+
points(points, color='#000', radius=1) {
14+
this.ctx.fillStyle = color;
15+
points.forEach(p => {
16+
this.ctx.beginPath();
17+
this.ctx.arc( p[0], p[1], radius, 0, 2*Math.PI );
18+
// this.ctx.stroke();
19+
this.ctx.fill();
20+
});
21+
}
22+
23+
lines(points, color='#000', weight=1) {
24+
this.ctx.strokeStyle = color;
25+
this.ctx.lineWidth = weight;
26+
this.ctx.beginPath();
27+
this.ctx.moveTo(points[0][0], points[0][1]);
28+
points.forEach(points => {
29+
this.ctx.lineTo(points[0], points[1]);
30+
});
31+
this.ctx.stroke();
32+
}
33+
34+
clear() {
35+
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
36+
}
37+
}
38+
39+
export default function init(selector='canvas', width=1000, height=1000) {
40+
return new SimpleCanvas(selector, width, height);
41+
}

‎demo/index.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Smooth.js Demo</title>
6+
<script src="../lib/Smooth.js"></script>
7+
</head>
8+
<body>
9+
<canvas id="main" style="border:1px solid;"></canvas>
10+
<div id="ui">
11+
<fieldset>
12+
<legend>method</legend>
13+
<label><input type="radio" name="method" value="nearest"> nearest</label><br/>
14+
<label><input type="radio" name="method" value="linear"> linear</label><br/>
15+
<label><input type="radio" name="method" value="cubic" checked> cubic</label><br/>
16+
<label><input type="radio" name="method" value="sinc"> sinc</label><br/>
17+
<label><input type="radio" name="method" value="lanczos"> lanczos</label><br/>
18+
</fieldset>
19+
<fieldset>
20+
<legend>clip</legend>
21+
<label><input type="radio" name="clip" value="clamp"> clamp</label><br/>
22+
<label><input type="radio" name="clip" value="zero"> zero</label><br/>
23+
<label><input type="radio" name="clip" value="periodic"> periodic</label><br/>
24+
<label><input type="radio" name="clip" value="mirror" checked> mirror</label><br/>
25+
</fieldset>
26+
<fieldset>
27+
<legend>cubicTension</legend>
28+
<label><input type="radio" name="cubicTension" value="0" checked> CUBIC_TENSION_CATMULL_ROM</label><br/>
29+
<label><input type="radio" name="cubicTension" value="0"> CUBIC_TENSION_DEFAULT</label><br/>
30+
<label><input type="radio" name="cubicTension" value="0"> 0</label><br/>
31+
<label><input type="radio" name="cubicTension" value="0.25"> 0.25</label><br/>
32+
<label><input type="radio" name="cubicTension" value="0.5"> 0.50</label><br/>
33+
<label><input type="radio" name="cubicTension" value="0.75"> 0.75</label><br/>
34+
<label><input type="radio" name="cubicTension" value="1"> 1</label><br/>
35+
</fieldset>
36+
<button>New Points</button>
37+
38+
<script type="module" src='main.js'></script>
39+
</div>
40+
</body>
41+
</html>

‎demo/main.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import canvas from './draw.js';
2+
3+
const canvasSize = 1000;
4+
5+
function radioValue(name) {
6+
return document.querySelector(`input[type=radio][name=${name}]:checked`).value;
7+
}
8+
9+
function range(stop) {
10+
let out = [];
11+
for (let i=0; i<stop; i++) { out.push(i); }
12+
return out;
13+
}
14+
15+
const main = canvas('#main', canvasSize, canvasSize);
16+
17+
let cp = []; // control points
18+
let ip = []; // interpolated points
19+
20+
// randomly generate control points
21+
function runGeneration() {
22+
const num = 5;
23+
const margin = 0.2;
24+
cp = range(num).map(i => [
25+
canvasSize*margin + Math.random()*canvasSize*(1-2*margin),
26+
canvasSize*margin + Math.random()*canvasSize*(1-2*margin)
27+
]);
28+
// console.log(cp);
29+
}
30+
31+
// calculate intermediate points
32+
function runInterpolation(res = 10) {
33+
let method = radioValue('method');
34+
let clip = radioValue('clip');
35+
let cubicTension = radioValue('cubicTension');
36+
let sincFilterSize = 2;
37+
let sincWindow = x => Math.exp(-x * x);
38+
let s = Smooth(cp, { method, clip, cubicTension, sincFilterSize, sincWindow });
39+
40+
ip = [];
41+
for (let p=-1; p<cp.length; p++) {
42+
for (let i=0; i<=res; i++) {
43+
let u = p + i/res;
44+
ip.push( s(u) );
45+
}
46+
}
47+
// console.log(ip);
48+
}
49+
50+
function generate() {
51+
runGeneration();
52+
interpolate();
53+
}
54+
55+
function interpolate() {
56+
runInterpolation();
57+
main.clear();
58+
main.lines (ip, '#000', 1 );
59+
main.points(cp, '#000', 6);
60+
main.points(ip, '#f00', 3);
61+
}
62+
63+
document.querySelector('button').addEventListener('click', generate);
64+
65+
// console.log(document.querySelector('input[type=radio]'));
66+
document.querySelectorAll('input[type=radio]').forEach(e => {
67+
e.addEventListener('change', interpolate);
68+
});
69+
70+
generate();

‎index.html

-133
This file was deleted.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"postinstall": "npm run compile",
1717
"test": "jasmine-node --coffee --verbose test/specs/*.coffee",
1818
"sindemo": "coffee sindemo.coffee",
19-
"demo": "live-server"
19+
"demo": "live-server . --open=demo"
2020
},
2121
"repository": {
2222
"type": "git",

0 commit comments

Comments
 (0)