atum
Version:
A Procedural Graph Based Javascript Library
761 lines (526 loc) • 28 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Source: utilities/PointDistribution.js</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<script src="scripts/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="styles/jaguar.css">
<script>
var config = {"monospaceLinks":false,"cleverLinks":false,"default":{"outputSourceFiles":true}};
</script>
</head>
<body>
<div id="wrap" class="clearfix">
<div class="navigation">
<h3 class="applicationName"><a href="index.html"></a></h3>
<div class="search">
<input id="search" type="text" class="form-control input-sm" placeholder="Search Documentations">
</div>
<ul class="list">
<li class="item" data-name="Center">
<span class="title">
<a href="Center.html">Center</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li data-name="Center#add"><a href="Center.html#add">add</a></li>
<li data-name="Center#cross"><a href="Center.html#cross">cross</a></li>
<li data-name="Center#divide"><a href="Center.html#divide">divide</a></li>
<li data-name="Center#dot"><a href="Center.html#dot">dot</a></li>
<li data-name="Center#key"><a href="Center.html#key">key</a></li>
<li data-name="Center#list"><a href="Center.html#list">list</a></li>
<li data-name="Center#magnitude"><a href="Center.html#magnitude">magnitude</a></li>
<li data-name="Center#multiply"><a href="Center.html#multiply">multiply</a></li>
<li data-name="Center#normalize"><a href="Center.html#normalize">normalize</a></li>
<li data-name="Center#perpendiculars"><a href="Center.html#perpendiculars">perpendiculars</a></li>
<li data-name="Center#rotate"><a href="Center.html#rotate">rotate</a></li>
<li data-name="Center#subtract"><a href="Center.html#subtract">subtract</a></li>
<li data-name="Center#toString"><a href="Center.html#toString">toString</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Corner">
<span class="title">
<a href="Corner.html">Corner</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li data-name="Corner#add"><a href="Corner.html#add">add</a></li>
<li data-name="Corner#cross"><a href="Corner.html#cross">cross</a></li>
<li data-name="Corner#divide"><a href="Corner.html#divide">divide</a></li>
<li data-name="Corner#dot"><a href="Corner.html#dot">dot</a></li>
<li data-name="Corner#key"><a href="Corner.html#key">key</a></li>
<li data-name="Corner#list"><a href="Corner.html#list">list</a></li>
<li data-name="Corner#magnitude"><a href="Corner.html#magnitude">magnitude</a></li>
<li data-name="Corner#multiply"><a href="Corner.html#multiply">multiply</a></li>
<li data-name="Corner#normalize"><a href="Corner.html#normalize">normalize</a></li>
<li data-name="Corner#perpendiculars"><a href="Corner.html#perpendiculars">perpendiculars</a></li>
<li data-name="Corner#rotate"><a href="Corner.html#rotate">rotate</a></li>
<li data-name="Corner#subtract"><a href="Corner.html#subtract">subtract</a></li>
<li data-name="Corner#toString"><a href="Corner.html#toString">toString</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Diagram">
<span class="title">
<a href="Diagram.html">Diagram</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Edge">
<span class="title">
<a href="Edge.html">Edge</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Line">
<span class="title">
<a href="Line.html">Line</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Map">
<span class="title">
<a href="Map.html">Map</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li data-name="Map#generate"><a href="Map.html#generate">generate</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="PointDistribution">
<span class="title">
<a href="PointDistribution.html">PointDistribution</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li data-name="PointDistribution.exports.circular"><a href="PointDistribution.html#.exports.circular">exports.circular</a></li>
<li data-name="PointDistribution.exports.hexagon"><a href="PointDistribution.html#.exports.hexagon">exports.hexagon</a></li>
<li data-name="PointDistribution.exports.jitteredGrid"><a href="PointDistribution.html#.exports.jitteredGrid">exports.jitteredGrid</a></li>
<li data-name="PointDistribution.exports.poisson"><a href="PointDistribution.html#.exports.poisson">exports.poisson</a></li>
<li data-name="PointDistribution.exports.random"><a href="PointDistribution.html#.exports.random">exports.random</a></li>
<li data-name="PointDistribution.exports.recursiveWang"><a href="PointDistribution.html#.exports.recursiveWang">exports.recursiveWang</a></li>
<li data-name="PointDistribution.exports.square"><a href="PointDistribution.html#.exports.square">exports.square</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Polygon">
<span class="title">
<a href="Polygon.html">Polygon</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li data-name="Polygon#centroid"><a href="Polygon.html#centroid">centroid</a></li>
<li data-name="Polygon#inset"><a href="Polygon.html#inset">inset</a></li>
<li data-name="Polygon#isConvex"><a href="Polygon.html#isConvex">isConvex</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Rand">
<span class="title">
<a href="Rand.html">Rand</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li data-name="Rand.rand"><a href="Rand.html#.rand">rand</a></li>
<li data-name="Rand.randHex"><a href="Rand.html#.randHex">randHex</a></li>
<li data-name="Rand.randHexColor"><a href="Rand.html#.randHexColor">randHexColor</a></li>
<li data-name="Rand.randInt"><a href="Rand.html#.randInt">randInt</a></li>
<li data-name="Rand.randRange"><a href="Rand.html#.randRange">randRange</a></li>
<li data-name="Rand.setSeed"><a href="Rand.html#.setSeed">setSeed</a></li>
<li data-name="Rand.vector"><a href="Rand.html#.vector">vector</a></li>
<li data-name="Rand#rand"><a href="Rand.html#rand">rand</a></li>
<li data-name="Rand#randHex"><a href="Rand.html#randHex">randHex</a></li>
<li data-name="Rand#randHexColor"><a href="Rand.html#randHexColor">randHexColor</a></li>
<li data-name="Rand#randInt"><a href="Rand.html#randInt">randInt</a></li>
<li data-name="Rand#randRange"><a href="Rand.html#randRange">randRange</a></li>
<li data-name="Rand#setSeed"><a href="Rand.html#setSeed">setSeed</a></li>
<li data-name="Rand#vector"><a href="Rand.html#vector">vector</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Rectangle">
<span class="title">
<a href="Rectangle.html">Rectangle</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li data-name="Rectangle#centroid"><a href="Rectangle.html#centroid">centroid</a></li>
<li data-name="Rectangle#inset"><a href="Rectangle.html#inset">inset</a></li>
<li data-name="Rectangle#isConvex"><a href="Rectangle.html#isConvex">isConvex</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Redist">
<span class="title">
<a href="Redist.html">Redist</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li data-name="Redist.exports.exp"><a href="Redist.html#.exports.exp">exports.exp</a></li>
<li data-name="Redist.exports.identity"><a href="Redist.html#.exports.identity">exports.identity</a></li>
<li data-name="Redist.exports.inverse"><a href="Redist.html#.exports.inverse">exports.inverse</a></li>
<li data-name="Redist.exports.pow"><a href="Redist.html#.exports.pow">exports.pow</a></li>
<li data-name="Redist.exports.step"><a href="Redist.html#.exports.step">exports.step</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Shape">
<span class="title">
<a href="Shape.html">Shape</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Triangle">
<span class="title">
<a href="Triangle.html">Triangle</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li data-name="Triangle#centroid"><a href="Triangle.html#centroid">centroid</a></li>
<li data-name="Triangle#inset"><a href="Triangle.html#inset">inset</a></li>
<li data-name="Triangle#isConvex"><a href="Triangle.html#isConvex">isConvex</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="Vector">
<span class="title">
<a href="Vector.html">Vector</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
<span class="subtitle">Methods</span>
<li data-name="Vector.add"><a href="Vector.html#.add">add</a></li>
<li data-name="Vector.angle"><a href="Vector.html#.angle">angle</a></li>
<li data-name="Vector.avg"><a href="Vector.html#.avg">avg</a></li>
<li data-name="Vector.copy"><a href="Vector.html#.copy">copy</a></li>
<li data-name="Vector.cross"><a href="Vector.html#.cross">cross</a></li>
<li data-name="Vector.dist2"><a href="Vector.html#.dist2">dist2</a></li>
<li data-name="Vector.distance"><a href="Vector.html#.distance">distance</a></li>
<li data-name="Vector.distToSeg"><a href="Vector.html#.distToSeg">distToSeg</a></li>
<li data-name="Vector.distToSegSquared"><a href="Vector.html#.distToSegSquared">distToSegSquared</a></li>
<li data-name="Vector.dot"><a href="Vector.html#.dot">dot</a></li>
<li data-name="Vector.down"><a href="Vector.html#.down">down</a></li>
<li data-name="Vector.left"><a href="Vector.html#.left">left</a></li>
<li data-name="Vector.midpoint"><a href="Vector.html#.midpoint">midpoint</a></li>
<li data-name="Vector.proj"><a href="Vector.html#.proj">proj</a></li>
<li data-name="Vector.right"><a href="Vector.html#.right">right</a></li>
<li data-name="Vector.subtract"><a href="Vector.html#.subtract">subtract</a></li>
<li data-name="Vector.up"><a href="Vector.html#.up">up</a></li>
<li data-name="Vector.zero"><a href="Vector.html#.zero">zero</a></li>
<li data-name="Vector#add"><a href="Vector.html#add">add</a></li>
<li data-name="Vector#cross"><a href="Vector.html#cross">cross</a></li>
<li data-name="Vector#divide"><a href="Vector.html#divide">divide</a></li>
<li data-name="Vector#dot"><a href="Vector.html#dot">dot</a></li>
<li data-name="Vector#key"><a href="Vector.html#key">key</a></li>
<li data-name="Vector#list"><a href="Vector.html#list">list</a></li>
<li data-name="Vector#magnitude"><a href="Vector.html#magnitude">magnitude</a></li>
<li data-name="Vector#multiply"><a href="Vector.html#multiply">multiply</a></li>
<li data-name="Vector#normalize"><a href="Vector.html#normalize">normalize</a></li>
<li data-name="Vector#perpendiculars"><a href="Vector.html#perpendiculars">perpendiculars</a></li>
<li data-name="Vector#rotate"><a href="Vector.html#rotate">rotate</a></li>
<li data-name="Vector#subtract"><a href="Vector.html#subtract">subtract</a></li>
<li data-name="Vector#toString"><a href="Vector.html#toString">toString</a></li>
<li data-name="Vector#toString"><a href="Vector.html#toString">toString</a></li>
</ul>
<ul class="events itemMembers">
</ul>
</li>
<li class="item" data-name="module:Atum">
<span class="title">
<a href="module-Atum.html">module:Atum</a>
</span>
<ul class="members itemMembers">
</ul>
<ul class="typedefs itemMembers">
</ul>
<ul class="methods itemMembers">
</ul>
<ul class="events itemMembers">
</ul>
</li>
</ul>
</div>
<div class="main">
<h1 class="page-title" data-filename="utilities_PointDistribution.js.html">Source: utilities/PointDistribution.js</h1>
<section>
<article>
<pre class="prettyprint source "><code>/**
* This module is used to create different point distributions that can be
* turned into different tile sets when made into a graph format. There are
* various different distributions that can be used to create interesting
* tile patterns when turned into a voronoi diagram.
*
* @tutorial Point-Distributions
*
* @class PointDistribution
*/
"use strict";
import Poisson from "poisson-disk-sample";
import Vector from "../geometry/Vector";
import Rectangle from "../geometry/Rectangle";
import Rand from "./Rand";
/**
* Creates a random distribution of points in a particular bounding box
* with a particular average distance between points.
*
* @export
* @param {Rectangle} bbox The bounding box to create the points in
* @param {number} d Average distance between points
* @param {number} [seed=null] If specified use a local seed for creating the point
* distribution. Otherwise, use the current global seed for generation
* @returns {Vector[]} The list of randomly distributed points
* @memberof PointDistribution
*/
export function random(bbox, d, seed = null) {
const rng = seed ? new Rand(seed) : Rand;
const nPoints = bbox.area / (d * d);
let points = [];
for (let i = 0; i < nPoints; i++) {
points.push(rng.vector(bbox));
}
return points;
}
/**
* Creates a square grid like distribution of points in a particular bounding
* box with a particular distance between points.
*
* @export
* @param {Rectangle} bbox The bounding box to create the points in
* @param {number} d Average distance between points
* @returns {Vector[]} The list of randomly distributed points
* @memberof PointDistribution
*/
export function square(bbox, d) {
const dx = d / 2;
const dy = dx;
let points = [];
for (let y = 0; y < bbox.height; y += d) {
for (let x = 0; x < bbox.width; x += d) {
points.push(new Vector(dx + x, dy + y));
}
}
return points;
}
/**
* Creates a uniform hexagonal distribution of points in a particular bounding
* box with a particular distance between points. The hexagons can also be
* specified to have a particular width or height as well as creating hexagons
* that have "pointy" tops or "flat" tops. By default it makes flat tops.
*
* @export
* @param {Rectangle} bbox The bounding box to create the points in
* @param {number} d Average distance between points
* @param {boolean} [flatTop=true] Create hecagons with flat tops by default.
* Otherwise go with the pointy top hexagons.
* @param {number} w The width of the hexagon tiles
* @param {number} h The height of the hexagon tiles
* @returns {Vector[]} The list of randomly distributed points
* @memberof PointDistribution
*/
export function hexagon(bbox, d, flatTop = true, w, h) {
// Need to allow for the change of height and width
// Running into "Uncaught Voronoi.closeCells() > this makes no sense!"
const dx = d / 2;
const dy = dx;
let points = [];
const altitude = Math.sqrt(3) / 2 * d;
var N = Math.sqrt(bbox.area / (d * d));
for (let y = 0; y < N; y++) {
for (let x = 0; x < N; x++) {
points.push(new Vector((0.5 + x) / N * bbox.width,
(0.25 + 0.5 * x % 2 + y) / N * bbox.height));
// points.push(new Vector((y % 2) * dx + x * d + dx, y * d + dy)); // Pointy Top
// points.push(new Vector(x * d, (x % 2) * dx + y * d)); // Flat Top
}
}
return points;
}
/**
* Creates a blue noise distribution of points in a particular bounding box
* with a particular average distance between points. This is done by
* creating a grid system and picking a random point in each grid. This has
* the effect of creating a less random distribution of points. The second
* parameter m determins the spacing between points in the grid. This ensures
* that no two points are in the same grid.
*
* @summary Create a jittered grid based random blue noise point distribution.
*
* @export
* @param {Rectangle} bbox The bounding box to create the points in
* @param {number} d Average distance between points
* @param {number} [seed=null] If specified use a local seed for creating the point
* distribution. Otherwise, use the current global seed for generation
* @param {number} [m=0] Maximum distance away from the edge of the grid that a
* point can be placed. This acts to increase the padding between points.
* This makes the noise less random. This number must be smaller than d.
* @returns {Vector[]} The list of randomly distributed points
* @memberof PointDistribution
*/
export function jitteredGrid(bbox, d, seed = null, m = 0) {
const rng = seed ? new Rand(seed) : Rand;
let points = [];
let pointBox;
for (let y = 0; y < bbox.height - d; y += d) {
for (let x = 0; x < bbox.width - d; x += d) {
// Local bbox for the point to generate in
const boxPos = new Vector(x - d + m, y - d + m);
pointBox = new Rectangle(boxPos, x - m, y - m);
points.push(rng.vector(pointBox));
}
}
return points;
}
/**
* Creates a poisson, or blue noise distribution of points in a particular
* bounding box with a particular average distance between points. This is
* done by using poisson disk sampling which tries to create points so that the
* distance between neighbors is as close to a fixed number (the distance d)
* as possible. This algorithm is implemented using the poisson dart throwing
* algorithm.
*
* @summary Create a blue noise distribution of points using poisson disk
* sampling.
*
* @export
* @param {Rectangle} bbox The bounding box to create the points in
* @param {number} d Average distance between points
* @returns {Vector[]} The list of randomly distributed points
*
* @see {@link https://www.jasondavies.com/poisson-disc/}
* @see {@link https://github.com/jeffrey-hearn/poisson-disk-sample}
* @memberof PointDistribution
*/
export function poisson(bbox, d) {
var sampler = new Poisson(bbox.width, bbox.height, d, d);
var solution = sampler.sampleUntilSolution();
var points = solution.map(point => new Vector(point));
return points;
}
/**
* Creates a blue noise distribution of points in a particular bounding box
* with a particular average distance between points. This is done by using
* recursive wang tiles to create this distribution of points.
*
* @summary Not Implemented Yet
*
* @export
* @param {Rectangle} bbox The bounding box to create the points in
* @param {number} d Average distance between points
* @returns {Vector[]} The list of randomly distributed points
* @memberof PointDistribution
*/
export function recursiveWang(bbox, d) {
throw "Error: Not Implemented";
}
/**
* Creates a circular distribution of points in a particular bounding box
* with a particular average distance between points.
*
* @summary Not Implemented Yet
*
* @export
* @param {Rectangle} bbox The bounding box to create the points in
* @param {number} d Average distance between points
* @returns {Vector[]} The list of randomly distributed points
* @memberof PointDistribution
*/
export function circular(bbox, d) {
throw "Error: Not Implemented";
}</code></pre>
</article>
</section>
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Fri Oct 27 2017 19:20:05 GMT-0400 (Eastern Daylight Time)
</footer>
</div>
</div>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>