-
Notifications
You must be signed in to change notification settings - Fork 5
/
vtvt_demo_3.html
65 lines (49 loc) · 3.18 KB
/
vtvt_demo_3.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
<!DOCTYPE html>
<html lang="en-CA">
<head>
<title>vtvt demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="vtvt_demo_styles.css">
<script type="text/javascript" src="vtvt.js"></script>
</head>
<body>
<h3>Demo canvas #3</h3>
<p>Besides vectors, it's also possible to draw lines, points and custom objects originating from (0,0) or any other point.</p>
<div class="canvas-wrapper">
<canvas id='vector_canvas_3' class="canvas-wrapped"></canvas>
</div>
<script>
// *************************************************************************************************
// Demo canvas 3
// initialize the scene
var scene3 = new vtvt({canvas_id: "vector_canvas_3", grid_res: 16, circle_rad: 0.5, show_eig: false});
// point only, cannot be dragged
scene3.addVector({coords: [-6, 1], c: "210, 20, 0", draggable: false, kind: 'point', draw_line: true, draw_arrow: false, label: "static point"});
// line only, cannot be dragged
scene3.addVector({coords: [-5, 2], c: "210, 100, 210", draggable: false, kind: 'line', label: "static line"});
// vector, cannot be dragged
scene3.addVector({coords: [-4, 4], c: "70, 50, 220", draggable: false, kind: 'vector', label: "static vector"});
// stem + point, cannot be dragged
scene3.addVector({coords: [-2, 5], c: "50, 220, 140", draggable: false, kind: 'custom', draw_arrow: false, draw_point: true, label: "static stem+point"});
// vector + line, can be dragged
scene3.addVector({coords: [2, 5], c: "100, 150, 150", draggable: true, kind: 'custom', draw_line: true, label: "line+arrow"});
// line only, can be dragged
scene3.addVector({coords: [4, 4], c: "120, 200, 90", draggable: true, kind: 'line', draw_line: true, draw_arrow: false, label: "line"});
// line and point, can be dragged
scene3.addVector({coords: [5, 3], c: "200, 100, 50", draggable: true, kind: 'custom', draw_line: true, draw_arrow: false, draw_point: true, label: "line+point"});
// point only, can be dragged
scene3.addVector({coords: [6, 1], c: "0, 100, 200", draggable: true, kind: 'point', label: "point"});
//arrow, draggable
scene3.addVector({coords: [5, -1], c: "255, 87, 51", draggable: true, kind: 'custom', draw_stem: false, label: "arrow"});
// a displaced vector, can be dragged
scene3.addVector({coords: [1, 4], origin: [-5,-5], c: "190, 160, 0", draggable: true, kind: 'vector', label: "displaced"});
// a displaced vector + line, can be dragged
scene3.addVector({coords: [5, -4], origin: [5, -4], c: "255, 10, 10", draggable: true, kind: 'custom', draw_line: true, label: "displaced line+arrow", map_coords: function(){
return {mapXo: scene3.vectors[9].coord_x + scene3.vectors[9].orig_x, mapYo: scene3.vectors[9].coord_y + scene3.vectors[9].orig_y}
}});
// render
scene3.render();
</script>
</body>
</html>