index.html

<!DOCTYPE html>
<html>
<head>
	<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="/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>
</head>
<body>

<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>

<div id="board">
    <div id="pt"></div>
</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>Pts is lightweight and modular. Written in typescript, it comes with many useful algorithms for visualization and creative coding. Its friendly API supports both quick prototyping and bigger projects.</p>
        <p>Use it directly (link from <a href="https://cdnjs.com/libraries/pts">cdnjs</a> or <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 get it as an npm module (<a href="./guide/Technical-notes-9000.html" target="_blank">guide</a>): <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>

<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, sounds and 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>

<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>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-104913373-1', 'auto');
ga('send', 'pageview');

</script>

</body>
</html>