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

Add Hello Mouse

Browse source 
This sketch draws a bunch of short line segments that move and change
color according to their distance and orientation to the mouse cursor.
This commit is contained in:
Eryn Wells 2022-01-24 07:55:41 -08:00
parent 56e7160ea6
commit dfb0cad2c4
2 changed files with 149 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

26
hello-mouse/index.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style>
body {
padding: 0;
margin: 0 auto;
width: 800px;
}
</style>
<script src="../p5.js"></script>
<!-- <script src="../addons/p5.sound.js"></script> -->
<script src="sketch.js"></script>
</head>
<body>
<h1>Hello Mouse!</h1>
<main>
</main>
</body>
</html>

123
hello-mouse/sketch.js Normal file
View file

@ -0,0 +1,123 @@
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;
this.length = length;
}
draw(mousePoint) {
let distance = this._distanceBetweenPointAndPoint(mousePoint);
let weight = this._mapValueInRangeToRange(distance, 0, 600, 1, 12);
colorMode(HSB, 255);
let hue = this._mapValueInRangeToRange(distance, 0, 800, 140, 200);
stroke(hue, 180, 255);
strokeCap(SQUARE);
strokeWeight(weight);
let pointMouseVector = new Point(mousePoint.x - this.point.x, mousePoint.y - this.point.y);
pointMouseVector.normalize();
let pointMouseVectorNormal1 = new Point(-pointMouseVector.y, pointMouseVector.x);
let pointMouseVectorNormal2 = new Point(pointMouseVector.y, -pointMouseVector.x);
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,
this.point.x + pointMouseVectorNormal2.x * halfLength,
this.point.y + pointMouseVectorNormal2.y * halfLength);
if (DEBUG) {
let pointMouseVectorNormal1 = new Point(-pointMouseVector.y, pointMouseVector.x);
let pointMouseVectorNormal2 = new Point(pointMouseVector.y, -pointMouseVector.x);
strokeWeight(1);
stroke('red');
line(
this.point.x,
this.point.y,
this.point.x + pointMouseVector.x * halfLength,
this.point.y + pointMouseVector.y * halfLength);
stroke('blue');
line(
this.point.x,
this.point.y,
this.point.x + pointMouseVectorNormal1.x * halfLength,
this.point.y + pointMouseVectorNormal1.y * halfLength);
stroke('orange');
line(
this.point.x,
this.point.y,
this.point.x + pointMouseVectorNormal2.x * 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() {
for (let x = 8; x < 800; x += 24) {
for (let y = 8; y < 600; y += 24) {
lines.push(new Line(new Point(x, y), 16));
}
}
}
function setup() {
createLines();
createCanvas(800, 600);
}
function draw() {
background(240);
let mousePoint = new Point(mouseX, mouseY);
for (let l of lines) {
l.draw(mousePoint);
}
}