-
Notifications
You must be signed in to change notification settings - Fork 181
/
index.html
112 lines (98 loc) · 5.94 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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 — 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><script src="/path/to/pts.min.js"></script></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 © 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>