GIF Loop Coder (GLC) Documentation
10 | 11 |This is the documentation for glc. I suggest you start by reading the intro section. Follow along with that and actually type and run the examples there. Then scan through the Objects, Styles and Property Types sections and try out different objects and styles. Once you get the hang of the program, check the Tips and Advance Use section to take it to the next level.
12 | 13 |You can also check out the GLC Blog, where new features, sample code and small tutorials are posted from time to time.
14 | 15 |-
16 |
- TOC 17 |
- 1. Introduction to GIF Loop Coder (GLC) 18 |
- 2. Objects 19 |
- 3. Styles 20 |
- 4. Property Types 21 |
- 5. Tips and Advanced Use 22 |
GIF Loop Coder (GLC) Documentation
11 |-
12 |
- TOC 13 |
- 1. Introduction to GIF Loop Coder (GLC) 14 |
- 2. Objects 15 |
- 3. Styles 16 |
- 4. Property Types 17 | 24 | 25 |
- 5. Tips and Advanced Use 26 |
4. Properties
30 | 31 |
32 |
33 | this.depCount&&!this.defined){if(G(l)){if(this.events.error&&this.map.isDefine||e.onError!==ca)try{f=h.execCb(c,l,b,f)}catch(d){a=d}else f=h.execCb(c,l,b,f);this.map.isDefine&&
19 | void 0===f&&((b=this.module)?f=b.exports:this.usingExports&&(f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=l;this.exports=f;if(this.map.isDefine&&!this.ignore&&(q[c]=f,e.onResourceLoad))e.onResourceLoad(h,this.map,this.depMaps);y(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=
20 | !0)}}else t(h.defQueueMap,c)||this.fetch()}},callPlugin:function(){var a=this.map,b=a.id,d=i(a.prefix);this.depMaps.push(d);s(d,"defined",u(this,function(f){var l,d;d=n(aa,this.map.id);var g=this.map.name,P=this.map.parentMap?this.map.parentMap.name:null,p=h.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(g=f.normalize(g,function(a){return c(a,P,!0)})||""),f=i(a.prefix+"!"+g,this.map.parentMap),s(f,"defined",u(this,function(a){this.init([],function(){return a},
21 | null,{enabled:!0,ignore:!0})})),d=n(m,f.id)){this.depMaps.push(f);if(this.events.error)d.on("error",u(this,function(a){this.emit("error",a)}));d.enable()}}else d?(this.map.url=h.nameToUrl(d),this.load()):(l=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),l.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];A(m,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),l.fromText=u(this,function(f,c){var d=a.name,g=i(d),P=M;c&&(f=c);P&&
22 | (M=!1);r(g);t(k.config,b)&&(k.config[d]=k.config[b]);try{e.exec(f)}catch(m){return w(B("fromtexteval","fromText eval for "+b+" failed: "+m,m,[b]))}P&&(M=!0);this.depMaps.push(g);h.completeLoad(d);p([d],l)}),f.load(a.name,p,l,k))}));h.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){V[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,u(this,function(a,b){var c,f;if("string"===typeof a){a=i(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=
23 | n(L,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;s(a,"defined",u(this,function(a){this.undefed||(this.defineDep(b,a),this.check())}));this.errback?s(a,"error",u(this,this.errback)):this.events.error&&s(a,"error",u(this,function(a){this.emit("error",a)}))}c=a.id;f=m[c];!t(L,c)&&(f&&!f.enabled)&&h.enable(a,this)}));A(this.pluginMaps,u(this,function(a){var b=n(m,a.id);b&&!b.enabled&&h.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=
24 | []);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};h={config:k,contextName:b,registry:m,defined:q,urlFetched:S,defQueue:C,defQueueMap:{},Module:Z,makeModuleMap:i,nextTick:e.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=k.shim,c={paths:!0,bundles:!0,config:!0,map:!0};A(a,function(a,b){c[b]?(k[b]||(k[b]={}),U(k[b],a,!0,!0)):k[b]=a});a.bundles&&A(a.bundles,function(a,b){v(a,
25 | function(a){a!==b&&(aa[a]=b)})});a.shim&&(A(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=h.makeShimExports(a);b[c]=a}),k.shim=b);a.packages&&v(a.packages,function(a){var b,a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(k.paths[b]=a.location);k.pkgs[b]=a.name+"/"+(a.main||"main").replace(ha,"").replace(Q,"")});A(m,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=i(b,null,!0))});if(a.deps||a.callback)h.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;
26 | a.init&&(b=a.init.apply(ba,arguments));return b||a.exports&&da(a.exports)}},makeRequire:function(a,j){function g(c,d,p){var k,n;j.enableBuildCallback&&(d&&G(d))&&(d.__requireJsBuild=!0);if("string"===typeof c){if(G(d))return w(B("requireargs","Invalid require call"),p);if(a&&t(L,c))return L[c](m[a.id]);if(e.get)return e.get(h,c,a,g);k=i(c,a,!1,!0);k=k.id;return!t(q,k)?w(B("notloaded",'Module name "'+k+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):q[k]}J();h.nextTick(function(){J();
27 | n=r(i(null,a));n.skipMap=j.skipMap;n.init(c,d,p,{enabled:!0});D()});return g}j=j||{};U(g,{isBrowser:z,toUrl:function(b){var d,e=b.lastIndexOf("."),j=b.split("/")[0];if(-1!==e&&(!("."===j||".."===j)||1g.attachEvent.toString().indexOf("[native code"))&&!Y?(M=!0,g.attachEvent("onreadystatechange",b.onScriptLoad)):(g.addEventListener("load",b.onScriptLoad,!1),g.addEventListener("error",b.onScriptError,!1));g.src=d;J=g;D?y.insertBefore(g,D):y.appendChild(g);J=null;return g}if(ea)try{importScripts(d),b.completeLoad(c)}catch(i){b.onError(B("importscripts",
35 | "importScripts failed for "+c+" at "+d,i,[c]))}};z&&!s.skipDataMain&&T(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(I=b.getAttribute("data-main"))return r=I,s.baseUrl||(E=r.split("/"),r=E.pop(),O=E.length?E.join("/")+"/":"./",s.baseUrl=O),r=r.replace(Q,""),e.jsExtRegExp.test(r)&&(r=I),s.deps=s.deps?s.deps.concat(r):[r],!0});define=function(b,c,d){var e,g;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(ja,"").replace(ka,
36 | function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(M){if(!(e=J))N&&"interactive"===N.readyState||T(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return N=b}),e=N;e&&(b||(b=e.getAttribute("data-requiremodule")),g=F[e.getAttribute("data-requirecontext")])}g?(g.defQueue.push([b,c,d]),g.defQueueMap[b]=!0):R.push([b,c,d])};define.amd={jQuery:!0};e.exec=function(b){return eval(b)};e(s)}})(this);
37 |
--------------------------------------------------------------------------------
/glc/libs/GIFEncoder.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This class lets you encode animated GIF files
3 | * Base class : http://www.java2s.com/Code/Java/2D-Graphics-GUI/AnimatedGifEncoder.htm
4 | * @author Kevin Weiner (original Java version - kweiner@fmsware.com)
5 | * @author Thibault Imbert (AS3 version - bytearray.org)
6 | * @author Kevin Kwok (JavaScript version - https://github.com/antimatter15/jsgif)
7 | * @version 0.1 AS3 implementation
8 | * @author Keith Peters (slight mods to make it work with require.js - bit-101.com)
9 | */
10 |
11 | define(["libs/LZWEncoder", "libs/NeuQuant"], function(LZWEncoder, NeuQuant) {
12 |
13 | for (var i = 0, chr = {}; i < 256; i++)
14 | chr[i] = String.fromCharCode(i);
15 |
16 | function ByteArray() {
17 | this.bin = [];
18 | }
19 |
20 | ByteArray.prototype.getData = function() {
21 | for (var v = '', l = this.bin.length, i = 0; i < l; i++)
22 | v += chr[this.bin[i]];
23 | return v;
24 | };
25 |
26 | ByteArray.prototype.writeByte = function(val) {
27 | this.bin.push(val);
28 | };
29 |
30 | ByteArray.prototype.writeUTFBytes = function(string) {
31 | for (var l = string.length, i = 0; i < l; i++)
32 | this.writeByte(string.charCodeAt(i));
33 | };
34 |
35 | ByteArray.prototype.writeBytes = function(array, offset, length) {
36 | for (var l = length || array.length, i = offset || 0; i < l; i++)
37 | this.writeByte(array[i]);
38 | };
39 |
40 | var exports = {};
41 | var width; // image size
42 | var height;
43 | var transparent = null; // transparent color if given
44 | var transIndex; // transparent index in color table
45 | var repeat = -1; // no repeat
46 | var delay = 0; // frame delay (hundredths)
47 | var started = false; // ready to output frames
48 | var out;
49 | var image; // current frame
50 | var pixels; // BGR byte array from frame
51 | var indexedPixels; // converted frame indexed to palette
52 | var colorDepth; // number of bit planes
53 | var colorTab; // RGB palette
54 | var usedEntry = []; // active palette entries
55 | var palSize = 7; // color table size (bits-1)
56 | var dispose = -1; // disposal code (-1 = use default)
57 | var closeStream = false; // close stream when finished
58 | var firstFrame = true;
59 | var sizeSet = false; // if false, get size from first frame
60 | var sample = 10; // default sample interval for quantizer
61 | var comment = "Generated by jsgif (https://github.com/antimatter15/jsgif/)"; // default comment for generated gif
62 | var maxColors = 256;
63 |
64 | /**
65 | * Sets the delay time between each frame, or changes it for subsequent frames
66 | * (applies to last frame added)
67 | * int delay time in milliseconds
68 | * @param ms
69 | */
70 |
71 | var setDelay = exports.setDelay = function setDelay(ms) {
72 | delay = Math.round(ms / 10);
73 | };
74 |
75 | /**
76 | * Sets the GIF frame disposal code for the last added frame and any
77 | *
78 | * subsequent frames. Default is 0 if no transparent color has been set,
79 | * otherwise 2.
80 | * @param code
81 | * int disposal code.
82 | */
83 |
84 | var setDispose = exports.setDispose = function setDispose(code) {
85 | if (code >= 0) dispose = code;
86 | };
87 |
88 | /**
89 | * Sets the number of times the set of GIF frames should be played. Default is
90 | * 1; 0 means play indefinitely. Must be invoked before the first image is
91 | * added.
92 | *
93 | * @param iter
94 | * int number of iterations.
95 | * @return
96 | */
97 |
98 | var setRepeat = exports.setRepeat = function setRepeat(iter) {
99 | if (iter >= 0) repeat = iter;
100 | };
101 |
102 | /**
103 | * Sets the transparent color for the last added frame and any subsequent
104 | * frames. Since all colors are subject to modification in the quantization
105 | * process, the color in the final palette for each frame closest to the given
106 | * color becomes the transparent color for that frame. May be set to null to
107 | * indicate no transparent color.
108 | * @param
109 | * Color to be treated as transparent on display.
110 | */
111 |
112 | var setTransparent = exports.setTransparent = function setTransparent(c) {
113 | transparent = c;
114 | };
115 |
116 |
117 | /**
118 | * Sets the comment for the block comment
119 | * @param
120 | * string to be insterted as comment
121 | */
122 |
123 | var setComment = exports.setComment = function setComment(c) {
124 | comment = c;
125 | };
126 |
127 |
128 |
129 | /**
130 | * The addFrame method takes an incoming BitmapData object to create each frames
131 | * @param
132 | * BitmapData object to be treated as a GIF's frame
133 | */
134 |
135 | var addFrame = exports.addFrame = function addFrame(im, is_imageData) {
136 |
137 | if ((im === null) || !started || out === null) {
138 | throw new Error("Please call start method before calling addFrame");
139 | }
140 |
141 | var ok = true;
142 |
143 | try {
144 | if (!is_imageData) {
145 | image = im.getImageData(0, 0, im.canvas.width, im.canvas.height).data;
146 | if (!sizeSet) setSize(im.canvas.width, im.canvas.height);
147 | } else {
148 | image = im;
149 | }
150 | getImagePixels(); // convert to correct format if necessary
151 | analyzePixels(); // build color table & map pixels
152 |
153 | if (firstFrame) {
154 | writeLSD(); // logical screen descriptior
155 | writePalette(); // global color table
156 | if (repeat >= 0) {
157 | // use NS app extension to indicate reps
158 | writeNetscapeExt();
159 | }
160 | }
161 |
162 | writeGraphicCtrlExt(); // write graphic control extension
163 | if (comment !== '') {
164 | writeCommentExt(); // write comment extension
165 | }
166 | writeImageDesc(); // image descriptor
167 | if (!firstFrame) writePalette(); // local color table
168 | writePixels(); // encode and write pixel data
169 | firstFrame = false;
170 | } catch (e) {
171 | ok = false;
172 | }
173 |
174 | return ok;
175 | };
176 |
177 | /**
178 | * Adds final trailer to the GIF stream, if you don't call the finish method
179 | * the GIF stream will not be valid.
180 | */
181 |
182 | var finish = exports.finish = function finish() {
183 |
184 | if (!started) return false;
185 |
186 | var ok = true;
187 | started = false;
188 |
189 | try {
190 | out.writeByte(0x3b); // gif trailer
191 | } catch (e) {
192 | ok = false;
193 | }
194 |
195 | return ok;
196 | };
197 |
198 | /**
199 | * Resets some members so that a new stream can be started.
200 | * This method is actually called by the start method
201 | */
202 |
203 | var reset = function reset() {
204 |
205 | // reset for subsequent use
206 | transIndex = 0;
207 | image = null;
208 | pixels = null;
209 | indexedPixels = null;
210 | colorTab = null;
211 | closeStream = false;
212 | firstFrame = true;
213 | };
214 |
215 | /**
216 | * * Sets frame rate in frames per second. Equivalent to
217 | * GIF Loop Coder Documentation
5 |
6 |
7 |
8 | Home
9 |
10 | GIF Loop Coder Documentation
5 |
6 |
7 |
8 | Home
9 |
10 |
This section discusses the different types of properties, and the kind of data that you can assign to each one of them.
34 | 35 | 36 |Number
37 | 38 |
39 |
40 |
46 |
47 |
54 |
55 |
62 |
63 | 
66 |
67 |
74 |
75 |
86 |
87 | 
88 |
89 |
90 |
93 |
94 |
95 | A number property is pretty simple to understand. You can assign a single number of course:
41 | 42 | 43 |
44 | radius: 100
45 | This will result in that property having that value at all times.
48 | 49 |Or you can assign a 2-element array:
50 | 51 |
52 | radius: [100, 200]
53 | This smoothly interpolates the value from the first element to the second one over the course of the animation.
56 | 57 |An additional method is to assign a larger array of values to the property:
58 | 59 |
60 | radius: [10, 40, 70, 100]
61 | In this case, the property will cycle through the values in the array as the animation progresses. Note, that it will NOT smoothly interpolate between the values. In the example above where there are four values, the first value will be used while t is between 0 and 0.25. When t is between 0.25 and 0.5, the second value will be assigned to the property, and so on, with the third value for t between 0.5 and 0.75 and value four for 0.75 - 1.0
66 |
67 | Finally, if none of these work for you, you can assign a function to the property, in the format:
68 | 69 |
70 | radius: function(t) {
71 | return someValue;
72 | }
73 | This is the most powerful method, allowing you to do whatever calculations you want based on the t value, and return any value you want. For example, the following code uses a sine wave to oscillate and object back and forth across the canvas, based on t:
78 | list.addCircle({
79 | x: function(t) {
80 | return 100 + Math.sin(t * Math.PI * 2) * 100;
81 | },
82 | y: [0, 200],
83 | radius: 20
84 | });
85 | Remember that t will vary from 0 to 1, so here we multiply it by Math.PI * 2 to get an angle that will complete a full cycle of the sine wave.
String
96 | 97 |
98 |
99 |
104 |
105 |
110 |
111 |
116 |
117 | 
124 |
125 |
126 |
133 |
134 |
141 |
142 | 
143 |
144 |
145 |
147 |
148 |
149 |
150 | A string property is also quite simple. Again, you can assign a simple string:
100 | 101 |
102 | text: "hello"
103 | You can also assign an array of values to the property:
106 | 107 |
108 | text: ["hello", "goodbye"]
109 | or...
112 | 113 |
114 | text: ["small", "medium", "large"]
115 | This will function in the same way as a number array, with the difference that even a 2-element array will work this way.
118 | 119 |In the first example, text will be assigned the string "hello" for the first half of the animation, and "goodbye" for the last half.
120 | 121 |In the second example, text will be assigned "small" for the first third of the animation, "medium" for the middle third, and "large" for the last third
122 | 123 |
124 |
125 |
126 | And again you can assign a function to the property, in the format:
127 | 128 |
129 | text: function(t) {
130 | return someString;
131 | }
132 | For example:
135 | 136 |
137 | text: function(t) {
138 | return "t = " + t;
139 | }
140 | This will return a string telling you the current value of t, for whatever that's worth. The sky is the limit here.
146 |Color
151 | 152 |
153 |
154 |
161 |
162 |
167 |
168 |
173 |
174 |
179 |
180 |
185 |
186 |
187 |
192 |
193 |
202 |
203 |
208 |
209 |
230 |
231 |
238 |
239 | 
240 |
241 |
314 |
315 |
316 |
317 |
--------------------------------------------------------------------------------
/glc/libs/NeuQuant.js:
--------------------------------------------------------------------------------
1 | /*
2 | * NeuQuant Neural-Net Quantization Algorithm
3 | * ------------------------------------------
4 | *
5 | * Copyright (c) 1994 Anthony Dekker
6 | *
7 | * NEUQUANT Neural-Net quantization algorithm by Anthony Dekker, 1994. See
8 | * "Kohonen neural networks for optimal colour quantization" in "Network:
9 | * Computation in Neural Systems" Vol. 5 (1994) pp 351-367. for a discussion of
10 | * the algorithm.
11 | *
12 | * Any party obtaining a copy of these files from the author, directly or
13 | * indirectly, is granted, free of charge, a full and unrestricted irrevocable,
14 | * world-wide, paid up, royalty-free, nonexclusive right and license to deal in
15 | * this software and documentation files (the "Software"), including without
16 | * limitation the rights to use, copy, modify, merge, publish, distribute,
17 | * sublicense, and/or sell copies of the Software, and to permit persons who
18 | * receive copies from any such party to do so, with the only requirement being
19 | * that this copyright notice remain intact.
20 | */
21 |
22 | /*
23 | * This class handles Neural-Net quantization algorithm
24 | * @author Kevin Weiner (original Java version - kweiner@fmsware.com)
25 | * @author Thibault Imbert (AS3 version - bytearray.org)
26 | * @author Kevin Kwok (JavaScript version - https://github.com/antimatter15/jsgif)
27 | * @author Keith Peters (slight mods to make it work with require.js - bit-101.com)
28 | * @version 0.1 AS3 implementation
29 | */
30 |
31 | define(function() {
32 |
33 | var netsize = 256; /* number of colours used */
34 |
35 | /* four primes near 500 - assume no image has a length so large */
36 | /* that it is divisible by all four primes */
37 |
38 | var prime1 = 499;
39 | var prime2 = 491;
40 | var prime3 = 487;
41 | var prime4 = 503;
42 | var minpicturebytes = (3 * prime4); /* minimum size for input image */
43 |
44 | /*
45 | * Program Skeleton ---------------- [select samplefac in range 1..30] [read
46 | * image from input file] pic = (unsigned char*) malloc(3*width*height);
47 | * initnet(pic,3*width*height,samplefac); learn(); unbiasnet(); [write output
48 | * image header, using writecolourmap(f)] inxbuild(); write output image using
49 | * inxsearch(b,g,r)
50 | */
51 |
52 | /*
53 | * Network Definitions -------------------
54 | */
55 |
56 | var maxnetpos = (netsize - 1);
57 | var netbiasshift = 4; /* bias for colour values */
58 | var ncycles = 100; /* no. of learning cycles */
59 |
60 | /* defs for freq and bias */
61 | var intbiasshift = 16; /* bias for fractions */
62 | var intbias = (1 << intbiasshift);
63 | var gammashift = 10; /* gamma = 1024 */
64 | var gamma = (1 << gammashift);
65 | var betashift = 10;
66 | var beta = (intbias >> betashift); /* beta = 1/1024 */
67 | var betagamma = (intbias << (gammashift - betashift));
68 |
69 | /* defs for decreasing radius factor */
70 | var initrad = (netsize >> 3); /* for 256 cols, radius starts */
71 | var radiusbiasshift = 6; /* at 32.0 biased by 6 bits */
72 | var radiusbias = (1 << radiusbiasshift);
73 | var initradius = (initrad * radiusbias); /* and decreases by a */
74 | var radiusdec = 30; /* factor of 1/30 each cycle */
75 |
76 | /* defs for decreasing alpha factor */
77 | var alphabiasshift = 10; /* alpha starts at 1.0 */
78 | var initalpha = (1 << alphabiasshift);
79 | var alphadec; /* biased by 10 bits */
80 |
81 | /* radbias and alpharadbias used for radpower calculation */
82 | var radbiasshift = 8;
83 | var radbias = (1 << radbiasshift);
84 | var alpharadbshift = (alphabiasshift + radbiasshift);
85 | var alpharadbias = (1 << alpharadbshift);
86 |
87 | /*
88 | * Types and Global Variables --------------------------
89 | */
90 |
91 | var thepicture; /* the input image itself */
92 | var lengthcount; /* lengthcount = H*W*3 */
93 | var samplefac; /* sampling factor 1..30 */
94 |
95 | // typedef int pixel[4]; /* BGRc */
96 | var network; /* the network itself - [netsize][4] */
97 | var netindex = [];
98 |
99 | /* for network lookup - really 256 */
100 | var bias = [];
101 |
102 | /* bias and freq arrays for learning */
103 | var freq = [];
104 | var radpower = [];
105 |
106 | function NeuQuant(thepic, len, sample) {
107 |
108 | var i;
109 | var p;
110 |
111 | thepicture = thepic;
112 | lengthcount = len;
113 | samplefac = sample;
114 |
115 | network = new Array(netsize);
116 |
117 | for (i = 0; i < netsize; i++) {
118 |
119 | network[i] = new Array(4);
120 | p = network[i];
121 | p[0] = p[1] = p[2] = (i << (netbiasshift + 8)) / netsize;
122 | freq[i] = intbias / netsize; /* 1/netsize */
123 | bias[i] = 0;
124 | }
125 | this.process = process;
126 | this.map = map;
127 | this.setMaxColors = setMaxColors;
128 |
129 | }
130 |
131 | function setMaxColors(maxColors) {
132 | netsize = maxColors;
133 | maxnetpos = (netsize - 1);
134 | initrad = (netsize >> 3); /* for 256 cols, radius starts */
135 | initradius = (initrad * radiusbias); /* and decreases by a */
136 | }
137 |
138 |
139 | function process() {
140 | learn();
141 | unbiasnet();
142 | inxbuild();
143 | return colorMap();
144 | };
145 |
146 | function colorMap() {
147 |
148 | var map = [];
149 | var index = new Array(netsize);
150 |
151 | for (var i = 0; i < netsize; i++)
152 | index[network[i][3]] = i;
153 |
154 | var k = 0;
155 | for (var l = 0; l < netsize; l++) {
156 | var j = index[l];
157 | map[k++] = (network[j][0]);
158 | map[k++] = (network[j][1]);
159 | map[k++] = (network[j][2]);
160 | }
161 |
162 | return map;
163 | };
164 |
165 | /*
166 | * Insertion sort of network and building of netindex[0..255] (to do after
167 | * unbias)
168 | * -------------------------------------------------------------------------------
169 | */
170 |
171 | function inxbuild() {
172 |
173 | var i;
174 | var j;
175 | var smallpos;
176 | var smallval;
177 | var p;
178 | var q;
179 | var previouscol;
180 | var startpos;
181 |
182 | previouscol = 0;
183 | startpos = 0;
184 | for (i = 0; i < netsize; i++) {
185 |
186 | p = network[i];
187 | smallpos = i;
188 | smallval = p[1]; /* index on g */
189 |
190 | /* find smallest in i..netsize-1 */
191 | for (j = i + 1; j < netsize; j++) {
192 |
193 | q = network[j];
194 | if (q[1] < smallval) { /* index on g */
195 | smallpos = j;
196 | smallval = q[1]; /* index on g */
197 | }
198 | }
199 | q = network[smallpos];
200 |
201 | /* swap p (i) and q (smallpos) entries */
202 | if (i != smallpos) {
203 | j = q[0];
204 | q[0] = p[0];
205 | p[0] = j;
206 | j = q[1];
207 | q[1] = p[1];
208 | p[1] = j;
209 | j = q[2];
210 | q[2] = p[2];
211 | p[2] = j;
212 | j = q[3];
213 | q[3] = p[3];
214 | p[3] = j;
215 | }
216 |
217 | /* smallval entry is now in position i */
218 |
219 | if (smallval != previouscol) {
220 |
221 | netindex[previouscol] = (startpos + i) >> 1;
222 |
223 | for (j = previouscol + 1; j < smallval; j++) netindex[j] = i;
224 |
225 | previouscol = smallval;
226 | startpos = i;
227 | }
228 | }
229 |
230 | netindex[previouscol] = (startpos + maxnetpos) >> 1;
231 | for (j = previouscol + 1; j < 256; j++) netindex[j] = maxnetpos; /* really 256 */
232 | };
233 |
234 | /*
235 | * Main Learning Loop ------------------
236 | */
237 |
238 | function learn() {
239 |
240 | var i;
241 | var j;
242 | var b;
243 | var g;
244 | var r;
245 | var radius;
246 | var rad;
247 | var alpha;
248 | var step;
249 | var delta;
250 | var samplepixels;
251 | var p;
252 | var pix;
253 | var lim;
254 |
255 | if (lengthcount < minpicturebytes) samplefac = 1;
256 |
257 | alphadec = 30 + ((samplefac - 1) / 3);
258 | p = thepicture;
259 | pix = 0;
260 | lim = lengthcount;
261 | samplepixels = lengthcount / (3 * samplefac);
262 | delta = (samplepixels / ncycles) | 0;
263 | alpha = initalpha;
264 | radius = initradius;
265 |
266 | rad = radius >> radiusbiasshift;
267 | if (rad <= 1) rad = 0;
268 |
269 | for (i = 0; i < rad; i++) radpower[i] = alpha * (((rad * rad - i * i) * radbias) / (rad * rad));
270 |
271 | if (lengthcount < minpicturebytes) step = 3;
272 |
273 | else if ((lengthcount % prime1) !== 0) step = 3 * prime1;
274 |
275 | else {
276 |
277 | if ((lengthcount % prime2) !== 0) step = 3 * prime2;
278 | else {
279 | if ((lengthcount % prime3) !== 0) step = 3 * prime3;
280 | else step = 3 * prime4;
281 | }
282 | }
283 |
284 | i = 0;
285 | while (i < samplepixels) {
286 |
287 | b = (p[pix + 0] & 0xff) << netbiasshift;
288 | g = (p[pix + 1] & 0xff) << netbiasshift;
289 | r = (p[pix + 2] & 0xff) << netbiasshift;
290 | j = contest(b, g, r);
291 |
292 | altersingle(alpha, j, b, g, r);
293 | if (rad !== 0) alterneigh(rad, j, b, g, r); /* alter neighbours */
294 |
295 | pix += step;
296 | if (pix >= lim) pix -= lengthcount;
297 |
298 | i++;
299 |
300 | if (delta === 0) delta = 1;
301 |
302 | if (i % delta === 0) {
303 | alpha -= alpha / alphadec;
304 | radius -= radius / radiusdec;
305 | rad = radius >> radiusbiasshift;
306 |
307 | if (rad <= 1) rad = 0;
308 |
309 | for (j = 0; j < rad; j++) radpower[j] = alpha * (((rad * rad - j * j) * radbias) / (rad * rad));
310 | }
311 | }
312 | };
313 |
314 | /*
315 | ** Search for BGR values 0..255 (after net is unbiased) and return colour
316 | * index
317 | * ----------------------------------------------------------------------------
318 | */
319 |
320 | function map(b, g, r) {
321 |
322 | var i;
323 | var j;
324 | var dist;
325 | var a;
326 | var bestd;
327 | var p;
328 | var best;
329 |
330 | bestd = 1000; /* biggest possible dist is 256*3 */
331 | best = -1;
332 | i = netindex[g]; /* index on g */
333 | j = i - 1; /* start at netindex[g] and work outwards */
334 |
335 | while ((i < netsize) || (j >= 0)) {
336 |
337 | if (i < netsize) {
338 | p = network[i];
339 | dist = p[1] - g; /* inx key */
340 |
341 | if (dist >= bestd) i = netsize; /* stop iter */
342 |
343 | else {
344 |
345 | i++;
346 | if (dist < 0) dist = -dist;
347 | a = p[0] - b;
348 | if (a < 0) a = -a;
349 | dist += a;
350 |
351 | if (dist < bestd) {
352 | a = p[2] - r;
353 | if (a < 0) a = -a;
354 | dist += a;
355 |
356 | if (dist < bestd) {
357 | bestd = dist;
358 | best = p[3];
359 | }
360 | }
361 | }
362 | }
363 |
364 | if (j >= 0) {
365 |
366 | p = network[j];
367 | dist = g - p[1]; /* inx key - reverse dif */
368 |
369 | if (dist >= bestd) j = -1; /* stop iter */
370 |
371 | else {
372 |
373 | j--;
374 | if (dist < 0) dist = -dist;
375 | a = p[0] - b;
376 | if (a < 0) a = -a;
377 | dist += a;
378 |
379 | if (dist < bestd) {
380 | a = p[2] - r;
381 | if (a < 0) a = -a;
382 | dist += a;
383 | if (dist < bestd) {
384 | bestd = dist;
385 | best = p[3];
386 | }
387 | }
388 | }
389 | }
390 | }
391 |
392 | return (best);
393 | };
394 |
395 |
396 | /*
397 | * Unbias network to give byte values 0..255 and record position i to prepare
398 | * for sort
399 | * -----------------------------------------------------------------------------------
400 | */
401 |
402 | function unbiasnet() {
403 |
404 | var i;
405 | var j;
406 |
407 | for (i = 0; i < netsize; i++) {
408 | network[i][0] >>= netbiasshift;
409 | network[i][1] >>= netbiasshift;
410 | network[i][2] >>= netbiasshift;
411 | network[i][3] = i; /* record colour no */
412 | }
413 | };
414 |
415 | /*
416 | * Move adjacent neurons by precomputed alpha*(1-((i-j)^2/[r]^2)) in
417 | * radpower[|i-j|]
418 | * ---------------------------------------------------------------------------------
419 | */
420 |
421 | function alterneigh(rad, i, b, g, r) {
422 |
423 | var j;
424 | var k;
425 | var lo;
426 | var hi;
427 | var a;
428 | var m;
429 | var p;
430 |
431 | lo = i - rad;
432 | if (lo < -1) lo = -1;
433 |
434 | hi = i + rad;
435 | if (hi > netsize) hi = netsize;
436 |
437 | j = i + 1;
438 | k = i - 1;
439 | m = 1;
440 |
441 | while ((j < hi) || (k > lo)) {
442 | a = radpower[m++];
443 |
444 | if (j < hi) {
445 | p = network[j++];
446 |
447 | try {
448 | p[0] -= (a * (p[0] - b)) / alpharadbias;
449 | p[1] -= (a * (p[1] - g)) / alpharadbias;
450 | p[2] -= (a * (p[2] - r)) / alpharadbias;
451 | } catch (e) {} // prevents 1.3 miscompilation
452 | }
453 |
454 | if (k > lo) {
455 | p = network[k--];
456 |
457 | try {
458 | p[0] -= (a * (p[0] - b)) / alpharadbias;
459 | p[1] -= (a * (p[1] - g)) / alpharadbias;
460 | p[2] -= (a * (p[2] - r)) / alpharadbias;
461 | } catch (e) {}
462 | }
463 | }
464 | };
465 |
466 | /*
467 | * Move neuron i towards biased (b,g,r) by factor alpha
468 | * ----------------------------------------------------
469 | */
470 |
471 | function altersingle(alpha, i, b, g, r) {
472 |
473 | /* alter hit neuron */
474 | var n = network[i];
475 | n[0] -= (alpha * (n[0] - b)) / initalpha;
476 | n[1] -= (alpha * (n[1] - g)) / initalpha;
477 | n[2] -= (alpha * (n[2] - r)) / initalpha;
478 | };
479 |
480 | /*
481 | * Search for biased BGR values ----------------------------
482 | */
483 |
484 | var contest = function contest(b, g, r) {
485 |
486 | /* finds closest neuron (min dist) and updates freq */
487 | /* finds best neuron (min dist-bias) and returns position */
488 | /* for frequently chosen neurons, freq[i] is high and bias[i] is negative */
489 | /* bias[i] = gamma*((1/netsize)-freq[i]) */
490 |
491 | var i;
492 | var dist;
493 | var a;
494 | var biasdist;
495 | var betafreq;
496 | var bestpos;
497 | var bestbiaspos;
498 | var bestd;
499 | var bestbiasd;
500 | var n;
501 |
502 | bestd = ~ (1 << 31);
503 | bestbiasd = bestd;
504 | bestpos = -1;
505 | bestbiaspos = bestpos;
506 |
507 | for (i = 0; i < netsize; i++) {
508 | n = network[i];
509 | dist = n[0] - b;
510 | if (dist < 0) dist = -dist;
511 | a = n[1] - g;
512 | if (a < 0) a = -a;
513 | dist += a;
514 | a = n[2] - r;
515 | if (a < 0) a = -a;
516 | dist += a;
517 |
518 | if (dist < bestd) {
519 | bestd = dist;
520 | bestpos = i;
521 | }
522 |
523 | biasdist = dist - ((bias[i]) >> (intbiasshift - netbiasshift));
524 |
525 | if (biasdist < bestbiasd) {
526 | bestbiasd = biasdist;
527 | bestbiaspos = i;
528 | }
529 |
530 | betafreq = (freq[i] >> betashift);
531 | freq[i] -= betafreq;
532 | bias[i] += (betafreq << gammashift);
533 | }
534 |
535 | freq[bestpos] += beta;
536 | bias[bestpos] -= betagamma;
537 | return (bestbiaspos);
538 | };
539 |
540 |
541 | return NeuQuant;
542 | });
543 |
--------------------------------------------------------------------------------
/glc/libs/require.js:
--------------------------------------------------------------------------------
1 | /*
2 | RequireJS 2.1.20 Copyright (c) 2010-2015, The Dojo Foundation All Rights Reserved.
3 | Available via the MIT or new BSD license.
4 | see: http://github.com/jrburke/requirejs for details
5 | */
6 | var requirejs,require,define;
7 | (function(ba){function G(b){return"[object Function]"===K.call(b)}function H(b){return"[object Array]"===K.call(b)}function v(b,c){if(b){var d;for(d=0;dYou can simply assign any valid color string, as you would in addressing Canvas directly. Examples:
155 | 156 |Hex strings:
157 | 158 |
159 | fillStyle: "#ff0000"
160 | or...
163 | 164 |
165 | fillStyle: "#f00"
166 | rgb strings:
169 | 170 |
171 | fillStyle: "rgb(255, 0, 0)"
172 | rgba strings:
175 | 176 |
177 | fillStyle: "rgba(255, 0, 0, 0.5)"
178 | CSS color named color strings:
181 | 182 |
183 | fillStyle: "fuchsia"
184 | To smoothly animate between two colors, supply a 2-element array:
188 | 189 |
190 | fillStyle: ["#ff0000", "#00ff00"]
191 | This works with ALL kinds of strings described above. You can even mix and match them. All of the following are exactly equivalent and will create a smooth interpolation:
194 | 195 |
196 | fillStyle: ["#ff0000", "green"]
197 | fillStyle: ["#f00", "rgb(0, 255, 0)"]
198 | fillStyle: ["red", "rgba(0, 255, 0, 1)"]
199 | fillStyle: ["rgb(255, 0, 0)", "#00ff00"]
200 | fillStyle: ["rgba(255, 0, 0, 1)", "#0f0"]
201 | Even something as crazy as this works:
204 | 205 |
206 | fillStyle: ["burlywood", "mediumorchid"]
207 | Yes, that will animated between those two colors just fine. CSS color names are also case insensitive, so you can type "burlywood", "BurlyWood", "BURLYWOOD" or even "bUrLyWoOd" if you are so inclined.
210 | 211 |A word on alpha channels. You can specify the alpha channel of a color two ways:
212 | 213 |1. With an rgba string: "rgba(255, 0, 0, 0.5)"
2. With a hex string: "#80ff0000".
216 |
217 |
Both of the above examples will give you a red color with 50% transparency. Specifying colors any other way will give you full alpha.
218 | 219 | 220 |"red", "#ff0000", "#f00" and "rgb(255, 0, 0)" will all give you a fully opaque red, as will "#ffff0000" and "rgba(255, 0, 0, 1)".
You can animate between alpha values with any of these combinations as well.
223 | 224 |
225 | fillStyle: ["rgba(255, 0, 0, 1)", "#00ff0000"]
226 | fillStyle: ["#f00", "rgba(255, 0, 0, 0)"]
227 | fillStyle: ["#ff0000", "#00ff0000"]
228 | fillStyle: ["#ffff0000", "rgba(255, 0, 0, 0)"]
229 | All of the above are equivalent and will create an animation from fully opaque red to fully transparent red.
232 | 233 |You can also create an array with more than two elements:
234 | 235 |
236 | fillStyle: ["#ff0000", "#00ff00", "#0000ff"]
237 | In this case, the colors would not be interpolated, but would jump from one to the other.
242 | 243 |And of course, you can assign a function. This function must return a valid color string! If you're using numerical values to calculate a color, you need to convert that back into a color string before returning it. You can use the color module described in the Styles section to do this easily with the color.num method.
244 |
245 |
246 |
Boolean
247 | 248 |
249 |
250 |
255 |
256 |
261 |
262 | 
265 |
266 |
273 |
274 |
275 |
276 | Boolean values are pretty simple. They're either true or false. Single values are easy:
251 | 252 |
253 | stroke: true
254 | Like strings, you can assign an array of any length:
257 | 258 |
259 | stroke: [true, false, true, true]
260 | Here, stroke would be true for the first 25% of the animation, false for the next 25% and true again for the remainder.
263 | 264 |
265 |
266 | And like other values, you use a function:
267 | 268 |
269 | stroke: function(t) {
270 | return trueOrFalse;
271 | }
272 | Array
277 | 278 |
279 |
280 |
287 |
288 | 
289 |
290 |
295 |
296 | 
299 |
300 |
309 |
310 |
311 |
312 | top
313 | There are two cases for the array type - the lineDash style and the path property of the Path object. Both of these require an array of values to work properly. So a single array cannot be used to create an animation. We need two arrays - one containing the starting values, and one with the end values.
So, in the case of lineDash, assigning an array does NOT create an animation. It just creates a regular line dash:
285 | lineDash: [50, 10, 20, 10]
286 | This will create a static line dash. To animate the dash, you need to assign an array of arrays!
291 | 292 |
293 | lineDash: [[50, 10, 20, 10], [20, 10, 50, 10]]
294 | This will actually animate the dash to reverse the 50-pixel and 20-pixel segments.
297 | 298 |
299 |
300 | The same applies to the Path object. It needs an array of points. So if you want to animate a path, you need to supply a starting array, and an ending array.
301 | 302 |And, like all the others, you can assign a function that returns an array:
303 | 304 |
305 | lineDash: function(t) {
306 | return someArray;
307 | }
308 | setDelay(1000/fps).
218 | * @param fps
219 | * float frame rate (frames per second)
220 | */
221 |
222 | var setFrameRate = exports.setFrameRate = function setFrameRate(fps) {
223 | if (fps != 0xf) delay = Math.round(100 / fps);
224 | };
225 |
226 | /**
227 | * Sets quality of color quantization (conversion of images to the maximum 256
228 | * colors allowed by the GIF specification). Lower values (minimum = 1)
229 | * produce better colors, but slow processing significantly. 10 is the
230 | * default, and produces good color mapping at reasonable speeds. Values
231 | * greater than 20 do not yield significant improvements in speed.
232 | * @param quality
233 | * int greater than 0.
234 | * @return
235 | */
236 |
237 | var setQuality = exports.setQuality = function setQuality(quality) {
238 | if (quality < 1) quality = 1;
239 | sample = quality;
240 | };
241 |
242 | /**
243 | * Sets the GIF frame size. The default size is the size of the first frame
244 | * added if this method is not invoked.
245 | * @param w
246 | * int frame width.
247 | * @param h
248 | * int frame width.
249 | */
250 |
251 | var setSize = exports.setSize = function setSize(w, h) {
252 |
253 | if (started && !firstFrame) return;
254 | width = w;
255 | height = h;
256 | if (width < 1) width = 320;
257 | if (height < 1) height = 240;
258 | sizeSet = true;
259 | };
260 |
261 | /**
262 | * Initiates GIF file creation on the given stream.
263 | * @param os
264 | * OutputStream on which GIF images are written.
265 | * @return false if initial write failed.
266 | */
267 |
268 | var start = exports.start = function start() {
269 |
270 | reset();
271 | var ok = true;
272 | closeStream = false;
273 | out = new ByteArray();
274 | try {
275 | out.writeUTFBytes("GIF89a"); // header
276 | } catch (e) {
277 | ok = false;
278 | }
279 |
280 | return started = ok;
281 | };
282 |
283 | var cont = exports.cont = function cont() {
284 |
285 | reset();
286 | var ok = true;
287 | closeStream = false;
288 | out = new ByteArray();
289 |
290 | return started = ok;
291 | };
292 |
293 | var setMaxColors = exports.setMaxColors = function setMaxColors(colors) {
294 | maxColors = colors;
295 | }
296 |
297 | /**
298 | * Analyzes image colors and creates color map.
299 | */
300 |
301 | var analyzePixels = function analyzePixels() {
302 |
303 | var len = pixels.length;
304 | var nPix = len / 3;
305 | indexedPixels = [];
306 | var nq = new NeuQuant(pixels, len, sample);
307 | nq.setMaxColors(maxColors);
308 |
309 | // initialize quantizer
310 | colorTab = nq.process(); // create reduced palette
311 |
312 | // map image pixels to new palette
313 | var k = 0;
314 | for (var j = 0; j < nPix; j++) {
315 | var index = nq.map(pixels[k++] & 0xff, pixels[k++] & 0xff, pixels[k++] & 0xff);
316 | usedEntry[index] = true;
317 | indexedPixels[j] = index;
318 | }
319 |
320 | pixels = null;
321 | colorDepth = 8;
322 | palSize = 7;
323 |
324 | // get closest match to transparent color if specified
325 | if (transparent !== null) {
326 | transIndex = findClosest(transparent);
327 | }
328 | };
329 |
330 | /**
331 | * Returns index of palette color closest to c
332 | */
333 |
334 | var findClosest = function findClosest(c) {
335 |
336 | if (colorTab === null) return -1;
337 | var r = (c & 0xFF0000) >> 16;
338 | var g = (c & 0x00FF00) >> 8;
339 | var b = (c & 0x0000FF);
340 | var minpos = 0;
341 | var dmin = 256 * 256 * 256;
342 | var len = colorTab.length;
343 |
344 | for (var i = 0; i < len;) {
345 | var dr = r - (colorTab[i++] & 0xff);
346 | var dg = g - (colorTab[i++] & 0xff);
347 | var db = b - (colorTab[i] & 0xff);
348 | var d = dr * dr + dg * dg + db * db;
349 | var index = i / 3;
350 | if (usedEntry[index] && (d < dmin)) {
351 | dmin = d;
352 | minpos = index;
353 | }
354 | i++;
355 | }
356 | return minpos;
357 | };
358 |
359 | /**
360 | * Extracts image pixels into byte array "pixels
361 | */
362 |
363 | var getImagePixels = function getImagePixels() {
364 | var w = width;
365 | var h = height;
366 | pixels = [];
367 | var data = image;
368 | var count = 0;
369 |
370 | for (var i = 0; i < h; i++) {
371 |
372 | for (var j = 0; j < w; j++) {
373 |
374 | var b = (i * w * 4) + j * 4;
375 | pixels[count++] = data[b];
376 | pixels[count++] = data[b + 1];
377 | pixels[count++] = data[b + 2];
378 |
379 | }
380 |
381 | }
382 | };
383 |
384 | /**
385 | * Writes Graphic Control Extension
386 | */
387 |
388 | var writeGraphicCtrlExt = function writeGraphicCtrlExt() {
389 | out.writeByte(0x21); // extension introducer
390 | out.writeByte(0xf9); // GCE label
391 | out.writeByte(4); // data block size
392 | var transp;
393 | var disp;
394 | if (transparent === null) {
395 | transp = 0;
396 | disp = 0; // dispose = no action
397 | } else {
398 | transp = 1;
399 | disp = 2; // force clear if using transparent color
400 | }
401 | if (dispose >= 0) {
402 | disp = dispose & 7; // user override
403 | }
404 | disp <<= 2;
405 | // packed fields
406 | out.writeByte(0 | // 1:3 reserved
407 | disp | // 4:6 disposal
408 | 0 | // 7 user input - 0 = none
409 | transp); // 8 transparency flag
410 |
411 | WriteShort(delay); // delay x 1/100 sec
412 | out.writeByte(transIndex); // transparent color index
413 | out.writeByte(0); // block terminator
414 | };
415 |
416 | /**
417 | * Writes Comment Extention
418 | */
419 |
420 | var writeCommentExt = function writeCommentExt() {
421 | out.writeByte(0x21); // extension introducer
422 | out.writeByte(0xfe); // comment label
423 | out.writeByte(comment.length); // Block Size (s)
424 | out.writeUTFBytes(comment);
425 | out.writeByte(0); // block terminator
426 | };
427 |
428 |
429 | /**
430 | * Writes Image Descriptor
431 | */
432 |
433 | var writeImageDesc = function writeImageDesc() {
434 |
435 | out.writeByte(0x2c); // image separator
436 | WriteShort(0); // image position x,y = 0,0
437 | WriteShort(0);
438 | WriteShort(width); // image size
439 | WriteShort(height);
440 |
441 | // packed fields
442 | if (firstFrame) {
443 | // no LCT - GCT is used for first (or only) frame
444 | out.writeByte(0);
445 | } else {
446 | // specify normal LCT
447 | out.writeByte(0x80 | // 1 local color table 1=yes
448 | 0 | // 2 interlace - 0=no
449 | 0 | // 3 sorted - 0=no
450 | 0 | // 4-5 reserved
451 | palSize); // 6-8 size of color table
452 | }
453 | };
454 |
455 | /**
456 | * Writes Logical Screen Descriptor
457 | */
458 |
459 | var writeLSD = function writeLSD() {
460 |
461 | // logical screen size
462 | WriteShort(width);
463 | WriteShort(height);
464 | // packed fields
465 | out.writeByte((0x80 | // 1 : global color table flag = 1 (gct used)
466 | 0x70 | // 2-4 : color resolution = 7
467 | 0x00 | // 5 : gct sort flag = 0
468 | palSize)); // 6-8 : gct size
469 |
470 | out.writeByte(0); // background color index
471 | out.writeByte(0); // pixel aspect ratio - assume 1:1
472 | };
473 |
474 | /**
475 | * Writes Netscape application extension to define repeat count.
476 | */
477 |
478 | var writeNetscapeExt = function writeNetscapeExt() {
479 | out.writeByte(0x21); // extension introducer
480 | out.writeByte(0xff); // app extension label
481 | out.writeByte(11); // block size
482 | out.writeUTFBytes("NETSCAPE" + "2.0"); // app id + auth code
483 | out.writeByte(3); // sub-block size
484 | out.writeByte(1); // loop sub-block id
485 | WriteShort(repeat); // loop count (extra iterations, 0=repeat forever)
486 | out.writeByte(0); // block terminator
487 | };
488 |
489 | /**
490 | * Writes color table
491 | */
492 |
493 | var writePalette = function writePalette() {
494 | out.writeBytes(colorTab);
495 | var n = (3 * 256) - colorTab.length;
496 | for (var i = 0; i < n; i++) out.writeByte(0);
497 | };
498 |
499 | var WriteShort = function WriteShort(pValue) {
500 | out.writeByte(pValue & 0xFF);
501 | out.writeByte((pValue >> 8) & 0xFF);
502 | };
503 |
504 | /**
505 | * Encodes and writes pixel data
506 | */
507 |
508 | var writePixels = function writePixels() {
509 | var myencoder = new LZWEncoder(width, height, indexedPixels, colorDepth);
510 | myencoder.encode(out);
511 | };
512 |
513 | /**
514 | * Retrieves the GIF stream
515 | */
516 |
517 | var stream = exports.stream = function stream() {
518 | return out;
519 | };
520 |
521 | var setProperties = exports.setProperties = function setProperties(has_start, is_first) {
522 | started = has_start;
523 | firstFrame = is_first;
524 | };
525 |
526 | return exports;
527 |
528 | });
--------------------------------------------------------------------------------
/docs/tips.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | GIF Loop Coder (GLC) Documentation
11 |-
12 |
- TOC 13 |
- 1. Introduction to GIF Loop Coder (GLC) 14 |
- 2. Objects 15 |
- 3. Styles 16 |
- 4. Property Types 17 |
- 5. Tips and Advanced Use
18 |
-
19 |
- Single Mode 20 |
- GIF Size and Optimization 21 |
- Phase and SpeedMult 22 |
- Moving the Sketches Folder 23 |
- GIF or JIF? 24 |
27 |
5. Tips and Advanced Use
32 | 33 |
34 |
35 |
36 |
372 |
373 |
374 |
--------------------------------------------------------------------------------
/docs/styles.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Single Mode Animations
37 | 38 |
39 |
40 |
68 |
69 | 
70 |
71 |
100 |
101 | 
102 |
103 |
141 |
142 | 
143 |
144 |
145 |
147 |
148 |
149 | When you first make a simple animation and see it playing smoothly back and forth in bounce mode, and then switch over to single mode, you'll likely not be very happy with the results. If you are moving an object from, say, 0 to 100 pixels on the x-axis. You're going to see it smoothly glide over to 100, and then instantly jump back to 0. Over and over. Yuck.
41 | 42 |So initially, you might think that single mode is useless. But, once you know how to work around this, it's very powerful and can create a totally different type of animation. The trick is that you want the end state to look like the the start state. This often involves using multiple objects. Let's look at an example
43 | 44 |First I'll set up a circle. This will be centered vertically, and move from -25 on the x-axis to the center of the canvas horizontally. Because the radius is 25-pixels, that means it's going to start out off screen, and move to center screen, and then disappear.
45 | 46 |
47 | function onGLC(glc) {
48 | glc.loop();
49 | glc.size(400, 200);
50 | // glc.setDuration(5);
51 | // glc.setFPS(20);
52 | // glc.setMode("single");
53 | // glc.setEasing(false);
54 | // glc.setMaxColors(256);
55 | var list = glc.renderList,
56 | width = glc.w,
57 | height = glc.h;
58 |
59 | list.addCircle({
60 | x: [-25, 200],
61 | y: 200,
62 | radius: 25
63 | });
64 |
65 | glc.loop();
66 | }
67 | So, at the end of the animation we have a circle sitting at the center of the screen. But when it starts the next cycle, there's nothing there. To handle that, we put the same type of object in that position at the start of the animation. And we have that move OFF the screen.
72 | 73 |
74 | function onGLC(glc) {
75 | glc.loop();
76 | glc.size(400, 200);
77 | // glc.setDuration(5);
78 | // glc.setFPS(20);
79 | // glc.setMode("single");
80 | // glc.setEasing(false);
81 | // glc.setMaxColors(256);
82 | var list = glc.renderList,
83 | width = glc.w,
84 | height = glc.h;
85 |
86 | list.addCircle({
87 | x: [-25, 200],
88 | y: 100,
89 | radius: 25
90 | });
91 | list.addCircle({
92 | x: [200, 425],
93 | y: 100,
94 | radius: 25
95 | });
96 |
97 | glc.loop();
98 | }
99 | That's much better. You can even chain several objects together like this, and animate other properties as well. Just remember that the end state of one object has to match up with the start state of another, or the start or end needs to be off screen or invisible.
104 | 105 | 106 |
107 | function onGLC(glc) {
108 | glc.loop();
109 | glc.size(400, 200);
110 | // glc.setDuration(5);
111 | // glc.setFPS(20);
112 | // glc.setMode("single");
113 | // glc.setEasing(false);
114 | // glc.setMaxColors(256);
115 | var list = glc.renderList,
116 | width = glc.w,
117 | height = glc.h;
118 |
119 | list.addCircle({
120 | x: [-25, 150],
121 | y: [0, 175],
122 | radius: 25,
123 | fillStyle: [0xff0000, 0x00ff00]
124 | });
125 | list.addCircle({
126 | x: [150, 300],
127 | y: [175, 25],
128 | radius: 25,
129 | fillStyle: [0x00ff00, 0x0000ff]
130 | });
131 | list.addCircle({
132 | x: [300, 425],
133 | y: [25, 200],
134 | radius: 25,
135 | fillStyle: [0x0000ff, 0xff0000]
136 | });
137 |
138 | glc.loop();
139 | }
140 | Once you get the idea of this, it opens up the doors to all kinds of different animations.
146 |GIF Size and Optimization
150 | 151 |
152 |
153 |
173 |
174 |
175 | When you are making an animated gif, you are basically making a bunch of images and assembling them into a single file that can be played back later. The animated gif format takes care of a lot of optimizing to try to get the size as small as possible, but the encoder that is built into glc is probably not the best at this. So, there are some things you might want to consider when making gifs.
154 | 155 |In the current version of GLC, the output panel displays the approximate file size of the animated gif before you even save it. This makes it much easier to get an idea of how big the output will be, and whether or not you need to do some optimization, before you even save it.
156 | 157 |First of all, consider the frame rate, length and physical size of your animation. While glc will make animations up to 60 fps, there's probably no reason to do so. This will inflate the file size dramatically, and not really look any better. Play with the fps slider and see how low you can set it while still looking good.
158 | 159 |The duration is what it is. If you want a 10 second animation, just realize that it's going to have twice as many frames as a 5 second animation. And it's going to be larger.
160 | 161 |The maximum colors slider can have a big effect on the size of your animation. By default, GLC creates GIFs with 256 colors. This is often way more than you need. Try changing this to a lower number and recompiling your gif. You may find that the lower setting looks just as good as the higher one while giving you a much smaller file size.
162 | 163 |And for size, try to make the animation as small as you can. Not meaning that to make everything tiny, but if your animation only covers the center 100 pixels of the canvas, there's no reason to make it 400 pixels tall. Crop it to the size of the moving objects.
164 | 165 |If you've done all you can and you still feel the animation is too heavy, there are a number of animated gif optimization tools. Some are web-based - you upload the gif, it optimizes it and you download the optimized version. Others are executable programs you download. Some of these can dramatically reduce file size with very little noticeable change in quality. Do a search and try some of them out.
166 | 167 |When you have your gif all rendered and playing back, right click it and save it to your computer. Or, right click and open it in a new tab and save it from there. Do NOT right click and copy to the clipboard. This is not the same as copying and pasting from the file system on your computer. Copying the image from the web page will copy a binary string of the data that makes up the image. It's huge and will will take forever to copy onto the clipboard and may even hang or crash your browser.
168 | 169 |As mentioned in the intro section, sometimes on larger animations, the right click to save method will fail. If this happens try dragging and dropping the animation to a file system window. I've saved gifs that were over 9.5 megs that way, so this is a pretty reliable fallback.
170 | 171 |If you ever get brave enough to dive into the glc.js source code, you might notice that there is some disabled code to add a "Save gif" link to the Output panel. I removed this as it was very unreliable and would fail way more often than the right click and save method. However, if you want to try it out, look for the glc.js file and you'll see the lines that create this link, commented out. Uncomment them to get the link back.
Phase and SpeedMult
176 | 177 |
178 |
179 |
211 |
212 | 
213 |
214 |
215 |
246 |
247 | 
248 |
249 |
289 |
290 | 
293 |
294 |
297 |
298 |
299 | There are actually two more advanced properties that I've withheld from you until now: phase and speedMult.
As described earlier, glc works by increasing an internal t variable from 0 to 1 and basing all its object animations from that. You've seen this t variable in the Canvas Panel scrubber and in the custom functions used for setting properties. Because everything is based on t, every object is perfectly in sync. This is good, as it results in perfectly loopable animations. However, it can make some more advanced effects more difficult. Both of these properties affect how t can be altered before being apaplied to your animation.
First, phase. Judicious use of the phase property can provide you with an easy way of creating much more intricate animations, very simply.
Here, I've set up 5 circles with a simple x-axis animation. They are spaced out on the y-axis via a for loop.
186 | 187 |
188 | function onGLC(glc) {
189 | glc.loop();
190 | // glc.size(400, 400);
191 | // glc.setDuration(5);
192 | // glc.setFPS(20);
193 | // glc.setMode("single");
194 | // glc.setEasing(false);
195 | // glc.setMaxColors(256);
196 | var list = glc.renderList,
197 | width = glc.w,
198 | height = glc.h;
199 |
200 | for(var i = 0; i < 5; i++) {
201 | list.addCircle({
202 | x: [50, 350],
203 | y: 50 + i * 75,
204 | radius: 25,
205 | });
206 | }
207 |
208 | glc.loop();
209 | }
210 | Now this is fine, but they're all moving exactly in sync, which is rather boring. Say you wanted them to all move back and forth exactly as they are, but you wanted them all to start at different times, so they were out of sync. That would be pretty tough, though you could get it working with a custom function property. However, with the phase property, it's a piece of cake.
Setting the phase property for an object changes the t value that it uses for its animations. If you set phase to 0.25 for an object, then, while all other objects were at a t of 0, it would get a t of 0.25. When all other objects got to t = 0.75, it would be at 1, and when the others got to 1, that object's t would already be moving backwards and would be back to 0.75. It just shifts the whole timeline.
So, say I gave each one of these circles a different phase, and spaced them out using the for loop i variable...
222 | function onGLC(glc) {
223 | glc.loop();
224 | // glc.size(400, 400);
225 | // glc.setDuration(5);
226 | // glc.setFPS(20);
227 | // glc.setMode("single");
228 | // glc.setEasing(false);
229 | // glc.setMaxColors(256);
230 | var list = glc.renderList,
231 | width = glc.w,
232 | height = glc.h;
233 |
234 | for(var i = 0; i < 5; i++) {
235 | list.addCircle({
236 | x: [50, 350],
237 | y: 50 + i * 75,
238 | radius: 25,
239 | phase: i * 0.2
240 | });
241 | }
242 |
243 | glc.loop();
244 | }
245 | Now, this is WAY more interesting! And, it only took one line of code! And, it doesn't break the looping of the animation at all. This is just the tip of the iceberg as far as what you can do with the phase property. Explore it.
Before you ask, no, it's NOT possible to animate the phase value. It can only be a single value. Animating the thing that's animating the things... I don't know. I think the universe would implode or something.
Then, there's the speedMult property. This essentially multiplies the t value by some amount, but just for that one object that it's being applied to. It lets you speed up the animation for a single object. In the following example, four circles are created. They all animate from the left side of the canvas to the right and back.
256 | function onGLC(glc) {
257 | glc.loop();
258 | glc.size(200, 200);
259 | var list = glc.renderList,
260 | width = glc.w,
261 | height = glc.h,
262 | color = glc.color;
263 |
264 | list.addCircle({
265 | x: [25, 175],
266 | y: 25,
267 | radius: 25
268 | });
269 | list.addCircle({
270 | x: [25, 175],
271 | y: 75,
272 | radius: 25,
273 | speedMult: 2
274 | });
275 | list.addCircle({
276 | x: [25, 175],
277 | y: 125,
278 | radius: 25,
279 | speedMult: 3
280 | });
281 | list.addCircle({
282 | x: [25, 175],
283 | y: 175,
284 | radius: 25,
285 | speedMult: 4
286 | });
287 | }
288 | Other than the y position of each of these circles, the main difference is the speedMult property. On the first one, it is not assigned at all, which defaults to one. So that circle moves back and forth at a normal speed. The second circle has a speedMult of 2, so it will move back and forth twice for every single trip the first circle makes. The next two circles have a speedMult of 3 and 4, so those move even faster. Here's what you get:
293 |
294 | Be careful with this one. Assigning speedMult samll integer values, such as 2, 3, 4, like we did here, will maintain the smooth looping aspect that comes automatically in GLC. But you can assign any number you want - floating point numbers, super high numbers, negative values. Some of these values will break your animation. But, in the right combinations, may create new, interesting effects. Experiment away.
Moving the Sketches Folder
300 | 301 |
302 |
303 |
326 |
327 |
355 |
356 |
361 |
362 |
363 |
364 | The sketches folder is set up to be the place where you keep the HTML and JavaScript files for your various animations. If you just keep all your JavaScript files in the code folder and reference them from the index.html file, things will work fine. However, for whatever reason, you may want to rearrange things. Here's how to do that.
First of all, you can put your JavaScript sketch files wherever you want, as long as you add the correct relative or absolute path to them in the HTML file. The JavaScript files can be in any folder on the same drive, a different drive, or even somewhere else on the network. As long as the HTML has the correct path to the file, it should load and run.
306 | 307 |But say you still want to move that sketch folder, or set up multiple sketch folders. That can be done too, but takes a few more steps. The important thing to know is that in addition to the HTML file needing to know where your JavaScript file is, it needs to know where the require.js file is. In addition to that, the glcloader.js file needs to know the location of the glc folder.
Here again is the index.html file, with the important bit highlighted.
312 | <!DOCTYPE html>
313 | <html>
314 | <head>
315 | <title>GIF Loop Coder</title>
316 | </head>
317 | <body>
318 | <!-- This should point to the sketch you want to run -->
319 | <script type="text/javascript" src="examples/allshapes.js"></script>
320 |
321 | <!-- Don't touch this unless you move your sketches folder. If so, update the path to require.js -->
322 | <script type="text/javascript" src="../glc/libs/require.js" data-main="glcloader"></script>
323 | </body>
324 | </html>
325 | Currently, it's saying that to find require.js from the sketches folder, go up one directory, and then down the given path. So, if that no longer points to require.js, adjust that path so it does.
Next, here is glcloader.js:
332 | // if you move your sketches folder somewhere other than the default,
333 | // update this baseUrl property so it continues to point to the glc directory.
334 | require.config({
335 | baseUrl: "../glc"
336 | });
337 |
338 |
339 | if(document.location.hash) {
340 | var script = document.createElement("script");
341 | script.src = document.location.hash.substring(1);
342 | document.head.appendChild(script);
343 | }
344 |
345 | window.onhashchange = function() {
346 | document.location.reload();
347 | }
348 |
349 | require(["app/glc"], function(glc) {
350 | if(window.onGLC) {
351 | window.onGLC(glc);
352 | }
353 | });
354 | Here, you see a require.config block that contains a baseUrl property. This needs to point to the glc folder. Again, from the sketches folder, that's up one level. So if you move things around, this is the other path you'll have to adjust.
Once those two items point to the right places, your newly located sketches folder should work just fine.
359 | 360 |GIF or JIF?
365 | 366 |
367 |
368 |
371 | The "g" in "gif" is pronounced exactly the same way it is in "git" and "gin".
369 | 370 |GIF Loop Coder (GLC) Documentation
11 |-
12 |
- TOC 13 |
- 1. Introduction to GIF Loop Coder (GLC) 14 |
- 2. Objects 15 |
- 3. Styles
16 |
-
17 |
- Styles 18 |
- The Color Module 19 |
- Gradients 20 |
22 | - 4. Property Types 23 |
- 5. Tips and Advanced Use 24 |
3. Styles
29 | 30 |
31 |
32 |
52 |
53 |
64 |
65 | 
66 |
67 |
77 |
78 |
380 |
381 |
382 |
383 |
--------------------------------------------------------------------------------
The following properties can be set on any object when creating it. This also lists their default values if they are not set.
33 | 34 |
35 | lineWidth 5
36 | strokeStyle "#000000"
37 | fillStyle "#000000"
38 | lineCap "round"
39 | lineJoin "miter"
40 | lineDash []
41 | miterLimit 10
42 | shadowColor null
43 | shadowOffsetX 0
44 | shadowOffsetY 0
45 | shadowBlur 0
46 | globalAlpha 1
47 | translationX 0
48 | translationY 0
49 | shake 0
50 | blendMode "source-over"
51 | All of these defaults are defined on the glc.styles property. So you can change any of these globally by writing, for example:
56 | glc.styles.lineWidth = 20;
57 |
58 | list.addCircle({
59 | stroke: true,
60 | fill: false,
61 | radius: [50, 80]
62 | });
63 | Now, all objects will be drawn with a line width of 20 pixels, unless they explicitly set their own lineWidth property.
Note that you can not set default animations on glc.styles, only single values. Animations are only parsed within an object's property definition.
There is one additional property on glc.styles that does not apply to individual objects:
75 | backgroundColor "#ffffff"
76 | This is a global style only. The backgroundColor is only used to draw the main background of the animation and is not used by objects. It is not animatable. If you want to animate the background color, just create a rect behind all the other objects and animate its color.
You can create a background color by doing something like "rgba(0, 0, 0, 0.1)". This has the result of partially covering the previous frame with black. After multiple frames, the background becomes mostly black, but you will sometimes see "trails" of moving objects. This can be used to create some great effects. Note, that the non-standard 8-digit hex string like "#80000000" cannot be used here because this value is not parsed by the GLC color parsing system.
All of the other styles do pretty much what they do in the HTML5 Canvas drawing API. The exceptions are:
83 | 84 |-
85 |
- The
lineDashproperty, which is asetLineDashmethod on the 2d rendering context.
86 | translationXandtranslationY, which aretranslate(x, y)on the context.
87 | - The fact that you can specify hex colors with an alpha channel here, which you can't do directly on the 2d renering context. e.g.
"#80ff0000"
88 | - The
shakeproperty adds an adjustable jitter to any object it is applied to, randomly changing its position by a small amount on each frame.
89 | - The
blendModeproperty maps to the CanvasglobalCompositeOperationproperty. It's exactly the same. I just didn't feel the need to make you type "globalCompositeOperation" every time you need to use it.
90 |
The Color Module
94 | 95 |
96 |
97 |
116 |
117 |
118 |
123 |
124 |
129 |
130 |
135 |
136 |
143 |
144 |
149 |
150 |
155 |
156 |
161 |
162 |
167 |
168 |
173 |
174 |
179 |
180 |
185 |
186 |
191 |
192 |
197 |
198 |
203 |
204 |
209 |
210 |
218 |
219 |
226 |
227 |
228 |
229 |
232 |
233 |
234 |
235 | Although colors are already pretty powerful in GLC, I added a color module that makes defining colors even easier. You can access this as glc.color and it is now aliased in the template to simply be color.
The color module contains several methods that return color strings that can be used for fill styles, stroke styles, shadow colors or background colors. Here are all the methods:
100 | 101 |
102 | - color.rgb(r, g, b)
103 | - color.rgba(r, g, b, a)
104 | - color.gray(shade)
105 | - color.randomRGB()
106 | - color.randomRGB(min, max)
107 | - color.randomGray()
108 | - color.randomGray(min, max)
109 | - color.num(number)
110 | - color.hsv(h, s, v)
111 | - color.hsva(h, s, v, a)
112 | - color.animHSV(h, s, v)
113 | - color.animHSVA(h, s, v, a)
114 | - color.randomHSV(minH, maxH, minS, maxS, minV, maxV)
115 | Some of these simply make it easier to define colors using numbers for the component channels.
119 | 120 |
121 | fillStyle: color.rgb(255, 128, 0)
122 | or...
125 | 126 |
127 | fillStyle: color.rgba(255, 128, 0, 0.5)
128 | The color.num method lets you pass in a single integer that will be converted to a color string. This is usually done with a hexadecimal based number.
131 |
132 |
133 | fillStyle: color.num(0xff8000)
134 | Note that the num method only supports 24-bit numbers, so no alpha channel. Which is to say that the color will always be fully opaque.
You can also easily define a grayscale color with the color.gray method. Just pass it a value from 0 to 255.
141 | fillStyle: color.gray(128)
142 | Then there are methods for generating random colors or grays. color.randomRGB() will return a random color with full alpha.
147 | fillStyle: color.randomRGB()
148 | You can also pass minimum and maximum parameters to this method. For example, the following will generate a random color where all of the components have a value between 0 and 128. This will be a darker color, whatever it winds up being.
151 | 152 |
153 | fillStyle: color.randomRGB(0, 128)
154 | Whereas this example will generate colors where all the components have higher values - between 128 and 255:
157 | 158 |
159 | fillStyle: color.randomRGB(128, 255)
160 | Then there's the color.randomGray() method. This works the same way. With no parameters, you'll get a random gray from the full spectrum of grays.
165 | fillStyle: color.randomGray()
166 | Or you can pass in min and max values to set a range of grays where your random one will be pulled from.
169 | 170 |
171 | fillStyle: color.randomGray(0, 128)
172 | Finally, there are two methods for getting HSV (hue, saturation, value) based colors. First there is color.hsv(h, s, v). Here, you pass a value from 0 to 360 for hue. This determines the base color. Then a value from 0 to 1 for saturation and 0 to 1 for value. Saturation controls how much of the base hue will be in the final color, where 1 is a fully saturated value and 0 will give you white. And value controls how dark the color is, where 1 is as bright as it can be and 0 will be black.
177 | fillStyle: color.hsv(30, 1, 1)
178 | There's also a version with alpha:
181 | 182 |
183 | fillStyle: color.hsva(30, 1, 1, 0.5)
184 | And, of course, there's a random method for hsv: color.randomHue(min, max, s, v). With this one, the min and max parameters, as well as s and v, are all required. The following will generate colors with a orange to yellow hue:
189 | fillStyle: color.randomHSV(30, 60, 1, 1, 1, 1)
190 | A note on animating with the color module. All of the methods discussed so far return valid color strings, so they can all be animated just as if you'd assigned any other basic string. For example:
193 | 194 |
195 | fillStyle: [color.rgb(255, 0, 0), color.gray(128)]
196 | And you can mix and match them with any other color strings:
199 | 200 |
201 | fillStyle: [color.randomRGB(), "blue"]
202 | The only caveat is on using the color.hsv method. The values you assign here will be converted to a color string - which is rgb based - BEFORE animating. So you may not get the result you're looking for when animating between two hsv-defined colors. Take the following example:
207 | fillStyle: [color.hsv(0, 1, 1), color.hsv(360, 1, 1)]
208 | You might expect that to animate through the full spectrum of colors, giving you a rainbow effect. That's not what you'll get though. Actually hsv(0, 1, 1) will be converted to "#ff0000". And hsv(1, 1, 1) will convert to the exact same thing. So you'll be animating from red to red - no visible animation at all.
That's what the color.animHSV method is for. This takes six values - start and end parameters for each of h, s and v, and will animate between them as you would expect.
216 | fillStyle: color.animHSV(startH, endH, startS, endS, startV, endV)
217 | This will recalculate a new hsv value on each frame, so it is actually animating through various hues. If you try this one, I suggest you try it in single mode, no easing, with a duration of at least 5. Otherwise, the entire spectrum will be moving by so quickly, it will just look like random flashing colors. Animating hues often works better for smaller ranges, such as a min and max of 30 and 60, which will move between an orange and a yellow color.
220 | 221 |And, for the sake of completeness, the alpha version:
222 | 223 |
224 | fillStyle: color.animHSVA(startH, endH, startS, endS, startV, endV, startA, endA)
225 | For a bit more in depth discussion of the color module, check out this post.
230 | 231 |Gradients
236 | 237 |
238 |
239 |
250 |
251 |
258 |
259 |
267 |
268 |
293 |
294 | 
298 |
299 |
332 |
333 | 
336 |
337 |
368 |
369 | 
372 |
373 |
378 |
379 | Gradients, even in native canvas, are complex. Creating a single gradient is complicated enough, so it was a challenge to allow for a method of animating gradients without making it any more complicated. One of the main design decisions, good or bad, in GLC was to match the native canvas drawing API as much as possible. In canvas, you create gradients by calling context.createLinearGradient() or context.createRadialGradient() and then adding colors at specific spots in the gradient by calling gradient.addColorStop(). This is well documented elsewhere on the web, so I'm not going to go into that much here.
But basically, you'll be using the same API to make gradients in GLC. The big difference is that the gradients you create in GLC will be animatable, just like everything else.
242 | 243 |The methods for creating gradients have been added to the color module (which again is at glc.color, and aliased to simply color in the template.js file).
244 |
245 |
So, to create a linear gradient, you would say:
246 | 247 |
248 | var gradient = color.createLinearGradient(x0, y0, x1, y1);
249 | This creates a linear gradient that starts at point x0, y0 and goes to x1, y1. Now we need to add color stops. Say we want the color to be red at point x0, y0 and gradiently change to blue when it reaches x1, y1. We say:
254 | var gradient = color.createLinearGradient(x0, y0, x1, y1);
255 | gradient.addColorStop(0, "red");
256 | gradient.addColorStop(1, "blue");
257 | You can add as many stops as you want. Just ensure that you keep the positions in the range of 0 - 1.
260 | 261 |
262 | var gradient = color.createLinearGradient(x0, y0, x1, y1);
263 | gradient.addColorStop(0, "red");
264 | gradient.addColorStop(0.5, "green");
265 | gradient.addColorStop(1, "blue");
266 | Now, the gradient will start at red, move through green at the midway point, and end at blue. We can then simply assign this to the fillStyle or strokeStyle property of any object we are drawing. So here's what we have:
272 | function onGLC(glc) {
273 | glc.loop();
274 | glc.size(200, 200);
275 | var list = glc.renderList,
276 | width = glc.w,
277 | height = glc.h,
278 | color = glc.color;
279 |
280 | var gradient = color.createLinearGradient(0, -100, 0, 100);
281 | gradient.addColorStop(0, "red");
282 | gradient.addColorStop(0.5, "green");
283 | gradient.addColorStop(1, "blue");
284 |
285 | list.addCircle({
286 | x: 100,
287 | y: 100,
288 | radius: 100,
289 | fillStyle: gradient
290 | });
291 | }
292 | Here, the gradient goes from point 0, -100 to point 0, 100. This is relative to the center of the circle we are drawing. Since the circle has a radius of 100, the gradient will go from the top of the circle to the bottom. And here's what this gives us:
295 | 296 | 297 |
298 |
299 | The center of the object distinction is unique to GLC. In native canvas, the gradient is always centered at the top left of the canvas itself. This makes calculating your gradient sizes and positions to match what you're drawing a bit tricky.
300 | 301 |But for many of the objects in GLC the gradient is centered on the object, so things generally become a whole lot simpler.
302 | 303 |The gradient is centered on the object for the following shapes: circle, gear, heart, oval, poly, rect, star and text. These objects all have a size and position that is known beforehand. Also, these are the objects most likely to be filled, and gradients are generally more commonly used on fills than on strokes. So this makes filling these objects with a gradient very easy.
304 | 305 |When using gradients on other objects, such as curves, lines and paths, the gradient will most likely start at the default top left of the canvas and you'll have to work out where you want it from there, just like in native canvas. In some objects, such as the ray, the gradient will be centered on the first point of the ray. So you might need to experiment a bit to see where the gradient is actually starting and adjust it from there.
306 | 307 |For radial gradients, the process is the same, but you'd call color.createRadialGradient(x0, y0, r0, x1, y1, r1). Again, you're specifying two points, but also two radii. Basically the gradient goes between two circles. Usually these are somewhat concentric circles, with one very small, and the other the size of your object. So we have this:
311 | function onGLC(glc) {
312 | glc.loop();
313 | glc.size(200, 200);
314 | var list = glc.renderList,
315 | width = glc.w,
316 | height = glc.h,
317 | color = glc.color;
318 |
319 | var gradient = color.createRadialGradient(0, 0, 0, 0, 0, 100);
320 | gradient.addColorStop(0, "red");
321 | gradient.addColorStop(0.5, "green");
322 | gradient.addColorStop(1, "blue");
323 |
324 | list.addCircle({
325 | x: 100,
326 | y: 100,
327 | radius: 100,
328 | fillStyle: gradient
329 | });
330 | }
331 | The only difference here is that we created a radial gradient. The first point is 0, 0 with a radius of 0. The second point is also 0, 0, with a radius of 100. Color stops are the same. So we get:
334 | 335 |
336 |
337 | Now, on to animating! A lot of work went into making this as easy as possible while still following the canvas API. In the end, all we have to do is create two gradients, and assign them as an array to fillStyle. GCL will animate between them. It will animate the points and radii of the gradients, and the positions and colors of all the color stops!
Here you go:
340 | 341 |
342 | function onGLC(glc) {
343 | glc.loop();
344 | glc.size(200, 200);
345 | var list = glc.renderList,
346 | width = glc.w,
347 | height = glc.h,
348 | color = glc.color;
349 |
350 | var gradient1 = color.createRadialGradient(0, 0, 0, 0, 0, 100);
351 | gradient1.addColorStop(0, "red");
352 | gradient1.addColorStop(0.5, "green");
353 | gradient1.addColorStop(1, "blue");
354 |
355 | var gradient2 = color.createRadialGradient(0, 0, 0, 0, 0, 100);
356 | gradient2.addColorStop(0, "green");
357 | gradient2.addColorStop(0.5, "blue");
358 | gradient2.addColorStop(1, "red");
359 |
360 | list.addCircle({
361 | x: 100,
362 | y: 100,
363 | radius: 100,
364 | fillStyle: [gradient1, gradient2]
365 | });
366 | }
367 | Here, all I did was change the colors, but you could change just about anything. The result:
370 | 371 |
372 |
373 | Now before you ask, NO, it's not possible to animate between different kinds of gradients. For example, you can't animate between a solid fill and a gradient, or between a linear and radial gradient. You could, of course, create two gradients, and have the colors all the same in one. This would, in effect, create a solid fill or stroke. But since it's really a gradient, it would animate to a different gradient.
374 | 375 |Also, the number of color stops in the two gradients should be equal. If they aren't, some color stops might be dropped, or your computer might blow up.
376 | 377 |