Posts Tagged svg

Mon Jan 28
🔖 Bookmarked Using Font Awesome Icons in Hugo | Nick Galbreath https://www.client9.com/using-font-awesome-icons-in-hugo/

“With Hugo we can preload the SVG icons, and inject them into our page with partial template or shortcode, skipping the network.”

Wed May 23
📕 Finished reading SVG Animations by Sarah Drasner

Feeling pretty empowered by understanding more of the nuts-and-bolts of working with SVGs. Inspires me to work on improving my design skills and sensibilities.

Sat Feb 26

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/

Fri Feb 25

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/

Wed Feb 23

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

Thu Jul 22

Space filling with 3D objects using Processing

While I know I should be finishing my MakerBot time-lapse camera series, I took some time for another project to play with some Processing. The above image was rendered in Processing, in real time in just couple of minutes!

Basically, I wanted to take a simple shape, defined by an SVG path, and fill it with images of 3D objects loaded from STL files. Specifically, many wonderful MakerBot-printable objects from Thingiverse!

After some Googling around, I found out that this problem is basically a space-filling problem, similar to an excellent Processing sketch named Scattered Letters by Algirdas Rascius, but with a twist.

The basic algorithm is:

  • Load an SVG and render it to an off-screen buffer
  • Set curr_size, the size that STLs should be rendered, to max_size
  • Choose a random STL model, give it a random orientation, and render it at the current size to an off-screen buffer
  • Try several times to place this model by giving it a random x,y position and checking it for a good fit:
    • Each non-background pixel of the model’s off-screen image should fit within the non-background pixels of the SVG’s off-screen image.
    • Each non-background pixel of the model’s off-screen image should NOT overlap with any non-background pixel of the main display.
  • If a fitting position is found, render the model to the display.
  • Otherwise, shrink curr_size by a step and choose a new model.
  • If we drop below min_size, we should stop.

You can find the code for my sketch, which I call ThingiverseCollage, on GitHub. To make it work, you’ll need to follow the installation instructions in the README to install my (very slightly) modified version of the unlekkerLib for STL loading and rendering. I modified it to allow rendering to a PGraphics object, since it originally only allowed rendering to the main PApplet.

A note on STL files: unlekkerLib only loads STL files in the binary format. It chokes dramatically on ASCII STL files, such as those exported from OpenSCAD. I was able to use Zaggo’s excellent Pleasant3D to load ASCII STLs and re-save them, which converts them to binary STLs. As a bonus, Pleasant3D also allows you to orient objects in a way that will make them look most interesting when they are rendered down to 2D in the final image.

An example M.svg, as well as several objects from Thingiverse are included with the code to get started. To use your own SVGs, I have had good luck using Inkscape to draw or import shapes, and save them as the native “Inkscape SVG” or “Plain SVG” formats. Some files might require hand-tweaking; for example, if the width and height header values are something like “100%” instead of a pixel value.

There is also some simple configuration in the sketch to allow the export of PDF files. This is nice because the resulting PDF has full vector data, making it easily rescaled to any size you wish. Unfortunately, the current PDF renderer for Processing renders each triangle of each STL model as a separate path, generating very complicated vector output, which tends to bring Inkscape to its knees. I have had some luck with importing those files, rastering them out to PNG at a high resolution (e.g. 600 dpi), and using Inkscape’s “Trace Bitmap” functionality to re-vectorize them, though this requires some cleanup by hand.

Anyway, this has been a fun little diversion for me for the last couple of days. I hope that you folks find it useful! Post your awesome pictures in the comments, here!