Geoff’s Image Scribbler

The notes below should help get you started using my “Image Scribbler” program (sorry – woeful name… if you suggest an alternative that I like, I may change it). First there is some background on what got me started on this project, then I give some examples, and then some brief instructions.

Generative Art

Generative Art or Code Art or Algorithmic Art generates art using autonomous systems such as computer programs, typically using random number generation to produce unique outputs. You can read more about generative art HERE. The program I have written redraws an image you provide using algorithms with randomly directed pens that scribble over the image (or draw randomly placed circles) according to adjustable parameters to produce (sometimes) interesting results.

Geoff’s Image Scribbler

Some Examples

Below are some images I have processed. They should give you some idea of what the program does. These are not presented as world class prize winners, but as samples to illustrate different styles of image that can be produced. These are “image compare” graphics. Drag the blind to the left to see the processed image, drag it right to see the original image.

The Algorithms

The program draws lines or circles. The lines wander about the canvas, using the underlying colour of the image. The motion of the pen is governed by random numbers, with some rules. The program chooses several random new locations to move to, depending on the Direction Range parameter and Line Step Length. The program chooses the random destination that closest matches the brightness at the current location. Thus the program tends to wander along lines in the image where brightness is similar. Choosing a large Samples selecting direction parameter reinforces this matching of brightness, whilst a low Samples selecting direction will give more random movement.

How to use the program

You can access the program at this URL << UPDATE WHEN IT GOES LIVE>>

General comments on the program

This program is still undergoing development, so the instructions below may not be identical to what you see running the program. I may have added new controls, for example, and not yet got around to updating the documentation below.

This program allows you to experiment with your images. Not every image will work well with the program. The parameter settings can dramatically affect how the image develops. You can change the parameters at any time. Once you have loaded an image, you can click the Reset drawing button to clear the screen and continue drawing on a new background. I suggest you load an image, see what happens with default setting. Press P to pause (or resume) if you want to stop and have a close look. Some of the settings allow you to slow down or speed up the drawing. Tweak the settings, see what the effect is. If you find a pattern of drawing that you like try a refresh to clear the previous lines and start with those settings on a blank canvas. Since the code uses random numbers in interaction with the underlying image to direct the patterns, you will get a different pattern every time. Sometimes you may get one part of the image looking good but other parts not so good. You can save that image (press S to save), then restart the drawing, perhaps with different settings… save again. Perhaps you can composite multiple images to show the best bits from a series of trials. Another thing might be to modify the image before loading it – change the colours, perhaps, blur the image perhaps, apply an edge filter (the next version will probably have some options along this line built in).

Program Controls

Menu with Circles selected and an image loaded and drawing
Menu with Lines selected, before an image is selected

The program uses javascript to do the processing, so your browser does all the computing. Some browsers may handle the script differently. I developed this using Firefox ver 92.0w on a Windows 10 machine. It should work much the same on other browsers and with different operating systems, but if you encounter a glitch, let me know.

The main menus and functions

The program starts with the main parameter menu (see image right) towards the right of your browser window. You can grab the menu title and drag the menu to a different place on your screen if you want.

You can set parameters before loading an image, or load an image and change parameters after. Use the File Chooser menu item to load a file. The menu changes to show the image thumbnail. If you choose drawing-type circles the menu changes to show the circle drawing parameters (screen grab far right).

Feel free to change the parameters to see what effects they have on the drawing. You can pause (or resume) the drawing by pressing P. To save a drawing as a PNG file press S. You can reset the drawing to a blank canvas of the set Background Colour by clicking the Reset Drawing button. You can also change the parameters whilst drawing is going on, to alter how the image rendering progresses.

Saving Images

Pressing S opens a file save dialog. If you are drawing at the time, the drawing will be paused (you can resume by pressing P after the save). The filename suggested includes the original filename, the date and time YYYYMMDDHHMMSS followed by a cryptic list of the parameters set for that drawing – this may help if you want to use the same parameters again (I may get around to adding code to save settings for reuse in a later version).

Explanation of the parameters and what they do.

The table below lists the parameters that you can change, and gives a rough explanation of what they do, but since random functions are involved, these are only a rough outline of the sorts of things you may see as the drawing develops. Feel free to change the parameters as the image develops. You can change the drawing to see how the lines move; reset the drawing to restart from a blank background, save a sequence of images as the drawing develops … so have a play.

