/
bezier_curves.js
140 lines (109 loc) · 3.83 KB
/
bezier_curves.js
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/*
* face_finding_example.js
* Written by Bryce Summers on 1 - 4 - 2017.
*
* Purpose: Demonstrates and tests my Polyline Set to HalfedgeGraph Embedding code.
*/
function main()
{
G = new Canvas_Drawer();
lines = createBezierCurves();
// Draw the initial lines.
for(var i = 0; i < lines.length; i++)
{
line = lines[i];
// This line commented out.
// If you uncomment it, you should see know difference between the original
// polygonal discretization and the output bezier curve drawing.
//G.drawPolyline(line);
}
// Embed the polylines within a graph.
var embedder = new SCRIB.PolylineGraphEmbedder();
var graph = embedder.embedPolylineArray(lines);
// Now Use a Post Processor to derive easy to work with structures which may be drawn to the screen.
var postProcessor = new SCRIB.PolylineGraphPostProcessor();
postProcessor.load_graph(graph);
// Immediately write out the graph to face info structures.
faces = postProcessor.generate_faces_info();
// Draws FaceInfo Arrays by extracting their split bezier curves.
drawFaceInfoArray(G, faces);
}
// Create the Bryce Data Structure's Brand of Bezier curves.
// To convert from absolute points, subtract control points from on curve points.
function createBezierCurves()
{
p0 = new BDS.Point(0, 0);
p1 = new BDS.Point(500, 500);
// Tangent direction at pt0.
tan0 = new BDS.Point(500, 0);
// Tangent direction at pt1.
tan1 = new BDS.Point(500, 100);
curve1 = new BDS.Hermite_Curve(p0, tan0, p1, tan1);
// Note: This curve is an equivalent curve constructed from Bezier control points,
// Like those used in Canvas drawing.
// pts and tangents may be converted to bezier points (and vice versa...) as follows:
// b0 = p0
// b1 = p0 + tan0/3
// b2 = p1 - tan1/3
// b3 = p1
curve1 = BDS.Hermite_Curve.newFromBezier(p0, p0.add(tan0.divScalar(3)), p1.sub(tan1.divScalar(3)), p1);
// --
p0 = new BDS.Point(500, 0);
p1 = new BDS.Point(0, 500);
tan0 = new BDS.Point(-500, 0);
tan1 = new BDS.Point(-500, 0);
curve2 = new BDS.Hermite_Curve(p0, tan0, p1, tan1);
// --
p0 = new BDS.Point(0, 400);
p1 = new BDS.Point(500, 400);
tan0 = new BDS.Point(0, 500);
tan1 = new BDS.Point(0, 500);
curve3 = new BDS.Hermite_Curve(p0, tan0, p1, tan1);
// Discretize the curve with a maximum resolution of 10 pixel units.
times1 = [];
times2 = [];
times3 = [];
resolution = 10 // 10 pixel max_length for discretized segments.
curve1.name = "curve1";
curve2.name = "curve2";
curve3.name = "curve3";
line1 = curve1.toPolyline(10, times1);
line2 = curve2.toPolyline(10, times2);
line3 = curve3.toPolyline(10, times3);
line1.setAssociatedData(curve1);
line2.setAssociatedData(curve2);
line3.setAssociatedData(curve3);
line1.setTimes(times1);
line2.setTimes(times2);
line3.setTimes(times3);
return [line1, line2, line3];
}
// Draws an array of SCRIB.Face_Info structures to the screen,
// using HTML5 Canvas2D.
function drawFaceInfoArray(G, face_info_array)
{
// For every face, convert it to a bezier face loop,
// then stylishly draw it to the screen.
var len = face_info_array.length;
for(var i = 0; i < len; i++)
{
face = face_info_array[i];
face_loop = face.toCurves();
// Draw Non-complemented faces.
if(!face.isComplemented())
{
// Black stroke, random fill.
G.strokeColor(0xff000000);
G.fillColor(G.randomColor());
G.drawBezierLoop(face_loop, true, true);
}
else
{
// White Stroke, No Fill.
G.strokeColor(0xffffffff);
G.drawBezierLoop(face_loop, true, false);
}
}
}
// Run Example.
main();