Travis build 41

2016-09-24 00:30:58 +00:00 · 2016-09-24 00:30:58 +00:00 · 3f53c310a0
commit 3f53c310a0
2 changed files with 20174 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,102 @@
+<!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 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 fudgeInput = document.getElementById('fudge');
+    function onFudgeMinChanged(newValue) {
+        fudgeInput.min = newValue;
+    }
+    function onFudgeMaxChanged(newValue) {
+        fudgeInput.max = newValue;
+    }
+    function onFudgeChanged(newValue) {
+        fudge = newValue;
+        var props = {};
+        //props.position = [posX, posY];
+        //props.direction = fudge;
+        //props.pixelate = fudge;
+        props.scale = [fudge, 100];
+        renderer.updateDrawableProperties(drawableID, 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();
+        requestAnimationFrame(drawStep);
+    }
+    drawStep();
+
+    renderer.setDebugCanvas(document.getElementById('debug-canvas'));
+</script>
+</body>
+</html>
--- a/render.js
+++ b/render.js