Link to live code editor for all demos in guides

doc22940 · Apr 28, 2019 · 6affd56 · 6affd56
1 parent 432901a
commit 6affd56
Show file tree

Hide file tree

Showing 68 changed files with 1,469 additions and 14 deletions.
diff --git a/demo/guide.canvas_aligntext.js b/demo/guide.canvas_aligntext.js
@@ -0,0 +1,41 @@
+// Source code licensed under Apache License 2.0. 
+// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
+
+window.demoDescription = "Align text demo in Typography guide.";
+
+//// Demo code starts (anonymous function wrapper is optional) ---
+
+(function() {
+
+  let run = Pts.quickStart( "#pt", "#e2e6ef" );
+
+  run( (time, ftime)  => {
+    let size = space.center.$subtract( space.pointer ).abs().multiply(2);
+    let rect = Rectangle.fromCenter( space.center, size.$max( space.size.$divide(6) )  );
+    let content = "hello";
+
+    form.fill("#fff").stroke("#0ca", 3).rect( rect );
+    form.fillOnly("#123");
+    form.font(12)
+    form.alignText("left").textBox( rect, content, "top" );
+    form.alignText("left").textBox( rect, content, "middle" );
+    form.alignText("left").textBox( rect, content, "bottom" );
+    form.alignText("right").textBox( rect, content, "top" );
+    form.alignText("right").textBox( rect, content, "middle" );
+    form.alignText("right").textBox( rect, content, "bottom" );
+
+    form.font(24);
+    form.fill("rgba(0,0,0,.2)")
+    form.alignText("center", "top").textBox( rect, content, "middle", "...", false );
+    form.alignText("center", "middle").textBox( rect, content, "middle", "...", false );
+    form.alignText("center", "bottom").textBox( rect, content, "middle", "...", false );
+    form.alignText("center", "hanging").textBox( rect, content, "middle", "...", false );
+    form.alignText("center", "baseline").textBox( rect, content, "middle", "...", false );
+
+  });
+
+  //// ----  
+
+  space.bindMouse().bindTouch().play();
+
+})();
diff --git a/demo/guide.canvas_paragraphbox.js b/demo/guide.canvas_paragraphbox.js
@@ -0,0 +1,33 @@
+// Source code licensed under Apache License 2.0. 
+// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
+
+window.demoDescription = "Paragraph box demo in Typography guide.";
+
+//// Demo code starts (anonymous function wrapper is optional) ---
+
+(function() {
+
+  Pts.quickStart( "#pt", "#e2e6ef" );
+  let content = "I have discovered a truly remarkable proof of this theorem which this margin is too small to contain.";
+
+  space.add({
+
+    start: () => {
+      form.font(16);
+    },
+
+    animate: (time, ftime) => {
+      let size = space.center.$subtract( space.pointer ).abs().multiply(2);
+      let rect = Rectangle.fromCenter( space.center, size.$max( space.size.$divide(6) )  );
+
+      form.fill("#fff").stroke("#0ca", 3).rect( rect );
+      form.fillOnly("#123").alignText("center").paragraphBox( rect, content, 1.5, "middle" );
+    }
+
+  });
+
+  //// ----  
+
+  space.bindMouse().bindTouch().play();
+
+})();
diff --git a/demo/guide.canvas_paragraphbox2.js b/demo/guide.canvas_paragraphbox2.js
@@ -0,0 +1,37 @@
+// Source code licensed under Apache License 2.0. 
+// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
+
+window.demoDescription = "Paragraph box demo in Typography guide.";
+
+//// Demo code starts (anonymous function wrapper is optional) ---
+
+(function() {
+
+  Pts.quickStart( "#pt", "#e2e6ef" );
+  let content = "I have discovered a truly remarkable proof of this theorem which this margin is too small to contain.";
+
+  space.add({
+
+    start: () => {
+      form.font( 14 );
+    },
+
+    animate: (time, ftime) => {
+      let size = space.center.$subtract( space.pointer ).abs().multiply(2);
+      let rect = Rectangle.fromCenter( space.center, size.$max( space.size.$divide(6) )  );
+      let boxes = Rectangle.halves( rect, 0.5 );
+
+      form.fill("#fff").stroke("#0ca", 3).rect( rect );
+      form.fillOnly("#123");
+      form.paragraphBox( boxes[0], content, 1, "top", false );
+      form.alignText("right").paragraphBox( boxes[1], content, 2, "bottom", false );
+      form.strokeOnly("#42e", 1).line( [new Pt(space.center.x, 0), new Pt(space.center.x, space.size.y)] );
+    }
+
+  });
+
+  //// ----  
+
+  space.bindMouse().bindTouch().play();
+
+})();
diff --git a/demo/guide.canvas_textbox.js b/demo/guide.canvas_textbox.js
@@ -0,0 +1,28 @@
+// Source code licensed under Apache License 2.0. 
+// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
+
+window.demoDescription = "Text box demo in Typography guide.";
+
+//// Demo code starts (anonymous function wrapper is optional) ---
+
+(function() {
+
+  let run = Pts.quickStart( "#pt", "#e2e6ef" );
+  let content = "I have discovered a truly remarkable proof of this theorem which this margin is too small to contain.";
+
+  run( (time, ftime)  => {
+    let size = space.center.$subtract( space.pointer ).abs().multiply(2);
+    let rect = Rectangle.fromCenter( space.center, size.$max( space.size.$divide(6) )  );
+
+    form.fill("#fff").stroke("#0ca", 3).rect( rect );
+    form.fillOnly("#123");
+    form.font(24).textBox( rect, content, "top", "..." );
+    form.font(16).textBox( rect, content, "middle", " ☞ " );
+    form.font(12).textBox( rect, content, "bottom", "", true );
+  });
+
+  //// ----  
+
+  space.bindMouse().bindTouch().play();
+
+})();
diff --git a/demo/guide.getting_started.js b/demo/guide.getting_started.js
@@ -0,0 +1,36 @@
+// Source code licensed under Apache License 2.0. 
+// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
+
+window.demoDescription = "Demo in getting started guide.";
+
+//// Demo code starts (anonymous function wrapper is optional) ---
+
+(function() {
+
+  let run = Pts.quickStart( "#pt", "#e2e6ef" );
+
+  run( (time, ftime)  => {
+    // rectangle
+    var rect = Rectangle.fromCenter( space.center, space.size.$divide(2) );
+    var poly = Rectangle.corners( rect );
+    poly.shear2D( Num.cycle( time%5000/5000 ) - 0.5, space.center );
+
+    // triangle
+    var tris = poly.segments( 2, 1, true );
+    tris.map( (t) => t.push( space.pointer ) );
+
+    // circle
+    var circles = tris.map( (t) => Triangle.incircle( t ) );
+
+    // drawing
+    form.fillOnly("#123").polygon( poly );
+    form.fill("#f05").circles( circles );
+    form.strokeOnly("#fff ", 3 ).polygons( tris );
+    form.fill("#123").point( space.pointer, 5 );
+  });
+
+  //// ----  
+
+  space.bindMouse().bindTouch().play();
+
+})();
diff --git a/demo/guide.getting_started_1.js b/demo/guide.getting_started_1.js
@@ -0,0 +1,52 @@
+// Source code licensed under Apache License 2.0. 
+// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
+
+window.demoDescription = "Demo in getting started guide.";
+
+//// Demo code starts (anonymous function wrapper is optional) ---
+
+(function() {
+
+  /** 
+   * Option 1: a single one-liner
+   */
+  Pts.quickStart( "#pt", "#e2e6ef" )( t => form.point( space.pointer, 10 ) );
+
+
+  /** 
+   * Option 2: Same quickStart mode, but storing the animate function in a `run` variable.
+   */
+  // let run = Pts.quickStart( "#pt", "#ff99ee" );
+  // run( (time, ftime)  => { form.point( space.pointer, 10 ); });
+
+
+  /** 
+   * Option 3: Using quickStart to initiate space and form variables, then add a player to space.
+   */
+  // Pts.quickStart( "#pt", "#ee99ff" );
+  // space.add( {
+  //   animate: (time, ftime) => { form.point( space.pointer, 10 ); }
+  // });
+
+
+  /** 
+   * Option 4: Advanced mode to initiate space and form, allowing for more options
+   */
+  // var space = new CanvasSpace("#pt").setup({ bgcolor: "#99eeff", retina: true, resize: true });
+  // var form = space.getForm();
+  // space.add( {
+  //   start: (bound) => {},
+
+  //   animate: (time, ftime) => {
+  //     form.point( space.pointer, 10 );
+  //   },
+
+  //   action: (type, x, y) => {}
+  // });
+
+
+  //// ----  
+
+  space.bindMouse().bindTouch().play();
+
+})();
diff --git a/demo/guide.getting_started_2.js b/demo/guide.getting_started_2.js
@@ -0,0 +1,21 @@
+// Source code licensed under Apache License 2.0. 
+// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
+
+window.demoDescription = "Demo in getting started guide.";
+
+//// Demo code starts (anonymous function wrapper is optional) ---
+
+(function() {
+
+  let run = Pts.quickStart( "#pt", "#e2e6ef" );
+
+  run( (time, ftime)  => {
+    let radius = Num.cycle( (time%1000)/1000 ) * 20;
+    form.fill("#0ca").point( space.pointer, radius, "circle" );
+  });
+
+  //// ----  
+
+  space.bindMouse().bindTouch().play();
+
+})();
diff --git a/demo/guide.getting_started_3.js b/demo/guide.getting_started_3.js
@@ -0,0 +1,27 @@
+// Source code licensed under Apache License 2.0. 
+// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
+
+window.demoDescription = "Demo in getting started guide.";
+
+//// Demo code starts (anonymous function wrapper is optional) ---
+
+(function() {
+
+  let run = Pts.quickStart( "#pt", "#e2e6ef" );
+
+  run( (time, ftime)  => {
+    // rectangle
+    var rect = Rectangle.fromCenter( space.center, space.size.$divide(2) );
+    var poly = Rectangle.corners( rect );
+    poly.shear2D( Num.cycle( time%2000/2000 ) - 0.5, space.center );
+
+    // drawing
+    form.fillOnly("#123").polygon( poly );
+    form.strokeOnly("#fff", 3).rect( rect );
+  });
+
+  //// ----  
+
+  space.bindMouse().bindTouch().play();
+
+})();
diff --git a/demo/guide.getting_started_4.js b/demo/guide.getting_started_4.js
@@ -0,0 +1,32 @@
+// Source code licensed under Apache License 2.0. 
+// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
+
+window.demoDescription = "Demo in getting started guide.";
+
+//// Demo code starts (anonymous function wrapper is optional) ---
+
+(function() {
+
+  let run = Pts.quickStart( "#pt", "#e2e6ef" );
+
+  run( (time, ftime)  => {
+    // rectangle
+    var rect = Rectangle.fromCenter( space.center, space.size.$divide(2) );
+    var poly = Rectangle.corners( rect );
+    poly.shear2D( Num.cycle( time%5000/5000 ) - 0.5, space.center );
+
+    // triangle
+    var tris = poly.segments( 2, 1, true );
+    tris.map( (t) => t.push( space.pointer ) );
+
+    // drawing
+    form.fillOnly("#123").polygon( poly );
+    form.strokeOnly("#fff ", 3 ).polygons( tris );
+    form.fill("#123").point( space.pointer, 5 );
+  });
+
+  //// ----  
+
+  space.bindMouse().bindTouch().play();
+
+})();
diff --git a/demo/guide.getting_started_5.js b/demo/guide.getting_started_5.js
@@ -0,0 +1,36 @@
+// Source code licensed under Apache License 2.0. 
+// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)
+
+window.demoDescription = "Demo in getting started guide.";
+
+//// Demo code starts (anonymous function wrapper is optional) ---
+
+(function() {
+
+  let run = Pts.quickStart( "#pt", "#e2e6ef" );
+
+  run( (time, ftime)  => {
+    // rectangle
+    var rect = Rectangle.fromCenter( space.center, space.size.$divide(2) );
+    var poly = Rectangle.corners( rect );
+    poly.shear2D( Num.cycle( time%5000/5000 ) - 0.5, space.center );
+
+    // triangle
+    var tris = poly.segments( 2, 1, true );
+    tris.map( (t) => t.push( space.pointer ) );
+
+    // circle
+    var circles = tris.map( (t) => Triangle.incircle( t ) );
+
+    // drawing
+    form.fillOnly("#123").polygon( poly );
+    form.fill("#f05").circles( circles );
+    form.strokeOnly("#fff ", 3 ).polygons( tris );
+    form.fill("#123").point( space.pointer, 5 );
+  });
+
+  //// ----  
+
+  space.bindMouse().bindTouch().play();
+
+})();