-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (68 loc) · 1.86 KB
/
index.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
61
62
63
64
65
66
67
68
69
70
71
72
<html>
<head>
<title>Paperplane demo</title>
<script src="bezier.js"></script>
<script src="svg.js"></script>
<script src="math.js"></script>
<script>
// Base 3d coordinates for a paperplane
const plane_coordinates = {
tip : [0, 0, 0],
left_back_corner : [-3, 5, 1],
left_inside_fold : [-1, 6, 2],
bottom : [0, 6, 0],
right_back_corner : [-3, 5, 1],
right_inside_fold : [-1, 6, 2],
}
SVG.on(document, 'DOMContentLoaded', function() {
var scale = 10;
var draw = SVG('paperplane');
var tr1 = draw.polygon('0,0 100,50 50,100').fill('black')
var box = document.getElementById('box');
var curve = new Bezier(0,0,0 , 500,10,0 , 50,80,10);
function project(point) {
return point
}
function normalise(v) {
let length = Math.sqrt(v.x*v.x + v.y*v.y + v.z*v.z);
return {
x: v.x / length,
y: v.y / length,
z: v.z / length
}
}
function add(a, b, scale) {
return {
x: a.x + b.x * scale,
y: a.y + b.y * scale,
z: a.z + b.z * scale
}
}
function animate(t) {
let der = curve.derivative(t)
let norm = curve.normal(t)
let derv = normalise(der)
let p = curve.get(t)
let bp = project(p)
let fp = project(add(p,derv,10))
let tp = project(add(p,norm,10))
draw.rect(500,100).fill('white')
tr1 = draw.polygon(bp.x.toString()+','+bp.y.toString()+' '+fp.x.toString()+','+fp.y.toString()+' '+tp.x.toString()+','+tp.y.toString()).fill('black')
if (t < 1) {
setTimeout(function () {animate(t+0.001);}, 10)
}
}
animate(0)
})
</script>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="paperplane"></div>
</body>
</html>