Generative SVGs for engraving

Hey all!

One of the things I do in my spare time is make lots of generative/algorithmic art with code, using tools like Processing, openFrameworks, etc.

I recently released the code for an app that will load a photo and create a sort-of halftone image using sine waves. That is, the brightness/darkness of the image will increase or decrease the amplitude of a sine wave as it goes across the image. It’s easier to see the example below. The output of the app is a SVG file.

I originally created this app a few years ago for my WatercolorBot, and enhanced it more recently for the AxiDraw (both from Evil Mad Scientist Labs, and both which use SVGs for drawing), but after I released the code I started seeing traffic from a laser cutter forum where users have been using the SVGs to engrave both wood and acrylic.

Since I still don’t have my :glowforge: I hadn’t thought about this one for laser cutting (out of sight, out of mind :wink: ), but the samples I’ve seen on other lasers have come out looking great.

So - here’s a link to the Processing code on Github: GitHub - gwygonik/SquiggleDraw: Processing app to create an SVG based on the brightness of an image transformed into sine waves.

If you have questions, or need help running it, feel free to ask. I am working on some generative apps specifically for cutting/engraving, so once I have a device to experiment with, I’ll post more.

Example kitten:

107 Likes

I freaking love this. Got some learning to do. Thanks for sharing!

9 Likes

That’s awesome!

7 Likes

Wow, that’s unbelievable! Thanks for sharing the code! :sunglasses:

7 Likes

Thanks for the program, really like the kitten.

7 Likes

A really impressive form of art! Bookmarked. :relaxed::+1:

6 Likes

Super interesting @gwygonik. How do you run the program on a Mac?

6 Likes

What an incredible idea! Thank you for sharing this.

3 Likes

Good god that’s fantastic!

5 Likes

Very cool! Thanks for sharing!

4 Likes

Great job with the code…if you hadn’t mentioned it I would have missed the squigly lines as reference…thank you…bookmarked.

7 Likes

Wow - thanks everyone! I’m happy to see folks digging this; I normally make all my stuff just to try things and learn from it, or just to amuse myself. It’s always exciting when other people like it too :blush:

For @timtsuga and others wanting to get this running, there are a few simple things to do:

  • First, you have to install Processing (https://processing.org/download/)
    Note: you don’t have to donate to download - just choose “No Donation”

  • Launch Processing

Processing uses “Libraries” of external code for some things, and I used a library for the UI. Since the library is maintained by someone else, I don’t include it with my app. So to install this library:

  • In the Sketch menu, select: Import Library -> Add Library…

  • Scroll down the list of Libraries in the window that opens, or use the search field to find “ControlP5” and select “Install”. After it is done installing (shouldn’t be more than a few seconds) you can close the Library window.

That’s it for getting Processing ready. Now, to get the code:

  • Go to my github repository (https://github.com/gwygonik/SquiggleDraw)

  • On the right side is a green button “Clone or download”. Click it!

  • In the pop-up menu that opens, choose “Download ZIP” and save it somewhere you want

  • Unzip the file and it will create a folder named “SquiggleDraw-master”

  • Rename the folder to just be “SquiggleDraw”

  • Double-click the “squiggledraw.pde” file inside that and it will open in Processing

  • Click the “Run” button at the top of the Processing code window (it looks like a video Play button :arrow_forward:)

The app should run without issue, and you should see the UI and a sample image. You can now load images, tweak parameters, and then click the “Save SVG” button to have a file to do whatever with :metal:

If the app does NOT run, there would be errors in red below the code. Message me with what that says and I’ll try to help out. Every machine is different, so I can’t say if there are problems with your setup or any “known issues” – it works for me :stuck_out_tongue_winking_eye:

37 Likes

That is a very innovative method of imagery!
So good of you to share that! Bookmarked :+1:

8 Likes

Thank you for sharing that. I have it bookmarked for later. Can’t wait to try it out.

3 Likes

I’ve seen a picture done from a person’s heartbeat but not a sine wave. Interesting and very cool. The sine wave is low amplitude where dark pixels and high amplitude where light pixels (somewhat simplified). Thanks for sharing and we look forward to more posts when the GF comes. - Rich

1 Like

@gwygonik I kind of collect dithering tools and algorithms and this is the first time I have ever seen sine waves used! Very nicely done and the results are lovely.

Do you have an open source license in mind?

5 Likes

Forked!

2 Likes

This is truly wonderful. Writing and sharing code (and other art forms), the whole attitude of “I love doing this/making this, and it’s a thrill when other people find it useful” is one of the greatest things about our modern world. Simply put - you rock. :thumbsup:

10 Likes

This is what I wanted to say! Thank you!

2 Likes

No license for this… Public domain FTW!

The code is naïve and the idea was obvious (at least to me :wink:). I typically only do OSS licenses on physical designs (normally CC, non-commercial, share-alike – or some variation) but we’ve seen how that doesn’t even matter to folks.

I lose no sleep if someone claims it as their own, as I’ve already moved on to other things. :smile:

13 Likes