image iteration methods

JavaScript performance comparison

Test case created by

Preparation code

<script src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.8.0/build/array-extras/array-extras-min.js"></script>
<script>
    YUI.add("gallery-composite-image",function(e,t){(function(e){"use strict";var t="f32",n="f64",r="s16",i="s32",s="s8",o="u16",u="u32",a="u8",f=!0,l=ArrayBuffer,c=DataView,h=e.Lang,p=Object,d=e.Array,v=e.cached,m=p.defineProperties,g=d.each,y=d.flatten,b=p.freeze,w=h.isArray,E=d.map,S=d.reduce,x=function(){this._init.apply(this,arguments)};e.namespace("Composite").Image=e.mix(x,{dataTypes:{f32:t,f64:n,s16:r,s32:i,s8:s,u16:o,u32:u,u8:a},defaultChannels:[a,a,a,a],defaultDimensions:[512,512],prototype:{clear:function(){var e=this;return e._data=new l(e.pixelCount*e._pixelSize),e},clone:function(){var e=this;return new x({channels:e.channels,data:e._data.slice(0),dimensions:e.dimensions,littleEndian:e._littleEndian})},eachPixelIndex:function(e){var t=this,n=t.pixelCount,r=0;for(;r<n;r+=1)e(r,t);return t},eachPixelLocation:function(e){var t=this,n=t.dimensions,r=n.length,i=0,s=t.pixelCount,o=0,u=[];for(;i<r;i+=1)u[i]=0;for(;o<s;o+=1){e(u.slice(),o,t);for(i=0;i<r;i+=1){u[i]+=1;if(u[i]<n[i])break;u[i]=0}}return t},getDataArray:function(){var e=this,t=e._dataView;return t instanceof c?function(){var t=e.channels.length,n=[];return e.eachPixelIndex(function(r){for(var i=0;i<t;i+=1)n.push(e.getValue(r,i))}),n}():d(t)},getPixelIndex:function(){return this._getPixelIndex.apply(this,y(arguments))},getPixelValues:function(e,t){var n=this;return E(t||n.channels,t?function(t){return n.getValue(e,t)}:function(t,r){return n.getValue(e,r)})},getValue:function(e,t){return this._getValue(w(e)?this.getPixelIndex(e):e,t)},setDataArray:function(e){var t=this,n=t.channels.length,r=0;return t.eachPixelIndex(function(i){for(var s=0;s<n;s+=1)t.setValue(i,s,e[r]),r+=1})},setPixelValues:function(e,t,n){var r=this;return g(n||t,n?function(n,i){r.setValue(e,n,t[i])}:function(t,n){r.setValue(e,n,t)}),r},setValue:function(e,t,n){return this._setValue(w(e)?this.getPixelIndex(e):e,t,n)},toJSON:function(){var e=this,t=e._littleEndian,n={channels:e.channels,data:e.getDataArray(),dimensions:e.dimensions};return t&&(n.littleEndian=t),n},toString:function(){return"image["+this.dimensions.join("x")+"] "+this.channels},validate:function(e){return e=e||this._data,e instanceof l&&e.byteLength===this.pixelCount*this._pixelSize},_init:function(e){e=e||{};var t=this,n=b((e.channels||x.defaultChannels).slice()),r=[],i,s=b((e.dimensions||x.defaultDimensions).slice()),o=S(s,1,function(e,t){return e*t}),u=S(n,0,function(e,t){return r.push(e),!i&&i!==null?i=t:i&&i!==t&&(i=null),e+ +t.substr(1)/8}),a=e.data,l;m(t,{channels:{enumerable:f,value:n},dimensions:{enumerable:f,value:s},pixelCount:{enumberable:f,value:o},_channelOffsets:{enumerable:f,value:b(r)},_data:{enumerable:f,get:function(){return l},set:function(e){l=e,t._dataView=x._getDataView(l,i)}},_dataType:{enumerable:f,value:i},_pixelSize:{enumerable:f,value:u}}),t._getPixelIndex=x._getGetPixelIndexMethod.apply(t,s),t._getValue=x._getGetValueMethod(r,u,i),t._setValue=x._getSetValueMethod(r,u,i),t.validate(a)?t._data=a:(t.clear(),w(a)&&t.setDataArray(a)),t._littleEndian=!!e.littleEndian}},_getDataView:function(e,t){return new(x._getDataViewConstructor(t))(e)},_getDataViewConstructor:v(function(e){switch(e){case t:return Float32Array;case n:return Float64Array;case r:return Int16Array;case i:return Int32Array;case s:return Int8Array;case o:return Uint16Array;case u:return Uint32Array;case a:return Uint8ClampedArray}return c}),_getGetPixelIndexMethod:v(function(){var e=arguments,t=e.length;return v(function(){var n=arguments,r,i=0,s,o;for(r=0;r<t;r+=1){o=n[r];for(s=r-1;s>=0;s-=1)o*=e[s];i+=o}return i})}),_getGetValueMethod:v(function(e,t,n){var r=e.length;return n?function(e,t){return this._dataView[e*r+t]}:function(n,r){return this._dataView["get"+x._getTypeName(this.channels[r])](n*t+e[r],this.littleEndian)}}),_getSetValueMethod:v(function(e,t,n){var r=e.length;return n?function(e,t,n){return this._dataView[e*r+t]=n,this}:function(n,r,i){var s=this;return s._dataView["set"+x._getTypeName(s.channels[r])](n*t+e[r],i,s.littleEndian),s}}),_getTypeName:v(function(e){var t=e.charAt(0);return(t==="f"?"Float":t==="s"?"Int":"Uint")+e.substr(1)})},f)})(e)},"",{requires:["array-extras"]});
    var image = new (YUI().use('gallery-composite-image').Composite.Image)();