ParameterInstructions
File chooserShould open an Open File dialog, allowing you to load a file to work on (.jpg, .png, .gif file types only). A thumbnail of the image is shown in the Image panel. Drawing starts immediately an image is loaded.
Number of PensWhen drawing lines, this determines how many lines are drawn simultaneously. More pens may increase the speed at which the drawing is rendered. A small number of pens may mean the drawing occurs only if a few small patches.
Drawing typethe default is to draw lines, but you can also draw circles (see below)
LinesThis mode draws squiggly lines (depending on the settings), controlled by the parameters below and a set of random numbers generated by the program. You can repeatedly draw an image with the same settings with the same start image, and the result will be different every time. Some bits might come out better in some versions than others, so you can always combine several variations using masks etc to make a composite with the best of each of the drawings.
Line WidthLine thickness in pixels.
Line step lengthDetermines how far the next points are from the last point in each cycle of drawing. A small number will produce reasonably smooth lines. Choosing a large number will produce more polygonal lines as the program draws straight lines between points. If you choose a large Direction Range with a large step length you will get a hairy looking image.
Direction rangeWith a small direction range the next step will generally be along the line of the past segment so you get fairly straight lines. With increasing valies in this setting you will get increasingly twisty lines.
Samples selecting directionThis works together with Direction range. A random number determines the location of the next point in the past direction plus or minus a random change in direction (Direction range). This random selection is repeated Samples selecting direction times, and the best match to the brightness of the preceding point is chosen for the next point. If this setting is 1, the move is entirely random. If you choose a large number, there will be many possible directions to select from, so the line will tend to follow brightness contours more closely.
Percent chromatic pensThe default draws a line from a point using the colour of the loaded image at that x,y coordinate. If you increase this setting you will get increasing numbers of pens that use just the red, green or blue channel of that colour to set the line colour.
chromatic brighteningThe single channel “chromatic” pens tend to be a little darker overall than the original colour (they lost the brightness of two of the channels). This setting will increase the brightness of these single colour channel pens. Chromatic brightess of 1 will leave each of the colour pens at full brighness, rather than the brightness of the original spot, which doesn’t make a nice image.
Alpha (opacity)This sets the alpha channel for the line drawn. Alpha of 255 is an opaque pen; 0 will make a transparent pen (not much use). Values in between will give partial transparency which can be interesting.
Blend ModeThis drop down offers a range of blend modes to be used when drawing. These are similar to the ones you find in Photoshop or other layered image processing software. The default BLEND overlies each line over any preceding lines it crosses. Play with it to see what effects you get.
Background colourThis opens a colour picker. Depending on the blend mode, you will overwrite the existing drawing (BLEND) or mix with them in other ways. If the colour picker is open, you cannot change any other settings, so close it after setting colour.
PauseThis button will pause the drawing. When paused the label changes to Resume, so you can resume drawing again. You can also use P or p on the keyboard.
Reset DrawingThis button causes the drawing to be overwritten by the background colour.
Iterations per loop (speed)Depending on the size of your image and the speed of your computer and the speed of your browser’s javascript processing, increasing this setting might increase drawing speed. If it is set too large, your drawing will get progressively more jerky in progress. This control is most of use with the Circle drawing mode.
Frame rateBy default, the program will draw 60 frames per second. If you need to slow down the speed of drawing, you can reduce the frame rate down as far as 1 frame a second. In circles drawing mode, each frame draws one circle per “iteration”, so if you increase iterations per loop you will also get faster drawing. In line drawing mode each frame will draw a line segment for each pen (number of pens) and will do this number of iterations per loop times for each frame. The drawing speed is also limited by the speed of your computer. A huge number of calculations occur for each drawing iteration. If you force too many calculations per drawing frame, the frame rate will fall and the program may seem jerky and unresponsive.
CirclesThis drawing mode draws circles rather than lines. In this case the circles are drawn at random positions across the whole image, selecting colour based on the corresponding colour in the original image (as per line colour in Line mode)
Line widthThickness of the circle border (black)
circle sizesize of the circle in pixels. Play with this as the drawing is rendered. Maybe start with large circles to cover the background with colour circles, then progressively shrink the circles to get progressively more definition from the original image
Draw black circle borderUse this check box to turn the drawing of borders off or on.
OTHER CONTROLSIn circle drawing mode the remaining controls work in the same way as in Line drawing mode
P on the keyboardToggles Pause / Resume for the drawing
S on the keyboardPauses the drawing and opens a save file dialog so you can save the current drawing state. You can resume after the file is saved by pressing P or clicking the Resume button.
H on the keyboardHide. Toggles visibility of the parameter menu. Useful if you have a smaller screen and want to see the whole drawing as it develops without the menu covering part of your drawing (if you have a large screen you can move the menu (click and drag on the top) to place it beyond the drawing canvas.
Ctrl-scroll wheelBrowser/OS dependent – this alters the zoom level on the browser window. If your drawing is bigger than your screen, you can zoom out to fit more on the screen. However, the appearance of small features on the drawing may look different depending on the browser’s interpolation of the pixels to fit the zoom chosen. Also the menu will get smaller and harder to use.

Privacy considerations

This program is coded in javascript. Nothing is saved on the server. I do not explicitly post any cookies or save any images or settings. Your use of the web page will generate routine web access logs, just as any web page does.

This entry was posted in Advanced Edits, Artistic, beginner, compositing, How-to, Post-Processing, Software. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *