1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/metro/base/tests/mochiperf/res/ripples.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,254 @@
1.4 +<!DOCTYPE html>
1.5 +<html>
1.6 +<head>
1.7 +<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.8 +<script type="text/javascript">
1.9 +
1.10 +var ripples = {
1.11 + frame: 0,
1.12 +
1.13 + get frames() {
1.14 + return this.frame;
1.15 + },
1.16 +
1.17 + // Size of buffer.
1.18 + width: 80,
1.19 + height: 80,
1.20 +
1.21 + // Render size.
1.22 + renderWidth: 1200,
1.23 + renderHeight: 700,
1.24 +
1.25 + // Canvas size.
1.26 + canvasWidth: 1200,
1.27 + canvasHeight: 700,
1.28 +
1.29 + // Ripple start points.
1.30 + ripplePoints: [
1.31 + {x:0.5,y:0.5,start:0},
1.32 + {x:0.2,y:0.3,start:0},
1.33 + {x:0.7,y:0.6,start:0},
1.34 + {x:0.2,y:0.2,start:4000},
1.35 + {x:0.7,y:0.2,start:6000},
1.36 + {x:0.2,y:0.8,start:8000},
1.37 + {x:0.5,y:0.3,start:12000},
1.38 + {x:0.2,y:0.6,start:16000},
1.39 + {x:0.8,y:0.2,start:20000},
1.40 + {x:0.3,y:0.8,start:24000},
1.41 + {x:0.6,y:0.2,start:28000}
1.42 + ],
1.43 +
1.44 + a: false, // previous frame
1.45 + b: false, // frame before previous frame
1.46 +
1.47 + pixelWidth: 0,
1.48 + pixelHeight: 0,
1.49 +
1.50 + init: function() {
1.51 + // Get start time.
1.52 + var d = new Date();
1.53 + this.startTime = d.getTime();
1.54 +
1.55 + // Pixel sizes.
1.56 + this.pixelWidth = Math.floor(this.renderWidth / this.width);
1.57 + this.pixelHeight = Math.floor(this.renderHeight / this.height);
1.58 +
1.59 + // Top left corner position of the rendered effect.
1.60 + this.xPosition = this.canvasWidth / 2 - (this.pixelWidth * this.width) / 2;
1.61 + this.yPosition = this.canvasHeight / 2 - (this.pixelHeight * this.height) / 2;
1.62 +
1.63 +
1.64 + // Init canvas.
1.65 + var canvas = document.getElementById('ripples');
1.66 + this.ctx = canvas.getContext('2d');
1.67 +
1.68 + // Create buffers.
1.69 + this.a = new Buffer(this.width, this.height);
1.70 + this.b = new Buffer(this.width, this.height);
1.71 +
1.72 + },
1.73 +
1.74 + processBuffers: function() {
1.75 + var damping = 0.02;
1.76 + for (var x = 2; x < this.width - 2; x++) {
1.77 + for (var y = 2; y < this.height - 2; y++) {
1.78 + this.b.set(x, y,
1.79 + (
1.80 + this.a.get(x - 2, y)
1.81 + + this.a.get(x + 2, y)
1.82 + + this.a.get(x, y - 2)
1.83 + + this.a.get(x, y + 2)
1.84 + + this.a.get(x - 1, y)
1.85 + + this.a.get(x + 1, y)
1.86 + + this.a.get(x, y - 1)
1.87 + + this.a.get(x, y + 1)
1.88 + + this.a.get(x - 1, y - 1)
1.89 + + this.a.get(x + 1, y + 1)
1.90 + + this.a.get(x + 1, y - 1)
1.91 + + this.a.get(x - 1, y + 1)
1.92 + ) / 12 * 2 - this.b.get(x, y));
1.93 + this.b.set(x, y, this.b.get(x, y) - this.b.get(x, y) * damping);
1.94 + }
1.95 + }
1.96 + },
1.97 +
1.98 + render: function() {
1.99 +
1.100 + for (var x = 2; x < this.width - 2; x++) {
1.101 + for (var y = 2; y < this.height - 2; y++) {
1.102 +
1.103 + var color = this.b.get(x, y);
1.104 +
1.105 + var progress = color / 256;
1.106 + var rMin = 0, rMax = 255,
1.107 + gMin = 0, gMax = 255,
1.108 + bMin = 0, bMax = 255;
1.109 +
1.110 + var rDelta = (rMax - rMin) / 2;
1.111 + var rValue = Math.round(rMin + rDelta + rDelta * progress);
1.112 + var gDelta = (gMax - gMin) / 2;
1.113 + var gValue = Math.round(gMin + gDelta + gDelta * progress);
1.114 + var bDelta = (bMax - bMin) / 2;
1.115 + var bValue = Math.round(bMin + bDelta + bDelta * progress);
1.116 + this.ctx.fillStyle = "rgb("+rValue+", "+gValue+", "+bValue+")";
1.117 + this.ctx.fillRect(this.xPosition + x * this.pixelWidth,
1.118 + this.yPosition + y * this.pixelHeight,
1.119 + this.pixelWidth,
1.120 + this.pixelHeight);
1.121 + }
1.122 + }
1.123 + },
1.124 +
1.125 + swapBuffers: function() {
1.126 + var c = this.b;
1.127 + this.b = this.a;
1.128 + this.a = c;
1.129 + },
1.130 +
1.131 + clear: function() {
1.132 + this.ctx.clearRect(0, 0, this.width, this.height);
1.133 + },
1.134 +
1.135 + addRipple: function(time) {
1.136 +
1.137 + var ripplePoints = new Array();
1.138 + for (var i = 0; i < this.ripplePoints.length; i++) {
1.139 + if (this.ripplePoints[i].start < time) {
1.140 + this.a.sphere(
1.141 + Math.floor(this.width * this.ripplePoints[i].x),
1.142 + Math.floor(this.height * this.ripplePoints[i].y),
1.143 + Math.floor(this.width * 0.1), 256);
1.144 + } else {
1.145 + ripplePoints.push(this.ripplePoints[i]);
1.146 + }
1.147 + }
1.148 + this.ripplePoints = ripplePoints;
1.149 +
1.150 + },
1.151 +
1.152 + run: function(time) {
1.153 + this.clear();
1.154 + this.addRipple(time);
1.155 + this.processBuffers();
1.156 + this.render();
1.157 + this.swapBuffers();
1.158 + this.frame++;
1.159 + }
1.160 +}
1.161 +
1.162 +function Buffer(newWidth, newHeight) {
1.163 + this.width = newWidth;
1.164 + this.height = newHeight;
1.165 + this.data = new Array();
1.166 +
1.167 + for (var x = 0; x < this.width; x++) {
1.168 + this.data[x] = new Array();
1.169 + for (var y = 0; y < this.height; y++) {
1.170 + this.data[x][y] = 0;
1.171 + }
1.172 + }
1.173 +
1.174 + this.sphere = function(sphereX, sphereY, radius, depth) {
1.175 + for (var x = 0; x < this.width; x++) {
1.176 + for (var y = 0; y < this.height; y++) {
1.177 + var d = this.distance(sphereX, sphereY, x, y);
1.178 + if (d < radius) {
1.179 + this.data[x][y] = this.data[x][y] + depth * ((radius - Math.sqrt(d)) / radius);
1.180 + //this.data[x][y] = this.data[x][y] + Math.round((1 - d / radius) * 256);
1.181 + if (this.data[x][y] > 256) this.data[x][y] = 256;
1.182 + }
1.183 + }
1.184 + }
1.185 + }
1.186 +
1.187 + this.ripple = function(sphereX, sphereY, radius) {
1.188 + for (var x = 0; x < this.width; x++) {
1.189 + for (var y = 0; y < this.height; y++) {
1.190 + var d = this.distance(sphereX, sphereY, x, y);
1.191 + if (d < radius) {
1.192 + this.set(x, y, Math.sin((d / radius) * Math.PI) * 70);//Math.round((1 - d / radius) * 256);
1.193 + }
1.194 + }
1.195 + }
1.196 + }
1.197 +
1.198 + this.hardRipple = function(sphereX, sphereY, radius) {
1.199 + for (var x = 0; x < this.width; x++) {
1.200 + for (var y = 0; y < this.height; y++) {
1.201 + var d = this.distance(sphereX, sphereY, x, y);
1.202 + if (d < radius && d > radius * 0.8) {
1.203 + this.set(x, y, 256);//Math.round((1 - d / radius) * 256);
1.204 + }
1.205 + }
1.206 + }
1.207 + }
1.208 +
1.209 + this.distance = function(x1, y1, x2, y2) {
1.210 + return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
1.211 + }
1.212 +
1.213 + this.get = function(x, y) {
1.214 + if (typeof(this.data[x]) != "undefined" && typeof(this.data[x][y]) != "undefined") {
1.215 + return this.data[x][y];
1.216 + } else {
1.217 + return 0;
1.218 + }
1.219 + }
1.220 +
1.221 + this.set = function(x, y, value) {
1.222 + if (typeof(this.data[x]) != "undefined" && typeof(this.data[x][y]) != "undefined") {
1.223 + this.data[x][y] = Math.round(value);
1.224 + }
1.225 + }
1.226 +}
1.227 +
1.228 +function run() {
1.229 + ripples.init();
1.230 + var now = new Date();
1.231 + var start = window.mozAnimationStartTime;
1.232 + function step(timestamp) {
1.233 + progress = timestamp - start;
1.234 + ripples.run(progress);
1.235 + var time = new Date();
1.236 + var diff = time.getTime() - now.getTime();
1.237 + if (diff < 5000) { // five seconds
1.238 + window.mozRequestAnimationFrame(step);
1.239 + } else {
1.240 + var evt = document.createEvent("CustomEvent");
1.241 + evt.initCustomEvent("test", true, false, { testName: "ripples", frames: ripples.frames, msec: diff });
1.242 + window.dispatchEvent(evt);
1.243 + }
1.244 + }
1.245 + window.mozRequestAnimationFrame(step);
1.246 +}
1.247 +
1.248 +</script>
1.249 +<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.250 +<style>
1.251 +</style>
1.252 +<meta charset="utf-8">
1.253 +</head>
1.254 +<body onload="setTimeout(run, 1000);">
1.255 +<div id="anchor"><canvas id="ripples" width="1200" height="700"></canvas></div>
1.256 +</body>
1.257 +</html>
1.258 \ No newline at end of file
