mirror of
https://github.com/scratchfoundation/scratch-render.git
synced 2025-08-06 11:28:44 -04:00
47b46fb1aa
- Move build outputs into `dist/` - Make build output file names more consistent - Update `playground/index.html` for new output file name - Explicitly specify target => Node output is much smaller - Minor fixes / cleanup in `.gitignore` and `src/index*.js`
140 lines
5.7 KiB
HTML
140 lines
5.7 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="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="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));
|
|
};
|
|
|
|
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>
|