updated demo

roblarsen · Dec 15, 2014 · d1c9117 · d1c9117
1 parent edaaa14
commit d1c9117
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>
diff --git a/demo/spiral.html 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>