f6b78b2216
- Increased canvas border in demo.html to make it more obvious if future code forgets to compensate for the border. - Fixed picking code to compensate for a border around the canvas. - Completed support for picking with a touch larger than a single point.
102 lines
3.6 KiB
HTML
102 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Scratch WebGL rendering demo</title>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
</body>
|
|
<script src="render-webgl.js"></script>
|
|
<script>
|
|
var canvas = document.getElementById('scratch-stage');
|
|
var renderer = new RenderWebGL(canvas);
|
|
var drawableID = renderer.createDrawable();
|
|
var direction = 90;
|
|
window.fudge = 90;
|
|
|
|
var fudgeInput = document.getElementById('fudge');
|
|
function onFudgeMinChanged(newValue) {
|
|
fudgeInput.min = newValue;
|
|
}
|
|
function onFudgeMaxChanged(newValue) {
|
|
fudgeInput.max = newValue;
|
|
}
|
|
function onFudgeChanged(newValue) {
|
|
window.fudge = newValue;
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
function thinkStep() {
|
|
//direction += 0.1;
|
|
|
|
var props = {};
|
|
//props.position = [posX, posY];
|
|
props.direction = fudge;
|
|
//props.pixelate = fudge;
|
|
//props.scale = 100;
|
|
|
|
renderer.updateDrawableProperties(drawableID, props);
|
|
}
|
|
|
|
renderer.updateDrawableProperties(drawableID, {
|
|
position: [0, 0],
|
|
scale: 100,
|
|
direction: 90
|
|
});
|
|
|
|
drawStep();
|
|
setInterval(thinkStep, 1/60);
|
|
</script>
|
|
</html> |