</script>
      
<script>
Benchmark.prototype.setup = function() {
  var sum = 0;

};
</script>

Preparation code output

<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.8.0/build/array-extras/array-extras-min.js"></script> <script> YUI.add("gallery-composite-image",function(e,t){(function(e){"use strict";var t="f32",n="f64",r="s16",i="s32",s="s8",o="u16",u="u32",a="u8",f=!0,l=ArrayBuffer,c=DataView,h=e.Lang,p=Object,d=e.Array,v=e.cached,m=p.defineProperties,g=d.each,y=d.flatten,b=p.freeze,w=h.isArray,E=d.map,S=d.reduce,x=function(){this._init.apply(this,arguments)};e.namespace("Composite").Image=e.mix(x,{dataTypes:{f32:t,f64:n,s16:r,s32:i,s8:s,u16:o,u32:u,u8:a},defaultChannels:[a,a,a,a],defaultDimensions:[512,512],prototype:{clear:function(){var e=this;return e._data=new l(e.pixelCount*e._pixelSize),e},clone:function(){var e=this;return new x({channels:e.channels,data:e._data.slice(0),dimensions:e.dimensions,littleEndian:e._littleEndian})},eachPixelIndex:function(e){var t=this,n=t.pixelCount,r=0;for(;r<n;r+=1)e(r,t);return t},eachPixelLocation:function(e){var t=this,n=t.dimensions,r=n.length,i=0,s=t.pixelCount,o=0,u=[];for(;i<r;i+=1)u[i]=0;for(;o<s;o+=1){e(u.slice(),o,t);for(i=0;i<r;i+=1){u[i]+=1;if(u[i]<n[i])break;u[i]=0}}return t},getDataArray:function(){var e=this,t=e._dataView;return t instanceof c?function(){var t=e.channels.length,n=[];return e.eachPixelIndex(function(r){for(var i=0;i<t;i+=1)n.push(e.getValue(r,i))}),n}():d(t)},getPixelIndex:function(){return this._getPixelIndex.apply(this,y(arguments))},getPixelValues:function(e,t){var n=this;return E(t||n.channels,t?function(t){return n.getValue(e,t)}:function(t,r){return n.getValue(e,r)})},getValue:function(e,t){return this._getValue(w(e)?this.getPixelIndex(e):e,t)},setDataArray:function(e){var t=this,n=t.channels.length,r=0;return t.eachPixelIndex(function(i){for(var s=0;s<n;s+=1)t.setValue(i,s,e[r]),r+=1})},setPixelValues:function(e,t,n){var r=this;return g(n||t,n?function(n,i){r.setValue(e,n,t[i])}:function(t,n){r.setValue(e,n,t)}),r},setValue:function(e,t,n){return this._setValue(w(e)?this.getPixelIndex(e):e,t,n)},toJSON:function(){var e=this,t=e._littleEndian,n={channels:e.channels,data:e.getDataArray(),dimensions:e.dimensions};return t&&(n.littleEndian=t),n},toString:function(){return"image["+this.dimensions.join("x")+"] "+this.channels},validate:function(e){return e=e||this._data,e instanceof l&&e.byteLength===this.pixelCount*this._pixelSize},_init:function(e){e=e||{};var t=this,n=b((e.channels||x.defaultChannels).slice()),r=[],i,s=b((e.dimensions||x.defaultDimensions).slice()),o=S(s,1,function(e,t){return e*t}),u=S(n,0,function(e,t){return r.push(e),!i&&i!==null?i=t:i&&i!==t&&(i=null),e+ +t.substr(1)/8}),a=e.data,l;m(t,{channels:{enumerable:f,value:n},dimensions:{enumerable:f,value:s},pixelCount:{enumberable:f,value:o},_channelOffsets:{enumerable:f,value:b(r)},_data:{enumerable:f,get:function(){return l},set:function(e){l=e,t._dataView=x._getDataView(l,i)}},_dataType:{enumerable:f,value:i},_pixelSize:{enumerable:f,value:u}}),t._getPixelIndex=x._getGetPixelIndexMethod.apply(t,s),t._getValue=x._getGetValueMethod(r,u,i),t._setValue=x._getSetValueMethod(r,u,i),t.validate(a)?t._data=a:(t.clear(),w(a)&&t.setDataArray(a)),t._littleEndian=!!e.littleEndian}},_getDataView:function(e,t){return new(x._getDataViewConstructor(t))(e)},_getDataViewConstructor:v(function(e){switch(e){case t:return Float32Array;case n:return Float64Array;case r:return Int16Array;case i:return Int32Array;case s:return Int8Array;case o:return Uint16Array;case u:return Uint32Array;case a:return Uint8ClampedArray}return c}),_getGetPixelIndexMethod:v(function(){var e=arguments,t=e.length;return v(function(){var n=arguments,r,i=0,s,o;for(r=0;r<t;r+=1){o=n[r];for(s=r-1;s>=0;s-=1)o*=e[s];i+=o}return i})}),_getGetValueMethod:v(function(e,t,n){var r=e.length;return n?function(e,t){return this._dataView[e*r+t]}:function(n,r){return this._dataView["get"+x._getTypeName(this.channels[r])](n*t+e[r],this.littleEndian)}}),_getSetValueMethod:v(function(e,t,n){var r=e.length;return n?function(e,t,n){return this._dataView[e*r+t]=n,this}:function(n,r,i){var s=this;return s._dataView["set"+x._getTypeName(s.channels[r])](n*t+e[r],i,s.littleEndian),s}}),_getTypeName:v(function(e){var t=e.charAt(0);return(t==="f"?"Float":t==="s"?"Int":"Uint")+e.substr(1)})},f)})(e)},"",{requires:["array-extras"]}); var image = new (YUI().use('gallery-composite-image').Composite.Image)(); </script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
for loops getPixelIndex
var dimensions = image.dimensions,
    height = dimensions[1],
    pixelIndex,
    width = dimensions[0],
    x,
    y;

