Commit bb5213cb authored by Starbeamrainbowlabs's avatar Starbeamrainbowlabs
Browse files

Add customiseable epsilon & keyboard commands

parent 28a1574b
......@@ -9,21 +9,15 @@
<div class="debug-data">
<ul>
<li>Points: <output id="output-point-count"></output></li>
<li>Points: <output id="output-point-count"></output> &#10142; <output id="output-simple-point-count"></output></li>
<li>Epsilon: <input type="range" id="input-epsilon" value="2" min="0" max="1000" step="0.05" /> <output id="output-epsilon"></output>
</ul>
</div>
<!---------------->
<!-- - - - - - - - - - - - - - -->
<link rel="stylesheet" href="demo.css" />
<script src="node_modules/event-emitter-es6/dist/event-emitter.min.js" charset="utf-8"></script>
<script src="node_modules/keycode/index.js" charset="utf-8"></script>
<script type="module" src="demo.js" charset="utf-8"></script>
<script src="lib/Vector.js" charset="utf-8"></script>
<script src="lib/Mouse.js" charset="utf-8"></script>
<script src="lib/Keyboard.js" charset="utf-8"></script>
<script src="ramer-douglas-peucker.js" charset="utf-8"></script>
<script src="demo.js" charset="utf-8"></script>
</head>
</body>
</html>
"use strict";
import Vector from './lib/Vector.js';
import Mouse from './lib/Mouse.js';
import Keyboard from './lib/Keyboard.js';
import { simplify_line } from './ramer-douglas-peucker.js';
class RDPDemo
{
constructor()
......@@ -7,6 +14,7 @@ class RDPDemo
this.canvas = document.getElementById("canvas-main");
this.context = this.canvas.getContext("2d");
this.keyboard = new Keyboard();
this.mouse = new Mouse();
this.rawLine = {
......@@ -23,14 +31,20 @@ class RDPDemo
crossSize: 3,
crossLineWidth: 1,
crossColour: "hsl(66, 49%, 47%)"
crossColour: "hsl(109, 86%, 14%)"
};
this.drawRawLine = true;
this.drawSimpleLine = true;
// ---------------------------
this.canvas.addEventListener("mousedown", this.handleMouseDown.bind(this));
this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
this.keyboard.on("keyup-1", ((event) => this.drawRawLine = !this.drawRawLine).bind(this));
this.keyboard.on("keyup-2", ((event) => this.drawSimpleLine = !this.drawSimpleLine).bind(this));
// ---------------------------
this.points = [];
......@@ -75,10 +89,17 @@ class RDPDemo
update()
{
this.simplePoints = simplify_line(this.points, this.epsilon)
// Update settings
this.epsilon = parseFloat(document.getElementById("input-epsilon").value);
// Update the interface
document.getElementById("output-point-count").innerHTML = this.points.length;
document.getElementById("output-simple-point-count").innerHTML = this.simplePoints.length;
// todo Change this to be an event listener
document.getElementById("output-epsilon").innerHTML = parseFloat(this.epsilon).toFixed(2);
// Update canvas
this.simplePoints = simplify_line(this.points, this.epsilon)
}
render(canvas, context)
......@@ -89,15 +110,17 @@ class RDPDemo
// Clear the screen
canvas.width = canvas.width;
this.draw_line(canvas, context, this.points, this.rawLine);
this.draw_line(canvas, context, this.simplePoints, this.simpleLine)
if(this.drawSimpleLine)
this.draw_line(canvas, context, this.simplePoints, this.simpleLine)
if(this.drawRawLine)
this.draw_line(canvas, context, this.points, this.rawLine);
}
draw_line(canvas, context, points, settings) {
// Draw the points
context.beginPath();
context.moveTo(this.points[0], this.points[0]);
for (let point of this.points) {
context.moveTo(points[0], points[0]);
for (let point of points) {
context.lineTo(point.x, point.y);
}
......@@ -107,7 +130,7 @@ class RDPDemo
// Draw crosses at all the points
context.beginPath();
for (let point of this.points) {
for (let point of points) {
context.moveTo(point.x - settings.crossSize, point.y - settings.crossSize);
context.lineTo(point.x + settings.crossSize, point.y + settings.crossSize);
......
"use strict";
//window.EventEmitter = require("event-emitter-es6");
//window.keycode = require("keycode");
import Emitter from "../node_modules/es6-event-emitter/src/emitter.js";
import keycodes from "../node_modules/keycodes/index.js";
/**
* Makes handling keyboard input just that little bit easier.
*/
class Keyboard extends EventEmitter
class Keyboard extends Emitter
{
constructor()
{
......@@ -31,8 +31,8 @@ class Keyboard extends EventEmitter
this.DownKeys.push(event.keyCode);
console.log("DownKeys:", this.DownKeys);
console.debug("[keyboard] Emitting key down event", `keydown-${keycode(event.keyCode)}`);
this.emit(`keydown-${keycode(event.keyCode)}`, event);
console.debug("[keyboard] Emitting key down event", `keydown-${keycodes(event.keyCode)}`);
this.trigger(`keydown-${keycodes(event.keyCode)}`, event);
}
/**
......@@ -44,8 +44,8 @@ class Keyboard extends EventEmitter
this.DownKeys.splice(this.DownKeys.indexOf(event.keyCode), 1);
console.log("DownKeys:", this.DownKeys);
console.debug("[keyboard] Emitting key up event", `keyup-${keycode(event.keyCode)}`);
this.emit(`keyup-${keycode(event.keyCode)}`, event);
console.debug("[keyboard] Emitting key up event", `keyup-${keycodes(event.keyCode)}`);
this.trigger(`keyup-${keycodes(event.keyCode)}`, event);
}
}
......
......@@ -22,7 +22,7 @@
* Fixed typo in pressure
*/
//import Vector from './Vector.js';
import Vector from './Vector.js';
/**
* A reference for the different mouse button types.
......@@ -124,5 +124,5 @@ class Mouse
}
//export { Mouse, MouseButtons };
//export default Mouse;
export { Mouse, MouseButtons };
export default Mouse;
......@@ -225,4 +225,4 @@ class Vector {
}
}
//export default Vector;
export default Vector;
......@@ -4,15 +4,13 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"event-emitter-es6": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/event-emitter-es6/-/event-emitter-es6-1.1.5.tgz",
"integrity": "sha1-75UxGy4Xqjm+djsDHOSvfunLeEk="
"es6-event-emitter": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/es6-event-emitter/-/es6-event-emitter-1.10.2.tgz",
"integrity": "sha1-j3a4tlj4HnJcIFDPGQleBUinSyk="
},
"keycode": {
"version": "2.1.9",
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz",
"integrity": "sha1-lkojxU5IiUBbSGGlyfBIDUUUHfo="
"keycodes": {
"version": "github:sbrl/keycodes#2effbae493dc5aa4028fd8d04738c54345f60ffc"
}
}
}
"use strict";
//import Vector from './Vector';
import Vector from './lib/Vector.js';
/**
* Simplifies a set of input poitns with the ramer-douglas-peucker algorithm.
......@@ -11,8 +11,8 @@
function simplify_line(points, epsilon)
{
// Don't bother with really short lines
if(points.length <= 2)
return points;
// if(points.length <= 2)
// return points;
let first_point = points[0],
last_point = points[points.length - 1];
......@@ -29,7 +29,7 @@ function simplify_line(points, epsilon)
// This point is far enough away that it's meaningful - recurse!
if(farthest_distance > epsilon*epsilon) {
let left_side = simplify_line(points.slice(0, farthest_index), epsilon),
let left_side = simplify_line(points.slice(0, farthest_index + 1), epsilon),
right_side = simplify_line(points.slice(farthest_index), epsilon);
return [ ...left_side, ...right_side.slice(1) ];
......@@ -54,8 +54,7 @@ function sq_distance_from_line(line_start, line_end, point)
let main_line_length = line_end.clone().subtract(line_start).length;
let direct_line_length = line_end.clone().subtract(point).length;
return ((main_line_length/2)*(main_line_length/2)) - (direct_line_length*direct_line_length);
return Math.abs((direct_line_length*direct_line_length) - ((main_line_length/2)*(main_line_length/2)));
}
//export { simplify_line };
export { simplify_line };
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment