This is part of our Squiggle University tutorial series. A lucky graduate of Squiggle U will be selected to get a BANTAM TOOLS #NEXTDRAW WRITING AND DRAWING MACHINE!!! Don't forget to post the squiggles you generate on social media, tag @BantamTools & #NextDraw and email the .SVG files to Z@BantamTools.com . We will be picking some favorites and giving away... Bantam Tools Stickers & Merch, Plotted Postcards of your generations, and a #NextDraw!!!

Welcome to SquiggleDraw 103. Hopefully, you’ve already experimented with SquiggleCam, installed the Inkscape extension, and practiced selecting an image; for tips on this, see step 1 of our SquiggleCam tutorial.

SquiggleDraw originated in Processing, a flexible software sketchbook and language designed for learning to code within the context of the visual arts. Prior coding experience is not necessary to get started, but it might inspire you to learn.

This guide will walk you through the process of downloading and setting up Processing to run SquiggleDraw. It will also introduce you to using the tool to generate SVG files. Finally, we'll briefly cover some fundamental concepts about how one might begin to think about modifying the code.

SETUP

Download & Install Processing

If you haven’t already, go to processing.org/ and download and install processing.

Download SquiggleDraw

Go to the SquiggleDraw GitHub page, click on the green code button, and choose Download ZIP

Tip: I Like to keep a folder called processing scripts in my documents where I put unpackaged processing files (.pde) I find on GitHub.

Install dependencies

SquiggleDraw uses a library to assist it in creating sliders and switches for it to be easier to interact with your image

Open processing
In the NavBar go to Sketch > Import Library > Manage Libraries
On the library tab search for “ControlP5”. ControlP5 by Andreas Schlegel Should Show Up, select it from the list and hit Install

Open & Run SquiggleDraw

In Processing go to file > Open and navigate to where you unzipped the file you downloaded from github, The file you want to open is called SquiggleDraw.pde you will find that in the zip file you downloaded from the green code button on github under SquiggleDraw-master/SquiggleDraw/SquiggleDraw.pde
Click the play button in the top left corner of Processing to run the script

Generation

Just as we saw going from SquiggleCam to the inkscape extension version of SquiggleDraw, The processing version also has slightly different nomenclature and available parameters. Refer back to 101 - SquiggleCam for tips on how you should prepare your images prior to Squiggling them.

(note: SquiggleCam (101) & The Inkscape Extension ( treat clear as white, in the Processing version the clear parts of a png are treated as black, so you might need to add a white background when using transparent PNGs)

Number Of Lines - The number of resulting lines that are interpreted from the original image.

Invert - Inverts black to white in the source image.

Connect Ends - Simpler version of path direction found in SquiggleDraw (inkscape) will connect the ends of the multiple lines.

Squiggle Strength - Amplitude; how tall each waveform is.

Detail - Scale spacing.

Frequency - Density or wave length smoothing of the waveform.

Resolution Scale - General image scale.

Line Width - Stroke width.

Black Point & White Point - Separate more granular control of brightness.

EXTRA CREDIT:

WHY YOU WOULD RUN IT DIRECTLY IN PROCESSING

(This Step is not required to generate SVGs)

In the wild, one might encounter processing scripts solely distributed as .pde files or shared on blogs or forums just as code snippets. Simply copying and pasting the code you find into Processing allows you to run it.

Developers may choose to distribute processing as packaged applications, but having the ability to edit the code allows us to make changes and make the generations even more unique.

For those new to coding or looking to enhance their projects, ChatGPT's familiarity with Processing.org can be a significant asset. Its ability to assist in coding Processing scripts makes it a valuable tool for both beginners and experienced developers alike. I've personally had a really good experience asking ChatGPT to craft Processing scripts, making it a go-to resource for creative coding endeavors.

EXAMPLE

Let’s mess around with some of the default values and ranges to learn how to go about this.

In the Processing window, try doing Command F and searching for “Number Of Lines” and you will find this:

  gui.addSlider("sldLines").setSize(130, 30).setCaptionLabel("Number of Lines").setPosition(10, 20).setRange(10, 200).setValue(120).setColorCaptionLabel(color(0));

  gui.getController("sldLines").getCaptionLabel().align(ControlP5.LEFT, ControlP5.TOP_OUTSIDE);

In this code example, much of the focus is on the placement and configuration of GUI elements such as buttons and sliders. However, there are key lines that facilitate the adjustment of default values and ranges within the Processing script. For instance, by modifying the 'setValue()' function, you can change the default value, and by adjusting the 'setRange()' function parameters, you can alter the range of values. These simple modifications offer significant flexibility in customizing the behavior of the Processing sketch to suit specific needs and preferences

Here you could change the default value from 120 to 100 by changing (might be useful if you are processing multiple images in a row

setValue(120) to setValue(100)

You could even try increasing the maximum number of lines by changing…

setRange(10, 200) to  setRange(10, 300)

(200 is already a lot, the resulting SVG might be unwieldy depending on your computer)

Now, the process of searching a processing script and adjusting the code to suit our unique creative needs is familiar to us. The possibilities here are endless!

Congrats, you have graduated Squiggle U!

Don't forget to post the squiggles you generate on social media, tag @BantamTools & #NextDraw and email the .SVG files to Z@BantamTools.com . We will be picking some favorites and giving away... Bantam Tools Stickers & Merch, Plotted Postcards of your generations, and a A lucky graduate of Squiggle U will be selected to get a BANTAM TOOLS #NEXTDRAW WRITING AND DRAWING MACHINE!!!