Nonwoven is a mobile painting application for iOS devices. When the user touches the screen, invisible “pins” are placed on the drawing area. Then, patterns are formed by connecting these pins within the user defined range with transparent threads, thus creating weblike forms. The pins can be generated from a given photograph for generation, as well as being placed by the classical “painting” gesture.

The color, transparency, threading range, blending mode, radial symmetry, thickness and many other options are available for manipulation to create a wide range of effects that can be used for generative painting, finger painting, calligraphic effect or photo manipulation. The generation algorithm is prototyped on Processing and ported to iOS. In other words, the system is portable and it will be available on other platforms, hopefully with alternative modes of interaction, other than a mouse and a keyboard.

I hope you’ll find this documentation useful and like the Nonwoven application.

If you have any suggestions or comments, be sure to send me an email or contact me at Nonwoven’s Facebook Page. There I’ll share news and users’ works. Also, I always have promo codes more than I need. I’ll be sharing them in small batches as well.

Documentation

Styling Menu
Color Picker
Drawing Context
Auto Generation
Generation Context
Progress View

The user interaction is divided into two areas, the Styling Menu and the Context Menu. In the iPad interface, these two menus are placed side by side and in the iPhone interface they are split into two tabs. The options in the context menu changes depending on the current mode of interaction. Since there are only two different contents for the context menu, they will be referred as “the Drawing Context” and the “the Generation Context”

Styling Menu

The styling menu controls the visual appearance of the threads.

Opacity slider controls the opacity of a single thread. The following image shows three strokes with the opacity values 10%, 50% and 100% respectively.

Thickness slider controls the thickness of a single thread. The following image shows three strokes (at 10% opacity) with 1, 5 and 10 point thickness values respectively.

Brush Size slider controls the over all thickness of the stroke (not the individual threads). The following two strokes are both at 10% opacity. First one has 3 points thickness and 5 points brush size, the second one has 1 point thickness and 20 points brush size, the third one has 1 point brush size and thickness.

Length Limit slider controls the maximum length a thread can have. The following strokes have 10% opacity, 1 point thickness and 5 point brush size. Their length limits are 5, 20, 50 respectively.

The blending Mode controls how the new drawn threads’ colors interact with the existing image.

In normal blending mode, the thread is drawn over the existing image with the selected color and opacity.

In multiply blending mode, white is transparent and the color acts like ink; dark colors get darker when drawn over and over. The following two rectangles are drawn in normal and multiply modes respectively with 10% opacity, 1 point thickness, 5 points brush size, 20 points length limit and RGB value: 235, 0, 0 (slightly dark red)

In screen blending mode, black is transparent and the color acts like light; light colors get brighter when drawn over and over. The following two rectangles are drawn in normal and screen modes respectively with 10% opacity, 1 point thickness, 5 points brush size, 20 points length limit and RGB value: 255, 40, 40 (slightly bright red)

Using different blending modes over each other can be used for effects such as masking. The following image shows a dark blue patch blended in multiply mode, with pink and green strokes blended in screen mode. As screen blending makes anything invisible over a white canvas, green and pink strokes are only visible within the area of the blue patch.

The following example shows a black stroke blended in normal mode, over a large black patch in screen mode. Even though the black patch becomes invisible in screen mode, it still provides pins for the new strokes to attach. Therefore, the second stroke has a ”hairy” look, extending out to invisible points of attraction.

Color Picker

The Color Picker Menu allows the user to change the canvas and the thread color. You can either drag your finger on the large color picker area to change the hue and the brightness, or use the sliders to select the color you like.

Sliders can work both in HSB (hue, saturation, brightness) and RGB (red, green, blue) modes so that you can choose the one that feels easier. When the scheme is changed, the sliders are automatically adjusted to match the currently selected color. Although RGB is more conventional, HSB scheme is much more intuitive than RGB once you get used to it.

The following capture of the iOS simulator shows how the color picker area works.

