<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 that enables you to compose and visualize points in spaces.">

<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 that enables you to compose and visualize points." />

<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.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>A point represents the basic building block, the smallest idea, within a vast conceptual space. </p> -->

<!-- <p>Can you find the Big Dipper in a sky full of stars? Can you discover, through your mind's eyes, invisible points in conceptual spaces too?</p> -->

<!-- <p>Pts helps you connect and express those invisible points — as ideas, shapes, colors, motions, sounds, and more. </p> -->

<p>Pts is about connecting the dots, like seeing the Big Dipper in a sky full of stars, like spotting dust in the air illuminated by a beam of light.</p>

<p>Pts enables you to compose and visualize these invisible points and their relationships, and to express what you see from your mind's eyes — 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 also comes with many useful algorithms for data visualization and creative coding.</p>

<p>You can <a href="https://github.com/williamngan/pts/blob/master/dist/pts.min.js">link it</a> directly like this: <br />

<code>&lt;script src="https://unpkg.com/pts/dist/pts.min.js"&gt;&lt;/script&gt;</code></p>

<p>Or use 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</a>: <br />

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

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

</p>

</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="#">Read the Pt guide ›</a></div>

</div>

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

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

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

<div class="cta-link"><a href="#">See a fun demo ›</a></div>

</div>

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

<div class="image" style="background: url(./assets/feature3.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="#">Run code in live editor ›</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="#">Try a demo with tensflow.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');