From d1c911747c236501ebd0cddac7d5e1f2852c4636 Mon Sep 17 00:00:00 2001
From: Rob Larsen <rob@htmlcssjavascript.com>
Date: Mon, 15 Dec 2014 00:48:57 -0500
Subject: [PATCH] updated demo

---
 assets/stylesheets/styles.css |  5 ++-
 demo/index.html               | 10 +++++-
 demo/koch-orig.html           | 62 +++++++++++++++++++++++++++++++++++
 demo/spiral.html              | 47 ++++++++++++++++++++++++++
 4 files changed, 122 insertions(+), 2 deletions(-)
 create mode 100644 demo/koch-orig.html
 create mode 100644 demo/spiral.html
diff --git a/assets/stylesheets/styles.css b/assets/stylesheets/styles.css
index 4fa24f3..4a5c179 100644
--- a/assets/stylesheets/styles.css
+++ b/assets/stylesheets/styles.css
@@ -106,7 +106,10 @@ header {
   float:left;
   position:fixed;
 }
-
+#demo header {
+  position:static;
+  float:none;
+}
 header ul {
   list-style:none;
   height:40px;
diff --git a/demo/index.html b/demo/index.html
index f68c385..2ea04d9 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -5,11 +5,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Cee.js: Demo</title>
     <meta name="description" content="Cee.js demos">
+<link href="../assets/stylesheets/styles.css" rel="stylesheet" type="text/css">
 </head>
 
-<body>
+<body id="demo">
+
+<header>
     <h1>Cee JS
     </h1>
+</header>
     <h2>Demos</h2>
     <ul>
         <li>
@@ -48,6 +52,10 @@ <h2>Demos</h2>
         <li>
             <a href="fillCircle.html">fillCircle</a>
         </li>
+        <li>
+            <a href="logoz.html">Logo (animated with the longest chain in history)</a>
+        </li>
+
         <li>
             <a href="line.html">Line</a>
         </li>
diff --git a/demo/koch-orig.html b/demo/koch-orig.html
new file mode 100644
index 0000000..dc0ad5e
--- /dev/null
+++ b/demo/koch-orig.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html class="no-js">
+    <head>
+        <meta charset="utf-8">
+        <title>CanvasJS Demo</title>
+    </head>
+    <body>
+      <canvas id="demo" height="1000" width="1000">
+      </canvas>
+
+<script src="../Canvas.js"></script>
+<script>
+(function(){
+  "use strict"
+  var ctx = new Canvas("demo");
+  function koch( x, y, length, level ) {
+    ctx.save().moveTo(x,y)
+       .beginPath()
+       .line({
+          angle : -45,
+          distance : length,
+        })
+       .line({
+          angle : 45,
+          distance : length,
+        })
+       .line({
+          angle : 0,
+          distance : length,
+        })
+       .stroke()
+       .restore();
+
+       if (level <1000) {
+          koch( ctx.currentPos().x, ctx.currentPos().y, length/3, level+1); 
+       }
+       
+  }
+  function init(){
+    /*
+if level < 1 then
+   Move forward length pixels
+else
+   Draw a k-1 level Koch curve with segments 1/3 the current length
+   Turn left 60 degrees
+   Draw a k-1 level Koch curve with segments 1/3 the current length
+   Turn right 120 degrees
+   Draw a k-1 level Koch curve with segments 1/3 the current length
+   Turn left 60 degrees
+   Draw a k-1 level Koch curve with segments 1/3 the current length
+  */
+  koch( 500, 500, 500, 1 );
+  }
+ return {
+  init : init
+ }})().init( demo );
+
+
+
+</script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/demo/spiral.html b/demo/spiral.html
new file mode 100644
index 0000000..69dfda2
--- /dev/null
+++ b/demo/spiral.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class="no-js">
+    <head>
+        <meta charset="utf-8">
+        <title>CanvasJS Arc Demo</title>
+    </head>
+    <body>
+      <canvas id="demo" height="500" width="960">
+      </canvas>
+
+<script src="../Canvas.js"></script>
+<script>
+(function(){
+  "use strict"
+  function init(){
+    var ctx = new Canvas("demo"),
+        int1 = 0,
+        int2 = 1,
+        int3,
+        angle = 0;
+    for (var i = 3; i <= 30; i++) {
+        angle = angle+9;
+        int3 = int1 + int2;
+        int1 = int2;
+        int2 = int3;
+    ctx.beginPath()
+      .line({
+        "distance" : int3/Math.PI,
+        "angle" : int3,
+        "x" : 400,
+        "y" : 20
+      })
+      .arc( ctx.currentPos().x, ctx.currentPos().y, int3, ctx.math.radians( angle), ctx.math.radians(0 ), true )
+      .stroke()
+      .closePath()   
+    }
+}
+
+return {
+  init : init
+}})().init();
+
+
+
+</script>
+    </body>
+</html>
\ No newline at end of file