The background color changes only if the canvas is empty. If there is an existing drawing, then the new background color will be applied on the next clear (see drawing context/actions).

Drawing Context Menu

While in drawing mode, context menu displays drawing specific options. The drawing context has the following subcategories: Symmetry, Actions, Canvas Shape (iPad only), Input Output, Preview (iPad only)

Symmetry
Radial Symmetry option enables the user to draw copies of the stroke simultaneously around the center of the canvas. The number of the copies are represented by the symmetry guides. The following two images show a single stroke drawn with 3 and 7 radial copies respectively. (10% opacity, 1p thickness, 10p brush size, 20p length, dark green multiply blending)

Mirror Horizontally and Mirror Vertically options turn on and off corresponding modes of reflective symmetries. The following images display horizontal and vertical symmetries. (10% opacity, 1p thickness, 5p brush size, 20p length, dark green multiply blending)

The following image shows the result when both reflective symmetries are on.

Reflective and Radial symmetry work mutually exclusively (i.e. turning one on turns the other one off).

Actions
Undo button undos the last action, including the undo itself. (in other words, it’s a undo/redo button)

Clear button deletes the current drawing and creates a new, empty canvas.

Disconnect button deletes the existing pins but keeps the drawing. This way, the new threads will not interact with the existing drawing and act like a new layer on top of the existing one. The following two images show a red stroke drawn over a black one. In the second image, disconnect button is pressed before the red stroke. (10% opacity, 1p thickness, 5p brush, 60p length) Notice how in the second image, the strokes only bind onto themselves since they are disconnected.

Canvas Shape (iPad only)
Unlike the iPhone screen, the iPad screen size is large enough to support square canvas without making it look ridiculous and sad. Also symmetrical drawings usually look better in square, whereas rectangle canvas supports a larger painting area. In case of the auto-generation (see auto-generation below), some photographs work better with rectangle canvas and others work better with square. Therefore, in the iPad version, the user has the chance to decide on the shape of the canvas. Also, I like squares.

Square and Rectangle buttons under the Canvas Shape subcategory resets the canvas in the selected shape. When the application is using a rectangle canvas (default in the iPhone version), the menu disappears when the drawing area is touched. While working with a square canvas however, the menu does not fade away since its size is exactly what is left from a square canvas so it does not occlude anything while visible.

Input Output
Buttons under the I/O subcategory lets the user to load, save and share images.

Save & Share Button triggers iOS’ native sharing menu, as displayed below.

Services are available if the device is logged into the desired social network. E.g. in order to share on Facebook, the phone or the pad should be logged into Facebook through the settings page. Facebook app is not necessary.

Load Button lets the user to import images into the application. An image can be used in two different ways: It can be used for auto-generation: extracting pins from the image to automatically generate the threads, or load it as a background. The image can either be picked from the camera or the gallery. Upon clicking the Load button, the four resulting combinations can be chosen from the menu below:

By loading an image as background, the user is able to draw over an existing image, such as the strokes drawn over the out of focus marina lights below. (3% opacity, 1p thickness, 3p brush, 45p length, 5 radial symmetry, screen blending, light orange)

Loading an image for auto-generation has its own section and explained below.

Preview (iPad only)
The styling options may create a wide range of effects and it’s not always easy to guess the output. Therefore, the preview screen generates a pre-defined golden spiral with the styling options: opacity, thickness, length limit, blending and colors. The following images show different renderings of the preview screen.

Auto Generation

As explained above, the painting process is executed by drawing threads between the pins on the canvas. So, technically speaking, the creation of the pins and the drawing of the image are completely independent events; As long as there are pins, Nonwoven can draw threads between them. Just like the preview pane with the predefined spiral.

When an image is loaded for the auto-generation process, the pins are extracted based on the two following features of the image: brightness and edge detection. The user is able to tweak how the pins are generated through the Generation Context Menu, explained below.

