Permalink
Browse files

Version 1.0.1

Added basic examples.
  • Loading branch information...
1 parent 62bc57d commit f95d369fa3c55375bfc00e31f8f512d0eb6312dd @gsmith85 committed Jun 15, 2012
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>SeuratJS &mdash; Animation</title>
+
+ <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script type="text/javascript" src="../seurat.js"></script>
+ <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
+ <link rel="stylesheet" type="text/css" href="examples.css" />
+ <script type="text/javascript">
+ var map;
+ $(document).ready(function(){
+ $('.seuratjs-example').click(function(){
+ var width = $(this).width(); var height = $(this).height();
+
+ /* We are replacing the original image with a div that will serve as Raphael's container. */
+ var raphaelContainer = $('<div id="'+$(this).attr('id')+'"></div>')
+ .width(width)
+ .height(height);
+ $(this).replaceWith(raphaelContainer);
+
+ var paper = new Raphael(document.getElementById($(this).attr('id')),width,height+5);
+
+ /* SeuratJS code */
+ paper.seurat({ imageSource: 'imgs/circus-sideshow.png',
+ animator: function(elm, x,y,step){
+ var anim = Raphael.animation({r: 7}, 350).delay(35*(x+y));
+ elm.animate(anim);}});
+ });
+ });
+ </script>
+</head>
+<body>
+ <h1>SeuratJS &mdash; Animation</h1>
+ <div class="row">
+ <div class="span9">
+ <pre><img src="imgs/circus-sideshow.png" id="ex1" class='seuratjs-example' /></pre>
+ </div>
+ <div class="span7">
+ <p>The <b>animator</b> is the work-horse function of SeuratJS. The <b>elm</b> is the Rapha&euml;l element generated and filled with the color from (<b>x</b>,<b>y</b>). <b>step</b> is the grid spacing used to collect the color samples. You can see more great animation examples and code on the <a href='http://seuratjs.com' target='_blank'>SeuratJS Website</a>.</p>
+ <pre>
+paper.seurat({
+ imageSource: 'imgs/circus-sideshow.png',
+ animator: function(elm, x,y,step){
+ var anim = Raphael.animation({r: 7}, 350)
+ .delay(35*(x+y));
+ elm.animate(anim);}});
+</pre>
+ <p><span class="label notice">Note</span> <strong>paper</strong> is a Rapha&euml;l canvas object as defined <a href="http://raphaeljs.com/reference.html#Raphael">here</a>.</p>
+ <p><span class="label important">Chrome Users</span> Because SeuratJS uses the HTML5 canvas element if you are attempting to debug from file:// as opposed to a local webserver you will need to run Chrome using the <b>--allow-file-access-from-files</b> flag. More info <a href="http://joshuamcginnis.com/2011/02/28/how-to-disable-same-origin-policy-in-chrome/" target="_blank">here</a>.</p>
+ </div>
+ </div>
+</body>
+</html>
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>SeuratJS &mdash; Attributes</title>
+
+ <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script type="text/javascript" src="../seurat.js"></script>
+ <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
+ <link rel="stylesheet" type="text/css" href="examples.css" />
+ <script type="text/javascript">
+ var map;
+ $(document).ready(function(){
+ $('.seuratjs-example').click(function(){
+ var width = $(this).width(); var height = $(this).height();
+
+ /* We are replacing the original image with a div that will serve as Raphael's container. */
+ var raphaelContainer = $('<div id="'+$(this).attr('id')+'"></div>')
+ .width(width)
+ .height(height);
+ $(this).replaceWith(raphaelContainer);
+
+ var paper = new Raphael(document.getElementById($(this).attr('id')),width,height+5);
+
+ /* SeuratJS code */
+ paper.seurat({ imageSource: 'imgs/circus.png',
+ attributes: {r: 3, stroke: 1}});
+ });
+ });
+ </script>
+</head>
+<body>
+ <h1>SeuratJS &mdash; Attributes</h1>
+ <div class="row">
+ <div class="span9">
+ <pre><img src="imgs/circus.png" id="ex1" class='seuratjs-example' /></pre>
+ </div>
+ <div class="span7">
+ <p><b>attributes</b> describe what your Rapha&euml;l elements look like when they are generated. In this example the radius of our circles is set to 3 and a 1 pixel stroke is set. Depending on the type of element you are using can determine which attibutes are valid to set <a href='http://www.w3.org/TR/SVG/attindex.html' target='_blank'>here</a>.</p>
+ <pre>
+paper.seurat({ imageSource: 'imgs/circus.png',
+ attributes: {r: 3, stroke: 1}});</pre>
+ <p><span class="label notice">Note</span> <strong>paper</strong> is a Rapha&euml;l canvas object as defined <a href="http://raphaeljs.com/reference.html#Raphael">here</a>.</p>
+ <p><span class="label important">Chrome Users</span> Because SeuratJS uses the HTML5 canvas element if you are attempting to debug from file:// as opposed to a local webserver you will need to run Chrome using the <b>--allow-file-access-from-files</b> flag. More info <a href="http://joshuamcginnis.com/2011/02/28/how-to-disable-same-origin-policy-in-chrome/" target="_blank">here</a>.</p>
+ </div>
+ </div>
+</body>
+</html>
View
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>SeuratJS &mdash; Circles</title>
+
+ <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script type="text/javascript" src="../seurat.js"></script>
+ <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
+ <link rel="stylesheet" type="text/css" href="examples.css" />
+ <script type="text/javascript">
+ var map;
+ $(document).ready(function(){
+ $('.seuratjs-example').click(function(){
+ var width = $(this).width(); var height = $(this).height();
+
+ /* We are replacing the original image with a div that will serve as Raphael's container. */
+ var raphaelContainer = $('<div id="'+$(this).attr('id')+'"></div>')
+ .width(width)
+ .height(height);
+ $(this).replaceWith(raphaelContainer);
+
+ var paper = new Raphael(document.getElementById($(this).attr('id')),width,height+5);
+
+ /* SeuratJS code */
+ paper.seurat({ imageSource: $(this).attr('src')});
+ });
+ });
+ </script>
+</head>
+<body>
+ <h1>SeuratJS &mdash; Circles</h1>
+ <div class="row">
+ <div class="span9">
+ <pre><img src="imgs/gray-weather.png" id="ex1" class='seuratjs-example' /></pre>
+ </div>
+ <div class="span7">
+ <p>Let's round this image out: </p>
+ <pre>paper.seurat({imageSource:'imgs/gray-weather.png'});</pre>
+ <p><span class="label notice">Note</span> <strong>paper</strong> is a Rapha&euml;l canvas object as defined <a href="http://raphaeljs.com/reference.html#Raphael">here</a>.</p>
+ <p><span class="label important">Chrome Users</span> Because SeuratJS uses the HTML5 canvas element if you are attempting to debug from file:// as opposed to a local webserver you will need to run Chrome using the <b>--allow-file-access-from-files</b> flag. More info <a href="http://joshuamcginnis.com/2011/02/28/how-to-disable-same-origin-policy-in-chrome/" target="_blank">here</a>.</p>
+ </div>
+ </div>
+</body>
+</html>
@@ -0,0 +1,4 @@
+.seuratjs-example{ cursor:pointer; }body{
+ font-family: 'Droid Sans', 'Helvetica', Arial, sans-serif;
+ margin:5px;
+}
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>SeuratJS &mdash; Generation</title>
+
+ <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script type="text/javascript" src="../seurat.js"></script>
+ <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
+ <link rel="stylesheet" type="text/css" href="examples.css" />
+ <script type="text/javascript">
+ var map;
+ $(document).ready(function(){
+ $('.seuratjs-example').click(function(){
+ var width = $(this).width(); var height = $(this).height();
+
+ /* We are replacing the original image with a div that will serve as Raphael's container. */
+ var raphaelContainer = $('<div id="'+$(this).attr('id')+'"></div>')
+ .width(width)
+ .height(height);
+ $(this).replaceWith(raphaelContainer);
+
+ var paper = new Raphael(document.getElementById($(this).attr('id')),width,height+5);
+
+ /* SeuratJS code */
+ paper.seurat({ imageSource: 'imgs/eiffle-tower.png',
+ generator: function(ppr,x,y,color,step,attributes){
+ return ppr.circle(Math.random()*x, Math.random()*y, Math.random()*7)
+ .attr({fill: color}).attr(attributes);
+ },
+ animator: function(elm, x,y,step){elm.animate(Raphael.animation({r: 10,cx: x+step/2,cy: y+step/2}, 2e3));}
+ });
+ });
+ });
+ </script>
+</head>
+<body>
+ <h1>SeuratJS &mdash; Generation</h1>
+ <div class="row">
+ <div class="span9">
+ <pre><img src="imgs/eiffle-tower.png" id="ex1" class='seuratjs-example' /></pre>
+ </div>
+ <div class="span7">
+ <p>The <b>generator</b> function allows for the ultimate level of flexibility in SeuratJS and provides the ability to create jaw-dropping animations. Using the generator you can alter everything from the sample coordinates (<b>x</b>,<b>y</b>) to the <b>color</b>.
+ As a result you are responsible for generating a Rapha&euml;l element (use <b>ppr</b> which is your current Rapha&euml;l canvas) and returning it. You can see more great examples of using generators at <a href='http://seuratjs.com' target='_blank'>SeuratJS Website</a>.</p>
+ <pre>
+paper.seurat({ imageSource: 'imgs/eiffle-tower.png',
+ generator: function(ppr,x,y,color,step,attributes){
+ return ppr.circle(Math.random()*x,
+ Math.random()*y, Math.random()*7)
+ .attr({fill: color}).attr(attributes);
+ },
+ animator: function(elm, x,y,step){
+ elm.animate(
+ Raphael.animation({r: 10,
+ cx: x+step/2,cy: y+step/2}, 2e3));}
+});
+</pre>
+ <p><span class="label notice">Note</span> <strong>paper</strong> is a Rapha&euml;l canvas object as defined <a href="http://raphaeljs.com/reference.html#Raphael">here</a>.</p>
+ <p><span class="label important">Chrome Users</span> Because SeuratJS uses the HTML5 canvas element if you are attempting to debug from file:// as opposed to a local webserver you will need to run Chrome using the <b>--allow-file-access-from-files</b> flag. More info <a href="http://joshuamcginnis.com/2011/02/28/how-to-disable-same-origin-policy-in-chrome/" target="_blank">here</a>.</p>
+ </div>
+ </div>
+</body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>SeuratJS &mdash; Squares</title>
+
+ <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script type="text/javascript" src="../seurat.js"></script>
+ <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
+ <link rel="stylesheet" type="text/css" href="examples.css" />
+ <script type="text/javascript">
+ var map;
+ $(document).ready(function(){
+ $('.seuratjs-example').click(function(){
+ var width = $(this).width(); var height = $(this).height();
+
+ /* We are replacing the original image with a div that will serve as Raphael's container. */
+ var raphaelContainer = $('<div id="'+$(this).attr('id')+'"></div>')
+ .width(width)
+ .height(height);
+ $(this).replaceWith(raphaelContainer);
+
+ var paper = new Raphael(document.getElementById($(this).attr('id')),width,height+5);
+
+ /* SeuratJS code */
+ paper.seurat({ imageSource: 'imgs/fort-samson.png', shape: "rect"});
+ //paper.seurat({ imageSource: $(this).attr('src')});
+ });
+ });
+ </script>
+</head>
+<body>
+ <h1>SeuratJS &mdash; Squares</h1>
+ <div class="row">
+ <div class="span9">
+ <pre><img src="imgs/fort-samson.png" id="ex1" class='seuratjs-example' /></pre>
+ </div>
+ <div class="span7">
+ <p>Seurat can do sharp edges too providing a great looking pixelization effect. Just set the <strong>shape</strong> object to <strong>'rect'</strong> to override the default <strong>'circ'</strong> option.</p>
+ <pre>
+paper.seurat({ imageSource: 'imgs/fort-samson.png',
+ shape: 'rect'});</pre>
+ <p><span class="label notice">Note</span> <strong>paper</strong> is a Rapha&euml;l canvas object as defined <a href="http://raphaeljs.com/reference.html#Raphael">here</a>.</p>
+ <p><span class="label important">Chrome Users</span> Because SeuratJS uses the HTML5 canvas element if you are attempting to debug from file:// as opposed to a local webserver you will need to run Chrome using the <b>--allow-file-access-from-files</b> flag. More info <a href="http://joshuamcginnis.com/2011/02/28/how-to-disable-same-origin-policy-in-chrome/" target="_blank">here</a>.</p>
+ </div>
+ </div>
+</body>
+</html>

0 comments on commit f95d369

Please sign in to comment.