-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdecasteljau.html
60 lines (54 loc) · 2 KB
/
decasteljau.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<meta charset=UTF-8>
<title>De Casteljau Algorithm Demo</title>
<canvas id=canvas width=800 height=600>No <canvas> support</canvas>
<script src=splines.js></script>
<script>"use strict";
/*
De Casteljau algorithm demo
Copyright (C) 2015 Jona Stubbe
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. */
var ctx = document.getElementById('canvas').getContext('2d');
var cpoints = [[0,600],[400,0],[800,600]];
var step = 0.01;
var pos = 0;
var vizDeCasteljau = function(ctx, cpoints, pos) {
ctx.fillStyle = "red";
var len = (cpoints.length|0)-1|0;
var red = new Array(len);
ctx.beginPath();
ctx.moveTo(cpoints[0][0], cpoints[0][1]);
for (var i = 0; i < len; i = i+1|0) {
ctx.lineTo(cpoints[i+1|0][0], cpoints[i+1|0][1]);
red[i] = lerp(cpoints[i], cpoints[i+1|0], pos);
ctx.fillRect(red[i][0]-5, red[i][1]-5, 10, 10);
}
ctx.stroke();
if (red.length > 1) {vizDeCasteljau(ctx, red, pos)}
};
var baseBezier = function(ctx, cpoints) {
ctx.beginPath();
ctx.moveTo(cpoints[0][0],cpoints[0][1]);
var step = 0.01;
for (var pos = step; pos < 1; pos += step)
ctx.lineTo.apply(ctx, deCasteljau(cpoints, pos));
var end = cpoints[(cpoints.length|0)-1|0];
ctx.lineTo(end[0],end[1]);
ctx.stroke();
};
animation(function(pos) {
ctx.clearRect(0,0,800,600);
baseBezier(ctx, cpoints);
vizDeCasteljau(ctx, cpoints, pos);
});
</script>