eb899d0866
9f11d79bfd2a8b96ad5a5918d0d582b6b1ec8a45 7045005296df98065dd54dca15eadfc27288ca5f f279a269581930a3d7996e1e281d808ef5fe76d1 a221d37e9851cde22fb8a4531395b721b1b0dc5f 68600e794da2c8ac7666eb49bc312a3400cf4095 b1401a1910e562598c6427e80e0e56b9c368d60d 6dd3c0ed81b1b8f52f81daa93d12eed9b0428a40 e035cadb04834242ef192d32de52f138d7e487ec 3bc00176edeed8e29f384a8febfc9b603aa2a644 331009ccb49f9ea83f2f085858b2bbc98b7968b0 a65ea3daed5eef3c9f4c66e3aa42ecf12508d69a 2463d2c50a503a544b033eab19ef46d695f97d47 c146debde83df0d3673c1d1f33bcf4b86c563ee6 42e5e724c24bfc2fbbd0d178a0ab4fc3ecb4b89a ac34ba7a13d867537aa83fd2e9da459e010cd39c 393efdd3aee5df8ec0974cbe54171dd64df8dfbe 959c635f58f7245d093468b2c98a8db29c768788 9e53d1c53d85c91785e9e694dea61a0a6f463ef1 18e4fedaf5da5f841f0b3a3d3a0a95c94f279971 626369a5d986c1d1bb0b36a4f8c7fccc4bd1bb66 b39bb4d3fdfa09e14f204215ec7b26128488af38 1a3e9845d0f95ec1de66d3fa665fc76cadce28ae 100625c6d7757230f469823c1680cd7002ac1fe3 fea7643e7e3f97caaf609e64e3139689fb51dfb8 4d8b5da4914612dc4cc8fff56cf678724a1c1a58 fd4ef087d57dca1eff6eae1b008ffd96edf3e202 8087dca4a9f75fdc0684f40f9ca1f3d86eba72e8 dc53feaf4178b0d280d928e62b319fdf34158e3a a0b3a687cd0a7c5788b05d79370d49516975ff93 4e2118485488cf0c98bba4b8e4d61b2747f26ee8 aa993779bb9098e0a0195c707e17cc8e69fbe413 fd2b86ea7a9a3d269f8a1c6f47f9ede76be568b3 4dba5db28df1903112d7e6630caad7c744de7380 35803dcfc959e28b025ddc16f9fdc438c9d6a64d 9a8f4f2a880ce34926a47ba1240697f4bcc32d30 805ec54f57d02eed3d9da24a3715dcc47c643829 187a783e74feb4b9d5c70cee52565dd82f388d70 549f596195e0ef30e003ed4e98b439ea21a41516 3e476e2d25b5aaee37e2eece08bbc80cac3681d4 c3c7bb28ae3ba4f18636a45dab4ab82cfabb441f 6f5acfee7b961d71237f1fd50bb3d5a5139c527e 9841de85f1faf620535e49771af34f9ca19cc617 2fc9005c6012a07eb1f6f10718e3dd85ebd617de bf2863921c1e48bc41198d8a5f3eabf205644175 c478ebec359b338a38053ff9ff72d133235b652c ea786aa4bd167542f87d5f4ce3f6e6fec76b282a abd76720eea77ce364a3706adecabec9609c4c9d 5eef82a9dc71623ddb9c3495e4b9949b68e964a0 3bdb1fff1f7d274711790ac015dd2b3a1faa286d ce5a3b8ad64c917de191500b5e470c825cd77509 f393d86b8ee386b155866031c4049ea2f4c36e67 a4b863e46438f37e75657b43ec1d73583302e0b9 875a5a3ec17b72d08bf589f52b7f3ea47464774c 51e8aa9b1a43335afac703534d3536d77add15cc 1531ea8ae6075771ee3f578b002819d98246b4f0 f7fd05cfba647af542ef6b25ceddc5737a278e78 f5af954acbda6d01ab0c50ca9752d457f28de160 c2ca8d2a8403efcb051c12ff572cb787ddb1b012 78c0d09c72a61420112ceb2b2b3a51e943da000c f29ed34ddc9c556c95117b0b6aa9459ffc6457db 140c0fbf3785d1c2531a2d7ac19f86d017236603 1f0cd4b61f58e6b7b2c13868a4be29453c7acdf0 6643469ff267be96612ebf9630d84d2736f0b4f3 6a0798062bf67424be59d093a99050abe0df2f4d ba5deb9936320b33879d6f98df339cb087eca51a 64c59914861a47162aee48a8e9f60854118617e8 4730a057ffb56e7f2a7a24d01daaa1e6789b8be5 e3a05743b0b9507d985fa27cd2e725b0e5afac45 2a64c1dd1811dedd96915460055a8c225c588d3d c6356f71ff20ba5c520c5ff845c4208d4af217a7 2dafa70ff7bd479f1d24333226d68ecaf5d2ca87 71ad4a8a8083439fecc2c45b2a530fae57eef46d 8164fef77e33563e761e138f7f02f749f5523781 14b34f4b3c6e2f7a153e5cd90af50af7a6ac396e b18ddadbe662edf559f23e2b31edf216fea28a2b 4afbba3657fabca1205bc12aa67f8269fda69d11 d1ea82b2bfab108b4f2e5abd132fb104df4dce86 b70056019827f72f5d6451163a25dc8fb9e2f1f4 b950b9f9adf2a705678bae2bb557c2dffe6f461d 3c80ed73a7c46f71896da6a9ecf3868cddf41eb4 5db860efedcc56bdf1f2c58ac74de1e1a7d76af4 47b46fb1aaa7f0d1cddb50cd309030bfd2f0efd3 b35f684478931d46925e9c11c3b264360e0c352f 8be289b7eec87561e263a3bfcd5fa1809ae173dc 722d7224f900f56d5fe20e82d4cca23946889792 85bdbdb721153eaf04f7cbf2ed2632ae6c02cdaa 6c4715f7935b42316b958e4f9025958d15654d05 be6d2dc4e4d739ef6dd354578105d7cf20e5fab2 2cffa7b643abf909daa3db10ba5ccf4a326ff91b a484fda1a6925b1e86a1bef470964f5b64c71a26 662ba3c645fa696e95f07b45e39e9c039bf24bc3 85c8b599a029607d5303695e895170fe520842e4 8e7a85d1a6addf8db6adeefc341e5470b7e1b8fd c00f0f55fc3daecac9fddfda99923e2d5d48c5bf 1fa97d248b2cfcacac041fd8eb97c99101ef4c5f a62d52a2d0655be3680c637fdaa05f2061e724fc f1ac1a8211de8fc551846a60e3c38b7262031bd5 14018f5ff66f8b401944fc4741ecaa93ce4e0b02 7629b2ab6d3b854ba5c85390e5eca76cdc3bf68d d261b57cd182fb654b515fbbf86103fae6efb5c5 d813dd91913fe2d8f927411e09d3f7a8ae60bbb3 053092c85b769a4686a3a78776e984324d0801be 9fa35524de0fa0261f62cc28608a770e2ef9b1e3 d7d1f92a131e94c8d0f7df717cedbb0a1c263cb2 59337ef8b5186487204855ebf49d0ef849770076 09dc67fa83ad34dd454f475610e8552f3b4b79c6 856f919970cbd74387c32bbd9f3945a68721b0f5 9f26ab17eb3ef3ca5a311ad1777ab506439338a6 d91ddf415851460095eb063059810d3441a1b469 201ceaba7752d75fc2cd9c4425b4920d2fbc0ad8 a6c8be822603fa120a4abc945fdd7edd64863aa8 89402a88c7e1953ee6bb7f70ef1dd39cb84896d6 278cddf04e9bf7f9da9a761be103f17bb4d824ac fb3f677e2c39cb04e7e49302eefef9b76a7b270d a5fb65ebebf614840017298e6d834c5c5e10af9b 2b81b791b325b3d02f12754ca99e3727d0705a0d 042f0f035304fd342d4657134844a126a2c74409 69821db56f549a311d4ea633354e20bcccf962d4 3277584da98b012d545ab9bfaa224ff74d64ec98 19bb8b99c33c87266aacfb9997a788dbb28e859a bf26fe41e8effeccd29be8ac6af04addc78b52f8 92fc916b866854767ac0f43ba56447c454b92af1 f5cd625be8baa78d0665abbbabeda7367407cc2f b8cc5f5245160eb02e1c2e2eb4854434f6956b96 47b5d07497cc59eeaa3affdf3013e759951f958e 672947ca56cb6b88ace0e58c11fae43dc642dd5b fc7db059784667af806c3cc0ba01044b95406d50 3dca142bb931c9dcd76930efdaaa9c9a1dcbc7f9 894ada4960514199cdbce1f04fcb53f5ab6f1ff5
144 lines
5.8 KiB
HTML
144 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Scratch WebGL rendering demo</title>
|
|
<style>
|
|
#scratch-stage { width: 480px; }
|
|
</style>
|
|
</head>
|
|
<body style="background: lightsteelblue">
|
|
<canvas id="scratch-stage" width="10" height="10" style="border:3px dashed black"></canvas>
|
|
<canvas id="debug-canvas" width="10" height="10" style="border:3px dashed red"></canvas>
|
|
<p>
|
|
<select id="fudgeproperty" onchange="onFudgePropertyChanged(this.value)">
|
|
<option value="posx">Position X</option>
|
|
<option value="posy">Position Y</option>
|
|
<option value="direction">Direction</option>
|
|
<option value="scalex">Scale X</option>
|
|
<option value="scaley">Scale Y</option>
|
|
<option value="color">Color</option>
|
|
<option value="fisheye">Fisheye</option>
|
|
<option value="whirl">Whirl</option>
|
|
<option value="pixelate">Pixelate</option>
|
|
<option value="mosaic">Mosaic</option>
|
|
<option value="brightness">Brightness</option>
|
|
<option value="ghost">Ghost</option>
|
|
</select>
|
|
<input type="range" id="fudge" style="width:50%" value="90" min="-90" max="270" step="any" oninput="onFudgeChanged(this.value)" onchange="onFudgeChanged(this.value)">
|
|
</p>
|
|
<p>
|
|
Min: <input id="fudgeMin" type="number" onchange="onFudgeMinChanged(this.value)">
|
|
Max: <input id="fudgeMax" type="number" onchange="onFudgeMaxChanged(this.value)">
|
|
</p>
|
|
<script src="scratch-render.js"></script>
|
|
<script>
|
|
var canvas = document.getElementById('scratch-stage');
|
|
var fudge = 90;
|
|
var renderer = new RenderWebGL(canvas);
|
|
|
|
var drawableID = renderer.createDrawable();
|
|
renderer.updateDrawableProperties(drawableID, {
|
|
position: [0, 0],
|
|
scale: [100, 100],
|
|
direction: 90
|
|
});
|
|
var drawableID2 = renderer.createDrawable();
|
|
renderer.updateDrawableProperties(drawableID2, {
|
|
skin: 'https://cdn.assets.scratch.mit.edu/internalapi/asset/' +
|
|
'09dc888b0b7df19f70d81588ae73420e.svg/get/'
|
|
});
|
|
|
|
var fudgeSelect = document.getElementById('fudgeproperty');
|
|
var posX = 0;
|
|
var posY = 0;
|
|
var scaleX = 100;
|
|
var scaleY = 100;
|
|
var fudgeProperty = 'posx';
|
|
function onFudgePropertyChanged(newValue) {
|
|
fudgeProperty = newValue;
|
|
}
|
|
var fudgeInput = document.getElementById('fudge');
|
|
function onFudgeMinChanged(newValue) {
|
|
fudgeInput.min = newValue;
|
|
}
|
|
function onFudgeMaxChanged(newValue) {
|
|
fudgeInput.max = newValue;
|
|
}
|
|
function onFudgeChanged(newValue) {
|
|
fudge = newValue;
|
|
var props = {};
|
|
switch (fudgeProperty) {
|
|
case 'posx': props.position = [fudge, posY]; posX = fudge; break;
|
|
case 'posy': props.position = [posX, fudge]; posY = fudge; break;
|
|
case 'direction': props.direction = fudge; break;
|
|
case 'scalex': props.scale = [fudge, scaleY]; scaleX = fudge; break;
|
|
case 'scaley': props.scale = [scaleX, fudge]; scaleY = fudge; break;
|
|
case 'color': props.color = fudge; break;
|
|
case 'whirl': props.whirl = fudge; break;
|
|
case 'fisheye': props.fisheye = fudge; break;
|
|
case 'pixelate': props.pixelate = fudge; break;
|
|
case 'mosaic': props.mosaic = fudge; break;
|
|
case 'brightness': props.brightness = fudge; break;
|
|
case 'ghost': props.ghost = fudge; break;
|
|
}
|
|
renderer.updateDrawableProperties(drawableID2, props);
|
|
}
|
|
|
|
// Adapted from code by Simon Sarris: http://stackoverflow.com/a/10450761
|
|
function getMousePos(event, element) {
|
|
var stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(element, null)['paddingLeft'], 10) || 0;
|
|
var stylePaddingTop = parseInt(document.defaultView.getComputedStyle(element, null)['paddingTop'], 10) || 0;
|
|
var styleBorderLeft = parseInt(document.defaultView.getComputedStyle(element, null)['borderLeftWidth'], 10) || 0;
|
|
var styleBorderTop = parseInt(document.defaultView.getComputedStyle(element, null)['borderTopWidth'], 10) || 0;
|
|
|
|
// Some pages have fixed-position bars at the top or left of the page
|
|
// They will mess up mouse coordinates and this fixes that
|
|
var html = document.body.parentNode;
|
|
var htmlTop = html.offsetTop;
|
|
var htmlLeft = html.offsetLeft;
|
|
|
|
// Compute the total offset. It's possible to cache this if you want
|
|
var offsetX = 0, offsetY = 0;
|
|
if (element.offsetParent !== undefined) {
|
|
do {
|
|
offsetX += element.offsetLeft;
|
|
offsetY += element.offsetTop;
|
|
} while ((element = element.offsetParent));
|
|
}
|
|
|
|
// Add padding and border style widths to offset
|
|
// Also add the <html> offsets in case there's a position:fixed bar
|
|
// This part is not strictly necessary, it depends on your styling
|
|
offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
|
|
offsetY += stylePaddingTop + styleBorderTop + htmlTop;
|
|
|
|
// We return a simple javascript object with x and y defined
|
|
return {
|
|
x: event.pageX - offsetX,
|
|
y: event.pageY - offsetY
|
|
};
|
|
}
|
|
|
|
canvas.onclick = function(event) {
|
|
var mousePos = getMousePos(event, canvas);
|
|
var pickID = renderer.pick(mousePos.x, mousePos.y);
|
|
console.log('You clicked on ' + (pickID < 0 ? 'nothing' : 'ID# ' + pickID));
|
|
if (pickID >= 0) {
|
|
console.dir(renderer.extractDrawable(pickID, mousePos.x, mousePos.y));
|
|
}
|
|
};
|
|
|
|
function drawStep() {
|
|
renderer.draw();
|
|
// renderer.getBounds(drawableID2);
|
|
// renderer.isTouchingColor(drawableID2, [255,255,255]);
|
|
requestAnimationFrame(drawStep);
|
|
}
|
|
drawStep();
|
|
|
|
renderer.setDebugCanvas(document.getElementById('debug-canvas'));
|
|
</script>
|
|
</body>
|
|
</html>
|