eryn/p5js-experiments
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Second take at Hello Mouse! and refactor some things into utils.js

Browse source
This commit is contained in:
Eryn Wells 2022-01-24 21:11:09 -08:00
parent dfb0cad2c4
commit 9edc1aa01c
3 changed files with 52 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

3
hello-mouse/index.html
View file

@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title> <title>Hello Mouse!</title>
<style> <style>
body { body {
padding: 0; padding: 0;
@ -13,6 +13,7 @@
} }
</style> </style>
<script src="../p5.js"></script> <script src="../p5.js"></script>
<script src="../utils.js"></script>
<!-- <script src="../addons/p5.sound.js"></script> --> <!-- <script src="../addons/p5.sound.js"></script> -->
<script src="sketch.js"></script> <script src="sketch.js"></script>
</head> </head>

45
hello-mouse/sketch.js
View file

@ -2,28 +2,6 @@ const DEBUG = false;
let lines = new Array(); 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 { class Line {
constructor(point, length) { constructor(point, length) {
this.point = point; this.point = point;
@ -31,11 +9,11 @@ class Line {
} }
draw(mousePoint) { draw(mousePoint) {
let distance = this._distanceBetweenPointAndPoint(mousePoint); let distance = this.point.distanceTo(mousePoint);
let weight = this._mapValueInRangeToRange(distance, 0, 600, 1, 12); let weight = 1; //mapValueInRangeToRange(distance, 0, 600, 1, this.length, Clamp.Yes);
colorMode(HSB, 255); 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); stroke(hue, 180, 255);
strokeCap(SQUARE); strokeCap(SQUARE);
strokeWeight(weight); strokeWeight(weight);
@ -48,11 +26,6 @@ class Line {
const halfLength = this.length / 2.0; const halfLength = this.length / 2.0;
// line(
// this.point.x - halfLength,
// this.point.y,
// this.point.x + halfLength,
// this.point.y);
line( line(
this.point.x + pointMouseVectorNormal1.x * halfLength, this.point.x + pointMouseVectorNormal1.x * halfLength,
this.point.y + pointMouseVectorNormal1.y * halfLength, this.point.y + pointMouseVectorNormal1.y * halfLength,
@ -87,18 +60,6 @@ class Line {
this.point.y + pointMouseVectorNormal2.y * halfLength); 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() { function createLines() {

47
utils.js Normal file
View file

@ -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;
}