diff --git a/hello-mouse/index.html b/hello-mouse/index.html
index 96452b4..8df6761 100644
--- a/hello-mouse/index.html
+++ b/hello-mouse/index.html
@@ -4,7 +4,7 @@
- p5.js example
+ Hello Mouse!
+
diff --git a/hello-mouse/sketch.js b/hello-mouse/sketch.js
index 47d2bd0..3fa6223 100644
--- a/hello-mouse/sketch.js
+++ b/hello-mouse/sketch.js
@@ -2,28 +2,6 @@ const DEBUG = false;
let lines = new Array();
-class Point {
- constructor(x, y) {
- this.x = x;
- this.y = y;
- }
-
- length() {
- return Math.sqrt(this.x * this.x + this.y * this.y);
- }
-
- normalize() {
- let length = this.length();
- this.x = this.x / length;
- this.y = this.y / length;
- }
-
- scale(factor) {
- this.x = this.x * factor;
- this.y = this.y * factor;
- }
-}
-
class Line {
constructor(point, length) {
this.point = point;
@@ -31,11 +9,11 @@ class Line {
}
draw(mousePoint) {
- let distance = this._distanceBetweenPointAndPoint(mousePoint);
- let weight = this._mapValueInRangeToRange(distance, 0, 600, 1, 12);
+ let distance = this.point.distanceTo(mousePoint);
+ let weight = 1; //mapValueInRangeToRange(distance, 0, 600, 1, this.length, Clamp.Yes);
colorMode(HSB, 255);
- let hue = this._mapValueInRangeToRange(distance, 0, 800, 140, 200);
+ let hue = mapValueInRangeToRange(distance, 0, 800, 140, 200, Clamp.Yes);
stroke(hue, 180, 255);
strokeCap(SQUARE);
strokeWeight(weight);
@@ -48,11 +26,6 @@ class Line {
const halfLength = this.length / 2.0;
- // line(
- // this.point.x - halfLength,
- // this.point.y,
- // this.point.x + halfLength,
- // this.point.y);
line(
this.point.x + pointMouseVectorNormal1.x * halfLength,
this.point.y + pointMouseVectorNormal1.y * halfLength,
@@ -87,18 +60,6 @@ class Line {
this.point.y + pointMouseVectorNormal2.y * halfLength);
}
}
-
- /// Compute the Euclidean distance between @c this.point and the argument.
- /// @see https://en.wikipedia.org/wiki/Euclidean_distance
- _distanceBetweenPointAndPoint(point) {
- return Math.sqrt(Math.pow(this.point.x - point.x, 2) + Math.pow(this.point.y - point.y, 2));
- }
-
- /// Map an input value in an input range to a value in the output range.
- /// @see https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
- _mapValueInRangeToRange(input, inputStart, inputEnd, outputStart, outputEnd) {
- return outputStart + ((outputEnd - outputStart) / (inputEnd - inputStart)) * (input - inputStart);
- }
}
function createLines() {
diff --git a/utils.js b/utils.js
new file mode 100644
index 0000000..f7d019b
--- /dev/null
+++ b/utils.js
@@ -0,0 +1,47 @@
+/// A simple two-dimensional Cartesian Point.
+class Point {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ }
+
+ length() {
+ return Math.sqrt(this.x * this.x + this.y * this.y);
+ }
+
+ normalize() {
+ let length = this.length();
+ this.x = this.x / length;
+ this.y = this.y / length;
+ }
+
+ scale(factor) {
+ this.x = this.x * factor;
+ this.y = this.y * factor;
+ }
+
+ /// Compute the Euclidean distance between @c this.point and the argument.
+ /// @see https://en.wikipedia.org/wiki/Euclidean_distance
+ distanceTo(point) {
+ let x = this.x - point.x;
+ let y = this.y - point.y;
+ return Math.sqrt(x * x + y * y);
+ }
+}
+
+const Clamp = {
+ Yes: 1,
+ No: 0,
+}
+
+/// Map an input value in an input range to a value in the output range.
+/// @see https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
+function mapValueInRangeToRange(input, inputStart, inputEnd, outputStart, outputEnd, clamp = Clamp.No) {
+ let mappedValue = outputStart + ((outputEnd - outputStart) / (inputEnd - inputStart)) * (input - inputStart);
+
+ if (clamp == Clamp.Yes) {
+ mappedValue = Math.min(outputEnd, Math.max(outputStart, mappedValue));
+ }
+
+ return mappedValue;
+}
\ No newline at end of file