OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 |
| 5 <meta charset=utf8> |
| 6 |
| 7 <!-- |
| 8 Copyright (C) 2007 Apple Inc. All rights reserved. |
| 9 Copyright (C) 2010 Mozilla Foundation |
| 10 |
| 11 Redistribution and use in source and binary forms, with or without |
| 12 modification, are permitted provided that the following conditions |
| 13 are met: |
| 14 1. Redistributions of source code must retain the above copyright |
| 15 notice, this list of conditions and the following disclaimer. |
| 16 2. Redistributions in binary form must reproduce the above copyright |
| 17 notice, this list of conditions and the following disclaimer in the |
| 18 documentation and/or other materials provided with the distribution. |
| 19 |
| 20 THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY |
| 21 EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
| 22 IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
| 23 PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR |
| 24 CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, |
| 25 EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, |
| 26 PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR |
| 27 PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY |
| 28 OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 29 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| 30 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 31 --> |
| 32 |
| 33 <title>Kraken JavaScript Benchmark: Gaussian Blur</title> |
| 34 <link rel="stylesheet" href="../kraken.css"> |
| 35 <script> |
| 36 |
| 37 </script> |
| 38 <style> #display { border: 5px solid rgb(0,0,50);}</style> |
| 39 </head> |
| 40 |
| 41 <body> |
| 42 <div id="content"> |
| 43 <h2>Kraken JavaScript Benchmark: Gaussian Blur</h2> |
| 44 <div id="results"> |
| 45 <p>This benchmark performs a <a href="http://en.wikipedia.org/wiki/Gaussian_
blur">Gaussian blur</a> on a photo.</p> |
| 46 <p><small>Photo courtesy <a href="http://www.flickr.com/photos/katclay/42965
23922/in/photostream/">Kat Clay</a> from Flickr</small>.</p> |
| 47 <img id="image" src="squid.png" width="400" height="267"> |
| 48 <canvas id="canvas" width="400" height="267"></canvas> |
| 49 <script> |
| 50 var sigma = 10; // radius |
| 51 var kernel, kernelSize, kernelSum; |
| 52 buildKernel(); |
| 53 |
| 54 try { |
| 55 // Opera createImageData fix |
| 56 if (!("createImageData" in CanvasRenderingContext2D.prototype)) { |
| 57 CanvasRenderingContext2D.prototype.createImageData = function(sw,sh) {
return this.getImageData(0,0,sw,sh); } |
| 58 } |
| 59 } catch(e) {} |
| 60 |
| 61 function buildKernel() { |
| 62 var ss = sigma * sigma; |
| 63 var factor = 2 * Math.PI * ss; |
| 64 kernel = []; |
| 65 kernel.push([]); |
| 66 var i = 0, j; |
| 67 do { |
| 68 var g = Math.exp(-(i * i) / (2 * ss)) / factor; |
| 69 if (g < 1e-3) break; |
| 70 kernel[0].push(g); |
| 71 ++i; |
| 72 } while (i < 7); |
| 73 kernelSize = i; |
| 74 for (j = 1; j < kernelSize; ++j) { |
| 75 kernel.push([]); |
| 76 for (i = 0; i < kernelSize; ++i) { |
| 77 var g = Math.exp(-(i * i + j * j) / (2 * ss)) / factor; |
| 78 kernel[j].push(g); |
| 79 } |
| 80 } |
| 81 kernelSum = 0; |
| 82 for (j = 1 - kernelSize; j < kernelSize; ++j) { |
| 83 for (i = 1 - kernelSize; i < kernelSize; ++i) { |
| 84 kernelSum += kernel[Math.abs(j)][Math.abs(i)]; |
| 85 } |
| 86 } |
| 87 } |
| 88 |
| 89 function blurTest() { |
| 90 var results = document.getElementById('blur-result'); |
| 91 results.innerHTML = "Running test..."; |
| 92 |
| 93 window.setTimeout(function() { |
| 94 var canvas = document.getElementById('canvas'); |
| 95 var ctx = canvas.getContext('2d'); |
| 96 var img = document.getElementById('image') |
| 97 ctx.drawImage(img, 0, 0, img.width, img.height); |
| 98 |
| 99 var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); |
| 100 var width = imgData.width, height = imgData.height; |
| 101 var data = imgData.data; |
| 102 |
| 103 var len = data.length; |
| 104 var startTime = (new Date()).getTime(); |
| 105 |
| 106 for (var y = 0; y < height; ++y) { |
| 107 for (var x = 0; x < width; ++x) { |
| 108 var r = 0, g = 0, b = 0, a = 0; |
| 109 for (j = 1 - kernelSize; j < kernelSize; ++j) { |
| 110 if (y + j < 0 || y + j >= height) continue; |
| 111 for (i = 1 - kernelSize; i < kernelSize; ++i) { |
| 112 if (x + i < 0 || x + i >= width) continue; |
| 113 r += data[4 * ((y + j) * width + (x + i)) + 0] * kernel[Math.a
bs(j)][Math.abs(i)]; |
| 114 g += data[4 * ((y + j) * width + (x + i)) + 1] * kernel[Math.a
bs(j)][Math.abs(i)]; |
| 115 b += data[4 * ((y + j) * width + (x + i)) + 2] * kernel[Math.a
bs(j)][Math.abs(i)]; |
| 116 a += data[4 * ((y + j) * width + (x + i)) + 3] * kernel[Math.a
bs(j)][Math.abs(i)]; |
| 117 } |
| 118 } |
| 119 data[4 * (y * width + x) + 0] = r / kernelSum; |
| 120 data[4 * (y * width + x) + 1] = g / kernelSum; |
| 121 data[4 * (y * width + x) + 2] = b / kernelSum; |
| 122 data[4 * (y * width + x) + 3] = a / kernelSum; |
| 123 } |
| 124 } |
| 125 var finishTime = Date.now() - startTime; |
| 126 for (var i = 0; i < data.length; i++) { |
| 127 imgData.data[i] = data[i]; |
| 128 } |
| 129 //imgData.data = data; |
| 130 ctx.putImageData(imgData, 0, 0); |
| 131 results.innerHTML = "Finished: " + finishTime + "ms"; |
| 132 }, 10); |
| 133 } |
| 134 </script> |
| 135 <p><input type="button" value="Blur Test" onclick="blurTest();"> <span
id="blur-result"></span></p> |
| 136 </div> |
| 137 </div> |
| 138 </body> |
| 139 </html> |
OLD | NEW |