33 | Upload an image, click on the start button and look at the black point at the center of the picture.
34 | After some time, you should see the color image you uploaded.
35 | This is in fact a black and white version of your picture.
36 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/doc/guides/functions/README.md:
--------------------------------------------------------------------------------
1 | ## Matrix construction
2 |
3 | + {@link Matrix#colon}
4 | + {@link Matrix#linspace}
5 | + {@link Matrix#zeros}
6 | + {@link Matrix#ones}
7 | + {@link Matrix#rand}
8 | + {@link Matrix#randn}
9 | + {@link Matrix#randi}
10 | + {@link Matrix#eye}
11 | + {@link Matrix#complex}
12 | + {@link Matrix#imread}
13 | + {@link Matrix#diag}
14 |
15 | ## Matrix information
16 |
17 | + {@link Matrix#numel}
18 | + {@link Matrix#ndims}
19 | + {@link Matrix#size}
20 | + {@link Matrix#type}
21 | + {@link Matrix#isrow}
22 | + {@link Matrix#iscolumn}
23 | + {@link Matrix#isvector}
24 | + {@link Matrix#ismatrix}
25 | + {@link Matrix#issquare}
26 | + {@link Matrix#isinteger}
27 | + {@link Matrix#isfloat}
28 | + {@link Matrix#islogical}
29 | + {@link Matrix#intmin}
30 | + {@link Matrix#intmax}
31 | + {@link Matrix#realmin}
32 | + {@link Matrix#realmax}
33 |
34 | ## Matrix manipulation
35 |
36 | + {@link Matrix#set}
37 | + {@link Matrix#get}
38 | + {@link Matrix#repmat}
39 | + {@link Matrix#permute}
40 | + {@link Matrix#ipermute}
41 | + {@link Matrix#shiftdim}
42 | + {@link Matrix#rot90}
43 | + {@link Matrix#flipdim}
44 | + {@link Matrix#fliplr}
45 | + {@link Matrix#flipud}
46 | + {@link Matrix#cat}
47 |
48 | ## Linear algebra
49 |
50 | + {@link Matrix#mtimes}
51 | + {@link Matrix#chol}
52 | + {@link Matrix#inv}
53 | + {@link Matrix#det}
54 | + {@link Matrix#rank}
55 | + {@link Matrix#lu}
56 | + {@link Matrix#lup}
57 | + {@link Matrix#qr}
58 | + {@link Matrix#qrp}
59 | + {@link Matrix#mldivide}
60 | + {@link Matrix#mrdivide}
61 | + {@link Matrix#bidiag}
62 | + {@link Matrix#svd}
63 |
64 | ## Operators
65 |
66 | ### Mathematic operators
67 |
68 | + {@link Matrix#sqrt}
69 | + {@link Matrix#cos}
70 | + {@link Matrix#sin}
71 | + {@link Matrix#tan}
72 | + {@link Matrix#exp}
73 | + {@link Matrix#log}
74 | + {@link Matrix#floor}
75 | + {@link Matrix#ceil}
76 | + {@link Matrix#round}
77 | + {@link Matrix#acos}
78 | + {@link Matrix#asin}
79 | + {@link Matrix#atan}
80 | + {@link Matrix#atan2}
81 |
82 | ### Arimthmetic operators
83 |
84 | + {@link Matrix#plus}
85 | + {@link Matrix#minus}
86 | + {@link Matrix#uminus}
87 | + {@link Matrix#times}
88 | + {@link Matrix#rdivide}
89 | + {@link Matrix#ldivide}
90 | + {@link Matrix#power}
91 |
92 | ### Boolean operators
93 |
94 | + {@link Matrix#eq}
95 | + {@link Matrix#ne}
96 | + {@link Matrix#gt}
97 | + {@link Matrix#ge}
98 | + {@link Matrix#lt}
99 | + {@link Matrix#le}
100 | + {@link Matrix#and}
101 | + {@link Matrix#or}
102 | + {@link Matrix#neg}
103 |
104 | ### Other operators
105 |
106 | + {@link Matrix#arrayfun}
107 | + {@link Matrix#transpose}
108 | + {@link Matrix#ctranspose}
109 | + {@link Matrix#norm}
110 | + {@link Matrix#triu}
111 | + {@link Matrix#tril}
112 | + {@link Matrix#diag}
113 |
114 | ## Numerical types
115 |
116 | + {@link Matrix#cast}
117 | + {@link Matrix#double}
118 | + {@link Matrix#single}
119 | + {@link Matrix#int8}
120 | + {@link Matrix#int16}
121 | + {@link Matrix#int32}
122 | + {@link Matrix#uint8}
123 | + {@link Matrix#uint8c}
124 | + {@link Matrix#uint16}
125 | + {@link Matrix#uint32}
126 | + {@link Matrix#isnan}
127 | + {@link Matrix#isinf}
128 | + {@link Matrix#isfinite}
129 |
130 | ## Image processing
131 |
132 | ### Image conversion
133 |
134 | + {@link Matrix#convertImage}
135 | + {@link Matrix#im2double}
136 | + {@link Matrix#im2single}
137 | + {@link Matrix#im2uint8}
138 | + {@link Matrix#im2uint8c}
139 | + {@link Matrix#getImageData}
140 | + {@link Matrix#toImage}
141 |
142 | ### Image filtering
143 |
144 | + {@link Matrix#fspecial}
145 | + {@link Matrix#imfilter}
146 | + {@link Matrix#separableFilter}
147 | + {@link Matrix#gaussian}
148 | + {@link Matrix#gaussianGradient}
149 | + {@link Matrix#fastBlur}
150 | + {@link Matrix#gradient}
151 | + {@link Matrix#imerode}
152 | + {@link Matrix#imdilate}
153 | + {@link Matrix#imopen}
154 | + {@link Matrix#imclose}
155 | + {@link Matrix#fft2}
156 | + {@link Matrix#ifft2}
157 |
158 | ### Color image processing
159 |
160 | + {@link Matrix#applycform}
161 | + {@link Matrix#toColormap}
162 |
163 | ### Miscellaneous functions
164 |
165 | + {@link Matrix#imshow}
166 | + {@link Matrix#print}
167 | + {@link Matrix#imagesc}
168 | + {@link Matrix#imtransform}
169 | + {@link Matrix#imhist}
170 | + {@link Matrix#histeq}
171 | + {@link Matrix#rgb2gray}
172 |
173 | ## Basic mathematics
174 |
175 | ### Complex numbers
176 |
177 | + {@link Matrix#real}
178 | + {@link Matrix#imag}
179 | + {@link Matrix#complex}
180 | + {@link Matrix#angle}
181 | + {@link Matrix#abs}
182 | + {@link Matrix#conj}
183 | + {@link Matrix#ctranspose}
184 |
185 | ### Special functions
186 |
187 | + {@link Matrix#erf}
188 | + {@link Matrix#erfc}
189 | + {@link Matrix#erfcx}
190 |
191 |
192 | ## Basic statistics
193 |
194 | + {@link Matrix#min}
195 | + {@link Matrix#amin}
196 | + {@link Matrix#max}
197 | + {@link Matrix#amax}
198 | + {@link Matrix#sum}
199 | + {@link Matrix#prod}
200 | + {@link Matrix#mean}
201 | + {@link Matrix#variance}
202 | + {@link Matrix#std}
203 | + {@link Matrix#cumsum}
204 | + {@link Matrix#cumprod}
205 | + {@link Matrix#poissrnd}
206 | + {@link Matrix#exprnd}
207 | + {@link Matrix#sort}
208 | + {@link Matrix#asort}
209 | + {@link Matrix#accumarray}
210 |
211 |
--------------------------------------------------------------------------------
/examples/console/ScriptArea.class.js:
--------------------------------------------------------------------------------
1 | /*global jsConsole, myScript, Disk, prompt, confirm*/
2 |
3 | function ScriptArea(area, defaultScript) {
4 | 'use strict';
5 | this.area = area;
6 | this.buffers = {};
7 | this.initBuffers();
8 | }
9 |
10 | ScriptArea.prototype.initBuffers = function () {
11 | 'use strict';
12 | this.jsFiles = Disk.getItemList('.js');
13 | var i, name;
14 | for (i = 0; i < this.jsFiles.length; i++) {
15 | this.load(this.jsFiles[i]);
16 | }
17 | if (this.jsFiles[0]) {
18 | this.selectBuffer(this.jsFiles[0]);
19 | } else {
20 | this.createBuffer();
21 | }
22 | };
23 |
24 | ScriptArea.prototype.createBuffer = function () {
25 | 'use strict';
26 | var name = prompt('Please enter file name', 'myFile.js');
27 | var msg = "File: '" + name + "' exist. Overwrite ?";
28 | if ((this.buffers[name] === undefined && !Disk.exist(name)) || confirm(msg)) {
29 | this.buffers[name] = '';
30 | this.selectBuffer(name);
31 | }
32 | };
33 |
34 | ScriptArea.prototype.selectBuffer = function (name) {
35 | 'use strict';
36 | var buffer = this.buffers[name];
37 | this.setValue(buffer);
38 | this.currentBuffer = name;
39 | };
40 |
41 | ScriptArea.prototype.changeBuffer = function (name) {
42 | 'use strict';
43 | // Save current buffer
44 | this.buffers[this.currentBuffer] = this.getValue();
45 | this.selectBuffer(name);
46 | };
47 |
48 | ScriptArea.prototype.load = function (name) {
49 | 'use strict';
50 | var file = Disk.load(name);
51 | this.buffers[name] = file;
52 | };
53 |
54 | // Sauvegarde la zone
55 | ScriptArea.prototype.save = function (name) {
56 | 'use strict';
57 | var file;
58 | if (name === undefined) {
59 | name = this.currentBuffer;
60 | file = this.getValue();
61 | } else {
62 | file = this.buffers[name];
63 | }
64 | Disk.save(name, file, true);
65 | };
66 |
67 | ScriptArea.prototype.saveAs = function () {
68 | 'use strict';
69 | var name = prompt('Please enter file name', 'myFile.js');
70 | var msg = "File: '" + name + "' exist. Overwrite ?";
71 | if (!Disk.exist(name) || confirm(msg)) {
72 | this.buffers[name] = this.getValue();
73 | this.save(name);
74 | this.selectBuffer(name);
75 | }
76 | };
77 |
78 | ScriptArea.prototype.remove = function (name) {
79 | 'use strict';
80 | if (name === undefined) {
81 | name = this.currentBuffer;
82 | }
83 | var msg = "File: Really remove '" + name + "'?";
84 | if ((this.buffers[name] !== undefined || Disk.exist(name)) && confirm(msg)) {
85 | delete this.buffers[name];
86 | Disk.remove(name);
87 |
88 | var i;
89 | for (i = 0; i < this.jsFiles.length; i++) {
90 | if (this.jsFiles[i] === name) {
91 | this.jsFiles.slice(i, 1);
92 | }
93 | }
94 | if (this.jsFiles[0] !== undefined) {
95 | this.selectBuffer(this.jsFiles[0]);
96 | } else {
97 | this.createBuffer();
98 | }
99 | }
100 | };
101 |
102 | // Efface la zone ainsi que la sauvegarde
103 | ScriptArea.prototype.clear = function () {
104 | 'use strict';
105 | if (Disk.exist('__CURRENT__')) {
106 | Disk.remove('__CURRENT__');
107 | }
108 | };
109 |
110 | // Valeur de la zone
111 | ScriptArea.prototype.getValue = function () {
112 | 'use strict';
113 | return this.area.getValue();
114 | };
115 |
116 | ScriptArea.prototype.setValue = function (value) {
117 | 'use strict';
118 | if (value !== undefined) {
119 | this.area.setValue(value);
120 | }
121 | return this;
122 | };
123 |
124 | ScriptArea.prototype.getSelection = function () {
125 | 'use strict';
126 | var area = this.area;
127 | var selection = area.getSession().doc.getTextRange(area.getSelectionRange());
128 | return selection;
129 | };
130 |
131 | ScriptArea.prototype.gotoNextCodeLine = function () {
132 | 'use strict';
133 | var lineNumber = this.area.getSession().getSelection().getCursor().row;
134 | var buffer = this.getValue();
135 | var lines = buffer.split("\n");
136 |
137 | if (lineNumber < lines.length - 1) {
138 | lineNumber++;
139 | } else {
140 | return;
141 | }
142 |
143 | while (lineNumber < lines.length - 1 && !this.isCodeLine(lines[lineNumber])) {
144 | lineNumber++;
145 | }
146 |
147 | if (this.isCodeLine(lines[lineNumber])) {
148 | this.area.gotoLine(lineNumber + 1);
149 | }
150 | };
151 |
152 | ScriptArea.prototype.getCurrentLine = function () {
153 | 'use strict';
154 | var lineNumber = this.area.getSession().getSelection().getCursor().row;
155 | var buffer = this.getValue().split('\n');
156 | return buffer[lineNumber];
157 | };
158 |
159 | ScriptArea.prototype.isCodeLine = function (line) {
160 | 'use strict';
161 | var reg = /(^[ ]*[\/]+)|(^[ };]*$)/g;
162 | return (line.match(reg)) ? false : true;
163 | };
164 |
--------------------------------------------------------------------------------
/src/Matrix/Matrix.elementary_math.complex_numbers.js:
--------------------------------------------------------------------------------
1 | /*
2 | * This program is free software: you can redistribute it and/or modify
3 | * it under the terms of the GNU General Public License as published by
4 | * the Free Software Foundation, either version 3 of the License, or
5 | * (at your option) any later version.
6 | *
7 | * This program is distributed in the hope that it will be useful,
8 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
9 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
10 | * GNU General Public License for more details.
11 | *
12 | * You should have received a copy of the GNU General Public License
13 | * along with this program. If not, see .
14 | *
15 | * @author Baptiste Mazin
16 | * @author Guillaume Tartavel
17 | */
18 |
19 | /** @class Matrix */
20 |
21 | (function (Matrix, Matrix_prototype) {
22 | "use strict";
23 |
24 | /** Returns the Matrix real part.
25 | *
26 | * __Also see:__
27 | * {@link Matrix#imag}.
28 | *
29 | * @return {Matrix}
30 | *
31 | * @matlike
32 | */
33 | Matrix_prototype.real = function () {
34 | if (this.isreal()) {
35 | throw new Error('Matrix.real: This function can be only' +
36 | ' used with a complex Matrix. ');
37 | }
38 | var rd = this.getRealData();
39 | return new Matrix(this.getSize(), new rd.constructor(rd));
40 | };
41 |
42 | /** Returns the Matrix imaginary part.
43 | *
44 | * __Also see:__
45 | * {@link Matrix#real}.
46 | *
47 | * @return {Matrix}
48 | *
49 | * @matlike
50 | */
51 | Matrix_prototype.imag = function () {
52 | if (this.isreal()) {
53 | throw new Error('Matrix.imag: This function can be only' +
54 | ' used with a complex Matrix. ');
55 | }
56 | var id = this.getImagData();
57 | return new Matrix(this.getSize(), new id.constructor(id));
58 | };
59 |
60 | /** Returns the phase angle for complex Matrix.
61 | *
62 | * When used as Matrix object method, this function acts in place.
63 | * Use the Matrix.angle property to work on a copy.
64 | *
65 | * __Also see:__
66 | * {@link Matrix#abs}.
67 | *
68 | * @chainable
69 | * @matlike
70 | * @method angle
71 | */
72 | (function () {
73 | var angle_real = function (data) {
74 | for (var i = 0, ie = data.length; i < ie; i++) {
75 | data[i] = 0;
76 | }
77 | };
78 |
79 | var angle_cplx = function (datar, datai) {
80 | for (var i = 0, ie = datar.length; i < ie; i++) {
81 | datar[i] = Math.atan2(datai[i], datar[i]);
82 | datai[i] = 0;
83 | }
84 | };
85 |
86 | Matrix_prototype.angle = function () {
87 | if (this.isreal()) {
88 | angle_real(this.getData());
89 | } else {
90 | angle_cplx(this.getRealData(), this.getImagData());
91 | }
92 | return this;
93 | };
94 | Matrix.angle = function (m) {
95 | return m.getCopy().angle();
96 | };
97 |
98 | })();
99 |
100 | /** Returns the absolute value for real Matrix and
101 | * the complex magnitude for complex Matrix.
102 | *
103 | * When used as Matrix object method, this function acts in place.
104 | * Use the Matrix.abs property to work on a copy.
105 | *
106 | * __Also see:__
107 | * {@link Matrix#angle}.
108 | *
109 | * @chainable
110 | * @matlike
111 | * @method abs
112 | */
113 | (function () {
114 | var abs_real = function (data) {
115 | for (var i = 0, ie = data.length; i < ie; i++) {
116 | data[i] = data[i] > 0 ? data[i] : -data[i];
117 | }
118 | };
119 |
120 | var abs_cplx = function (datar, datai) {
121 | for (var i = 0, ie = datar.length; i < ie; i++) {
122 | var a = datai[i], b = datar[i];
123 | datar[i] = Math.sqrt(a * a + b * b);
124 | datai[i] = 0;
125 | }
126 | };
127 |
128 | Matrix_prototype.abs = function () {
129 | if (this.isreal()) {
130 | abs_real(this.getData());
131 | } else {
132 | abs_cplx(this.getRealData(), this.getImagData());
133 | }
134 | return this;
135 | };
136 | Matrix.abs = function (m) {
137 | return m.getCopy().abs();
138 | };
139 | })();
140 |
141 | /** Returns the complex conjugate of each element of the Matrix.
142 | *
143 | * When used as Matrix object method, this function acts in place.
144 | * Use the Matrix.conj property to work on a copy.
145 | *
146 | * @matlike
147 | * @chainable
148 | */
149 | Matrix_prototype.conj = function () {
150 | if (this.isreal() === true) {
151 | return this;
152 | }
153 | var i, ie, imag = this.getImagData();
154 | for (i = 0, ie = imag.length; i < ie; i++) {
155 | imag[i] = -imag[i];
156 | }
157 | return this;
158 | };
159 | Matrix.conj = function (m) {
160 | return m.getCopy().conj();
161 | };
162 |
163 | })(Matrix, Matrix.prototype);
164 |
--------------------------------------------------------------------------------
/examples/gpu/benchmark.js:
--------------------------------------------------------------------------------
1 | /*jslint vars: true, nomen: true, browser: true, plusplus: true, devel: true */
2 | /*global GLEffect, GLImage, GLReduction, FileReader, Uint8Array, Float32Array, Float64Array */
3 | /*exported init */
4 |
5 | 'use strict';
6 |
7 |
8 | // Global variables
9 | var REDUCTION, GRAYIFYER, MIXER;
10 | var IMAGE, TIME;
11 |
12 | // Shortcut for 'getElementById'
13 | function $(str) {
14 | return window.document.getElementById(str);
15 | }
16 |
17 | // Remove all the children of a node
18 | function removeAllChildren(elmt) {
19 | while (elmt.lastChild) {
20 | elmt.removeChild(elmt.lastChild);
21 | }
22 | }
23 |
24 | // Sum all the values of an array
25 | function sumAll(array) {
26 | var sum, k, n = array.length;
27 | for (sum = 0, k = 0; k < n; ++k) {
28 | sum += array[k];
29 | }
30 | return sum;
31 | }
32 |
33 | // Convert an array to a float array
34 | function toFloatArray(array, OutType) {
35 | OutType = OutType || Float32Array;
36 | var out = new OutType(array);
37 | var k, n = out.length;
38 | for (k = 0; k < n; ++k) {
39 | out[k] /= 255;
40 | }
41 | return out;
42 | }
43 |
44 | // Sum of an image's values
45 | function imageSum(im) {
46 | var c = document.createElement('canvas');
47 | c.width = im.width;
48 | c.height = im.height;
49 | var ctx = c.getContext('2d');
50 | ctx.drawImage(im, 0, 0, im.width, im.height);
51 | return sumAll(ctx.getImageData(0, 0, im.width, im.height).data);
52 | }
53 |
54 | // The time, in ms
55 | function tic() {
56 | var former = TIME;
57 | TIME = new Date().getTime();
58 | return TIME - former;
59 | }
60 |
61 | // Relative error
62 | function display(str, ref, value) {
63 | console.log('[' + tic() + 'ms] ' + str);
64 | if (ref) {
65 | console.log(Math.abs(value / ref - 1));
66 | }
67 | }
68 |
69 | // Create and run the GLEffect
70 | function runEffect() {
71 | var sum = imageSum(IMAGE);
72 | var im = new GLImage();
73 | im.load(IMAGE);
74 | tic();
75 |
76 | // Check time
77 | console.log('--- Number of CPU operations ---');
78 | var iterCPU;
79 | for (iterCPU = 1; iterCPU <= im.width * im.height; iterCPU *= 2) {
80 | display(iterCPU, null,
81 | 255 * sumAll(REDUCTION.run(im, {'maxIterCPU': iterCPU})));
82 | }
83 |
84 | // Check precision
85 | console.log('--- Precision ---');
86 | display('Manual, Float32', sum,
87 | 255 * sumAll(toFloatArray(im.toArray(Uint8Array), Float32Array)));
88 | display('Manual, Float64', sum,
89 | 255 * sumAll(toFloatArray(im.toArray(Uint8Array), Float64Array)));
90 | display('GLImage, Uint8', sum,
91 | sumAll(im.toArray(Uint8Array)));
92 | display('GLImage, Float32', sum,
93 | 255 * sumAll(im.toArray(Float32Array)));
94 | display('Reducer, GPU', sum,
95 | 255 * sumAll(REDUCTION.run(im, {'maxIterCPU': 0})));
96 | display('Reducer, CPU', sum,
97 | 255 * sumAll(REDUCTION.run(im, {'maxIterCPU': Infinity})));
98 | display('Reducer, hybrid', sum,
99 | 255 * sumAll(REDUCTION.run(im)));
100 |
101 | // Display
102 | var gray = GRAYIFYER.run(im, new GLImage());
103 | var canvas = MIXER.run([im, gray]);
104 | var container = $('content');
105 | removeAllChildren(container);
106 | container.appendChild(canvas);
107 |
108 | var slider = $('slider');
109 | slider.style.display = '';
110 | slider.value = 0;
111 | slider.oninput = function () {
112 | MIXER.setParameter('alpha', slider.value);
113 | MIXER.run([im, gray]);
114 | slider.focus();
115 | };
116 | }
117 |
118 | // Callback function: load the image
119 | function loadImageFromUrl() {
120 | var im = new Image();
121 | im.onload = function () {
122 | IMAGE = im;
123 | runEffect();
124 | };
125 | im.src = this;
126 | }
127 |
128 | // Callback function: handle the selected file
129 | function fileSelectionCallback() {
130 | if (this.files.length) {
131 | var file = this.files[0];
132 | var type = file.type.match(new RegExp('^[^/]*'))[0];
133 | if (type !== 'image') {
134 | throw new Error('Invalid image type');
135 | }
136 | var reader = new FileReader();
137 | reader.onerror = function () {
138 | throw new Error('Cannot load the selected file');
139 | };
140 | reader.onload = function () {
141 | loadImageFromUrl.call(reader.result);
142 | };
143 | reader.readAsDataURL(file);
144 | }
145 | }
146 |
147 | // Allow this element to be dropped on
148 | function makeDropArea(elmt) {
149 | elmt.ondrop = function (evt) {
150 | evt.preventDefault();
151 | fileSelectionCallback.call(evt.dataTransfer);
152 | };
153 | elmt.ondragover = function (evt) {
154 | evt.preventDefault();
155 | evt.stopPropagation();
156 | };
157 | }
158 |
159 | // Initialize the demo
160 | function init() {
161 | makeDropArea(document);
162 | REDUCTION = GLReduction.fromFunctions(
163 | function (a, b) {
164 | return a + b;
165 | },
166 | [
167 | 'vec4 function(vec4 a, vec4 b) {',
168 | ' return a + b;',
169 | '}'
170 | ].join('\n')
171 | );
172 | GRAYIFYER = GLEffect.fromFunction([
173 | 'vec3 function(vec3 color) {',
174 | ' vec3 axis = vec3(0.2, 0.5, 0.3);',
175 | ' float gray = dot(color, axis);',
176 | ' return vec3(gray);',
177 | '}'
178 | ].join('\n'));
179 | MIXER = GLEffect.fromFunction([
180 | 'uniform float alpha;',
181 | 'vec3 function(vec3 a, vec3 b) {',
182 | ' return alpha * b + (1.0 - alpha) * a;',
183 | '}'
184 | ].join('\n'));
185 | }
--------------------------------------------------------------------------------
/projects/drawHistogram.js:
--------------------------------------------------------------------------------
1 | /*
2 | * This program is free software: you can redistribute it and/or modify
3 | * it under the terms of the GNU General Public License as published by
4 | * the Free Software Foundation, either version 3 of the License, or
5 | * (at your option) any later version.
6 | *
7 | * This program is distributed in the hope that it will be useful,
8 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
9 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
10 | * GNU General Public License for more details.
11 | *
12 | * You should have received a copy of the GNU General Public License
13 | * along with this program. If not, see .
14 | *
15 | * @author Baptiste Mazin
16 | * @author Guillaume Tartavel
17 | */
18 |
19 | /*global document, Float32Array, Float64Array, console, Matrix, Colorspaces*/
20 | /*jshint white:true */
21 |
22 | (function() {
23 |
24 | // Check if code is running inside a browser or not.
25 | if (typeof window === 'undefined') {
26 | return;
27 | }
28 |
29 | HTMLCanvasElement.prototype.drawHistogram = function (data, vMax, title, modes, colormap, erase) {
30 | "use strict";
31 |
32 | var ctx = this.getContext('2d'), xSize = this.width, ySize = this.height;
33 | var max = 0;
34 | var xHisto = xSize - 80, yHisto = ySize - 45, binWidth = 0;
35 |
36 | var setTitle = function (title) {
37 | ctx.font = Math.round(Math.min(xSize, ySize) / 15) + "pt sans-serif";
38 | ctx.textAlign = "center";
39 | ctx.textBaseline = 'middle';
40 |
41 | if (title === undefined) {
42 | title = "Histogram";
43 | }
44 | ctx.fillText(title, xSize / 2, 15);
45 | };
46 | var initalize = function (erase) {
47 | if (erase) {
48 | ctx.clearRect(0, 0, xSize, ySize);
49 | }
50 | // Draw border
51 | ctx.lineWidth = 0.5;
52 | ctx.beginPath();
53 | ctx.strokeStyle = "black";
54 | ctx.strokeRect(0, 0, xSize, ySize);
55 |
56 |
57 | // Save properties
58 | ctx.save();
59 |
60 | // Translation
61 | ctx.translate((xSize - xHisto) / 2, ySize - 20);
62 |
63 | // Dessin des axes de l'histogramme
64 | ctx.strokeStyle = "black";
65 | ctx.lineWidth = 0.5;
66 |
67 | ctx.beginPath();
68 | ctx.moveTo(-10, 0);
69 | ctx.lineTo(xHisto, 0);
70 | ctx.moveTo(0, 0);
71 | ctx.lineTo(0, -yHisto);
72 |
73 | ctx.moveTo(0, -0.9 * yHisto);
74 | ctx.lineTo(-5, -0.9 * yHisto);
75 | ctx.stroke();
76 |
77 | };
78 | var setMax = function () {
79 | ctx.font = "8pt Arial";
80 | ctx.strokeStyle = "black";
81 | ctx.fillStyle = "black";
82 |
83 | var i;
84 | for (i = 0; i < data.length; i++) {
85 | if (data[i] > max) {
86 | max = data[i];
87 | }
88 | }
89 | if (max > vMax) {
90 | vMax = max;
91 | }
92 | if (vMax > 0) {
93 | vMax = 1 / vMax;
94 | }
95 | ctx.beginPath();
96 | //ctx.fillText(Math.round(100 / vMax) / 100, -21, -0.9 * yHisto);
97 |
98 | ctx.stroke();
99 | };
100 | var drawBins = function () {
101 | var round = Math.round;
102 | for (var i = 0; i < data.length; i++) {
103 | var h = -data[i] * vMax * 0.9 * yHisto;
104 | // Bins color
105 | ctx.fillStyle = colormap === "hue" ?
106 | "hsl(" + round(i / data.length * 360) + ", 100%, 50%" : (colormap ? colormap : "rgb(0, 128, 255)");
107 | // Draw line
108 | ctx.fillRect(i * binWidth + 4, 0, binWidth - 4, h);
109 | }
110 | };
111 |
112 | var drawModes = function (modes) {
113 | // Border color
114 | ctx.lineWidth = 2;
115 | ctx.strokeStyle = "rgb(255, 0, 128)";
116 | ctx.beginPath();
117 | for (var m = 0; m < modes.length; m++) {
118 | if (modes[m].bins[1] >= modes[m].bins[0]) {
119 | ctx.moveTo(modes[m].bins[0] * binWidth + 2, 0);
120 | ctx.lineTo(modes[m].bins[0] * binWidth + 2, -0.9 * yHisto);
121 | ctx.lineTo((modes[m].bins[1] + 1) * binWidth + 2, -0.9 * yHisto);
122 | ctx.lineTo((modes[m].bins[1] + 1) * binWidth + 2, 0);
123 |
124 | } else {
125 | ctx.moveTo(modes[m].bins[0] * binWidth + 2, 0);
126 | ctx.lineTo(modes[m].bins[0] * binWidth + 2, -0.9 * yHisto);
127 | ctx.lineTo(data.length * binWidth + 2, -0.9 * yHisto);
128 | ctx.moveTo(0, -0.9 * yHisto);
129 | ctx.lineTo((modes[m].bins[1] + 1) * binWidth + 2, -0.9 * yHisto);
130 | ctx.lineTo((modes[m].bins[1] + 1) * binWidth + 2, 0);
131 | }
132 | }
133 | ctx.stroke();
134 | };
135 |
136 | setTitle(title);
137 | initalize(erase === false ? false : true);
138 | if (!data) {
139 | ctx.restore();
140 | return;
141 | }
142 | binWidth = (xHisto - 20) / data.length;
143 |
144 | setMax();
145 | drawBins();
146 | if (modes) {
147 | drawModes(modes);
148 | }
149 | // Restore properties
150 | ctx.restore();
151 | };
152 |
153 | })();
154 |
--------------------------------------------------------------------------------
/examples/gpu/effect-designer.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | GPU Processing UI
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
25 |
26 |
27 |
28 |
29 |
30 |
Images
31 |
32 |
33 |
34 |
35 | Load an image/video and import an effect to start the demo.
36 |
37 |
38 |
What is this?
39 |
40 | This page allows you to write and run real-time effects on images and videos.
41 | It is a graphical interface for the GLEffect and GLReduction classes.
42 |
43 |
Known bugs:
44 |
45 |
Firefox throws an error when double-clicking the output, but the format/type pair is correct.
46 |
When loading mobile version then turning to desktop one, bug when resizing the menu.
120 | This demo implements the algorithm introduced in the paper
121 | A Wavelet Perspective on Variational Perceptually-Inspired Color Enhancement
122 | published in 2014 by E Provenzi and V Caselles.
123 | This algorithm performs color and contrast enhancement in the wavelet domain and this demo allows you to test it on your own images.
124 | Note that image larger than 1200x1200 are resized to avoid too long computation time and/or mermory consumption.
125 |
126 |
Instructions
127 |
128 |
129 | First upload an image using the file selector in the top left part of this page.
130 |
131 |
132 | The in the color enhancement section, you may set your parameters and then click on Apply to see the algorithm effect on the uploaded picture.
133 | The computation may take several seconds.
134 |
135 |
136 | Once the image is processed, it will be displayed and you can use the arrow keys to navigate between the original image,
137 | the processed image or see differences between these images. These different pictures are also available with the View selector.
138 |
139 |
140 | The Stretch dynamic selector allows to expand the image dynamic after algorithm processing.
141 | The stretching can be done either on the luminance channel or oon each RGB channel independently.
142 |
Parameters
143 | The best way to understand then is with any doubt to read the paper, but i provide some hint to build intuition on their effects.
144 |
145 |
146 | α: For each channel, it controls the dispersion arround the average value.
147 | Set to zero, this parameter has no effect, while set to 1 the image will be washed out.
148 |
149 |
150 | w: It controls the contrast enhancement the bigger the value the greater the effect.
151 |
152 |
153 | K: It controls the magnitude of details enhanced. Small values (1) will only enhance the strongest edges while
154 | greater values will also enhance small details, noise included.
155 |
156 |
157 | γ: This parameter is not described in the article, it implements a gamma functionnal for the φ variable used in the article.
158 |
159 |
160 | Γ: This parameter is also not described in the article, it allows for applying a global gamma correction
161 | on the input image before processing. This gamma correction is reverted after processing on the output data.
162 | Generally values arround 0.5 provide very nice results.
163 |
120 | This demo aims at demonstrating the abilities of the PPL (projections on planckian locus) algorithm.
121 | It allows you to upload an image, set a white reference from a white chart in the picture, remove this white chart,
122 | and finally run several algorithms and compare how well they estimate the illuminant.
123 |
124 |
125 | All the algorithms rely linear images, which means that we remove the gamma correction before computing the estimation.
126 | Therefore, the errors are as well are computed on linear images.
127 |
128 |
Instructions
129 |
130 |
131 | First upload an image using the file selector in the top left part of this page.
132 |
133 |
134 | Select a white reference using shift+dragging to select a rectangular area on the image.
135 | The estimation is done by averaging the pixels selected. A corresponding scatter plot will also appeared in the chromaticity diagram.
136 |
137 |
138 | On the left panel, replace "White patch selection" with "White chart removal" option. Then
139 | using shift+dragging on the image you will be able to remove this white chart to avoid biasing the estimations.
140 |
141 |
142 | Then you can click on launch the benchmark button. Processing may take up to one minute.
143 | Once it finishes, you can choose the correction to apply on the image via the "Correction done with" selector.
144 | A small log will also be displayed, summing up the errors obtained for each algorithm.
145 |
146 |
147 |
148 |
Plots guideline
149 |
150 |
151 | Navigation in the picture may be done using dragging for translation and mouse wheel for zoom in/out.
152 |
153 |
154 | Click on the image or on the chromaticity diagram will correct the image white balance based either
155 | on the pixel color or the chromaticity selected.
156 |
157 |
158 | Depending on the Image selection field value, shift+dragging on the image diagram will:
159 |
160 |
161 | Select a white patch reference by averaging the pixels, and plot the chromaticities into the chromaticity diagram.
162 |
163 |
164 | Select and remove part of the picture.
165 |
166 |
167 | Produce a scatter plot of the selected pixels.
168 | Please be careful with large areas selection they can slow down the application significantly..
169 |
170 |
171 |
172 |
173 |
174 |
Options
175 | The option field set allows you to choose in which diagram the chromaticities are displayed. as well as the rendering illuminant.
176 |
177 |
Notes
178 | To prevent browser crashes and reduce the time required, the allowed image size has been restricted to stay in the range 1200x1200.
179 |
180 | Note that this demo tested was only Chrome and Firefox web browsers, and might not work with the others.
181 |
182 | The code and parameters used to compute grey-world, grey-edge, shades-of-grey and white-patch results results
183 | from an adaptation of a matlab code by Joost Van-de-Weijer that can be found on his webpage.
184 |