Hildesheim, Germany
www.diana-lange.de
member since May 17, 2010
profile picture

portfolio of
Diana Lange

Lindenmayer Plants

Finally had some time to extend my old l-system project. Check tutorial for general explanations: http://paulbourke.net/fractals/lsys/. This time most replacement rules consist of sets of possible replacements which are chosen randomly within a given likelihood. The axiom and the replacements (with their likelihoods) are written on the bottom of the drawing:

Controls:
Click with mouse = new random plant
Space = same plant with new random values
Left/ Right Arrow = increase / decrease angle
Plus / Minus = add / remove iteration (don't add too much iterations)
t = show / hide text

Planetary

Tweak of "spherical midpoint method" by T. Matsuno:
openprocessing.org/sketch/189276

I rewrote most of the code without touching the main algorithm. I added the "tracing" feature as well as an additional noise turbulence and animation of colors and other parameters.

Video:
https://vimeo.com/128004812

Facebook:
https://www.facebook.com/DianaLangeDesign

Controls:
PeasyCam (Drag & Drop and co for camera)
1 to 6 : set stroke weight
Space : New Planetary
+ : Change display mode
r : reset (start over with same values)
a : auto rotate on / off
d : animation on / off

Tendrils v2.

Simular to previous (see tweak), but coded with classes. Main class (BranchWalker) is recursive and can have child branches. In this version the drawing will stop at a certain point because the thickness of the branch decreases constanly.

Controls:
Click for new drawing
Click with right mouse button for new drawing width same colors
Mouse Position controls speed of animation
Space = play / pause
C = New color set without redrawing the background
V = New color set without redrawing the background & randomly blend mode

Tendrils

Controls:
Click for new drawing
Click with right mouse button for new drawing width same colors
Mouse Position controls speed of animation
Space = play / pause
C = New color set without redrawing the background

Elementary cellular automata

Implementation of the (one dimensional) cellular automaton model. The ruleset is generated randomly. There are at last 2 possibe states (0 and 1). If you see colored version, there are more states - each color is one state.

Controls:
click with mouse = new randomly CA
click with right mouse button = new CA with same settings
'c' = new color set
Space = toggle display mode
'h' (+ mouse) = see details

Dancing Fish

Tweak of http://www.openprocessing.org/sketch/156580

With this example I focused highly on the calculation of the fish geometry which is realised mostly with vector math and the trigonometric functions. The movement itself has 3 options:
Movement mode 1 = All fish try to reach the mouse
Movement mode 2 = All fish align along a noise field
Movement mode 3 = All fish align along a radial vector field

Controls:
Press mouse or 'space' to change movement mode
Press 'plus' to change the display mode

Video:
https://vimeo.com/113223673

Hommage à From the square series

Original: From the square series by Roger Coqart
The work has been used as front cover for "Computer and Graphics Art" Vol. 2 No. 4 / November 1977
More informations: http://dada.compart-bremen.de/item/artwork/1273

Based on a random walk. Every walker tries to avoid self-intersection

Controls:
Mouse Pressed = new
Any Key = pause on / off

Hull

Bouncing ball + Repel + hull sorting

Click for starting over

Hungry Anemone

Tweak of oggy's great "Anemone". I've thought it should have some kind of life goal, something to reach for. The movement of the food is based on noise. The color of the anemone is based on its speed (fast = bright red).

Sorry for the messy code. I was too lazy to edit it.

Connect & Morph v.2

Tweek of my own work. Basically uses the lerp () Function to morph between to positions. I did a complete recode, trying to avoid any change in the visual result and keeping the basic structure. And give it a little speed up.

Images:
http://tinyurl.com/pusxl5l

The square on top left opens the GUI

Controls:
PeasyCam for camera
Randomness (u / i)
Speed (q / w)
Depth (e / r)
Connections (y / x)
Points (z / t)
Morph (a / s)
Toggle Colors (c)
Normal Mode / Alternative Mode (1)
Draw Mode (Points, Connections) (b)
Smooth on / off* (v)
Shiny on / off* (2)
GUI on / off (3)

*reduces render speed

Radial vector field movement

Vector based particle movement.

Controls:
b == display vector field on / off
p == display particles on / off

press mouse to control the vector field

Hommage à orbiters

Based on:
http://beesandbombs.tumblr.com/post/45513650541/orbiters

Controls:
Press left mouse button & move >>
speed

Press right mouse button & move >>
resolution

Hommage à Pupils of the world

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/51642495789/450-pupils-of-the-world-a-new-minimal-geometric

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls with Mouse (dragged):
Left mouse button >>
- margin
- padding

Right mouse button >>
- resolution

Controls with keyboard:
Any key >>
load presets

New composition each 20 seconds

Hommage à Codes

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/57156418537/498-what-the-moon-does-when-nobody-is-watching

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls with Mouse (dragged):
Left mouse button >>
- margin
- amplitude

Right mouse button >>
- ellipse size (>> resolution)
- ellipse size

Controls with keyboard:
any key == load presets

New composition each 20 seconds

Hommage à Binocular interference

Another reCode of something I've found.

Original:
geometrydaily.tumblr.com/post/44861153655/392-binocular-interference-a-new-minimal

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls:
drag mouse == resolution
a == new angles
space == load presets

Hommage à Planetary balance

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/43487133293/379-planetary-balance-a-new-minimal-geometric

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls:
Space == new composition

Hommage à Square attractor

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/37113362376/338-square-attractor-a-new-minimal-geometric

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls with keyboard:
space == load Presets

Controls with mouse (drag mouse):
Left mouse button>>
- resolution
- angle

Right mouse button>>
- translation

Hommage à Arise

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/53757017292/468-arise-a-new-minimal-geometric-composition

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls with keyboard:
h == new color set
Space == load presets

Controls with mouse (drag mouse):
Left mouse button == resolution
Right mouse button == margin

Hommage à Mesh block

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/54913997818/479-mesh-block-a-new-minimal-geometric

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls with keyboard:
Space == clear background
p == load presets
+ / - == strokeWeight

Controls with mouse (drag mouse):
Left mouse button == margin
Right mouse button == resolution

Hommage à Focus shifting

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/56516764690/493-focus-shifting-a-new-minimal-geometric

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls with Mouse (dragged):
Left mouse Button >>
- number of lines

Right mouse Button >>
- angles

Controls with keyboard:
Any key == load presets

Hommage à Garden

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/56876400759/495-garden-a-new-minimal-geometric-composition

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls with keyboard:
s == pause
p == play
space == start again

Controls with mouse (drag mouse):
Left mouse button == stroke weight
Right mouse button == margin

Hommage à Four touching spheres form
a tetrahedron

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/57156418537/498-what-the-moon-does-when-nobody-is-watching

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls with Mouse (dragged):
Left mouse button >>
- ellipse size

Right mouse button >>
- scale

Controls with keyboard:
Space == new composition
+ == more circle
- == less circles
p == load presets

Hommage à What the moon does when
nobody is watching

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/57156418537/498-what-the-moon-does-when-nobody-is-watching

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls with Mouse (dragged):
Left mouse button >>
- margin
- padding

Right mouse button >>
- resolution
- ellipse size

Controls with keyboard:
Any key >>
load presets

New composition each 20 seconds

Hommage à Rumour

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/58058180988/504-rumour

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls:
mousePressed == edit center position
mousePressed and right mouse button pressed == copy filter

Hommage à Stroll in the park

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.comhttp://geometrydaily.tumblr.com/post/58241545792/506-stroll-in-the-park

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls:
Space == new composition
t == new triangle composition
e == new ellipse composition
+/- == resolution
b/v == margin
drag mouse == ellipse size

Hommage à Aztec revival

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/58420312777/508-aztec-revival

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls:
mousePressed + Left mouse Button == columns
mousePressed + Left mouse Button == rows
m / n == new color composition
v / b == margin
c == new colors
p == load presets

Hommage à Firebird – Parabolas,
yeah!

Another reCode of something I've found.

Original:
http://geometrydaily.tumblr.com/post/58697000746/509-firebird-parabolas-yeah

You may also be interested in the great tumblr block "Geometry Daily" as well:
http://geometrydaily.tumblr.com/

Controls
1 == set width and height (mousePosition)
2 == set parabolas settings (mousePosition)
3 == set number of parabolas (mouseX)
4 == show settings / artificial lines
p == load standart setting
Space == no interaction

With very special thanks to my math teachers

Image based vector field

Particles move based on a vector field. The vector field is based on image data (e.g. pixel brightness). The movement is influenced with a noise value.

Controls:
b = white background / black background
c = colors / mono
+ = toggle display mode
Space = toggle image data mode
n = new noiseSeed
a = auto mode on / off

auto mode off >> mouse x and mouse y controls movement

mouse pressed = disorder

Trigonometry: Fourier circles

Check source:
http://blog.matthen.com/post/42112703604/the-smooth-motion-of-rotating-circles-can-be-used

Check theory:
http://www.math.ucla.edu/~wrosenbaum/media/thesis.pdf

Controls:
1-7 >>>
Controls the proportional size of the circles to each other

q/w/e/r/t/z/u >>>
Controls the proportial speed of the movement

Space >>>
Start every circle at angle "0"

S >>>
random Speed

Plus >>>
Add circle

Minus >>>
Remove circle

Noise Variations

Tweak of Kof's Melodic Variations (http://openprocessing.org/sketch/67904).

I don't know much about the AudioOutput class, in fact I never used it until today. So most of the code is still done by Kof (especially the Instruments).

"Melody" is generated with noise. A lot parmeters are randomised.

Visualization done with my Mover class (check Appetite: http://openprocessing.org/sketch/131989) and the simple Minim Waveform, just aligned on a circle.

Controls:
Any Key == Filter on / off

Video:
https://vimeo.com/87939253

Hommage à AbAD

Another recode of something I've found. This time it's an isometric hand drawing which is quite popular at tumblr (http://alexjosephdiamond.tumblr.com/post/35885404062). Noise is used for the displacement and a variation of my Image Triangulator (http://openprocessing.org/sketch/115409) sets the surface.

Controls:
PeasyCam
Space == new
0-9 == change resolutions
d == change display mode
r == base drawing on/off
t == origins drawing on/off
u == triangles drawing on/off

Appetite

Agents try to reach food, which appears randomly. When they reach the food, they eat and get bigger. Bigger ones are slower than smaller ones. When they don't eat, they get smaller.

Controls:
Plus == Add agent
Minus == Remove agent

Made for a workshop. Check online documentation: http://bauhaus.diana-lange.de/lecture/agenten.html

Image Triangulator

Controls:

D = toggle display mode
(1-9) = toggle resolution

Hommage à Vera Molnar à Dürer

Based on:
http://dianalange.tumblr.com/post/50496839964/darksilenceinsuburbia-vera-molnar-hommage-a

Code done by me.

Controls:
mouse pressed == update
n/m == numbers of squares
v/b == square resulution
x/c == padding

Color depth simulation

Color depth simulation

You can either regulate the color depth (left column) or use one of the presets (right column).

set resolution -> set color depth -> hit "Generate Image"

Show or hide the GUI by clicking inside the little square on the top left.

Image is taken from Zelda: Twilight Princess

GUI code done by me (just quick'n'dirty) - didn't want to use ControlP5

Image based triangulation

Drawing machine based on http://www.openprocessing.org/sketch/81905

Uses Lee Byron's Mesh Library:
http://www.leebyron.com/else/mesh/

Little bit slow because the triangulation has to be calculated every frame.

Controls:
Left mouse button = restart
Right mouse button = restart /w full resolution
1 / 2 / 3 = choose image
M = change movement mode
B = transparent background on / off
I = show / hide current input image
R = random image on / off

(Work in progress) Video:
https://vimeo.com/54590461

Image based one line drawing

Another drawing machine, creates an one line drawing based on a given image.

Has two modes: Mode one always looks for the nearest neighbor and connects this two points. Mode two looks up for the 7 nearest neighbors and chooses one of these randomly. Last one makes it look more like a natural drawing.

Controls:
Mouse click == start over
1-9 == particle number (+start)
I == show / hide image
N == connection mode
M == straight or curly lines

(Photo is takes by me. It's my small Delorean which decorates my desk)

Sample images:
http://www.flickr.com/photos/dianalange/sets/72157632455649148/

Image based connections

This one shares a lot of code with http://www.openprocessing.org/sketch/81905 and http://www.openprocessing.org/sketch/80169. Just draws connecting lines between image based points. Number, length and color is based on brightness of the image at point (x,y). It loads two images: one photograph and one image with 3 channels (r, g, b). The channels are used to describe the density of the points at a certain area.

Controls:
mouse=start over
1/2=less/more points at area 1
3/4=less/more points at area 2
5/6=less/more points at area 3
i=show/hide image
f=show/hide points
c=curly/straight lines

Image based targeting

Parent sketch which turned into "Image based aggregation" (http://www.openprocessing.org/sketch/80169). They both share the algorithm for the arrangement of the particles.

Controls:
P == Pause on / off
M == change movement mode
N == transparent background on / off
I == show / hide image input
R == random image on / off

Photos are taken by me.

Image based aggregation

This code will add more aggregation points to "darker positions" than to "lighter positions". Works best with high-contrast input (graphics / photos).

Controls:
Mouse click == start over
Space == toggle Image
I == show / hide image input
Keys 1-9 == Number of starting branches

Video:
https://vimeo.com/54021795

re:coded Sun

This was a submission for my basic Processing class back in 2009. About two weeks before I got to know "arrays" :-)

I used this work for a poster:
http://www.flickr.com/photos/dianalange/sets/72157631522378420/
(exhibition of photos).

Look did change, but the code is completely new.

Controls:
space / mouse click = redraw
1 = leaf shape
2 = color scheme

Generative Pop Art

Just started to color some photos in photoshop in Pop Art way. Suddenly I figured, I'm way faster if I write a little program for that.

This program loads a bunch of images, which are used as masks. The colors are completely random.

Controls:
Press mouse == redraw
Space == Grid or Single

re:coded Visualizing Text

Visualization of text data. Did this about 2.5 years ago for my Bachelor Thesis, but I coded this completely new for the last 2 days. Has some useful algorithms in it (e.g. letter counting using a HashMap).

Controls:
1/2/3 = text input (1 = Die Bürgschaft | 2 = Der Knabe im Moor | 3 = Die Braut von Korinth)
Space = new Random
Up/Down = Zooom in/out
Left/Right = rotate
Z/U = (word) branch length
H/J = (letter) branch length
Q/W = (words) outer radius
A/S = (words) inner radius
D/F = (letters) outer radius
E/R = (letters) inner radius

+ Drag with mouse for position changing

Speed Painting an old Photo

Using edge detection and random walk to generate an old, grungy photo. I like the way it draws not only the outlines but also some areas.

Inspired by http://www.openprocessing.org/sketch/59807, but I didn't checked his code.

Controls:
Click on the image to start over
1 == town photo
2 == portrait photo

Photos were taken by me:
http://www.flickr.com/photos/dianalange/collections/72157627099506915/

random()

I wanted to check the quality of the random() function...

Description:
Simple visualization of the random() function. Every loop, a random number is picket up within the given range (e.g. 0 - 200). Each bar represents one number, the higher the bar, the more often the number was chose by random(). The blue bar is the most chosen number, the least chosen is the blue dot.

Mouse click = restart

Noisy circles

Left mouse button == toggle mode
Right mouse button == restart

Snake

Snake

Use arrows for playing.
Enter == Start Game / End Game

Menu control:
Right Arrow == choose selection (start game)
Up / Down Arrow == select

Terrain generator

Simple terrain generator based on noise, random walk and a little bit of code recycling from my recursion flower sketch. Has a lot of randomness in it, so not every terrain will look that good.

Takes a while to build, please be patient.

Controls:
Space == new terrain
+/- == increase / decrease depth of terrain
O == show / hide noise image

+PeasyCam controls

Check renderings:
http://www.flickr.com/photos/dianalange/sets/72157629331606961/

L-System Tree / Root

Another tree inspired sketch. This time made with l-system.

Controls:
T == toggle between tree / root mode
Space == new tree or root
+ / - == increase / decrease depth of l-system

Rekursion Flower

Experiment with recursion. Code could be much easier. It got a little messy because I wanted to do something quite different in the beginning (and I did't clean up).

Controls:
Click on the image to get a new flower (position of the mouse affects look of the flower)
+ / - = more / less branches
n = new flower ( + mouse position changes look)
t = toggle flower mode

Flickr set:
http://www.flickr.com/photos/dianalange/sets/72157628815886507/

Visualizing text

Playing again with text data. The goal was to write an effective and fast algorithm for sorting text in an alphabetical order using the 'divide and conquer' method / recursion which would work with my written 'Word' class.

Controls:
Hover circle = shows word and how often it was found in text
Space = Text on / off
H = Headline on / off
A = Animation on / off
S = Animation mode
Left / Right = Position of control points

Check video:
http://vimeo.com/31203226

Flickr:
http://www.flickr.com/photos/dianalange/sets/72157627657832455/

Display, Export, Import Sound

This is an example, how to save audio data to a text file, and load this text file, prepare and display it. This is very important if you want to visualize music in non-realtime (e.g. the visualization is too complex).

Check Video Tutorial:
http://www.vimeo.com/27642353

And some of my results using this workflow:
http://www.vimeo.com/dianalange

Controls:
p = play/mute music
s = play/pause
mousePosition

Music: CocoRosie - The moon asked the crow

Moon

Pretty simple sketch. Still I like it, because it shows, that you may create very interesting things with quite little code (and knowledge ;) )

Audiosphere

FFT data mapped on a sphere. Because it is difficult to include external files (txt, mp3) into a browser applet, I decided to add the pre-analyzed audio data (fft and beat detection) directly in the sketch (String fftData & beatData). That's why you can't hear anything.

Please, check the video on vimeo.

Controls:
M = direction
N = toggle color
Space = auto rotation

Watch video with sound:
http://vimeo.com/25503523

Movement

I wanted to avoid usage of 'translate', 'popmatrix' & co because it usually slows the program down. Unfortunately, if the values are small, the boxes get deformed. Maybe I'll solve the problem later by using 'double' instead of 'float' values.

Made for a music visualisation: http://www.vimeo.com/22590998

Controls:
PeasyCam for camera
Press 'R' btn + drag mouse to left / right to change position of the boxes

Cloth, Objects & Noise

I've just played along with the values of my 'cloth' and suddenly these came out.

Of course, looks much better and works much faster with OpenGL.

Controls:
PeasyCam
0 - 9: toggle between the objects
w = wireframe on /off
p = pause on /off
left / right arrow = reduce / increase alpha

Watch the video: http://vimeo.com/20367690

Colliding balls

This is an exercise to teach myself how to write a class.

You can grab a ball and shoot with it.

Controls:

1 / 2 / 3 = toggle between color sets
Space = change background color
M = show / hide connections
N = show / hide crash location
B = create new set of balls
Right = add new ball
Left = remove a ball
Any key = pause

http://www.vimeo.com/19564417

Silk cloth

Just playing around with noise, arrays and minim.

You can drag and drop the cloth (PeasyCam)

Music: While the Trees Sleep by David Nevu

Space Station 2

Improved version. I've added the GUI and some controls. Use PeasyCam for drag and drop, as usual.

Type doesn't look that good using P3D and loadFont. Better use OPENGL and createFont.

Please have a look at the video:
http://www.vimeo.com/16614423

Space station

// Controls
use PeasyCam for drag & drop
left/right = pev. / next station
v = show / hide fill
b = change background color
q/w_a/s_y/x = change lights (nx,ny, nz)
r = rotation 01 (on / off)
e = rotation 02 (on / off)

Morph two images

Use the slider to morph the image

// PeasyCam
use your mouse to rotate, drag and drop the image

// Controls:
Space = show or hide original image
v = show grid or fill
c = change color mode (image color or gray)
e/r = decrease or increase resolution
+/- = blur
left/right = threshold
up/down = morphing (use instead of slider)
alt = change background

// Lights:

q/w = nx
a/s = ny
y/x = nz

3D video / image filters

Controls:

PeasyCam
1,2,3,4,5,6,7,8 = choose between video filters
M = freeze image
Space = show video / image source
Q = no audio analysis
W = graph / wave analysis
E = beat detection
R = kick / snare / hat detection
T = add beat detection (will change background color every beat)
Alt = change background
Left / Right = change resolution [1,2,3,4,5]
Up / Down = change space between pixel [4,5]
+ / - = change aspect ratio [4,5]
A / S = change intensity of audio analysis
D / F = explore / implore [1,2,3,4,5,8]
C / V = same as D / F, but manual [1,2,3,4,5,8]

img_3D

// PeasyCam
- use your mouse to rotate, drag and drop the image

// Controls:
1 / 2 / 3 = choose between 3 images
Space = show or hide original image
v = show grid or fill
c = change color mode (image color or gray)
e/r = decrease or increase resolution
+/- = blur
left/right = threshold
alt = change background

// Lights:

q/w = nx
a/s = ny
y/x = nz

Connect & Morph v.1 2D

I tried to use a 2D renderer for this one, bust strangely P3D works much faster!

Controls:
'm' = play, pause
'+' / '-' = morph to next / prev (you can use it while it's playing and when it is paused)
'y' / 'x' = decrease / increase number of connections (a high number will slow the sketch down)
'1' = change between normal mode and alternative mode, you just can change it while the sketch it paused

Connect & Morph v.1

This one looks & works much better using OPENGL.

Controls:

mouse = Camera
'm' = play / pause
'n' = show / hide pause image
'+' / '-' = morph manual
'y' / 'x' = remove / add connections
'a' / 's' = increase / decrease random
'e' / 'r' = decrease / increase depth adjustment
followed by
643
following
40

favorites

Share Share Subscribe to sketches