Creating with Code

The web is a powerful toolbox

Thing-a-Day 2011 #17 - Simple Line-wrapping for Hershey JS Demo

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I’ve decided to slowly expand this drawing-stuff-in-the-browser demo, and added some simple line-wrapping to the code on my demo page:

http://schmarty.net/hershey_js_demo/

Word wrapping is an interesting topic, and I hope to get this cleaned up a bit with features like breaking up words if they are too long, improving the algorithm to make nicer “squared” paragraphs, etc.

Line_wrapping_hershey_js

Thing-a-Day 2011 #16 - Live Demo of Hershey Fonts in Javascript

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I made this demo a while ago to test out my ability to render Hershey text with JavaScript, but it is kind of a fun toy, so today I put it online for you folks to play with.

It’s a simple HTML and JS page powered by jQuery (for awesomeness) and Raphael,js (for SVG drawing). As always Hershey fonts are interesting.

You can find the demo here: http://schmarty.net/hershey_js_demo/

Hershey_js_demo

Thing-a-Day 2011 #14 - Sticky Note Tweet Template for Unicorn

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I’ve been toying with the idea of cool automatically generated plots for the Unicorn pen plotter. This one is an experiment in laying out a tweet for plotting on a sticky note.

It should be possible, layer, to use this as a template for creating new plots! Could be kind of fun.

Feel free to grab the file on Thingiverse.

http://www.thingiverse.com/thing:6425

Tweet

Thing-a-Day 2011 #12 - Blackout Dinner

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

This is a bit silly, but sometimes thing-a-days can be silly, right?

The power in our apartment building went out while I was making dinner. The rice managed to mostly finish, so I decided I’d heat up this pouch of kidney bean curry over a candle. The aluminum pouch spreads the heat nicely, I just need to pick it up and squish the contents around every couple of minutes to make sure everything is heated evenly.

Photo

Thing-a-Day 2011 #10 - a Lot More Baltimore Node Ping-pong Balls

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

Because… it’s fun!

Node_ballz

I took my EggBot to the Baltimore Node this evening and plotted out a bunch of ping pong balls with our logo in 2-colors.

EggBotting is kind of zen.

Thing-a-Day 2011 #9 - Plots of the 2-color Baltimore Node Logo!

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

I made this version of the Baltimore Node logo the other day in Inkscape, but wasn’t at home to test it. Here are the resulting plots on both EggBot and Unicorn!

The Unicorn version came out a little messed up due to my sizing the file wrong - the pen went off the edge of my sticky note pad and mussed everything up. I resized the plot to fit the sticky note fine, but had some pen registration issues with the now-crumpled sticky note pad. I’ll probably try this again later with some nicer stock.

New files and more detailed description over on Thingiverse.

Node-2-color-eggbot
Node-2-color-unicorn

Thing-a-Day 2011 #8 - Hershey Font Rendering in JavaScript With Raphaël

This post used to be on Posterous. I rescued my posts before Posterous shut down and am now sharing them here.

After exporting a bunch of Hershey vector fonts to SVG the other day, I was concerned that the next step in using them in a program would be painful. Specifically, I expected to have to create a mapping from each ASCII character I care about to the individual glyphs that represent them.

Halfway through a couple of different strategies for making the mapping easy, I realized that these fonts are, for the most part, already aligned with ASCII.  So, the “space” character (ASCII 32) is the first glyph in most of the Hershey fonts, and the other characters follow thereafter. So to get the glyph for a given ASCII, I just have to pull it out of the array at glyph[character - 32].

My code for this is starting to take shape, but it’s not useful (or clean) enough to share, yet. Still, it is worth a nice picture:

Hershey_fonts_in_js

I’m having a really good time doing Thing-a-Day. It’s been very challenging to find the time to keep going, but each time I do I am quite happy with what I’m able to produce. The undeniably awesome part is that these things are all adding up to bigger projects I would have never had time to tackle, otherwise!

Update: I could not resist adding a text field and going crazy with live rendering:

Hershey_font_js_lulz