Compare commits
1 Commits
greenkeepe
...
greenkeepe
| Author | SHA1 | Date | |
|---|---|---|---|
|
6fb5a60d47 |
@@ -38,7 +38,7 @@
|
||||
"jsdoc": "^3.5.5",
|
||||
"json": "^9.0.4",
|
||||
"scratch-vm": "0.2.0-prerelease.20190207224121",
|
||||
"tap": "^11.0.0",
|
||||
"tap": "^14.1.11",
|
||||
"travis-after-all": "^1.4.4",
|
||||
"uglifyjs-webpack-plugin": "^1.2.5",
|
||||
"webpack": "^4.8.0",
|
||||
@@ -51,7 +51,7 @@
|
||||
"ify-loader": "1.0.4",
|
||||
"linebreak": "0.3.0",
|
||||
"minilog": "3.1.0",
|
||||
"raw-loader": "^3.0.0",
|
||||
"raw-loader": "^0.5.1",
|
||||
"scratch-storage": "^1.0.0",
|
||||
"scratch-svg-renderer": "0.2.0-prerelease.20190521170426",
|
||||
"twgl.js": "4.4.0"
|
||||
|
||||
@@ -3,11 +3,13 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Scratch WebGL rendering demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<style>
|
||||
#scratch-stage { width: 480px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="scratch-stage" width="10" height="10"></canvas>
|
||||
<canvas id="debug-canvas" width="10" height="10"></canvas>
|
||||
<body style="background: lightsteelblue">
|
||||
<canvas id="scratch-stage" width="10" height="10" style="border:3px dashed black"></canvas>
|
||||
<canvas id="debug-canvas" width="10" height="10" style="border:3px dashed red"></canvas>
|
||||
<p>
|
||||
<label for="fudgeproperty">Property to tweak:</label>
|
||||
<select id="fudgeproperty">
|
||||
@@ -16,7 +18,6 @@
|
||||
<option value="direction">Direction</option>
|
||||
<option value="scalex">Scale X</option>
|
||||
<option value="scaley">Scale Y</option>
|
||||
<option value="scaleboth">Scale (both dimensions)</option>
|
||||
<option value="color">Color</option>
|
||||
<option value="fisheye">Fisheye</option>
|
||||
<option value="whirl">Whirl</option>
|
||||
@@ -29,12 +30,8 @@
|
||||
<input type="range" id="fudge" style="width:50%" value="90" min="-90" max="270" step="any">
|
||||
</p>
|
||||
<p>
|
||||
<label for="stage-scale">Stage scale:</label>
|
||||
<input type="range" style="width:50%" id="stage-scale" value="1" min="1" max="2.5" step="any">
|
||||
</p>
|
||||
<p>
|
||||
<label for="fudgeMin">Min:</label><input id="fudgeMin" type="number" value="0">
|
||||
<label for="fudgeMax">Max:</label><input id="fudgeMax" type="number" value="200">
|
||||
<label for="fudgeMin">Min:</label><input id="fudgeMin" type="number">
|
||||
<label for="fudgeMax">Max:</label><input id="fudgeMax" type="number">
|
||||
</p>
|
||||
<script src="playground.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -1,32 +1,26 @@
|
||||
const ScratchRender = require('../RenderWebGL');
|
||||
const getMousePosition = require('./getMousePosition');
|
||||
|
||||
const canvas = document.getElementById('scratch-stage');
|
||||
let fudge = 90;
|
||||
const renderer = new ScratchRender(canvas);
|
||||
var canvas = document.getElementById('scratch-stage');
|
||||
var fudge = 90;
|
||||
var renderer = new ScratchRender(canvas);
|
||||
renderer.setLayerGroupOrdering(['group1']);
|
||||
|
||||
const drawableID = renderer.createDrawable('group1');
|
||||
var drawableID = renderer.createDrawable('group1');
|
||||
renderer.updateDrawableProperties(drawableID, {
|
||||
position: [0, 0],
|
||||
scale: [100, 100],
|
||||
direction: 90
|
||||
});
|
||||
|
||||
const WantedSkinType = {
|
||||
bitmap: 'bitmap',
|
||||
vector: 'vector',
|
||||
pen: 'pen'
|
||||
};
|
||||
|
||||
const drawableID2 = renderer.createDrawable('group1');
|
||||
const wantedSkin = WantedSkinType.vector;
|
||||
var drawableID2 = renderer.createDrawable('group1');
|
||||
var wantBitmapSkin = false;
|
||||
|
||||
// Bitmap (squirrel)
|
||||
const image = new Image();
|
||||
var image = new Image();
|
||||
image.addEventListener('load', () => {
|
||||
const bitmapSkinId = renderer.createBitmapSkin(image);
|
||||
if (wantedSkin === WantedSkinType.bitmap) {
|
||||
var bitmapSkinId = renderer.createBitmapSkin(image);
|
||||
if (wantBitmapSkin) {
|
||||
renderer.updateDrawableProperties(drawableID2, {
|
||||
skinId: bitmapSkinId
|
||||
});
|
||||
@@ -36,83 +30,44 @@ image.crossOrigin = 'anonymous';
|
||||
image.src = 'https://cdn.assets.scratch.mit.edu/internalapi/asset/7e24c99c1b853e52f8e7f9004416fa34.png/get/';
|
||||
|
||||
// SVG (cat 1-a)
|
||||
const xhr = new XMLHttpRequest();
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.addEventListener('load', function () {
|
||||
const skinId = renderer.createSVGSkin(xhr.responseText);
|
||||
if (wantedSkin === WantedSkinType.vector) {
|
||||
var skinId = renderer.createSVGSkin(xhr.responseText);
|
||||
if (!wantBitmapSkin) {
|
||||
renderer.updateDrawableProperties(drawableID2, {
|
||||
skinId: skinId
|
||||
});
|
||||
}
|
||||
});
|
||||
xhr.open('GET', 'https://cdn.assets.scratch.mit.edu/internalapi/asset/b7853f557e4426412e64bb3da6531a99.svg/get/');
|
||||
xhr.open('GET', 'https://cdn.assets.scratch.mit.edu/internalapi/asset/f88bf1935daea28f8ca098462a31dbb0.svg/get/');
|
||||
xhr.send();
|
||||
|
||||
if (wantedSkin === WantedSkinType.pen) {
|
||||
const penSkinID = renderer.createPenSkin();
|
||||
var posX = 0;
|
||||
var posY = 0;
|
||||
var scaleX = 100;
|
||||
var scaleY = 100;
|
||||
var fudgeProperty = 'posx';
|
||||
|
||||
renderer.updateDrawableProperties(drawableID2, {
|
||||
skinId: penSkinID
|
||||
});
|
||||
|
||||
canvas.addEventListener('click', event => {
|
||||
let rect = canvas.getBoundingClientRect();
|
||||
|
||||
let x = event.clientX - rect.left;
|
||||
let y = event.clientY - rect.top;
|
||||
|
||||
renderer.penLine(penSkinID, {
|
||||
color4f: [Math.random(), Math.random(), Math.random(), 1],
|
||||
diameter: 8
|
||||
},
|
||||
x - 240, 180 - y, (Math.random() * 480) - 240, (Math.random() * 360) - 180);
|
||||
});
|
||||
}
|
||||
|
||||
let posX = 0;
|
||||
let posY = 0;
|
||||
let scaleX = 100;
|
||||
let scaleY = 100;
|
||||
let fudgeProperty = 'posx';
|
||||
const fudgePropertyInput = document.getElementById('fudgeproperty');
|
||||
fudgePropertyInput.addEventListener('change', event => {
|
||||
fudgeProperty = event.target.value;
|
||||
});
|
||||
|
||||
const fudgeInput = document.getElementById('fudge');
|
||||
const fudgePropertyInput = document.getElementById('fudgeproperty');
|
||||
|
||||
const fudgeMinInput = document.getElementById('fudgeMin');
|
||||
const fudgeMaxInput = document.getElementById('fudgeMax');
|
||||
|
||||
/* eslint require-jsdoc: 0 */
|
||||
const updateFudgeProperty = event => {
|
||||
fudgeProperty = event.target.value;
|
||||
};
|
||||
|
||||
const updateFudgeMin = event => {
|
||||
fudgeMinInput.addEventListener('change', event => {
|
||||
fudgeInput.min = event.target.valueAsNumber;
|
||||
};
|
||||
});
|
||||
|
||||
const updateFudgeMax = event => {
|
||||
const fudgeMaxInput = document.getElementById('fudgeMax');
|
||||
fudgeMaxInput.addEventListener('change', event => {
|
||||
fudgeInput.max = event.target.valueAsNumber;
|
||||
};
|
||||
|
||||
fudgePropertyInput.addEventListener('change', updateFudgeProperty);
|
||||
fudgePropertyInput.addEventListener('init', updateFudgeProperty);
|
||||
|
||||
fudgeMinInput.addEventListener('change', updateFudgeMin);
|
||||
fudgeMinInput.addEventListener('init', updateFudgeMin);
|
||||
|
||||
fudgeMaxInput.addEventListener('change', updateFudgeMax);
|
||||
fudgeMaxInput.addEventListener('init', updateFudgeMax);
|
||||
|
||||
// Ugly hack to properly set the values of the inputs on page load,
|
||||
// since they persist across reloads, at least in Firefox.
|
||||
// The best ugly hacks are the ones that reduce code duplication!
|
||||
fudgePropertyInput.dispatchEvent(new CustomEvent('init'));
|
||||
fudgeMinInput.dispatchEvent(new CustomEvent('init'));
|
||||
fudgeMaxInput.dispatchEvent(new CustomEvent('init'));
|
||||
fudgeInput.dispatchEvent(new CustomEvent('init'));
|
||||
});
|
||||
|
||||
const handleFudgeChanged = function (event) {
|
||||
fudge = event.target.valueAsNumber;
|
||||
const props = {};
|
||||
var props = {};
|
||||
switch (fudgeProperty) {
|
||||
case 'posx':
|
||||
props.position = [fudge, posY];
|
||||
@@ -133,11 +88,6 @@ const handleFudgeChanged = function (event) {
|
||||
props.scale = [scaleX, fudge];
|
||||
scaleY = fudge;
|
||||
break;
|
||||
case 'scaleboth':
|
||||
props.scale = [fudge, fudge];
|
||||
scaleX = fudge;
|
||||
scaleY = fudge;
|
||||
break;
|
||||
case 'color':
|
||||
props.color = fudge;
|
||||
break;
|
||||
@@ -162,28 +112,17 @@ const handleFudgeChanged = function (event) {
|
||||
}
|
||||
renderer.updateDrawableProperties(drawableID2, props);
|
||||
};
|
||||
|
||||
fudgeInput.addEventListener('input', handleFudgeChanged);
|
||||
fudgeInput.addEventListener('change', handleFudgeChanged);
|
||||
fudgeInput.addEventListener('init', handleFudgeChanged);
|
||||
|
||||
const updateStageScale = event => {
|
||||
renderer.resize(480 * event.target.valueAsNumber, 360 * event.target.valueAsNumber);
|
||||
};
|
||||
|
||||
const stageScaleInput = document.getElementById('stage-scale');
|
||||
|
||||
stageScaleInput.addEventListener('input', updateStageScale);
|
||||
stageScaleInput.addEventListener('change', updateStageScale);
|
||||
|
||||
canvas.addEventListener('mousemove', event => {
|
||||
const mousePos = getMousePosition(event, canvas);
|
||||
var mousePos = getMousePosition(event, canvas);
|
||||
renderer.extractColor(mousePos.x, mousePos.y, 30);
|
||||
});
|
||||
|
||||
canvas.addEventListener('click', event => {
|
||||
const mousePos = getMousePosition(event, canvas);
|
||||
const pickID = renderer.pick(mousePos.x, mousePos.y);
|
||||
var mousePos = getMousePosition(event, canvas);
|
||||
var pickID = renderer.pick(mousePos.x, mousePos.y);
|
||||
console.log('You clicked on ' + (pickID < 0 ? 'nothing' : 'ID# ' + pickID));
|
||||
if (pickID >= 0) {
|
||||
console.dir(renderer.extractDrawable(pickID, mousePos.x, mousePos.y));
|
||||
@@ -198,5 +137,5 @@ const drawStep = function () {
|
||||
};
|
||||
drawStep();
|
||||
|
||||
const debugCanvas = /** @type {canvas} */ document.getElementById('debug-canvas');
|
||||
var debugCanvas = /** @type {canvas} */ document.getElementById('debug-canvas');
|
||||
renderer.setDebugCanvas(debugCanvas);
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Scratch WebGL Query Playground</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<style>
|
||||
input[type=range][orient=vertical] {
|
||||
writing-mode: bt-lr; /* IE */
|
||||
@@ -12,6 +11,8 @@
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
canvas {
|
||||
border: 3px dashed black;
|
||||
|
||||
/* https://stackoverflow.com/a/7665647 */
|
||||
image-rendering: optimizeSpeed; /* Older versions of FF */
|
||||
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
|
||||
@@ -22,7 +23,7 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body style="background: lightsteelblue">
|
||||
<div>
|
||||
<fieldset>
|
||||
<legend>Query Canvases</legend>
|
||||
@@ -62,7 +63,7 @@
|
||||
<input id="cursorY" type="range" orient="vertical" step="0.25" value="0" />
|
||||
</td>
|
||||
<td>
|
||||
<canvas id="renderCanvas" width="480" height="360"></canvas>
|
||||
<canvas id="renderCanvas" width="480" height="360" style="border:3px dashed black"></canvas>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
body {
|
||||
background: lightsteelblue;
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 3px dashed black;
|
||||
}
|
||||
|
||||
#debug-canvas {
|
||||
border-color: red;
|
||||
}
|
||||
@@ -51,7 +51,7 @@ module.exports = [
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
context: 'src/playground',
|
||||
from: '*.+(html|css)'
|
||||
from: '*.html'
|
||||
}
|
||||
])
|
||||
])
|
||||
|
||||
Reference in New Issue
Block a user