for (y = 0; y < height; y += 1) {
    for (x = 0; x < width; x += 1) {
        pixelIndex = image.getPixelIndex(x, y);
        sum +=
            image.getValue(pixelIndex, 0) +
            image.getValue(pixelIndex, 1) +
            image.getValue(pixelIndex, 2) +
            image.getValue(pixelIndex, 3);
    }
}
pending…
for loops pixelLocation
var dimensions = image.dimensions,
    height = dimensions[1],
    pixelLocation,
    width = dimensions[0],
    x,
    y;

for (y = 0; y < height; y += 1) {
    for (x = 0; x < width; x += 1) {
        pixelLocation = [
            x,
            y
        ];
        sum +=
            image.getValue(pixelLocation, 0) +
            image.getValue(pixelLocation, 1) +
            image.getValue(pixelLocation, 2) +
            image.getValue(pixelLocation, 3);
    }
}
pending…
eachPixelIndex
image.eachPixelIndex(function (pixelIndex, image) {
    sum +=
        image.getValue(pixelIndex, 0) +
        image.getValue(pixelIndex, 1) +
        image.getValue(pixelIndex, 2) +
        image.getValue(pixelIndex, 3);
});
pending…
eachPixelLocation pixelLocation
image.eachPixelLocation(function (pixelLocation, pixelIndex, image) {
    sum +=
        image.getValue(pixelLocation, 0) +
        image.getValue(pixelLocation, 1) +
        image.getValue(pixelLocation, 2) +
        image.getValue(pixelLocation, 3);
});
pending…
eachPixelLocation pixelIndex
image.eachPixelLocation(function (pixelLocation, pixelIndex, image) {
    sum +=
        image.getValue(pixelIndex, 0) +
        image.getValue(pixelIndex, 1) +
        image.getValue(pixelIndex, 2) +
        image.getValue(pixelIndex, 3);
});
pending…
for loop pixelIndex
var pixelCount = image.pixelCount,
    pixelIndex = 0;

for (; pixelIndex < pixelCount; pixelIndex += 1) {
    sum +=
        image.getValue(pixelIndex, 0) +
        image.getValue(pixelIndex, 1) +
        image.getValue(pixelIndex, 2) +
        image.getValue(pixelIndex, 3);
}
pending…
for loops pixelIndex
var dimensions = image.dimensions,
    height = dimensions[1],
    pixelIndex = 0,
    width = dimensions[0],
    x,
    y;

for (y = 0; y < height; y += 1) {
    for (x = 0; x < width; x += 1) {
        sum +=
            image.getValue(pixelIndex, 0) +
            image.getValue(pixelIndex, 1) +
            image.getValue(pixelIndex, 2) +
            image.getValue(pixelIndex, 3);
        pixelIndex += 1;
    }
}
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 Comments