From fba2d90fdaedfd9491e1d1142ad3bc2a24dac817 Mon Sep 17 00:00:00 2001 From: Christopher Willis-Ford Date: Fri, 25 Jan 2019 17:28:51 -0800 Subject: [PATCH] Stub queryPlayground.html --- src/playground/queryPlayground.html | 46 ++++++++++++++++++++++++++ src/playground/queryPlayground.js | 50 +++++++++++++++++++++++++++++ webpack.config.js | 3 +- 3 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 src/playground/queryPlayground.html create mode 100644 src/playground/queryPlayground.js diff --git a/src/playground/queryPlayground.html b/src/playground/queryPlayground.html new file mode 100644 index 0000000..ff95311 --- /dev/null +++ b/src/playground/queryPlayground.html @@ -0,0 +1,46 @@ + + + + + Scratch WebGL Query Playground + + + +
+
+ Query Canvas +
Touching white? maybe
+
Touching black? maybe
+ +
+
+ Render Canvas +
Cursor Position: somewhere
+ + + + + + + + + +
+ +
+ + + +
+
+
+ + + diff --git a/src/playground/queryPlayground.js b/src/playground/queryPlayground.js new file mode 100644 index 0000000..91eaba6 --- /dev/null +++ b/src/playground/queryPlayground.js @@ -0,0 +1,50 @@ +const getMousePosition = require('./getMousePosition'); + +const renderCanvas = document.getElementById('renderCanvas'); +const inputCursorX = document.getElementById('cursorX'); +const inputCursorY = document.getElementById('cursorY'); +const labelCursorPosition = document.getElementById('cursorPosition'); + +const handleResizeRenderCanvas = () => { + const halfWidth = renderCanvas.clientWidth / 2; + const halfHeight = renderCanvas.clientHeight / 2; + + inputCursorX.style.width = `${renderCanvas.clientWidth}px`; + inputCursorY.style.height = `${renderCanvas.clientHeight}px`; + inputCursorX.min = -halfWidth; + inputCursorX.max = halfWidth; + inputCursorY.min = -halfHeight; + inputCursorY.max = halfHeight; +}; +renderCanvas.addEventListener('resize', handleResizeRenderCanvas); +handleResizeRenderCanvas(); + +const handleCursorPositionChanged = () => { + const cursorX = inputCursorX.valueAsNumber; + const cursorY = inputCursorY.valueAsNumber; + const positionHTML = `${cursorX}, ${cursorY}`; + labelCursorPosition.innerHTML = positionHTML; +}; +inputCursorX.addEventListener('change', handleCursorPositionChanged); +inputCursorY.addEventListener('change', handleCursorPositionChanged); +inputCursorX.addEventListener('input', handleCursorPositionChanged); +inputCursorY.addEventListener('input', handleCursorPositionChanged); +handleCursorPositionChanged(); + +let trackingMouse = true; +renderCanvas.addEventListener('click', event => { + trackingMouse = !trackingMouse; + if (trackingMouse) { + handleMouseMove(event); + } +}); + +const handleMouseMove = event => { + if (trackingMouse) { + const mousePosition = getMousePosition(event, renderCanvas); + inputCursorX.value = mousePosition.x - (renderCanvas.clientWidth / 2); + inputCursorY.value = (renderCanvas.clientHeight / 2) - mousePosition.y; + handleCursorPositionChanged(); + } +}; +renderCanvas.addEventListener('mousemove', handleMouseMove); diff --git a/webpack.config.js b/webpack.config.js index f44a657..810874b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -39,7 +39,8 @@ module.exports = [ Object.assign({}, base, { target: 'web', entry: { - playground: './src/playground/playground.js' + playground: './src/playground/playground.js', + queryPlayground: './src/playground/queryPlayground.js' }, output: { libraryTarget: 'umd',