/
CornerContourGluon.hx
310 lines (290 loc) · 12.3 KB
/
CornerContourGluon.hx
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
package cornerContourGluonTest;
//import cornerContour.io.Float32Array;
// contour code
import cornerContour.Sketcher;
import cornerContour.Pen2D;
import cornerContour.StyleSketch;
import cornerContour.StyleEndLine;
// SVG path parser
import justPath.*;
import justPath.transform.ScaleContext;
import justPath.transform.ScaleTranslateContext;
import justPath.transform.TranslationContext;
// webgl gl stuff
import gluon.webgl.GLContext;
import gluon.webgl.GLProgram;
import typedarray.Float32Array;
import gluon.webgl.GLBuffer;
import gluon.webgl.GLShader;
import cornerContourGluonTest.HelpGL;
import cornerContourGluonTest.ShaderColor2D;
import cornerContourGluonTest.BufferGL;
import cornerContourGluonTest.GLwrapper;
import cornerContourGluonTest.Animate;
function main(){
var animate = new Animate();
var glWrapper = new GLwrapper();
var cornerContourGluon = new CornerContourGluon( glWrapper.gl );
glWrapper.onFrame = cornerContourGluon.renderOnce;
glWrapper.onStop = animate.stop;
animate.onEnterFrame = glWrapper.mainLoop;
animate.start();
}
class CornerContourGluon {
var one = 0;
// cornerContour specific code
var sketcher: Sketcher;
var pen2D: Pen2D;
var quadtest_d = "M200,300 Q400,50 600,300 T1000,300";
var cubictest_d = "M100,200 C100,100 250,100 250,200S400,300 400,200";
// WebGL/Html specific code
public var gl: GLContext;
// general inputs
final vertexPosition = 'vertexPosition';
final vertexColor = 'vertexColor';
// general
public var width: Int;
public var height: Int;
// Color
public var programColor: GLProgram;
public var bufColor: GLBuffer;
var arr32: cornerContour.io.Float32Array;
var len: Int;
var totalTriangles: Int;
var bufferLength: Int;
public function new( gl: GLContext ){
this.gl = gl;
width = 1024;
height = 768;
// use Pen to draw to Array
drawContours();
rearrageDrawData();
}
public
function rearrageDrawData(){
trace( 'rearrangeDrawData' );
var pen = pen2D;
var data = pen.arr;
var red = 0.;
var green = 0.;
var blue = 0.;
var alpha = 0.;
var color: Int = 0;
// triangle length
totalTriangles = Std.int( data.size/7 );
bufferLength = totalTriangles*3;
// xy rgba = 6
len = Std.int( totalTriangles * 6 * 3 );
var j = 0;
arr32 = new cornerContour.io.Float32Array( len );
for( i in 0...totalTriangles ){
pen.pos = i;
color = Std.int( data.color );
alpha = alphaChannel( color );
red = redChannel( color );
green = greenChannel( color );
blue = blueChannel( color );
// populate arr32.
arr32[ j ] = gx( data.ax );
j++;
arr32[ j ] = gy( data.ay );
j++;
arr32[ j ] = red;
j++;
arr32[ j ] = green;
j++;
arr32[ j ] = blue;
j++;
arr32[ j ] = alpha;
j++;
arr32[ j ] = gx( data.bx );
j++;
arr32[ j ] = gy( data.by );
j++;
arr32[ j ] = red;
j++;
arr32[ j ] = green;
j++;
arr32[ j ] = blue;
j++;
arr32[ j ] = alpha;
j++;
arr32[ j ] = gx( data.cx );
j++;
arr32[ j ] = gy( data.cy );
j++;
arr32[ j ] = red;
j++;
arr32[ j ] = green;
j++;
arr32[ j ] = blue;
j++;
arr32[ j ] = alpha;
j++;
}
}
public
function drawContours(){
trace( 'drawContours' );
pen2D = new Pen2D( 0xFF0000FF );
arcSVG();
pen2D.currentColor = 0xff0000FF;
birdSVG();
cubicSVG();
quadSVG();
}
public
function renderOnce( width: Int, height: Int ) {
if( one > 1 ) return; // render it twice?? to stop flicker?
trace( 'renderOnce' );
one++;
clearAll( gl, width, height, 0., 0., 0., 1. );
programColor = programSetup( gl, vertexString, fragmentString );
gl.bindBuffer( ARRAY_BUFFER, null );
gl.useProgram( programColor );
bufColor = interleaveXY_RGBA( gl
, programColor
, arr32
, vertexPosition, vertexColor, true );
gl.disable( CULL_FACE );
gl.bindBuffer( ARRAY_BUFFER, bufColor );
gl.useProgram( programColor );
gl.drawArrays( TRIANGLES, 0, bufferLength );
}
public static inline
function alphaChannel( int: Int ) : Float
return ((int >> 24) & 255) / 255;
public static inline
function redChannel( int: Int ) : Float
return ((int >> 16) & 255) / 255;
public static inline
function greenChannel( int: Int ) : Float
return ((int >> 8) & 255) / 255;
public static inline
function blueChannel( int: Int ) : Float
return (int & 255) / 255;
public inline
function gx( v: Float ): Float {
return -( 1 - 2*v/width );
}
public inline
function gy( v: Float ): Float {
return ( 1 - 2*v/height );
}
/**
* draws Kiwi svg
*/
public
function birdSVG(){
var sketcher = new Sketcher( pen2D, StyleSketch.Fine, StyleEndLine.both );
sketcher.width = 2;
var scaleTranslateContext = new ScaleTranslateContext( sketcher, 20, 0, 1, 1 );
var p = new SvgPath( scaleTranslateContext );
p.parse( bird_d );
}
/**
* draws cubic SVG
*/
public
function cubicSVG(){
var sketcher = new Sketcher( pen2D, StyleSketch.Fine, StyleEndLine.both );
sketcher.width = 10;
// function to adjust color of curve along length
sketcher.colourFunction = function( colour: Int, x: Float, y: Float, x_: Float, y_: Float ): Int {
return Math.round( colour-1*x*y );
}
var translateContext = new TranslationContext( sketcher, 50, 200 );
var p = new SvgPath( translateContext );
p.parse( cubictest_d );
}
/**
* draws quad SVG
*/
public
function quadSVG(){
var sketcher = new Sketcher( pen2D, StyleSketch.Fine, StyleEndLine.both );
sketcher.width = 1;
// function to adjust width of curve along length
sketcher.widthFunction = function( width: Float, x: Float, y: Float, x_: Float, y_: Float ): Float{
return width+0.008*2;
}
var translateContext = new ScaleTranslateContext( sketcher, 0, 100, 0.5, 0.5 );
var p = new SvgPath( translateContext );
p.parse( quadtest_d );
}
/**
* draws elipse arcs
*/
public
function arcSVG(){
var arcs0 = [ arc0_0, arc0_1, arc0_2, arc0_3 ];
var arcs1 = [ arc1_0, arc1_1, arc1_2, arc1_3 ];
var arcs2 = [ arc2_0, arc2_1, arc2_2, arc2_3 ];
var arcs3 = [ arc3_0, arc3_1, arc3_2, arc3_3 ];
var arcs4 = [ arc4_0, arc4_1, arc4_2, arc4_3 ];
var arcs5 = [ arc5_0, arc5_1, arc5_2, arc5_3 ];
var arcs6 = [ arc6_0, arc6_1, arc6_2, arc6_3 ];
var arcs7 = [ arc7_0, arc7_1, arc7_2, arc7_3 ];
var pallet = [ silver, gainsboro, lightGray, crimson ];
var x0 = 130;
var x1 = 450;
var yPos = [ -30, 100, 250, 400 ];
var arcs = [ arcs0, arcs1, arcs2, arcs3, arcs4, arcs5, arcs6, arcs7 ];
for( i in 0...yPos.length ){
drawSet( arcs.shift(), pallet, x0, yPos[i], 0.5 );
drawSet( arcs.shift(), pallet, x1, yPos[i], 0.5 );
}
}
// draws a set of svg ellipses.
function drawSet( arcs: Array<String>, col:Array<Int>, x: Float, y: Float, s: Float ){
for( i in 0...arcs.length ) draw_d( arcs[ i ], x, y, s, 1., col[ i ] );
}
// draws an svg ellipse
function draw_d( d: String, x: Float, y: Float, s: Float, w: Float, color: Int ){
pen2D.currentColor = color;
var sketcher = new Sketcher( pen2D, StyleSketch.Fine, StyleEndLine.both );
sketcher.width = w;
var trans = new ScaleTranslateContext( sketcher, x, y, s, s );
var p = new SvgPath( trans );
p.parse( d );
}
// elipses
var crimson = 0xFFDC143C;
var silver = 0xFFC0C0C0;
var gainsboro = 0xFFDCDCDC;
var lightGray = 0xFFD3D3D3;
var arc0_0 = "M 100 200 A 100 50 0.0 0 1 250 150";
var arc0_1 = "M 100 200 A 100 50 0.0 1 0 250 150";
var arc0_2 = "M 100 200 A 100 50 0.0 1 1 250 150";
var arc0_3 = "M 100 200 A 100 50 0.0 0 0 250 150";
var arc1_0 = "M 100 200 A 100 50 0.0 0 0 250 150";
var arc1_1 = "M 100 200 A 100 50 0.0 1 0 250 150";
var arc1_2 = "M 100 200 A 100 50 0.0 1 1 250 150";
var arc1_3 = "M 100 200 A 100 50 0.0 0 1 250 150";
var arc2_0 = "M 100 200 A 100 50 -15 0 0 250 150";
var arc2_1 = "M 100 200 A 100 50 -15 0 1 250 150";
var arc2_2 = "M 100 200 A 100 50 -15 1 1 250 150";
var arc2_3 = "M 100 200 A 100 50 -15 1 0 250 150";
var arc3_0 = "M 100 200 A 100 50 -15 0 0 250 150";
var arc3_1 = "M 100 200 A 100 50 -15 0 1 250 150";
var arc3_2 = "M 100 200 A 100 50 -15 1 0 250 150";
var arc3_3 = "M 100 200 A 100 50 -15 1 1 250 150";
var arc4_0 = "M 100 200 A 100 50 -44 1 0 250 150";
var arc4_1 = "M 100 200 A 100 50 -44 0 1 250 150";
var arc4_2 = "M 100 200 A 100 50 -44 1 1 250 150";
var arc4_3 = "M 100 200 A 100 50 -44 0 0 250 150";
var arc5_0 = "M 100 200 A 100 50 -44 0 0 250 150";
var arc5_1 = "M 100 200 A 100 50 -44 1 1 250 150";
var arc5_2 = "M 100 200 A 100 50 -44 1 0 250 150";
var arc5_3 = "M 100 200 A 100 50 -44 0 1 250 150";
var arc6_0 = "M 100 200 A 100 50 -45 0 0 250 150";
var arc6_1 = "M 100 200 A 100 50 -45 0 1 250 150";
var arc6_2 = "M 100 200 A 100 50 -45 1 1 250 150";
var arc6_3 = "M 100 200 A 100 50 -45 1 0 250 150";
var arc7_0 = "M 100 200 A 100 50 -45 0 0 250 150";
var arc7_1 = "M 100 200 A 100 50 -45 0 1 250 150";
var arc7_2 = "M 100 200 A 100 50 -45 1 0 250 150";
var arc7_3 = "M 100 200 A 100 50 -45 1 1 250 150";
// kiwi bird
var bird_d = "M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331zM445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111C434.693,207.929,439.613,203.01,445.731,203.01z";
}