diff options
Diffstat (limited to 'js/lib')
-rwxr-xr-x | js/lib/drawing/world.js | 26 | ||||
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 329 | ||||
-rwxr-xr-x | js/lib/geom/circle.js | 100 | ||||
-rwxr-xr-x | js/lib/geom/geom-obj.js | 165 | ||||
-rwxr-xr-x | js/lib/geom/line.js | 57 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 107 | ||||
-rwxr-xr-x | js/lib/geom/sub-path.js | 86 | ||||
-rwxr-xr-x | js/lib/rdge/materials/bump-metal-material.js | 6 | ||||
-rw-r--r-- | js/lib/rdge/materials/pulse-material.js | 8 | ||||
-rw-r--r-- | js/lib/rdge/materials/radial-blur-material.js | 6 | ||||
-rw-r--r-- | js/lib/rdge/materials/taper-material.js | 2 | ||||
-rwxr-xr-x | js/lib/rdge/materials/uber-material.js | 46 | ||||
-rw-r--r-- | js/lib/rdge/runtime/CanvasDataManager.js | 83 | ||||
-rw-r--r-- | js/lib/rdge/runtime/GLRuntime.js | 357 | ||||
-rw-r--r-- | js/lib/rdge/runtime/RuntimeGeomObj.js | 633 | ||||
-rw-r--r-- | js/lib/rdge/runtime/RuntimeMaterial.js | 351 |
16 files changed, 732 insertions, 1630 deletions
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index b8bceda6..049145ce 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js | |||
@@ -17,7 +17,7 @@ var worldCounter = 0; | |||
17 | // Class GLWorld | 17 | // Class GLWorld |
18 | // Manages display in a canvas | 18 | // Manages display in a canvas |
19 | /////////////////////////////////////////////////////////////////////// | 19 | /////////////////////////////////////////////////////////////////////// |
20 | var World = function GLWorld( canvas, use3D ) { | 20 | var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) { |
21 | /////////////////////////////////////////////////////////////////////// | 21 | /////////////////////////////////////////////////////////////////////// |
22 | // Instance variables | 22 | // Instance variables |
23 | /////////////////////////////////////////////////////////////////////// | 23 | /////////////////////////////////////////////////////////////////////// |
@@ -30,7 +30,11 @@ var World = function GLWorld( canvas, use3D ) { | |||
30 | 30 | ||
31 | this._canvas = canvas; | 31 | this._canvas = canvas; |
32 | if (this._useWebGL) { | 32 | if (this._useWebGL) { |
33 | this._glContext = canvas.getContext("experimental-webgl"); | 33 | if(preserveDrawingBuffer) { |
34 | this._glContext = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true}); | ||
35 | } else { | ||
36 | this._glContext = canvas.getContext("experimental-webgl"); | ||
37 | } | ||
34 | } else { | 38 | } else { |
35 | this._2DContext = canvas.getContext( "2d" ); | 39 | this._2DContext = canvas.getContext( "2d" ); |
36 | } | 40 | } |
@@ -347,20 +351,18 @@ var World = function GLWorld( canvas, use3D ) { | |||
347 | return false; | 351 | return false; |
348 | }; | 352 | }; |
349 | 353 | ||
350 | this.generateUniqueNodeID = function() | 354 | this.generateUniqueNodeID = function() { |
351 | { | 355 | var str = "" + this._nodeCounter; |
352 | var str = String( this._nodeCounter ); | ||
353 | this._nodeCounter++; | 356 | this._nodeCounter++; |
354 | return str; | 357 | return str; |
355 | } | 358 | }; |
356 | 359 | ||
357 | 360 | ||
358 | // start RDGE passing your runtime object, and false to indicate we don't need a an initialization state | 361 | // start RDGE passing your runtime object, and false to indicate we don't need a an initialization state |
359 | // in the case of a procedurally built scene an init state is not needed for loading data | 362 | // in the case of a procedurally built scene an init state is not needed for loading data |
360 | if (this._useWebGL) { | 363 | if (this._useWebGL) { |
361 | rdgeStarted = true; | 364 | rdgeStarted = true; |
362 | var id = this._canvas.getAttribute( "data-RDGE-id" ); | 365 | this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" ); |
363 | this._canvas.rdgeid = id; | ||
364 | g_Engine.registerCanvas(this._canvas, this); | 366 | g_Engine.registerCanvas(this._canvas, this); |
365 | RDGEStart( this._canvas ); | 367 | RDGEStart( this._canvas ); |
366 | this._canvas.task.stop() | 368 | this._canvas.task.stop() |
@@ -680,7 +682,7 @@ World.prototype.render = function() { | |||
680 | var root = this.getGeomRoot(); | 682 | var root = this.getGeomRoot(); |
681 | this.hRender( root ); | 683 | this.hRender( root ); |
682 | } else { | 684 | } else { |
683 | g_Engine.setContext( this._canvas.rdgeId ); | 685 | g_Engine.setContext( this._canvas.rdgeid ); |
684 | //this.draw(); | 686 | //this.draw(); |
685 | this.restartRenderLoop(); | 687 | this.restartRenderLoop(); |
686 | } | 688 | } |
@@ -727,7 +729,8 @@ World.prototype.getShapeFromPoint = function( offsetX, offsetY ) { | |||
727 | } | 729 | } |
728 | }; | 730 | }; |
729 | 731 | ||
730 | World.prototype.export = function( exportForPublish ) { | 732 | World.prototype.export = function() |
733 | { | ||
731 | var exportStr = "GLWorld 1.0\n"; | 734 | var exportStr = "GLWorld 1.0\n"; |
732 | var id = this.getCanvas().getAttribute( "data-RDGE-id" ); | 735 | var id = this.getCanvas().getAttribute( "data-RDGE-id" ); |
733 | exportStr += "id: " + id + "\n"; | 736 | exportStr += "id: " + id + "\n"; |
@@ -742,7 +745,8 @@ World.prototype.export = function( exportForPublish ) { | |||
742 | // we need 2 export modes: One for save/restore, one for publish. | 745 | // we need 2 export modes: One for save/restore, one for publish. |
743 | // hardcoding for now | 746 | // hardcoding for now |
744 | //var exportForPublish = false; | 747 | //var exportForPublish = false; |
745 | if (!exportForPublish) exportForPublish = false; | 748 | //if (!exportForPublish) exportForPublish = false; |
749 | var exportForPublish = true; | ||
746 | exportStr += "publish: " + exportForPublish + "\n"; | 750 | exportStr += "publish: " + exportForPublish + "\n"; |
747 | 751 | ||
748 | if (exportForPublish && this._useWebGL) | 752 | if (exportForPublish && this._useWebGL) |
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 9a934928..4c42539a 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js | |||
@@ -32,13 +32,24 @@ var BrushStroke = function GLBrushStroke() { | |||
32 | //stroke information | 32 | //stroke information |
33 | this._strokeWidth = 0.0; | 33 | this._strokeWidth = 0.0; |
34 | this._strokeColor = [0.4, 0.4, 0.4, 1.0]; | 34 | this._strokeColor = [0.4, 0.4, 0.4, 1.0]; |
35 | this._secondStrokeColor = [1, 0.4, 0.4, 1.0]; | ||
36 | this._strokeHardness = 100; | ||
35 | this._strokeMaterial = null; | 37 | this._strokeMaterial = null; |
36 | this._strokeStyle = "Solid"; | 38 | this._strokeStyle = "Solid"; |
39 | this._strokeDoSmoothing = false; | ||
40 | this._strokeUseCalligraphic = false; | ||
41 | this._strokeAngle = 0; | ||
37 | 42 | ||
38 | //the wetness of the brush (currently this is multiplied to the square of the stroke width, but todo should be changed to not depend on stroke width entirely | 43 | //the wetness of the brush (currently this is multiplied to the square of the stroke width, but todo should be changed to not depend on stroke width entirely |
39 | //smaller value means more samples for the path | 44 | //smaller value means more samples for the path |
40 | this._WETNESS_FACTOR = 0.25; | 45 | this._WETNESS_FACTOR = 0.25; |
41 | 46 | ||
47 | //threshold that tells us whether two samples are too far apart | ||
48 | this._MAX_SAMPLE_DISTANCE_THRESHOLD = 5; | ||
49 | |||
50 | //threshold that tells us whether two samples are too close | ||
51 | this._MIN_SAMPLE_DISTANCE_THRESHOLD = 2; | ||
52 | |||
42 | //prevent extremely long paths that can take a long time to render | 53 | //prevent extremely long paths that can take a long time to render |
43 | this._MAX_ALLOWED_SAMPLES = 500; | 54 | this._MAX_ALLOWED_SAMPLES = 500; |
44 | 55 | ||
@@ -114,7 +125,7 @@ var BrushStroke = function GLBrushStroke() { | |||
114 | //add the point only if it is some epsilon away from the previous point | 125 | //add the point only if it is some epsilon away from the previous point |
115 | var numPoints = this._Points.length; | 126 | var numPoints = this._Points.length; |
116 | if (numPoints>0) { | 127 | if (numPoints>0) { |
117 | var threshold = this._WETNESS_FACTOR*this._strokeWidth; | 128 | var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD;//this._WETNESS_FACTOR*this._strokeWidth; |
118 | var prevPt = this._Points[numPoints-1]; | 129 | var prevPt = this._Points[numPoints-1]; |
119 | var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; | 130 | var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; |
120 | var diffPtMag = Math.sqrt(diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]); | 131 | var diffPtMag = Math.sqrt(diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]); |
@@ -173,6 +184,26 @@ var BrushStroke = function GLBrushStroke() { | |||
173 | this._strokeColor = c; | 184 | this._strokeColor = c; |
174 | }; | 185 | }; |
175 | 186 | ||
187 | this.setSecondStrokeColor = function(c){ | ||
188 | this._secondStrokeColor=c; | ||
189 | } | ||
190 | |||
191 | this.setStrokeHardness = function(h){ | ||
192 | this._strokeHardness=h; | ||
193 | } | ||
194 | |||
195 | this.setDoSmoothing = function(s){ | ||
196 | this._strokeDoSmoothing = s; | ||
197 | } | ||
198 | |||
199 | this.setStrokeUseCalligraphic = function(c){ | ||
200 | this._strokeUseCalligraphic = c; | ||
201 | } | ||
202 | |||
203 | this.setStrokeAngle = function(a){ | ||
204 | this._strokeAngle = a; | ||
205 | } | ||
206 | |||
176 | this.getStrokeStyle = function () { | 207 | this.getStrokeStyle = function () { |
177 | return this._strokeStyle; | 208 | return this._strokeStyle; |
178 | }; | 209 | }; |
@@ -219,7 +250,8 @@ var BrushStroke = function GLBrushStroke() { | |||
219 | var numPoints = this._Points.length; | 250 | var numPoints = this._Points.length; |
220 | 251 | ||
221 | //**** add samples to the path if needed...linear interpolation for now | 252 | //**** add samples to the path if needed...linear interpolation for now |
222 | if (numPoints>1) { | 253 | //if (numPoints>1) { |
254 | if (0){ | ||
223 | var threshold = this._WETNESS_FACTOR*this._strokeWidth; | 255 | var threshold = this._WETNESS_FACTOR*this._strokeWidth; |
224 | var prevPt = this._Points[0]; | 256 | var prevPt = this._Points[0]; |
225 | var prevIndex = 0; | 257 | var prevIndex = 0; |
@@ -251,6 +283,66 @@ var BrushStroke = function GLBrushStroke() { | |||
251 | } | 283 | } |
252 | } | 284 | } |
253 | 285 | ||
286 | //todo 4-point subdivision iterations over continuous regions of 'long' segments | ||
287 | // look at http://www.gvu.gatech.edu/~jarek/Split&Tweak/ for formula | ||
288 | //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation | ||
289 | if (this._strokeDoSmoothing && numPoints>1) { | ||
290 | var numInsertedPoints = 0; | ||
291 | var newPoints = []; | ||
292 | var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD;//this determines whether a segment between two sample is long enough to warrant checking for angle | ||
293 | var prevPt = this._Points[0]; | ||
294 | newPoints.push(this._Points[0]); | ||
295 | for (var i=1;i<numPoints;i++){ | ||
296 | var pt = this._Points[i]; | ||
297 | var diff = [pt[0]-prevPt[0], pt[1]-prevPt[1]]; | ||
298 | var distance = Math.sqrt(diff[0]*diff[0]+diff[1]*diff[1]); | ||
299 | if (distance>threshold){ | ||
300 | //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points) | ||
301 | var prev = (i===1) ? i-1 : i-2; | ||
302 | var next = (i===numPoints-1) ? i : i+1; | ||
303 | var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]]; | ||
304 | //insert points along the prev. to current point | ||
305 | var numNewPoints = Math.floor(distance/threshold); | ||
306 | for (var j=0;j<numNewPoints;j++){ | ||
307 | var param = (j+1)/(numNewPoints+1); | ||
308 | var newpt = this._CatmullRomSplineInterpolate(ctrlPts, param); | ||
309 | //insert new point before point i | ||
310 | //this._Points.splice(i, 0, newpt); | ||
311 | //i++; | ||
312 | newPoints.push(newpt); | ||
313 |