Update guide and homepage

kobihcmomanyi · Aug 6, 2018 · 9ceff13 · 9ceff13
1 parent 21b1954
commit 9ceff13
Show file tree

Hide file tree

Showing 15 changed files with 76 additions and 42 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -104,7 +104,7 @@ html * {
 .block {
   width: 100vw;
   max-width: 1350px;
-  margin: 0 auto;
+  margin: 0px auto 0;
   text-align: center;
 
 }
@@ -122,15 +122,15 @@ html * {
 
 .feature-block {
   column-count: 4;
-  height: 450px;
-  column-gap: 1px;
-  margin: 100px 0px;
+  height: 45vw;
+  column-gap: 0px;
+  margin: 150px 0px 0px;
 
 }
 
 .feature-block .feature {
   display: inline-block;
-  height: 450px;
+
   padding: 0;
   position: relative;
 
@@ -139,7 +139,7 @@ html * {
 .feature-block .image {
   display: block;
   width: 100%;
-  height: 300px;
+  height: 25vw;
   background-size: cover; 
 }
 

diff --git a/guide/Get-started-0100.html b/guide/Get-started-0100.html
@@ -43,9 +43,10 @@ <h3>Using pts as a script</h3>
 <pre><code>Pts.namespace( window );
 </code></pre>
 <p>That means we can call all Pts classes like <code>Group</code> directly, instead of <code>Pts.Group</code> which is a bit clumsy to write.</p>
-<p>And that's it. We can now have some fun.</p>
+<p>Note that if you're using <code>Pts.quickStart</code>, there's no need to call <code>Pts.namespace</code> again. See below for details.</p>
+<p>Now we can get to the fun part.</p>
 <h3>Creating Space and Form</h3>
-<p><strong><code>Pts</code></strong> provides a <a href="#canvas-canvasspace"><code>CanvasSpace</code></a> which enables you to use html <code>&lt;canvas&gt;</code> as space. You can create a <code>CanvasSpace</code> like this:</p>
+<p><strong><code>Pts</code></strong> provides a <a href="#canvas-canvasspace"><code>CanvasSpace</code></a> which enables you to use html <code>&lt;canvas&gt;</code> as a space. You can create a <code>CanvasSpace</code> like this:</p>
 <pre><code>var space = new CanvasSpace(&quot;#hello&quot;);
 space.setup({ bgcolor: &quot;#fff&quot; });
 </code></pre>
@@ -58,6 +59,12 @@ <h3>Creating Space and Form</h3>
 <pre><code>// Initiate your own BeautifulForm class
 var form = new BeautifulForm( space );
 </code></pre>
+<p>Alternatively, you can use the <strong>Quick Start</strong> mode to create CanvasSpace and CanvasForm directly. This will create two global variables called <code>space</code>, and it also returns an animate function for you to use. You can do all these in just one line of code:</p>
+<pre><code>var run = Pts.quickStart( &quot;#hello&quot;, &quot;#fff&quot; );
+
+// quickStart returns a function wrapper for use in animation loop, eg:
+// run( function(time, ftime) { ... } );
+</code></pre>
 <p>Now we have paper and pencil. What should we draw?</p>
 <h3>Drawing a point</h3>
 <p>The <code>space</code>, which we have created, contains some handy variables. For example, the <code>pointer</code> variable tells us the current position of pointer in space (ie, mouse or touch position). Let's use it to draw a point.</p>
@@ -106,8 +113,13 @@ <h3>Visibles from invisibles</h3>
 <p><img src="./assets/bg.png" alt="js:getting_started_4"></p>
 <p>And what if we also draw the inner circle of each triangle?</p>
 <p><img src="./assets/bg.png" alt="js:getting_started_5"></p>
-<p>This is what you can do with <code>pts</code> in ~10 lines of code. Add another 10 lines and make it your own!</p>
-<pre><code>// animation
+<p>This is what you can do with <code>pts</code> in ~15 lines of code.</p>
+<pre><code>// setup
+Pts.namespace(this);
+var space = new CanvasSpace(&quot;#hello&quot;).setup({ bgcolor: &quot;#fff&quot; });
+var form = space.getForm();
+
+// animation
 space.add( (time, ftime) =&gt; {
 
   // rectangle
@@ -132,6 +144,7 @@ <h3>Visibles from invisibles</h3>
 
 space.play().bindMouse();
 </code></pre>
+<p>Also take a look at the alternative quick start mode example in the <a href="../demo/edit/?name=triangle.incircle"><code>live editor</code></a>. Give it a try!</p>
 <p>Hope this gives you a quick and enjoyable walkthrough. But wait, there's more: Take a look at the other guides which will explain <strong><code>Pts</code></strong> features in details.</p>
 <p>We appreciate your feedbacks and bug reports. Please file an issue at <a href="https://github.com/williamngan/pts">github</a> or ping <a href="https://twitter.com/williamngan">@williamngan</a> on twitter.</p>
 <p>Enjoy and have fun!</p>

diff --git a/guide/Group-0300.html b/guide/Group-0300.html
@@ -107,7 +107,7 @@ <h3>Cheat sheet</h3>
 g.scale( 0.5 ).rotate2D( Const.half_pi )
 g.shear2D( 0.2 ).reflect2D( line )
 </code></pre>
-<p>Check out the <a href="../docs/classes/_pt_.group.html">full documentation</a> too.</p>
+<p>Check out the <a href="../docs/">full documentation</a> too.</p>
 </div>
 
 <ol id="menu"><a id="close" href="#">&times;</a><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>

diff --git a/guide/Op-0400.html b/guide/Op-0400.html
@@ -160,7 +160,7 @@ <h3>Cheat sheet</h3>
 Curve.bezier( pts );
 Curve.bspline( pts );
 </code></pre>
-<p>Check out the <a href="../docs/modules/_op_.html">full documentation</a> too.</p>
+<p>Check out the <a href="../docs/">full documentation</a> too.</p>
 </div>
 
 <ol id="menu"><a id="close" href="#">&times;</a><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>

diff --git a/guide/Pt-0200.html b/guide/Pt-0200.html
@@ -44,7 +44,7 @@ <h3>Float32Array</h3>
 </code></pre>
 <p>Note that Float32Array doesn't allow some common Array functions like <code>push()</code> and <code>pop()</code> . If you need to grow or shrink the Pt's dimensions, either create a new one or use <a href="#pt-pt"><code>$concat</code></a> and <a href="#pt-pt"><code>$take</code></a>.</p>
 <h3>Updating values</h3>
-<p>You can update a Pt's values by using <a href="#pt-pt"><code>to</code></a> function, or accessing the <a href="#pt-pt"><code>x</code></a>, <a href="#pt-pt"><code>y</code></a>, <a href="#pt-pt"><code>z</code></a>, <a href="#pt-pt"><code>w</code></a> properties.</p>
+<p>You can update a Pt's values by using <a href="#pt-pt"><code>to</code></a> function, or accessing the <a href="#pt-pt"><code>.x</code></a>, <a href="#pt-pt"><code>.y</code></a>, <a href="#pt-pt"><code>.z</code></a>, <a href="#pt-pt"><code>.w</code></a> properties.</p>
 <pre><code>p.to( 1, 2, 3 )
 p.to( anotherPt )
 p.w = p.x + p.z
@@ -88,7 +88,7 @@ <h3>Transformations</h3>
 <p><img src="./assets/bg.png" alt="js:pt_reflect"></p>
 <h5>A demo of scale and reflect transformation. The red line's length changes the scale, while its angle specifies the reflection. Take a look at the source code to see how easy this it :)</h5>
 <h3>Roll your own</h3>
-<p>You may use all of Float32Array's functions (eg, <code>slice</code>, <code>map</code>) with Pt. Some additional ones in Pt like <code>$concat</code>, <code>$take</code> make it simpler to work with TypedArray. Take a look at &quot;Op&quot; section to see how you can write your own functions to work with Pt easily.</p>
+<p>You may use all of Float32Array's functions (eg, <code>slice</code>, <code>map</code>) with Pt. Some additional ones in Pt like <a href="#pt-pt"><code>$concat</code></a>, <a href="#pt-pt"><code>$take</code></a> make it simpler to work with TypedArray. Take a look at &quot;Op&quot; section to see how you can write your own functions to work with Pt easily.</p>
 <pre><code>// Use $concat and $take to grow and shrink a TypedArray 
 let p1 = new Pt(1, 2, 3).$concat( 4, 5 ); // becomes Pt(1,2,3,4,5)
 
@@ -142,7 +142,7 @@ <h3>Cheat sheet</h3>
 p.$concat( 10, 100 )
 p.toArray() // convert Float32Array to Array
 </code></pre>
-<p>Check out the <a href="../docs/classes/_pt_.pt.html">full documentation</a> too.</p>
+<p>Check out the <a href="../docs/">full documentation</a> too.</p>
 </div>
 
 <ol id="menu"><a id="close" href="#">&times;</a><li><a href="Get-started-0100.html">Get started</a></li><li><a href="Pt-0200.html">Pt</a></li><li><a href="Group-0300.html">Group</a></li><li><a href="Op-0400.html">Op</a></li><li><a href="Space-0500.html">Space</a></li><li><a href="Typography-0600.html">Typography</a></li><li><a href="Technical-notes-9000.html">Technical notes</a></li></ol>

diff --git a/guide/Space-0500.html b/guide/Space-0500.html
@@ -72,7 +72,7 @@ <h3>Animation and interaction</h3>
 <pre><code>// You can chain multiple functions together
 space.bindMouse().bindTouch().play();
 </code></pre>
-<p>CanvasSpace also provides a couple convenient properties which you may access once the space is initiated. <a href="#canvas-canvasspace"><code>pointer</code></a> gives you the current pointer position. <a href="#canvas-canvasspace"><code>size</code></a>, <a href="#canvas-canvasspace"><code>center</code></a>, <a href="#canvas-canvasspace"><code>width</code></a>, <a href="#canvas-canvasspace"><code>height</code></a> and <a href="#canvas-canvasspace"><code>innerBound</code></a> are handy to get a space's size and center point. <a href="#canvas-canvasspace"><code>element</code></a> and <a href="#canvas-canvasspace"><code>parent</code></a> returns the html elements of this space.</p>
+<p>CanvasSpace also provides a couple convenient properties which you may access once the space is initiated. <a href="#canvas-canvasspace"><code>.pointer</code></a> gives you the current pointer position. <a href="#canvas-canvasspace"><code>.size</code></a>, <a href="#canvas-canvasspace"><code>.center</code></a>, <a href="#canvas-canvasspace"><code>.width</code></a>, <a href="#canvas-canvasspace"><code>.height</code></a> and <a href="#canvas-canvasspace"><code>.innerBound</code></a> are handy to get a space's size and center point. <a href="#canvas-canvasspace"><code>.element</code></a> and <a href="#canvas-canvasspace"><code>.parent</code></a> returns the html elements of this space.</p>
 <p>CanvasSpace also supports offscreen rendering which may help with rendering complex scene. Take a look at the source code of <a href="../study/index.html?name=CanvasSpace.offscreen">this study</a> for more.</p>
 <h3>Form</h3>
 <p>In the <a href="./Get-started-0100.html">Get Started</a> guide, we made an analogy of paper and pencil when introducing Space and Form. So <a href="#canvas-canvasform"><code>CanvasForm</code></a> represents a pencil to draw on CanvasSpace. You can get the form with a single function call.</p>

diff --git a/guide/Technical-notes-9000.html b/guide/Technical-notes-9000.html
@@ -31,17 +31,17 @@ <h3>Cloning Pt with <code>clone()</code> or <code>$...</code></h3>
 pt.$subtract( 10 ); // use $fn to get a new Pt
 </code></pre>
 <h3>Typescript notes</h3>
-<p>While <a href="#pt_pt"><code>Pt</code></a> extends <code>Float32Array</code> and <a href="#pt_group"><code>Group</code></a> extends Array, typescript compiler at the moment (2.4.2) isn't smart enough to auto-cast the return type when you use an Array or Float32Array function. That means if you use typescript, you may need to recast some native Array functions such as <code>map</code> or <code>slice</code>.</p>
+<p>While <a href="#pt-pt"><code>Pt</code></a> extends <code>Float32Array</code> and <a href="#pt-group"><code>Group</code></a> extends Array, typescript compiler at the moment (2.4.2) isn't smart enough to auto-cast the return type when you use an Array or Float32Array function. That means if you use typescript, you may need to recast some native Array functions such as <code>map</code> or <code>slice</code>.</p>
 <pre><code>let p:Pt = new Pt(1,2,3);
 let p2 = p.map( (d) =&gt; d+1 ); // typescript thinks p2 is Float32Array
 let p3 = p.map( (d) =&gt; d+1 ) as Pt; // type is now cast back to Pt
 </code></pre>
 <h3>Javascript ecosystem</h3>
 <p>The javascript ecosystem is moving so fast it's difficult to keep up. Pts is intended for modern browsers supporting es6+. Therefore, if you need to target es5 or older browsers, you'll need to configure your build tools accordingly. Some pointers:</p>
 <ul>
-<li><p>If you're using babel, you may need the <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">builtin-extend plugin</a> because Pts extends built-in types like Array and Float32Array.</p></li>
-<li><p>UglifyJS doesn't seem to support minifying es6 so the code is transformed to es5 first. Alternatively, consider other minify tool such as <a href="https://github.com/babel/minify">babili</a>.</p></li>
-<li><p>Pts is a new library in beta so we don't recommend using it in production system yet. For now, just experiment and have fun!</p></li>
+<li><p>UglifyJS doesn't seem to support minifying es6 so the code is transformed to es5 first. Alternatively, consider other minify tool such as <a href="https://github.com/babel/minify">babili</a> or <a href="https://github.com/mishoo/UglifyJS2/tree/harmony">uglify-es</a>.</p></li>
+<li><p>If you're compiling to es5 with babel, you may need the <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">builtin-extend plugin</a> because Pts extends built-in types like Array and Float32Array. This may not be needed in future as build tools get better.</p></li>
+<li><p>Pts is a new library in beta so we don't recommend using it in high-priority production system yet.</p></li>
 </ul>
 <h3>Remember to file issues and feedbacks</h3>
 <p>Support this open-source project by filing bugs and pull requests on <a href="https://github.com/williamngan/pts">github</a>. If you have other feedbacks, please ping <a href="https://twitter.com/williamngan">@williamngan</a>. Show us what you have made with Pts too!</p>

diff --git a/guide/js/guide.js b/guide/js/guide.js
@@ -66,6 +66,10 @@ Pts.namespace( this );
     document.body.appendChild(script);
   }
 
+  function cap(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+
   function updateCodeLinks() {
     var codes = document.querySelectorAll("a > code");
     for (let i=0, len=codes.length; i<len; i++) {
@@ -74,8 +78,10 @@ Pts.namespace( this );
       if (c.parentNode.getAttribute("href").indexOf("#") === 0 && c.textContent) {
         let link = c.parentNode.getAttribute("href").replace(/#/g, "").split("-");
         let linkAnchor = c.textContent.split(".");
-        linkAnchor = linkAnchor[linkAnchor.length-1].toLowerCase().replace(/\W/g, "_");
-        c.parentNode.setAttribute( "href", `../docs/classes/_${link[0]}_.${ link[1] || link[0]}.html#${linkAnchor}` );
+        let ftype = (linkAnchor.length > 1 && linkAnchor[0] === "") ? "accessor" : "function";
+        linkAnchor = linkAnchor[linkAnchor.length-1].replace(/[^a-zA-Z0-9._\$]/g, "_");
+        c.parentNode.setAttribute( "href", `../docs/?p=${cap(link[0])}_${cap(link[1] || link[0])}#${ftype}_${linkAnchor}` );
+        c.parentNode.setAttribute( "target", "ptsdocs");
       }
       // c.parentElement.setAttribute( "target", "_blank" );
     }

diff --git a/guide/md/_0100_Get_started.md b/guide/md/_0100_Get_started.md
@@ -42,12 +42,14 @@ When using as a script, we usually start by adding **`Pts`** into the global sco
 Pts.namespace( window );
 ```
 
-That means we can call all Pts classes like `Group` directly, instead of `Pts.Group` which is a bit clumsy to write.
+That means we can call all Pts classes like `Group` directly, instead of `Pts.Group` which is a bit clumsy to write. 
 
-And that's it. We can now have some fun.
+Note that if you're using `Pts.quickStart`, there's no need to call `Pts.namespace` again. See below for details.
+
+Now we can get to the fun part.
 
 ### Creating Space and Form
-**`Pts`** provides a [`CanvasSpace`](#canvas-canvasspace) which enables you to use html `<canvas>` as space. You can create a `CanvasSpace` like this:
+**`Pts`** provides a [`CanvasSpace`](#canvas-canvasspace) which enables you to use html `<canvas>` as a space. You can create a `CanvasSpace` like this:
 
 ```
 var space = new CanvasSpace("#hello");
@@ -71,6 +73,15 @@ Do you know you can create your own forms by extending `CanvasForm` or `Form` cl
 var form = new BeautifulForm( space );
 ```
 
+Alternatively, you can use the **Quick Start** mode to create CanvasSpace and CanvasForm directly. This will create two global variables called `space`, and it also returns an animate function for you to use. You can do all these in just one line of code:
+
+```
+var run = Pts.quickStart( "#hello", "#fff" );
+
+// quickStart returns a function wrapper for use in animation loop, eg:
+// run( function(time, ftime) { ... } );
+``` 
+
 Now we have paper and pencil. What should we draw?
 
 ### Drawing a point
@@ -149,9 +160,14 @@ And what if we also draw the inner circle of each triangle?
 
 ![js:getting_started_5](./assets/bg.png)
 
-This is what you can do with `pts` in ~10 lines of code. Add another 10 lines and make it your own!
+This is what you can do with `pts` in ~15 lines of code. 
 
 ```
+// setup
+Pts.namespace(this);
+var space = new CanvasSpace("#hello").setup({ bgcolor: "#fff" });
+var form = space.getForm();
+
 // animation
 space.add( (time, ftime) => {
 
@@ -178,6 +194,8 @@ space.add( (time, ftime) => {
 space.play().bindMouse();
 ```
 
+Also take a look at the alternative quick start mode example in the [`live editor`](../demo/edit/?name=triangle.incircle). Give it a try!
+
 Hope this gives you a quick and enjoyable walkthrough. But wait, there's more: Take a look at the other guides which will explain **`Pts`** features in details. 
 
 We appreciate your feedbacks and bug reports. Please file an issue at [github](https://github.com/williamngan/pts) or ping [@williamngan](https://twitter.com/williamngan) on twitter. 

diff --git a/guide/md/_0200_Pt.md b/guide/md/_0200_Pt.md
@@ -37,7 +37,7 @@ Note that Float32Array doesn't allow some common Array functions like `push()` a
 
 ### Updating values
 
-You can update a Pt's values by using [`to`](#pt-pt) function, or accessing the [`x`](#pt-pt), [`y`](#pt-pt), [`z`](#pt-pt), [`w`](#pt-pt) properties.
+You can update a Pt's values by using [`to`](#pt-pt) function, or accessing the [`.x`](#pt-pt), [`.y`](#pt-pt), [`.z`](#pt-pt), [`.w`](#pt-pt) properties.
 ```
 p.to( 1, 2, 3 )
 p.to( anotherPt )
@@ -99,7 +99,7 @@ Take a look at the [`Geom`](#num-geom) class which also provides many functions
 
 ### Roll your own
 
-You may use all of Float32Array's functions (eg, `slice`, `map`) with Pt. Some additional ones in Pt like `$concat`, `$take` make it simpler to work with TypedArray. Take a look at "Op" section to see how you can write your own functions to work with Pt easily.
+You may use all of Float32Array's functions (eg, `slice`, `map`) with Pt. Some additional ones in Pt like [`$concat`](#pt-pt), [`$take`](#pt-pt) make it simpler to work with TypedArray. Take a look at "Op" section to see how you can write your own functions to work with Pt easily.
 ```
 // Use $concat and $take to grow and shrink a TypedArray 
 let p1 = new Pt(1, 2, 3).$concat( 4, 5 ); // becomes Pt(1,2,3,4,5)
@@ -167,4 +167,4 @@ p.$concat( 10, 100 )
 p.toArray() // convert Float32Array to Array
 ```
 
-Check out the [full documentation](../docs/classes/_pt_.pt.html) too.
+Check out the [full documentation](../docs/) too.
diff --git a/guide/md/_0300_Group.md b/guide/md/_0300_Group.md
@@ -122,4 +122,4 @@ g.scale( 0.5 ).rotate2D( Const.half_pi )
 g.shear2D( 0.2 ).reflect2D( line )
 ```
 
-Check out the [full documentation](../docs/classes/_pt_.group.html) too.
+Check out the [full documentation](../docs/) too.
diff --git a/guide/md/_0400_Op.md b/guide/md/_0400_Op.md
@@ -208,4 +208,4 @@ Curve.bezier( pts );
 Curve.bspline( pts );
 ```
 
-Check out the [full documentation](../docs/modules/_op_.html) too.
+Check out the [full documentation](../docs/) too.