75c4231b35
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 86ae0d63e3fe4fad55d737b882c8725580c96d95 5c75fc011265679cbfa5f8af6f12edaa3236a974 543f05d6d41221c011af4ff962087e29669a4053 ef100bf91ee1f0f0a451c6fad49f9204ecd365e0 b00ec4c50100223c043556363f990e8fd9d27848 ad94df4afe7eea6e2cfadb5503065aa643a78e6d 2c9e17d486da7585dda6548885b5b00b185ef356 f3a80c3429a11fb9d22f24d1f08f7efc4d414d9c 73ae8c205d7b817c1bc56b5516204e69c7418b6d fc10df7e412b7d2b0954431ef871518f2d744215 f0dae7aa482f4d7772b52a16e6eac82dcf8a5bab b74f9448f5a2ca66cc23bd1bc3f90be75a989b1a 04cebb9eedf2dab517a9e1303e3b1dea5a16693e aeefe8e5a3f4298cb0a17d30b870da7d2713d64a 1edb753ac8db8e60742662673d3140f9936845c1 91cc797c3b6ddeb6dcea453b2b623025106bb588 bb357ba8bcc7465833bc7827e23177634091c045 a21bd1aff1da9ee5d111340ed9fea91a68aa2899 1040189e2763b33c6612bb1ec93e39779d017657 74deedba1b00e5d3019d3c9ea94b8498d8550c59 9f59b42901f6ee5ecf47d0c0b1efbac628614ad9 6b0f3379bf83a349258adfefbdd0a7a45c7d89a5 eb7e87730c041de20f36e103d1f0a6963474e76c 4d04ef5de7e7cfdc3c5f22ff07858ce484008758 bdf65d4284c00fabf6abfeb1b6b936b99771c9f2 25d8148ec4d26424d9d8737309ae8a2db52948a8 137e4a642e35b25c4bb716badd142e8477476c50
141 lines
5.6 KiB
HTML
141 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Scratch WebGL rendering demo</title>
|
|
<style>
|
|
#scratch-stage { width: 480px; }
|
|
#debug-canvas { width: 480px; }
|
|
</style>
|
|
</head>
|
|
<body style="background: lightsteelblue">
|
|
<canvas id="debug-canvas" width="10" height="10" style="border:3px dashed red"></canvas>
|
|
<canvas id="scratch-stage" width="10" height="10" style="border:3px dashed black"></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="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));
|
|
};
|
|
|
|
function drawStep() {
|
|
renderer.draw();
|
|
renderer.getBounds(drawableID2);
|
|
requestAnimationFrame(drawStep);
|
|
}
|
|
drawStep();
|
|
|
|
renderer.setDebugCanvas(document.getElementById('debug-canvas'));
|
|
</script>
|
|
</body>
|
|
</html>
|