Before that, let me show you this loosely auto generated image of one of my cats. His name is Meriç. Meriç’s hobbies include sleeping on the sofa, meowing during my dinner for inducing guilt to get some of my food and modeling for experimental mobile drawing applications.

Generation Context

When an image is loaded for auto generation, the application displays the pins generated with the initial settings of the Generation Context. Please note that these settings do not have numerical values displayed like the styling options. Because they control values such as the brightness of a pixel, so any kind of representation other than 0 to 1 mapping would be my own abstraction, and the slider itself is a visual representation of the intermediate values between zero and one.

The settings in the generation context defines which pixels have the chance to be a pin. The following examples will make use this image as a base:

The Edge Threshold slider controls the threshold for edge detection. Lower values generate more pronounced edges. The highest threshold means disregarding edge information entirely. The following four screenshots show four different edge values with the brightness information excluded.

The Edge Separation slider controls the distance between the points in the detected edges. This comes in handy especially with images such as this one, which has too many detected edges in the areas like the hair. The following two images show the same set of generated pins at a very low edge threshold level. The first one has the lowest separation value, whereas the second one has a considerably higher separation. Like the examples above, the brightness information is excluded.

The Darkness Threshold slider defines the minimum level of black that can be a pin. This way, it is possible to decide what level of darkness will be included in the final image. The following images show the pins generated by using all levels of black (slider at zero) and excluding dark grays (slider near the middle) respectively. Edge values are excluded for the sake of this example.

Notice how the pins in the eye pupils disappear in the second image as they are exlcluded.

The Lightness Threshold slider defines the maximum level of white that can be a pin. This way, it is possible to decide what level of brightness will be used for creating pins. The following images show the pins generated by using all levels of white except light gray (slider near the beginning) and by using only dark grays (slider near the end).

The photograph that is used here has light gray background, so it has to be excluded to get a reasonable output.

The Luminosity Separation slider controls the distance between the points in the generated patches of dark and bright areas, just like the edge separation for edge detection. The following two images show the same set of generated pins. The first one has the lowest separation value, whereas the second one has a considerably higher separation.

Generate
When all these options are used together, the resulting pin output include both edge and brightness information. The following image is the way I decided to be a nice input for generation: Luminosity separation is fairly high and I use all the blacks. Light grays are excluded. Edges are fairly pronounced and they are close to each other.

Remember that the styling menu is always accessible at any point. Thus it is possible to review the styling options before generation. For this image, I prefer to use 7% opacity, 1p thickness, 20p length, light warm gray background and dark red threads with multiply blending.

The threading phase is no different than painting with finger, as explained above. So, the produced image interacts with the new strokes the same way as the hand drawn shapes interact with each other. Please enjoy my portrait below for new night terrors. As you can see, the new strokes in my eyes and around my lips thread out to the generated image and paint as if the existing portrait was drawn by the regular painting process.

Progress View

Sometimes the generation process can take a very long time due to the fact that there might be millions of threads drawn for the generation. To avoid waiting for minutes in darkness or having to force quit the application to cancel the generation, the progress view with the option to interrupt appears over the interface during the generation.

Interrupting the process yields an interesting result. When the threading process is interrupted, the canvas reveals the half-baked image. But, since the pins are already there and what’s missing is the threads, drawing over this half baked image still interacts with the existing pins. Notice how the randomly painted patch reaches out to invisible points, getting denser around the missing eye and the hair.

This interruption effect was actually an overlooked design issue that I realized during the development phase and deliberately left it as it might be used for the sake of the design. Removing it is simple as touching the clear button.

Back to the Beginning

Buddhabrot is a visualization of the famous Mandelbrot fractal. Mandelbrot fractal shows whether or not a particle is in the Mandelbrot Set. Buddhabrot plots the escape paths of the particles, which are not in the set.

