Posts tagged 'javascript'

Thing-a-Day 2011 #26 - "Improved" scribbling in JavaScript

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

I played with the mouse coordinate handling a bit to try and compensate for the rotation, but it's still not great. For some reason, up-and-down movements seem to track well, but left-right movement causes the drawing point to move up and down relative to the cursor.

My guess is that I am just being bad at "the maths" and that I'll get it figured out later. :)

Derp

Play here: http://schmarty.net/hershey_js_demo/

Thing-a-Day 2011 #25 - Scribbling in SVG (+Hershey font typing)

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

Added some scribbling to my little JavaScript app, which also gets saved to the SVG.

It's not great (my insistence on making these things map to the sticky note image means they don't line up right with the mouse), but it works!

Scribbs

As before, you can play with it here: http://schmarty.net/hershey_js_demo/

Thing-a-Day 2011 #23 - SVG Output for 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 really wanted to get SVG manipulation going in this demo, so I have ported the rendering (once again), this time using the jQuery SVG lib, which is really nice and easy to use: http://keith-wood.name/svg.html

Hershey-js-svg-output

You can play with it here: http://schmarty.net/hershey_js_demo/index.html

Thing-a-Day 2011 #22 - Hershey Fonts in JS - on a Sticky Note!

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

Ok, this is more a kind of clever image arrangement than anything else, but it looks nice, I think.

Writing_on_a_sticky_note

You can play with it here: http://schmarty.net/hershey_js_demo/index.html

Until I change it again!

Thing-a-Day 2011 #21 - Auto-scaling 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.

Ok, this is kind of fun, even though the code is very naive.

I've added a height-check at the end of my line-breaking code. If there are too many lines of text to fit within the allowed space, the algorithm will rescale everything and try again:

Auto_scale_hershey_js

This isn’t great for real-time text flow, but it is fine for fitting text, I think.

Thing-a-Day 2011 #20 - Hershey fonts in JavaScript on the canvas

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

I haven't been making as much progress on my "draw things in the browser so a robot can draw them on the Unicorn" project, so I decided to take a stab at cleaning things up a little to make that easier.

Today I rewrote my little demo to use canvas 2D instead of Raphael.js.  It looks the same, for the most part:

Hershey_js_canvas

But being in canvas land instead of Raphael land means I can do real stacked transforms easily, without having to keep track of them myself. For instance: ROTATION!

Canvas_rotated

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