Permalink
Browse files

v1.0

  • Loading branch information...
1 parent aa4b15f commit 48bb839d30f5f61d6437566a180e748f58556279 @matthewlein committed Apr 11, 2011
Showing with 820 additions and 58 deletions.
  1. +18 −5 cicada.js → cicada.1.0.js
  2. +14 −0 cicada.1.0.min.js
  3. +0 −53 cicada.html
  4. +80 −0 cicadaCircle.js
  5. +392 −0 css/style.css
  6. +126 −0 demos/bg-random.html
  7. +171 −0 index.html
  8. +19 −0 readme.md
@@ -1,3 +1,16 @@
+/*
+ * cicadaJS
+ * matthewlein.com/cicadajs
+ *
+ * Developed by Matthew Lein
+ * matthewlein.com
+ *
+ * Released under the MIT license.
+ * Please leave this license info and author info intact.
+ *
+ * Copyright 2011
+ */
+
var cicada = {
supportsCanvas : function() {
@@ -31,7 +44,7 @@ var cicada = {
if (alignment === 'middle') {
offset = stripeWidth/2;
} else if (alignment === 'right') {
- offset = stripeWidth
+ offset = stripeWidth;
}
for (var i=0; i < repeats; i++) {
@@ -41,14 +54,14 @@ var cicada = {
var lingrad = ctx.createLinearGradient( (tile * i) + offset, 0, (tile * i) + offset + stripeWidth, 0),
//get the number of color stops needed
- stopAmount = 1 / (current.color.length - 1 )
+ stopAmount = 1 / (current.color.length - 1 );
// put in the color stops evenly across the rectangle
for (var k=0; k < current.color.length; k++) {
lingrad.addColorStop( stopAmount * k , current.color[k] );
}
- ctx.fillStyle = lingrad
+ ctx.fillStyle = lingrad;
} else {
// its a plain old string color
@@ -64,10 +77,10 @@ var cicada = {
}
-}
+};
if ( cicada.supportsCanvas ) {
- // prototype the cicada method onto canvases
+ // prototype the cicada method onto canvas
HTMLCanvasElement.prototype.cicada = function ( options ) {
// pass in the img and options
cicada.stripe( this, options );
View
@@ -0,0 +1,14 @@
+/*
+ * cicadaJS
+ * matthewlein.com/cicadajs
+ *
+ * Developed by Matthew Lein
+ * matthewlein.com
+ *
+ * Released under the MIT license.
+ * Please leave this license info and author info intact.
+ *
+ * Copyright 2011
+ */
+
+var cicada={supportsCanvas:function(){var a=document.createElement("canvas");return !!(a.getContext&&a.getContext("2d"));},isArray:function(a){return a&&!(a.propertyIsEnumerable("length"))&&typeof a==="object"&&typeof a.length==="number";},stripe:function(b,s){var r=b.getContext("2d"),c=b.width,n=b.height;for(var f=0;f<s.length;f++){var m=s[f],o=m.alignment||"left",l=m.width,p=Math.ceil(l/2),h=c/l,e=0;if(o==="middle"){e=p/2;}else{if(o==="right"){e=p;}}for(var g=0;g<h;g++){if(cicada.isArray(m.color)){var a=r.createLinearGradient((l*g)+e,0,(l*g)+e+p,0),q=1/(m.color.length-1);for(var d=0;d<m.color.length;d++){a.addColorStop(q*d,m.color[d]);}r.fillStyle=a;}else{r.fillStyle=m.color;}r.fillRect((l*g)+e,0,p,n);}}}};if(cicada.supportsCanvas){HTMLCanvasElement.prototype.cicada=function(a){cicada.stripe(this,a);};}
View
@@ -1,53 +0,0 @@
-<!DOCTYPE HTML>
-<html lang="en-US">
-<head>
- <meta charset="UTF-8">
- <title></title>
-
- <style>
-
-#pattern {
- background-image: url(images/29-a.png),url(images/37-a.png), url(images/53-a.png);
- width: 800px;
- height: 500px;
-}
- </style>
-
-
-</head>
-<body>
-
- <div id="pattern"></div>
- <canvas id="stripes" width="800" height="500"></canvas>
-
- <script src="cicada.js"></script>
-
-<script>
-
-
-var cancan = document.getElementById('stripes')
-
-cancan.cicada([
- {
- width:53,
- color: [ 'rgba(239, 234, 211, 0.5)', 'rgba(191, 169, 124, 0.5)' ],
- alignment: 'middle'
- },{
- width: 37,
- color: 'rgba(145, 0, 42, 0.5)',
- alignment: 'left'
- },{
- width: 29,
- color: [ 'rgba(125, 167, 180, 0.5)', 'rgba(75, 119, 130, 0.5)' ],
- alignment: 'left'
- }
-])
-
-
-
-
-
-</script>
-
-</body>
-</html>
View
@@ -0,0 +1,80 @@
+var cicada = {
+
+ supportsCanvas : function() {
+ var elem = document.createElement( 'canvas' );
+ return !!(elem.getContext && elem.getContext('2d'));
+ },
+
+ // nabbed from http://www.hunlock.com/blogs/Mastering_Javascript_Arrays#quickIDX34
+ isArray : function(testObject) {
+ return testObject && !(testObject.propertyIsEnumerable('length')) && typeof testObject === 'object' && typeof testObject.length === 'number';
+ },
+
+ stripe : function(canvas, options) {
+
+ var ctx = canvas.getContext('2d'),
+ cWidth = canvas.width,
+ cHeight = canvas.height;
+
+ for (var j=0; j < options.length; j++) {
+
+ var current = options[j],
+
+ // default to left
+ alignment = current.alignment || 'left',
+
+ tile = current.width,
+ stripeWidth = Math.ceil(tile/2),
+ repeats = cWidth / tile,
+ offset = 0;
+
+ if (alignment === 'middle') {
+ offset = stripeWidth/2;
+ } else if (alignment === 'right') {
+ offset = stripeWidth;
+ }
+
+ for (var i=0; i < repeats; i++) {
+
+ if ( cicada.isArray(current.color) ) {
+ // I'm hoping its an array of colors
+ var lingrad = ctx.createLinearGradient( (tile * i) + offset, 0, (tile * i) + offset + stripeWidth, 0),
+
+ //get the number of color stops needed
+ stopAmount = 1 / (current.color.length - 1 );
+
+ // put in the color stops evenly across the rectangle
+ for (var k=0; k < current.color.length; k++) {
+ lingrad.addColorStop( stopAmount * k , current.color[k] );
+ }
+
+ ctx.fillStyle = lingrad;
+
+ } else {
+ // its a plain old string color
+ ctx.fillStyle = current.color;
+ }
+
+ ctx.beginPath();
+ ctx.arc((tile * 4 * i) + offset, 100, tile, 0, Math.PI*2, true);
+ ctx.closePath();
+ ctx.fill()
+
+ //ctx.fillRect( (tile * i) + offset , 0, stripeWidth, cHeight);
+
+ }
+
+ }
+
+ }
+
+
+};
+
+if ( cicada.supportsCanvas ) {
+ // prototype the cicada method onto canvas
+ HTMLCanvasElement.prototype.cicada = function ( options ) {
+ // pass in the img and options
+ cicada.stripe( this, options );
+ };
+}
Oops, something went wrong.

0 comments on commit 48bb839

Please sign in to comment.