<div style="margin: 0px 2px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="margin: 0px 1px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="padding: 4px; background-color: #c3d9ff;"><h3 style="margin:0px 3px;font-family:sans-serif">Sent to you by ddn123456 via Google Reader:</h3></div>
<div style="margin: 0px 1px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="margin: 0px 2px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="font-family:sans-serif;overflow:auto;width:100%;margin: 0px 10px"><h2 style="margin: 0.25em 0 0 0"><div class=""><a href="http://www.pythian.com/news/15485/easy-knitting-pattern-generation/">Easy Knitting Pattern Generation</a></div></h2>
<div style="margin-bottom: 0.5em">via <a href="http://www.pythian.com/news" class="f">The Pythian Blog</a> by Yanick Champoux on 12/08/10</div><br style="display:none">
<div style="float:right;padding:15px">
<img src="http://babyl.dyndns.org/techblog/entry/knitting-pattern/files/vignette.png" alt="Onion pattern">
</div>
<p><em>This blog entry is based on true events. Only the pattern has been modified to protected the innocent.</em></p>
<p>A few days ago, I was quietly minding my own business when I noticed something from the corner of my eyes. Strangely, the Knitting Goddess who happens to share my abode did not have the usual mad whirlwind of knitting needles and yarn in her lap. Instead, she was hunched over a pad of paper, a serious crease between her eyebrows, and the pink tip of a tongue sticking out between lips taut with concentration. Curiosity got the better of me. I pushed my chest out and strutted in her direction. Once by her side, I nonchalently rested my elbow on my knee, and asked with a low, husky voice: “Whatchadoing?”.</p>
<p><span></span></p>
<p>The gentle lady looked up at me in surprise, and coyly admitted that she was working on designing a ruana pattern. Engrossing work without a doubt, but — and that she confessed with a demure blush — quite onerous and time consuming.</p>
<p>That got me thinking. Absentmindely scratching the stubbles on my chin, I pensively peered into the distance. Those patterns — I mused aloud — they’re nothing but grids, right? A variation on regular digital images. Surely, yes surely, some judicious hacking could help ease this most delectable damsel in distress? </p>
<p>Hearing this, the lovely lass’s eyes widened and, clasping her hands to her bosom, she exclaimed that such help would rock most wickedly indeed. Incensed by her enthusiasm, I promptly decided to take up the challenge. Thus an alliance was forged between the queen of crafts and myself, joining our thinking caps to come up with a better way to create new knitting patterns.</p>
<p>As a first step, we chose the image that would serve as the base for the pattern. For the good of the retelling of this tale, let’s say it was </p>
<p><img src="http://babyl.dyndns.org/techblog/entry/knitting-pattern/files/original.png"></p>
<p>I asked the delightful artist to open that image in her favorite image editor and to scale it such that one pixel would correspond to one square of the pattern. Also, the number of colors had to be reduced to the one wanted for the pattern — in our case, that was a very easy black. That doctoring done, the result was saved in a <code>png</code> format.</p>
<p><img src="http://babyl.dyndns.org/techblog/entry/knitting-pattern/files/pixelized.png"></p>
<p>Thus far, my pretty partner in crime had been manning the keyboard. With a dramatic flourish of the arms, I announced that here was were I entered the picture. The <code>png</code> image file technically had all the information required for the pattern. Now all I had to do was to take that information and massage it into a prettier format. First things first, thought. How to extract the data? I opted for <a href="http://search.cpan.org/dist/GD">GD</a>.</p>
<pre>
#!/usr/bin/perl
use strict;
use warnings;
use 5.10.0;
use GD;
use List::Util qw/ sum /;
my $img = GD::Image->newFromPng('onion.png');
my ( $width, $height ) = $img->getBounds;
for $y ( 0 .. $height - 1 ) {
for $x ( 0 .. $width - 1 ) {
# we know it's black or white, so I can be lazy
my $color = sum $img->rgb( $img->getPixel( $x, $y ) );
say "cell $x, $y is ", $color ? 'white' : 'black';
}
}
</pre>
<p>So far, so good. Now, which format should be used for the final pattern? Initially, I thought of being cute and to generate HTML:</p>
<pre>
#!/usr/bin/perl
use 5.10.0;
use GD;
use List::Util qw/ sum /;
my $img = GD::Image->newFromPng(shift) or die;
my ( $width, $height ) = $img->getBounds;
say <<'END';
<html>
<head>
<style>
td {
width: 1em;
height: 1em;
padding: 1px;
border: solid 1px lightgrey;
}
td.cell-white { background: white }
td.cell-black { background: black }
</style>
</head>
<body>
<table>
END
say "<table>";
for $y ( 0 .. $height - 1 ) {
say "<tr>";
for $x ( 0 .. $width - 1 ) {
my $color = sum $img->rgb( $img->getPixel( $x, $y ) );
my $class = 'cell-' . ( $color ? 'white' : 'black' );
say "<td class='$class'>&nbsp;</td>";
}
say "</tr>";
}
say "</table></body></html>";
</pre>
<p>The resulting <a href="http://babyl.dyndns.org/techblog/entry/knitting-pattern/files/onion.html">html output</a> worked, but didn’t scale too well for big patterns. Browsers, for some reason, didn’t take too well to tables with tens of thousands of cells. The wussies. </p>
<p>Oh well. SVG might do the trick, then?</p>
<pre>
#!usr/bin/perl
use strict;
use warnings;
use SVG;
use GD;
use List::Util qw/ sum /;
my $img = GD::Image->newFromPng(shift) or die;
my ( $nbr_cols, $nbr_rows ) = $img->getBounds;
my $sq_unit = 16;
my $width = $sq_unit * $nbr_cols;
my $height = $sq_unit * $nbr_rows;
my $svg = SVG->new( width => $width, height => $height );
for my $r ( 0 .. $nbr_rows ) {
$svg->line(
x1 => 0,
x2 => $width,
y1 => $r * $sq_unit,
y2 => $r * $sq_unit,
style => { stroke => 'rgb(10,10,10)', } );
}
for my $c ( 0 .. $nbr_cols ) {
my $x = $c * $sq_unit;
$svg->line(
y1 => 0,
y2 => $height,
x1 => $x,
x2 => $x,
style => { stroke => 'rgb(10,10,10)', } );
}
for my $y ( 0 .. $nbr_rows - 1 ) {
for my $x ( 0 .. $nbr_cols - 1 ) {
next if ( sum $img->rgb( $img->getPixel( $x, $y ) ) ) == 255 * 3;
my $color =
"rgb(" . ( join ',', $img->rgb( $img->getPixel( $x, $y ) ) ) . ')';
$svg->rect(
x => $sq_unit * $x + 3,
y => $sq_unit * $y + 3,
width => $sq_unit - 6,
height => $sq_unit - 6,
style => { fill => $color, } );
}
}
print $svg->xmlify;
</pre>
<p>That gave a <a href="http://babyl.dyndns.org/techblog/entry/knitting-pattern/files/onion.svg">much better result</a>, but the larger patterns were still somewhat of a challenge for the renderer. So, at last, I opted for the most reasonable option: a plain old image. The pattern had been born as a <code>png</code>, and it seemed destined to stay a <code>png</code>. Albeit a cuter one.</p>
<pre>
#!usr/bin/perl
use strict;
use warnings;
use GD;
my $filename = shift;
my $img = GD::Image->newFromPng($filename) or die;
$filename =~ s/(\.png)/_pattern$1/;
my ( $nbr_cols, $nbr_rows ) = $img->getBounds;
my $sq_unit = 16;
my $sq_margin = 3;
my $page_margin = 40;
my $width = 2 * $page_margin + $sq_unit * $nbr_cols;
my $height = 2 * $page_margin + $sq_unit * $nbr_rows;
my $pattern = GD::Image->new( $width, $height );
# a few colors we'll need
my $grey = $pattern->colorAllocate( (200) x 3 );
my $darkgrey = $pattern->colorAllocate( (100) x 3 );
my $white = $pattern->colorAllocate( 255, 255, 255 );
my $black = $pattern->colorAllocate( 123, 0, 0 );
# the canvas
$pattern->filledRectangle( 0, 0, $width, $height, $white );
for my $r ( 0 .. $nbr_rows ) {
my $y = $r * $sq_unit + $page_margin;
$pattern->line( $page_margin, $y, $width - $page_margin,
$y, ( $nbr_rows - $r ) % 5 ? $grey : $darkgrey );
}
for my $c ( 0 .. $nbr_cols ) {
my $x = $c * $sq_unit + $page_margin;
# we want darker 5x5 squares
$pattern->line(
$x, $page_margin, $x,
$height - $page_margin,
( $nbr_cols - $c ) % 5 ? $grey : $darkgrey
);
}
my %rgbs;
for my $y ( 0 .. $nbr_rows - 1 ) {
for my $x ( 0 .. $nbr_cols - 1 ) {
my $rgb = join ":", $img->rgb( $img->getPixel( $x, $y ) );
$pattern->filledRectangle(
$page_margin + $sq_unit * $x + $sq_margin,
$page_margin + $sq_unit * $y + $sq_margin,
( $page_margin + ($sq_unit) * ( 1 + $x ) - $sq_margin ),
( $page_margin + ($sq_unit) * ( 1 + $y ) - $sq_margin ),
$rgbs{$rgb} ||= $pattern->colorAllocate( split ':', $rgb ),
);
}
}
$pattern->useFontConfig(1);
# number our rows and columns
for my $i ( 1 .. ( $nbr_cols / 5 ) ) {
$pattern->stringFT(
$black,
'/var/lib/defoma/x-ttcidfont-conf.d/dirs/TrueType/Courier_New.ttf',
10,
0,
$width - $page_margin - 5 * $i * $sq_unit - $sq_unit / 2,
,
$height - $page_margin + 15,
5 * $i
);
}
for my $i ( 1 .. ( $nbr_rows / 5 ) ) {
$pattern->stringFT(
$black,
'/var/lib/defoma/x-ttcidfont-conf.d/dirs/TrueType/Courier_New.ttf',
10,
0,
$width - $page_margin + 5,
$height - $page_margin - 5 * $i * $sq_unit,
5 * $i
);
}
open my $fh, '>', $filename;
print $fh $pattern->png;
</pre>
<p>That, finally, hit the spot just right (click on the image to see the pattern in its full-size glory):</p>
<div align="center">
<a href="http://babyl.dyndns.org/techblog/entry/knitting-pattern/files/pattern.png"><img src="http://babyl.dyndns.org/techblog/entry/knitting-pattern/files/final.png"></a>
</div>
<p>That pattern was received with squeals of glee, and I was lavished with many a reward. Among those rewards were five balls of most the delightful yarn, one of which was the perfect hue of green for that little Cthulu amigurumi project I have… Hum. Yeah… Take that as a warning, fellow hackers. For knitting creatures are of a crafty and corrupting sort. Never, and I mean <em>never</em> let them show you how to crochet. Chances are, you’ll get hooked on the spot.</p></div>
<br>
<div style="margin: 0px 2px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="margin: 0px 1px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="padding: 4px; background-color: #c3d9ff;"><h3 style="margin:0px 3px;font-family:sans-serif">Things you can do from here:</h3>
<ul style="font-family:sans-serif"><li><a href="http://www.google.com/reader/view/feed%2Fhttp%3A%2F%2Fwww.pythian.com%2Fblogs%2Ffeed?source=email">Subscribe to The Pythian Blog</a> using <b>Google Reader</b></li>
<li><a href="http://www.google.com/reader/?source=email">Get started using Google Reader</a> to easily keep up with <b>all your favourite sites</b></li></ul></div>
<div style="margin: 0px 1px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="margin: 0px 2px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>