103 lines
3.9 KiB
HTML
103 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Scratch WebGL rendering demo</title>
|
|
</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>
|
|
<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 fudgeInput = document.getElementById('fudge');
|
|
function onFudgeMinChanged(newValue) {
|
|
fudgeInput.min = newValue;
|
|
}
|
|
function onFudgeMaxChanged(newValue) {
|
|
fudgeInput.max = newValue;
|
|
}
|
|
function onFudgeChanged(newValue) {
|
|
fudge = newValue;
|
|
var props = {};
|
|
//props.position = [posX, posY];
|
|
//props.direction = fudge;
|
|
//props.pixelate = fudge;
|
|
props.scale = [fudge, 100];
|
|
renderer.updateDrawableProperties(drawableID, 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();
|
|
requestAnimationFrame(drawStep);
|
|
}
|
|
drawStep();
|
|
|
|
renderer.setDebugCanvas(document.getElementById('debug-canvas'));
|
|
</script>
|
|
</body>
|
|
</html>
|