sandpit
Version:
A playground for creative coding using JavaScript and the canvas element
2,230 lines (451 loc) • 23.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sandpit - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tonsky/FiraCode/1.205/distr/fira_code.css" />
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav>
<h3><a href="index.html">⛱ Sandpit</a></h3><h3></h3><ul><li><a href="tutorial-01-documentation.html"> Documentation</a></li><li><a href="tutorial-02-inspiration.html"> Inspiration</a></li></ul><h3>Classes</h3><ul><li><a href="Color.html">Color</a></li><li><a href="Is.html">Is</a><ul class='methods'><li data-type='method'><a href="Is.html#.array">array</a></li><li data-type='method'><a href="Is.html#.canvas">canvas</a></li><li data-type='method'><a href="Is.html#.element">element</a></li><li data-type='method'><a href="Is.html#.object">object</a></li></ul></li><li><a href="Mathematics.html">Mathematics</a><ul class='methods'><li data-type='method'><a href="Mathematics.html#.randomBetween">randomBetween</a></li><li data-type='method'><a href="Mathematics.html#.randomFrom">randomFrom</a></li></ul></li><li><a href="Sandpit.html">Sandpit</a><ul class='methods'><li data-type='method'><a href="Sandpit.html#clear">clear</a></li><li data-type='method'><a href="Sandpit.html#clearQueryString">clearQueryString</a></li><li data-type='method'><a href="Sandpit.html#fill">fill</a></li><li data-type='method'><a href="Sandpit.html#get">get</a></li><li data-type='method'><a href="Sandpit.html#random">random</a></li><li data-type='method'><a href="Sandpit.html#resizeCanvas">resizeCanvas</a></li><li data-type='method'><a href="Sandpit.html#setupStats">setupStats</a></li><li data-type='method'><a href="Sandpit.html#start">start</a></li><li data-type='method'><a href="Sandpit.html#stop">stop</a></li></ul></li><li><a href="Stats.html">Stats</a></li><li><a href="Vector.html">Vector</a></li></ul><h2 class="version">v0.1.15</h2>
</nav>
<div id="main">
<h1 class="page-title">Sandpit</h1>
<section>
<header>
<h2>
Sandpit
</h2>
<div class="class-description"><p>A playground for creative coding</p></div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="Sandpit"><span class="type-signature"></span>new Sandpit<span class="signature">(container, type, options)</span><span class="type-signature"></span></h4>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>container</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">object</span>
</td>
<td class="description last"><p>The container for the canvas to be added to</p></td>
</tr>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>Defines whether the context is 2d or 3d</p></td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last"><p>Optionally decide to ignore rescaling for retina displays,
disable putting settings into the query string, or add stats to the dom</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line19">line 19</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="autoClear"><span class="type-signature"></span>autoClear<span class="type-signature"></span></h4>
<div class="description">
<p>Sets whether the canvas autoclears after each render</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line605">line 605</a>
</li></ul></dd>
</dl>
<h4 class="name" id="autoClear"><span class="type-signature"></span>autoClear<span class="type-signature"></span></h4>
<div class="description">
<p>Checks if autoclear is on</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line613">line 613</a>
</li></ul></dd>
</dl>
<h4 class="name" id="canvas"><span class="type-signature"></span>canvas<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the canvas object</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line677">line 677</a>
</li></ul></dd>
</dl>
<h4 class="name" id="context"><span class="type-signature"></span>context<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the canvas context</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line669">line 669</a>
</li></ul></dd>
</dl>
<h4 class="name" id="debug"><span class="type-signature"></span>debug<span class="type-signature"></span></h4>
<div class="description">
<p>Checks if debugger is active</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line597">line 597</a>
</li></ul></dd>
</dl>
<h4 class="name" id="debug"><span class="type-signature"></span>debug<span class="type-signature"></span></h4>
<div class="description">
<p>Defines whether or not to return debugger messages from Sandpit</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line589">line 589</a>
</li></ul></dd>
</dl>
<h4 class="name" id="focusTouchesOnCanvas"><span class="type-signature"></span>focusTouchesOnCanvas<span class="type-signature"></span></h4>
<div class="description">
<p>Sets whether to or not to ignore the touch events for
multitouch, bypassing pinch to zoom, but meaning no
other touch events will work</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line653">line 653</a>
</li></ul></dd>
</dl>
<h4 class="name" id="focusTouchesOnCanvas"><span class="type-signature"></span>focusTouchesOnCanvas<span class="type-signature"></span></h4>
<div class="description">
<p>Checks if touches are focused on the canvas</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line661">line 661</a>
</li></ul></dd>
</dl>
<h4 class="name" id="height"><span class="type-signature"></span>height<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the canvas height</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line709">line 709</a>
</li></ul></dd>
</dl>
<h4 class="name" id="height"><span class="type-signature"></span>height<span class="type-signature"></span></h4>
<div class="description">
<p>Sets the canvas height</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line717">line 717</a>
</li></ul></dd>
</dl>
<h4 class="name" id="settings"><span class="type-signature"></span>settings<span class="type-signature"></span></h4>
<div class="description">
<p>Creates the settings GUI</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line568">line 568</a>
</li></ul></dd>
</dl>
<h4 class="name" id="settings"><span class="type-signature"></span>settings<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the settings object</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line580">line 580</a>
</li></ul></dd>
</dl>
<h4 class="name" id="time"><span class="type-signature"></span>time<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the frame increment</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line685">line 685</a>
</li></ul></dd>
</dl>
<h4 class="name" id="width"><span class="type-signature"></span>width<span class="type-signature"></span></h4>
<div class="description">
<p>Sets the canvas width</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line701">line 701</a>
</li></ul></dd>
</dl>
<h4 class="name" id="width"><span class="type-signature"></span>width<span class="type-signature"></span></h4>
<div class="description">
<p>Returns the canvas width</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line693">line 693</a>
</li></ul></dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="clear"><span class="type-signature"></span>clear<span class="signature">(boolean)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Clears the canvas, and if change is set,
fires change</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>boolean</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line622">line 622</a>
</li></ul></dd>
</dl>
<h4 class="name" id="clearQueryString"><span class="type-signature"></span>clearQueryString<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Clear the query string</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line643">line 643</a>
</li></ul></dd>
</dl>
<h4 class="name" id="fill"><span class="type-signature"></span>fill<span class="signature">(color)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Fills the canvas with the provided colour</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The color to fill with, in string format
(for example, '#000', 'rgba(0, 0, 0, 0.5)')</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line726">line 726</a>
</li></ul></dd>
</dl>
<h4 class="name" id="get"><span class="type-signature"></span>get<span class="signature">(url)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Returns a promise using fetch
https://github.com/github/fetch</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>url</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The url to fetch</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line742">line 742</a>
</li></ul></dd>
</dl>
<h4 class="name" id="random"><span class="type-signature"></span>random<span class="signature">(seed)</span><span class="type-signature"> → {function}</span></h4>
<div class="description">
<p>Returns a random number generator based on a seed</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>seed</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="default">
123456
</td>
<td class="description last"><p>The seed with which to create the random number</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line759">line 759</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>A function that returns a random number</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">function</span>
</dd>
</dl>
<h4 class="name" id="resizeCanvas"><span class="type-signature"></span>resizeCanvas<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Resizes the canvas to the window width and height</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line766">line 766</a>
</li></ul></dd>
</dl>
<h4 class="name" id="setupStats"><span class="type-signature"></span>setupStats<span class="signature">(stats)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Handle the stats object</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>stats</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last"><p>a Stats.js object, which can be imported
from Sandpit with <code>import { Stats } from 'sandpit'</code></p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line784">line 784</a>
</li></ul></dd>
</dl>
<h4 class="name" id="start"><span class="type-signature"></span>start<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Sets up resizing and input events and starts the loop</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line794">line 794</a>
</li></ul></dd>
</dl>
<h4 class="name" id="stop"><span class="type-signature"></span>stop<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Stops the loop and removes event listeners</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Sandpit.js.html">Sandpit.js</a>, <a href="Sandpit.js.html#line807">line 807</a>
</li></ul></dd>
</dl>
</article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc</a> using a modified <a href="https://github.com/nijikokun/minami">Minami</a> theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>