This version divides the sampling process into different threads to massively increase the rendering speed (the one above is single threaded because the processing code extends the Java Thread class, which is not available for javascript). The RGB thumbnail is a combination of different renders with different iteration values, used as color channels.

Tested with Processing 2.0b8 on Mac OS X Lion and Windows 8

download the processing project

When the first invention of the printing machine and the physical boundaries that are present for a type cutter are considered, it would be unfair to question his intentions for creating only a couple of glyphs for each character. Yet, as the process of type design is translated to digital medium, the means of creation and thus the nature of the product change. The glyphs are no longer defined by their physical features, but by mathematical abstractions of the desired shapes.

The process of pattern recognition relies not only the visual perception, but also the ability to understand and interpret features, visual references and concepts. In order to recognize letters and words, the brain does not run an algorithm to match the vertices of the shape and determine which glyph it is. Instead, it refers to its features and past experiences to understand the meaning.

This way, we are able to recognize every letter in all kinds of different fonts. If it wasn’t possible, we wouldn’t be able to recognize our own handwriting. In this sense, it is possible to expect the human brain to easily interpret a piece of text, when it is written by a system that is capable of producing glyphs at each occurrence of a letter, which are very similar but slightly different versions of each other.

The Frankenstein Application offers a digital typing environment, which is capable of generating theoretically infinitely unique glyphs for each letter at desired frequency. This generation can take place only once, when the letter is typed, continuously through an animated sequence for an appropriate context (such as an interactive e-book) or it can happen randomly once for every frame as long as the application runs.

For the purpose of the project, the usage of this system will be limited to generating different glyphs at each keystroke. The aim of this project is to study the effect of presenting different glyphs for each letter on the speed and the ease of reading.

The Frankenstein Application (a.k.a. the Franken-font) uses glyph interpolation to generate each letter. The interpolation occurs between Helvetica, a grotesque font, and Syntax, a humanist font; neither grotesque nor fully humanist, pretty much like the Frankenstein monster.

The Frankenstein Application is currently in progress as my visual arts and communication master thesis in Sabancı University, supervised by Onur Yazıcıgil. Both Helvetica and Syntax are registered trademarks of Linotype Foundation.

Tested on MacOS X and Windows 7.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

//A tiny time lapse application (probably the tiniest)
//Cem Sina Çetin 2012
 
import processing.video.*;
 
Capture cam;
int pixelCount;
int tick;
int filename;
int seconds;
String path;
File file;
 
void setup()
{
  size(640,480);
 
  tick = 0;
  seconds = 30; //the time interval between two captured images.
  filename = 0;
 
  //root directory for the time lapse sessions.
  do
  {
    path = selectFolder();
  }while(path == null);
 
  path = path+"/"+
         Integer.toString(day())+"."+
         Integer.toString(month())+"."+
         Integer.toString(year())+"/";
 
  println("save directory: "+path);
 
  file = new File(path);
  if(file.isDirectory())
  {
    filename = file.listFiles().length;
    println("existing files in folder: "+Integer.toString(filename));
  }
 
  println("for 25fps, the time lapse of a single day will take: "+
          Float.toString(((86400.0/seconds)/25)/60) +
          " minutes.");
 
  frameRate(1);
  cam = new Capture(this, width, height, 30);
  cam.start();
  pixelCount = width*height;
  loadPixels();
}
 
void draw()
{
  tick++;
  if(tick > seconds && cam.available())
  {
    cam.read();
    cam.loadPixels();
    for(int i = 0; i<pixelCount; i++)
       pixels[i] = cam.pixels[i];
    updatePixels();
    save(path+Integer.toString(filename)+".jpg");
    println("Image "+Integer.toString(filename)+".jpg is saved.");
    filename++;
    tick = 0;
  }
}

Results are not only generated and updated on each letter input simultaneously, but they can also be copied to the clipboard or can be sent by email directly through the application.

Anagramaster is a free project and it will continue to be updated with new functions, including partial and multiple word searches.