Playing with a little SVG sketch. Better typography

Author: hoverbird

lib/storying/app/app.coffee

@@ -18,43 +18,8 @@ $(document).ready ->
   story_dropdown.change (element) ->
     window.location = $(element.srcElement).val() # Change paths on dropdown change
 
-  $('.story_content').after($('<div id="notepad"></div>'))
   $('.story_content').addClass template_name # FIXME- do in Ruby
 
-  Raphael.fn.arrow = (x1, y1, x2, y2, size) ->
-    angle = Raphael.angle(x1, y1, x2, y2)
-    a45   = Raphael.rad(angle-45)
-    a45m  = Raphael.rad(angle+45)
-    a135  = Raphael.rad(angle-135)
-    a135m = Raphael.rad(angle+135)
-    x1a = x1 + Math.cos(a135) * size
-    y1a = y1 + Math.sin(a135) * size
-    x1b = x1 + Math.cos(a135m) * size
-    y1b = y1 + Math.sin(a135m) * size
-    x2a = x2 + Math.cos(a45) * size
-    y2a = y2 + Math.sin(a45) * size
-    x2b = x2 + Math.cos(a45m) * size
-    y2b = y2 + Math.sin(a45m) * size
-    @path(
-      "M"+x1+" "+y1+"L"+x1a+" "+y1a+
-      "M"+x1+" "+y1+"L"+x1b+" "+y1b+
-      "M"+x1+" "+y1+"L"+x2+" "+y2+
-      "M"+x2+" "+y2+"L"+x2a+" "+y2a+
-      "M"+x2+" "+y2+"L"+x2b+" "+y2b
-    )
-
-  paper = Raphael document.getElementById('notepad'), 320, 200
-  circle = paper.circle 50, 40, 10
-  diagonal = paper.path "M28 10L90 90"
-
-  diagonal2 = diagonal.clone
-  # diagonal2.rotate 45
-  # diagonal2.insertAfter diagonal
-  # diagonal2.rotate 180
-
-  paper.arrow(10, 10, 30, 30, 5).attr({fill: "#f00"});
-
-
   #   # Tabs Activation
   # tabs.each (i) ->
   #     # Get all tabs

lib/storying/app/sketch.coffee

@@ -0,0 +1,40 @@
+# via Paul Irish http://paulirish.com/2009/random-hex-color-code-snippets
+Raphael.fn.randomColor = ->
+  '#' + Math.floor(Math.random() * 16777215).toString(16)
+
+Raphael.fn.arrow = (x1, y1, x2, y2, size) ->
+  angle = Raphael.angle(x1, y1, x2, y2)
+  a45   = Raphael.rad(angle-45)
+  a45m  = Raphael.rad(angle+45)
+  a135  = Raphael.rad(angle-135)
+  a135m = Raphael.rad(angle+135)
+  x1a = x1 + Math.cos(a135) * size
+  y1a = y1 + Math.sin(a135) * size
+  x1b = x1 + Math.cos(a135m) * size
+  y1b = y1 + Math.sin(a135m) * size
+  x2a = x2 + Math.cos(a45) * size
+  y2a = y2 + Math.sin(a45) * size
+  x2b = x2 + Math.cos(a45m) * size
+  y2b = y2 + Math.sin(a45m) * size
+  @path(
+    "M"+x1+" "+y1+"L"+x1a+" "+y1a+
+    "M"+x1+" "+y1+"L"+x1b+" "+y1b+
+    "M"+x1+" "+y1+"L"+x2+" "+y2+
+    "M"+x2+" "+y2+"L"+x2a+" "+y2a+
+    "M"+x2+" "+y2+"L"+x2b+" "+y2b
+  )
+
+
+Raphael.fn.randomCircle = ->
+  radius = random(20)
+  x = random(paper.width/2 - radius)
+  y = random(paper.height/2 + radius)
+  paper.circle(x, y, radius).attr({fill: paper.randomColor()})
+
+random = (max) -> Math.floor(Math.random() * max)
+
+paper = Raphael document.getElementById('notepad')
+diagonal = paper.path "M#{random(paper.width)} #{random(paper.height)}L#{random(paper.height)} #{random 90} z"
+circle = paper.randomCircle()
+
+console.log('paper', paper.height, paper.width);

public/js/app.js

@@ -1,6 +1,6 @@
 (function() {
   $(document).ready(function() {
-    var circle, diagonal, diagonal2, paper, story_dropdown, tabs, template_name;
+    var story_dropdown, tabs, template_name;
     tabs = $('ul.tabs') || [];
     story_dropdown = $('select#story_template');
     template_name = window.location.pathname.substr(1);
@@ -11,31 +11,6 @@
     story_dropdown.change(function(element) {
       return window.location = $(element.srcElement).val();
     });
-    $('.story_content').after($('<div id="notepad"></div>'));
-    $('.story_content').addClass(template_name);
-    Raphael.fn.arrow = function(x1, y1, x2, y2, size) {
-      var a135, a135m, a45, a45m, angle, x1a, x1b, x2a, x2b, y1a, y1b, y2a, y2b;
-      angle = Raphael.angle(x1, y1, x2, y2);
-      a45 = Raphael.rad(angle - 45);
-      a45m = Raphael.rad(angle + 45);
-      a135 = Raphael.rad(angle - 135);
-      a135m = Raphael.rad(angle + 135);
-      x1a = x1 + Math.cos(a135) * size;
-      y1a = y1 + Math.sin(a135) * size;
-      x1b = x1 + Math.cos(a135m) * size;
-      y1b = y1 + Math.sin(a135m) * size;
-      x2a = x2 + Math.cos(a45) * size;
-      y2a = y2 + Math.sin(a45) * size;
-      x2b = x2 + Math.cos(a45m) * size;
-      y2b = y2 + Math.sin(a45m) * size;
-      return this.path("M" + x1 + " " + y1 + "L" + x1a + " " + y1a + "M" + x1 + " " + y1 + "L" + x1b + " " + y1b + "M" + x1 + " " + y1 + "L" + x2 + " " + y2 + "M" + x2 + " " + y2 + "L" + x2a + " " + y2a + "M" + x2 + " " + y2 + "L" + x2b + " " + y2b);
-    };
-    paper = Raphael(document.getElementById('notepad'), 320, 200);
-    circle = paper.circle(50, 40, 10);
-    diagonal = paper.path("M28 10L90 90");
-    diagonal2 = diagonal.clone;
-    return paper.arrow(10, 10, 30, 30, 5).attr({
-      fill: "#f00"
-    });
+    return $('.story_content').addClass(template_name);
   });
 }).call(this);

public/js/sketch.js

@@ -0,0 +1,39 @@
+(function() {
+  var circle, diagonal, paper, random;
+  Raphael.fn.randomColor = function() {
+    return '#' + Math.floor(Math.random() * 16777215).toString(16);
+  };
+  Raphael.fn.arrow = function(x1, y1, x2, y2, size) {
+    var a135, a135m, a45, a45m, angle, x1a, x1b, x2a, x2b, y1a, y1b, y2a, y2b;
+    angle = Raphael.angle(x1, y1, x2, y2);
+    a45 = Raphael.rad(angle - 45);
+    a45m = Raphael.rad(angle + 45);
+    a135 = Raphael.rad(angle - 135);
+    a135m = Raphael.rad(angle + 135);
+    x1a = x1 + Math.cos(a135) * size;
+    y1a = y1 + Math.sin(a135) * size;
+    x1b = x1 + Math.cos(a135m) * size;
+    y1b = y1 + Math.sin(a135m) * size;
+    x2a = x2 + Math.cos(a45) * size;
+    y2a = y2 + Math.sin(a45) * size;
+    x2b = x2 + Math.cos(a45m) * size;
+    y2b = y2 + Math.sin(a45m) * size;
+    return this.path("M" + x1 + " " + y1 + "L" + x1a + " " + y1a + "M" + x1 + " " + y1 + "L" + x1b + " " + y1b + "M" + x1 + " " + y1 + "L" + x2 + " " + y2 + "M" + x2 + " " + y2 + "L" + x2a + " " + y2a + "M" + x2 + " " + y2 + "L" + x2b + " " + y2b);
+  };
+  Raphael.fn.randomCircle = function() {
+    var radius, x, y;
+    radius = random(20);
+    x = random(paper.width - radius);
+    y = random(paper.height + radius);
+    return paper.circle(x, y, radius).attr({
+      fill: paper.randomColor()
+    });
+  };
+  random = function(max) {
+    return Math.floor(Math.random() * max);
+  };
+  paper = Raphael(document.getElementById('notepad'));
+  diagonal = paper.path("M" + (random(paper.width)) + " " + (random(paper.height)) + "L" + (random(paper.height)) + " " + (random(90)) + " z");
+  circle = paper.randomCircle();
+  console.log('paper', paper.height, paper.width);
+}).call(this);

public/stylesheets/layout.css

@@ -28,9 +28,9 @@ hr.invisible {
 .inserted.highlighted { color: #ff69b4;}
 
 #notepad {
+  max-height: 260px;
   margin: 0 auto;
-  height: 400px;
-  width: 200px;
+  padding: 0;
 }
 
 /* #Media Queries

templates/layout.mustache

@@ -9,6 +9,7 @@
   ================================================== -->
 	<meta charset="utf-8" />
 	<title>Storying</title>
+
 	<meta name="description" content="">
 	<meta name="author" content="">
 	<!--[if lt IE 9]>
@@ -41,6 +42,7 @@
 	  <div class="five columns sidebar">
 	    <h1>Storying</h1>
 	    {{>app/story_selector}}
+	    <div id="notepad"></div>
 	  </div>
 		<div class="eight columns content">
 		  <hr class="invisible">
@@ -52,6 +54,7 @@
 	<script>window.jQuery || document.write("<script src='javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script>
 	<script src="js/raphael-min.js"></script>
 	<script src="js/app.js"></script>
+  // <script src="js/sketch.js"></script>
 
 </body>
 </html>