Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Better styling and more control with CSS. New config option. Works in…

… Images.
  • Loading branch information...
commit 91ada6cd50886e16cb6a714d9cc5f220ef044e4f 1 parent 14ef4fc
@jamescryer authored
View
160 artify.css
@@ -1,42 +1,154 @@
.artify-drop-zone{
- border: 10px dashed #ccc;
- color: #ccc;
- font-size: 32px;
- height: 400px;
- line-height: 400px;
- text-align: center;
- width: 400px;
+ border: 10px dashed #ccc;
+ color: #ccc;
+ font-size: 32px;
+ height: 400px;
+ line-height: 400px;
+ text-align: center;
+ width: 400px;
+ }
+ .artify-drop-zone.artify-drag-over{
+ border: 10px dashed #0088CC;
}
- .artify-drop-zone.artify-drag-over{
- border: 10px dashed red;
- }
.artify {
- position: relative;
+ position: relative;
+ overflow: hidden;
}
.artify span {
display:block;
float:left;
- background: blue;
- -moz-transform: rotate(270deg);
- -webkit-transform: rotate(270deg);
- transform: rotate(270deg);
- -moz-transition: all 0.4s ease-in-out 0s;
- -webkit-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s;
- border-radius: 100% 0 0 0;
+ background: #228751;
}
-.artify span:nth-child(n) {
+/* shades */
+
+.artify .shade-0{
+ opacity: 0;
+ }
+.artify .shade-1{
+ opacity: 0.1;
+ }
+.artify .shade-2{
+ opacity: 0.2;
+ }
+.artify .shade-3{
+ opacity: 0.3;
+ }
+.artify .shade-4{
+ opacity: 0.4;
+ }
+.artify .shade-5{
+ opacity: 0.5;
+ }
+.artify .shade-6{
+ opacity: 0.6;
+ }
+.artify .shade-7{
+ opacity: 0.7;
+ }
+.artify .shade-8{
+ opacity: 0.8;
+ }
+.artify .shade-9{
+ opacity: 0.9;
+ }
+.artify .shade-10{
+ opacity: 1;
+ }
+
+.artify.inverse .shade-0{
+ opacity: 1;
+ }
+.artify.inverse .shade-1{
+ opacity: 0.9;
+ }
+.artify.inverse .shade-2{
+ opacity: 0.8;
+ }
+.artify.inverse .shade-3{
+ opacity: 0.7;
+ }
+.artify.inverse .shade-4{
+ opacity: 0.6;
+ }
+.artify.inverse .shade-5{
+ opacity: 0.5;
+ }
+.artify.inverse .shade-6{
+ opacity: 0.4;
+ }
+.artify.inverse .shade-7{
+ opacity: 0.3;
+ }
+.artify.inverse .shade-8{
+ opacity: 0.2;
+ }
+.artify.inverse .shade-9{
+ opacity: 0.1;
+ }
+.artify.inverse .shade-10{
+ opacity: 0;
+ }
+
+
+/*color swatch*/
+
+.artify.neutral span {
+ background: #00a287;
+ }
+.artify.neutral span:nth-child(2n) {
+ background: #4c59d8;
+ }
+.artify.neutral span:nth-child(3n) {
+ background: #408ad2;
+ }
+.artify.neutral span:nth-child(5n) {
+ background: #228751;
+ }
+
+.artify.warm span {
+ background: #ff3500;
+ }
+.artify.warm span:nth-child(2n) {
+ background: #a64b00;
+ }
+.artify.warm span:nth-child(3n) {
+ background: #ff9a00;
+ }
+.artify.warm span:nth-child(5n) {
+ background: #ff7400;
+ }
+
+
+/* effects */
+
+.artify.spot span{
+ border-radius: 50%;
+ outline: 1px solid white;
+ }
+
+.artify.semi span{
border-radius: 100% 0 0 0;
+ outline: 1px solid white;
}
-.artify span:nth-child(2n) {
+.artify.semi span:nth-child(2n) {
border-radius: 0 100% 0 0;
}
-.artify span:nth-child(3n) {
+.artify.semi span:nth-child(3n) {
border-radius: 0 0 100% 0;
}
-.artify span:nth-child(4n) {
+.artify.semi span:nth-child(5n) {
border-radius: 0 0 0 100%;
- }
+ }
+.artify.semi span:nth-child(8n) {
+ border-radius: 100% 0 0 0;
+ }
+.artify.semi span:nth-child(13n) {
+ border-radius: 0 100% 0 0;
+ }
+.artify.semi span:nth-child(21n) {
+ border-radius: 0 0 100% 0;
+ }
+
View
144 artify.js
@@ -2,15 +2,14 @@
'use strict';
var $ = w.jQuery,
- FileReader = w.FileReader
- ;
+ FileReader = w.FileReader,
+ Image = w.Image;
- function _generateCss3Art( sourceImageData, width, height ){
+ function _generateCss3Art( sourceImageData, width, height, random ){
- var $container = $('<div class="artify"/>'),
+ var $c = $('<div/>'),
percentileWidth = (100 / width) + '%',
- percentileHeight = (100 / height) + '%'
- ;
+ percentileHeight = (100 / height) + '%';
$.each( new Array( height ), function( verticalPos ){
@@ -22,65 +21,105 @@
blue = sourceImageData[offset + 2],
alpha = sourceImageData[offset + 3],
brightness = (0.3*red + 0.59*green + 0.11*blue) / 255,
- shade = (10 - Math.round(brightness * 10)) / 10
- ;
+ shade = (10 - Math.round(brightness * 10));
- $('<span/>').
- css({
- opacity: shade,
- width: percentileWidth,
- height: percentileHeight
- }).
- appendTo($container)
- ;
+ $c.
+ append( $('<span />').
+ addClass('shade-'+shade).
+ css({
+ width: percentileWidth,
+ height: percentileHeight
+ })
+ );
});
+
+ return true;
});
-
- return $container;
+
+ return $c.html();
}
- function _getImageData( fileData, callback ){
+ function _getArtFromData( fileData, w, h, callback ){
- var fileReader = new FileReader(),
- hiddenCanvas = $('<canvas />').css({display:'none'}).appendTo($('body')).get(0),
+ var isFileData = typeof fileData !== 'string',
+ hiddenCanvas = $('<canvas />').get(0),
canvas2dContext = hiddenCanvas.getContext('2d'),
- hiddenImage = new Image()
- ;
+ hiddenImage = new Image(),
+ fileReader;
- fileReader.readAsDataURL(fileData);
-
- fileReader.onload = function (event) {
- hiddenImage.src = event.target.result;
- };
-
hiddenImage.onload = function() {
- var width = 24,
- height = 24,
- imageData
- ;
+ var imageData,
+ $art;
- hiddenCanvas.getContext('2d').drawImage(hiddenImage, 0, 0, hiddenImage.width, hiddenImage.height, 0, 0, width, height);
- imageData = hiddenCanvas.getContext('2d').getImageData(0, 0, width, height).data;
+ hiddenCanvas.getContext('2d').drawImage(hiddenImage, 0, 0, hiddenImage.width, hiddenImage.height, 0, 0, w, h);
+ imageData = hiddenCanvas.getContext('2d').getImageData(0, 0, w, h).data;
+
+ $art = _generateCss3Art(imageData, w, h);
- callback(imageData, width, height);
+ callback($art);
};
+
+ if(isFileData){
+ fileReader = new FileReader();
+
+ fileReader.onload = function (event) {
+ hiddenImage.src = event.target.result;
+ };
+
+ fileReader.readAsDataURL(fileData);
+ } else {
+ hiddenImage.src = fileData;
+ }
}
-
- $.fn['artify'] = function(){
+
+ $.fn['artify'] = function( options ){
+
+ var size;
+
+ options = $.extend({},{
+ unitSize: 10, // size of each block
+ className: 'neutral spot'
+ },options);
+
return $(this).each(function(){
- var dropZone = $(this),
+ var $target = $(this),
dragOverClassName = 'artify-drag-over',
- dropzoneClassName = 'artify-drop-zone'
- ;
+ dropzoneClassName = 'artify-drop-zone',
+ width = $target.outerWidth(),
+ height = $target.outerHeight(),
+ widthSize = Math.floor(width / options.unitSize),
+ heightSize = Math.floor(height / options.unitSize);
+
+ function getFrame($art){
+ return $('<div class="artify"/>').
+ addClass( options.className ).
+ css({
+ width: width,
+ height: height
+ }).
+ append($art);
+ }
+
+ if(this.tagName === 'IMG'){
+ _getArtFromData(this.src, widthSize, heightSize, function($art){
+ $target.replaceWith( getFrame($art) );
+ });
+
+ return;
+ }
+
+ if(!FileReader){ // not supported by IE9
+ return;
+ }
- dropZone.
+ $target.
bind('dragover', function(){
- dropZone.addClass( dragOverClassName );
+ $target.addClass( dragOverClassName );
return false;
}).
bind("dragend", function () {
- dropZone.removeClass( dragOverClassName );
+ $target.removeClass( dragOverClassName );
return false;
}).
bind("drop", function(event) {
@@ -89,20 +128,17 @@
event.stopPropagation();
event.preventDefault();
- dropZone.removeClass( dragOverClassName );
+ $target.removeClass( dragOverClassName );
- _getImageData( file, function(){
- var $art = _generateCss3Art.apply(null, arguments);
- $art.css({
- width: dropZone.outerWidth(),
- height: dropZone.outerHeight()
- });
- dropZone.removeClass( dropzoneClassName ).html( $art );
+ _getArtFromData(file, widthSize, heightSize, function($art){
+
+ $target.
+ removeClass( dropzoneClassName ).
+ html( getFrame($art) )
+ ;
});
-
})
;
});
};
-
}(this));
View
BIN  face.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
63 index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title></title>
+ <title>Artify.js : CSS3 art generator</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="libs/twitter-bootstrap/bootstrap.min.css">
@@ -20,6 +20,11 @@
border-top: 1px solid #e5e5e5;
}
+ #example-image {
+ width: 200px;
+ border: 5px solid #e5e5e5;
+ }
+
</style>
</head>
@@ -46,11 +51,13 @@
<div class="span4">
<h2>What is this?</h2>
<p>
- Inspired by a recent experiment with <a href="http://www.thismanslife.co.uk/projects/lab/isthisart/" target="_blank">CSS3 art</a>, and a not so recent experiment with <a href="http://www.nihilogic.dk/labs/jsascii/" target="_blank">Ascii art</a>.
Artify.js is a simple jQuery plugin which allows you to transform images into art with CSS3.
</p>
<p>
- <strong>Try it for yourself</strong>, your file wont be uploaded to a server.
+ Inspired by <a href="http://www.thismanslife.co.uk/projects/lab/isthisart/" target="_blank">Is This Art</a> and <a href="http://www.nihilogic.dk/labs/jsascii/" target="_blank">JS Ascii</a>.
+ </p>
+ <p>
+ <strong>Try it for yourself.</strong>
</p>
</div>
</div>
@@ -60,7 +67,10 @@
<div class="row">
<div class="span6">
<h2>How does it work?</h2>
- <p>Artify.js uses <a href="https://developer.mozilla.org/en/Using_files_from_web_applications" target="_blank">HTML5 File API</a>, and CSS3.</p>
+ <p>
+ Artify.js uses the <a href="https://developer.mozilla.org/en/Using_files_from_web_applications" target="_blank">HTML5 File API</a>, and CSS3.
+ It only works in browsers that support the HTML5 File API, Chrome and Firefox.
+ </p>
<p>
<br/>
<a class="btn btn-large btn-primary" href="https://github.com/jamescryer/artify.js/"><strong>View project on Github</strong></a>
@@ -71,34 +81,57 @@
<p>Invoke Artify on a block element to create a drop zone</p>
<pre>
$('div#drop-zone').artify();</pre>
- <p>Calling Artify on an image will convert the image in place.</p>
-<pre>
-$('img#image-one').artify();</pre>
<p>You can provide Artify with two options</p>
<pre>
-$('img#image-one').artify({
- color: 'random', // or hex
- detail: 'medium' // low | high
+$('div#drop-zone').artify({
+ className: 'warm semi', // Apply your own styles
+ unitSize: 12 // Pixel size of each block
});</pre>
+ <br />
+ <div class="row">
+ <div class="span3">
+ <p>Calling Artify on an image will convert the image in place.</p>
+<pre>
+$('img#image-one').artify();</pre>
+ <p>Try for yourself. <button class="btn btn-success" id="convert-image">Convert image</button></p>
+ </div>
+ <div class="span3">
+ <img src="face.jpg" id="example-image"/>
+ </div>
+ </div>
+
</div>
</div>
</section>
<footer class="footer">
<p>
- Thanks everyone, I am James Cryer. <a href="https://github.com/jamescryer" target="_blank">Github</a> | <a href="https://twitter.com/jamescryer" target="_blank">Twitter</a> | <a href="http://jamescryer.wordpress.com" target="_blank">Blog</a>
+ Cheers, this was fun! I am James Cryer. <a href="https://github.com/jamescryer" target="_blank">Github</a> | <a href="https://twitter.com/jamescryer" target="_blank">Twitter</a> | <a href="http://jamescryer.wordpress.com" target="_blank">Blog</a>
</p>
</footer>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="src/artify.js"></script>
+ <script src="artify.js"></script>
- <script type="text/javascript">
+ <script>
$('#drop-zone').artify({
- color: 'random',
- detail: 'medium'
+ className: 'warm semi',
+ unitSize: 12
+ });
+
+ $('#convert-image').click(function(event){
+ event.preventDefault();
+ $('#example-image').artify();
+ $(this).unbind('click');
});
</script>
+ <script>
+ var _gaq=[["_setAccount","UA-30502807-1"],["_trackPageview"]];
+ (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
+ g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
+ s.parentNode.insertBefore(g,s)}(document,"script"));
+ </script>
+
</body>
</html>
View
42 src/artify.css
@@ -1,42 +0,0 @@
-
-.artify-drop-zone{
- border: 10px dashed #ccc;
- color: #ccc;
- font-size: 32px;
- height: 400px;
- line-height: 400px;
- text-align: center;
- width: 400px;
- }
- .artify-drop-zone.artify-drag-over{
- border: 10px dashed red;
- }
-
-.artify {
- position: relative;
- }
- .artify span {
- display:block;
- float:left;
- background: blue;
- -moz-transform: rotate(270deg);
- -webkit-transform: rotate(270deg);
- transform: rotate(270deg);
- -moz-transition: all 0.4s ease-in-out 0s;
- -webkit-transition: all 0.4s ease-in-out 0s;
- transition: all 0.4s ease-in-out 0s;
- border-radius: 100% 0 0 0;
- }
-
-.artify span:nth-child(n) {
- border-radius: 100% 0 0 0;
-}
-.artify span:nth-child(2n) {
- border-radius: 0 100% 0 0;
-}
-.artify span:nth-child(3n) {
- border-radius: 0 0 100% 0;
-}
-.artify span:nth-child(4n) {
- border-radius: 0 0 0 100%;
-}
View
108 src/artify.js
@@ -1,108 +0,0 @@
-(function(w){
- 'use strict';
-
- var $ = w.jQuery,
- FileReader = w.FileReader
- ;
-
- function _generateCss3Art( sourceImageData, width, height ){
-
- var $container = $('<div class="artify"/>'),
- percentileWidth = (100 / width) + '%',
- percentileHeight = (100 / height) + '%'
- ;
-
- $.each( new Array( height ), function( verticalPos ){
-
- $.each( new Array( width ), function( horizontalPos ){
-
- var offset = (verticalPos*width + horizontalPos) * 4,
- red = sourceImageData[offset],
- green = sourceImageData[offset + 1],
- blue = sourceImageData[offset + 2],
- alpha = sourceImageData[offset + 3],
- brightness = (0.3*red + 0.59*green + 0.11*blue) / 255,
- shade = (10 - Math.round(brightness * 10)) / 10
- ;
-
- $('<span/>').
- css({
- opacity: shade,
- width: percentileWidth,
- height: percentileHeight
- }).
- appendTo($container)
- ;
- });
- });
-
- return $container;
- }
-
- function _getImageData( fileData, callback ){
-
- var fileReader = new FileReader(),
- hiddenCanvas = $('<canvas />').css({display:'none'}).appendTo($('body')).get(0),
- canvas2dContext = hiddenCanvas.getContext('2d'),
- hiddenImage = new Image()
- ;
-
- fileReader.readAsDataURL(fileData);
-
- fileReader.onload = function (event) {
- hiddenImage.src = event.target.result;
- };
-
- hiddenImage.onload = function() {
-
- var width = 24,
- height = 24,
- imageData
- ;
-
- hiddenCanvas.getContext('2d').drawImage(hiddenImage, 0, 0, hiddenImage.width, hiddenImage.height, 0, 0, width, height);
- imageData = hiddenCanvas.getContext('2d').getImageData(0, 0, width, height).data;
-
- callback(imageData, width, height);
- };
- }
-
- $.fn['artify'] = function(){
- return $(this).each(function(){
- var dropZone = $(this),
- dragOverClassName = 'artify-drag-over',
- dropzoneClassName = 'artify-drop-zone'
- ;
-
- dropZone.
- bind('dragover', function(){
- dropZone.addClass( dragOverClassName );
- return false;
- }).
- bind("dragend", function () {
- dropZone.removeClass( dragOverClassName );
- return false;
- }).
- bind("drop", function(event) {
- var file = event.originalEvent.dataTransfer.files[0];
-
- event.stopPropagation();
- event.preventDefault();
-
- dropZone.removeClass( dragOverClassName );
-
- _getImageData( file, function(){
- var $art = _generateCss3Art.apply(null, arguments);
- $art.css({
- width: dropZone.outerWidth(),
- height: dropZone.outerHeight()
- });
- dropZone.removeClass( dropzoneClassName ).html( $art );
- });
-
- })
- ;
- });
- };
-
-}(this));
Please sign in to comment.
Something went wrong with that request. Please try again.