mirror of
https://github.com/scratchfoundation/scratch-render.git
synced 2025-08-12 22:40:28 -04:00
Move “demo” into “playground” directory as to match VM and Blocks
This commit is contained in:
Andrew Sliwinski
parent
894ada4960
commit
3dca142bb9
3 changed files with 91 additions and 89 deletions
|
|
@ -1,86 +0,0 @@
|
|||
<!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-webgl.js"></script>
|
||||
<script>
|
||||
var canvas = document.getElementById('scratch-stage');
|
||||
var renderer = new RenderWebGLLocal(canvas);
|
||||
|
||||
var fudgeInput = document.getElementById('fudge');
|
||||
function onFudgeMinChanged(newValue) {
|
||||
fudgeInput.min = newValue;
|
||||
}
|
||||
function onFudgeMaxChanged(newValue) {
|
||||
fudgeInput.max = newValue;
|
||||
}
|
||||
function onFudgeChanged(newValue) {
|
||||
demoWorker.postMessage({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);
|
||||
}
|
||||
drawStep();
|
||||
|
||||
renderer.setDebugCanvas(document.getElementById('debug-canvas'));
|
||||
|
||||
var demoWorker = new Worker('demoWorker.js');
|
||||
renderer.connectWorker(demoWorker);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
89
playground/index.html
Normal file
89
playground/index.html
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<!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 renderer = new RenderWebGLLocal(canvas);
|
||||
|
||||
var fudgeInput = document.getElementById('fudge');
|
||||
function onFudgeMinChanged(newValue) {
|
||||
fudgeInput.min = newValue;
|
||||
}
|
||||
function onFudgeMaxChanged(newValue) {
|
||||
fudgeInput.max = newValue;
|
||||
}
|
||||
function onFudgeChanged(newValue) {
|
||||
demoWorker.postMessage({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);
|
||||
}
|
||||
drawStep();
|
||||
|
||||
renderer.setDebugCanvas(document.getElementById('debug-canvas'));
|
||||
|
||||
var demoWorker = new Worker('worker.js');
|
||||
renderer.connectWorker(demoWorker);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
|
||||
importScripts('./render-webgl-worker.js');
|
||||
importScripts('../render-worker.js');
|
||||
|
||||
var renderer;
|
||||
var drawableID;
|
||||
|
|
@ -21,7 +20,7 @@ onmessage = function(message) {
|
|||
};
|
||||
|
||||
function initWorker() {
|
||||
renderer = new RenderWebGLWorker();
|
||||
renderer = new window.RenderWebGLWorker();
|
||||
var create1 = renderer.createDrawable();
|
||||
var create2 = renderer.createDrawable();
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue