<title>Pts.js</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<meta name="description" content="Pts is a javascript library for visualization and creative-coding.">

<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">

<link rel="manifest" href="/assets/site.webmanifest">

<link rel="mask-icon" href="/assets/safari-pinned-tab.svg" color="#4422ee">

<meta name="msapplication-TileColor" content="#4422ee">

<meta name="theme-color" content="#4422ee">

<meta name="thumbnail" content="https://ptsjs.org/assets/thumbnail.png" />

<meta property="og:url" content="https://ptsjs.org" />

<meta property="og:type" content="website" />

<meta property="og:title" content="Pts.js" />

<meta property="og:description" content="Pts is a javascript library for visualization and creative-coding." />

<meta property="og:image" content="https://ptsjs.org/assets/card_thumbnail.png" />

<meta property="og:image:width" content="1200">

<meta property="og:image:height" content="630">

<meta name="twitter:card" content="summary_large_image" />

<meta name="twitter:creator" content="@williamngan" />

<link href="./assets/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="./dist/pts.min.js"></script>

<div id="header">

<div id="pts"><span id="header_title">Pts.</span>

<div id="topmenu">

<a href="../demo/index.html">demos</a>

<a href="../guide/Get-started-0100.html">guides</a>

<a href="../docs/">docs</a>

<a href="https://github.com/williamngan/pts">github</a>

</div>

</div>

<div id="board">

<div id="pt"></div>

<div class="block">

<div class="subcol">

<h3>Connecting the dots</h3>

<p>Like seeing the Big Dipper in a sky full of stars, Pts helps you connect the dots in the vastness of conceptual spaces.</p>

<p>Pts enables you to compose and express what you see in your mind's eyes &mdash; points as ideas, shapes, colors, motions, interactions, and more.</p>

<a href="./guide/Get-started-0100.html"><div class="cta">Get started</div></a>

</div>

<div class="subcol">

<h3>A modern javascript library</h3>

<p>Written in typescript and compiled to javascript ES6, Pts is lightweight and modular. It comes with many useful algorithms for data visualization and creative coding.</p>

<p>Use it directly (link from <a href="https://unpkg.com/pts/dist/pts.min.js">unpkg</a> or download from <a href="https://github.com/williamngan/pts/blob/master/dist/pts.min.js">github</a>):<br />

<code>&lt;script src="/path/to/pts.min.js"&gt;&lt;/script&gt;</code></p>

<p>Or install it via <a href="https://www.npmjs.com/package/pts" target="_blank">npm</a> like this: <br />

<code>npm install pts</code>

</p>

<p>Draw a dot that follows the pointer in a single line of code: <br />

<code>Pts.quickStart("myID")(t => form.point(space.pointer))</code>

<br />Or <a href="./demo/?name=pts.quickStart">something more</a> in just 5 lines of code.

</p>

<a href="./demo/"><div class="cta">See demos</div></a>

</div>

<div class="feature-block">

<div class="feature">

<div class="image" style="background: url(./assets/feature1.jpg) center center"></div>

<div class="usage"><strong>Linear algebra</strong> in an easy-to-use, non-technical API.

<div class="cta-link"><a href="./guide/Get-started-0100.html">Read the guide ›</a></div>

</div>

</div><div class="feature">

<div class="image" style="background: url(./assets/feature2.jpg) center center"></div>

<div class="usage"><strong>Minimal code</strong> for quick iterations across canvas, svg, and other formats.

<div class="cta-link"><a href="./demo/edit/?name=geom.interpolate">Run code in live editor ›</a></div>

</div>

</div><div class="feature">

<div class="image" style="background: url(./assets/feature3.jpg) center center"></div>

<div class="usage"><strong>Handy functions</strong> for geometry, colors, simulations, and many more.

<div class="cta-link"><a href="./demo/?name=create.delaunay">See a fun demo ›</a></div>

</div>

</div><div class="feature">

<div class="image" style="background: url(./assets/feature4.jpg) center center"></div>

<div class="usage"><strong>Lightweight library</strong> to use on its own, and together with other libraries.

<div class="cta-link"><a href="https://github.com/williamngan/pts/blob/master/demo/more/tfjs_posenet/README.md" target="_blank">Use it with tensorflow.js ›</a></div>

</div>

</div>

<div id="footer">Copyright &copy; 2017-current by <a href="https://twitter.com/williamngan">William Ngan</a> and contributors. Pts is an <a href="https://github.com/williamngan/pts">open source project</a> under Apache License 2.0.</div>

<script type="text/javascript" src="./assets/cover.js"></script>

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

ga('create', 'UA-104913373-1', 'auto');

ga('send', 'pageview');