Randomness & noise
Week 4
Marko Řeháček & Megi Kejstová
rehacek@mail.muni.cz
GENERATIVE DESIGN PROGRAMMING
Between order and chaos
is a sweet spot we try to achieve.
RANDOMNESS
GENERATIVE DESIGN PROGRAMMING
R
Observed in a sequence, when order and patterns seem to be lacking.
a
n
d
o
m
n
e
s
s
A crucial element to the generative process.
RANDOMNESS
GENERATIVE DESIGN PROGRAMMING
→ IMAGE
Fragments of an Infinite Field
Monica Rizzolli
Collection of 1024 generative artworks of “potentially
infinite field of foliage” sold for 1,623 ether (around
$5.38 million) through a sale on Art Blocks, the
non-fungible token (NFT) platform. P5.js.
https://www.theblockcrypto.com/post/117605/art-bl
ocks-hit-generative-artist-5-38-million
https://artblocks.io/project/159
RANDOMNESS
GENERATIVE DESIGN PROGRAMMING
→ IMAGES
Generative circle
David Mrugala / thedotisblack
Watch the whole process.
https://www.youtube.com/watch?v=UZoVBMgzULk
RANDOMNESS
GENERATIVE DESIGN PROGRAMMING
→ IMAGE + MACHINE
DRAWING MACHINE 04
David Mrugala / thedotisblack, 2014
This art and craft of a pen plotter is made with the
AxiDraw V3/A3 drawing machine. The circle is made
up by lines with randomized end points. Once the
first drawing was drawn, the drawings and color pens
switched and were drawn on top of the other
drawing.
Pen plotter drawings have a unique quality that no
algorithm can recreate - it's the interaction of the
pen with the surface of the paper that creates
unique and unexpected outcomes.
www.youtube.com/watch?v=sAWXLWsjEF4
RANDOMNESS
GENERATIVE DESIGN PROGRAMMING
→
Randomness
PlasmaFractal
https://zett42.github.io/plasmafractal-gl
App for playing with noise.
GENERATIVE DESIGN PROGRAMMING
→
Randomness
PlasmaFractal
https://zett42.github.io/plasmafractal-gl
App for playing with noise.
GENERATIVE DESIGN PROGRAMMING
→
Randomness
PlasmaFractal
https://zett42.github.io/plasmafractal-gl
App for playing with noise.
GENERATIVE DESIGN PROGRAMMING
Generating noise
RANDOMNESS
Coding Train
GENERATIVE DESIGN PROGRAMMING
Noise functions
RANDOMNESS
Generate sequence of random numbers interpolate to get continuous function
GENERATIVE DESIGN PROGRAMMING
Noise types
RANDOMNESS
2. gradient noise
❏ successive random numbers are close
to each other
❏ p5: noise()
1. white noise – random numbers
❏ p5: random()
code comparison
GENERATIVE DESIGN PROGRAMMING
Algorithm for generating gradient noise.
Invented by Ken Perlin in 1981 to break machine-like
(solid-shaded) procedural textures for CGI in the film Tron.
Perlin noise
RANDOMNESS
GENERATIVE DESIGN PROGRAMMINGRANDOMNESS
P5 functions
noise(x)
// 1-dimensional
noise(x, y)
// 2-dimensional
noise(x, y, z)
// 3-dimensional
p5 reference
Generate random numbers in range [min, max]. Generate random numbers in range [0, 1]. The
produced numbers are more naturally ordered
and close to each other.
random(max)
random(min, max)
random(array)
// select random element
GENERATIVE DESIGN PROGRAMMINGRANDOMNESS
Visualization of dimensions
p5 reference
We have many different ways to visualize
different dimensions of noise
1D noise
One value
2D noise
2D visualization
1D visualization
(second dimension is
replaced by pixel colour)
GENERATIVE DESIGN PROGRAMMINGRANDOMNESS
Visualization of dimensions
p5 reference
We have a many different ways to visualize
different dimensions of noise
3D noise
3D visualization 2D visualization
(third dimension is replaced
by pixel colour)
GENERATIVE DESIGN PROGRAMMING
Sketch: squiggly line
RANDOMNESS
1. draw points organized in a line
2. displace the points from the center line
a. using random( )
b. use noise( )
c. try millis( ) – milliseconds passed since start
d. extra: use random like running sum
(random walk technique)
3. create lines using beginShape-vertex-endShape
beginShape(POINTS | LINES)
vertex( x, y )
endShape()
Create a complex shape by
connecting a series of vertices.
Code ->
GENERATIVE DESIGN PROGRAMMINGRANDOMNESS
GENERATIVE DESIGN PROGRAMMINGRANDOMNESS
1. make a grid of squares
2. use noise() function to color the squares
3. explore the noise "map"
- scale the noise by scalar
- offset x, y (panning)
- hook the map coordinates to cursor position
- at what level of zoom does the noise look random again?
- are there any artifacts?
4. animate the noise using z-coordinate and time
Noisy grid
Animation using time as a z-dimension,
then slicing in xy plane. Picture from
Classification of solid textures using 3D
mask patterns, Suzuki et. al
Code ->
GENERATIVE DESIGN PROGRAMMING
GENERATIVE DESIGN PROGRAMMINGRANDOMNESS
❏ shape deformations
❏ illusion of a flow
❏ terrain generation
How is it used?
random example
Picture from
Kristína Zákopčanová
GENERATIVE DESIGN PROGRAMMING
Examples
RANDOMNESS
GENERATIVE DESIGN PROGRAMMING
→ ALBUM ART
RANDOMNESS
Joy Division
GENERATIVE DESIGN PROGRAMMING
Creative constraints
http://creative-constraints.surge.sh/#/en
GENERATIVE DESIGN PROGRAMMING
The grid
1. Create a 2D grid of shapes you like / open your old sketch
2. Add just enough chaos to maintain equilibrium with order
Ideas:
move shapes around, rotate them, scale them, choose random shape, color from some range, etc.
Functions:
random ( min, max )
noise ( x, y )
push(), pop(), translate(x,y), rotate(rad), scale(val)
RANDOMNESS
GENERATIVE DESIGN PROGRAMMING
More control
RANDOMNESS
Set seed to always generate the same
pseudo-random sequences
randomSeed(seed)
noiseSeed(seed)
Control the quality of the noise
noiseDetail(lod, falloff)
ref
GENERATIVE DESIGN PROGRAMMING
❏ Perlin invented Simplex noise in 2001
❏ improvement over Perlin noise in artefacts
❏ patented, look for OpenSimplex
❏ libraries for noise generation (including OpenSimplex):
JS/P5: https://github.com/josephg/noisejs
https://github.com/jackunion/tooloud (not sure how fast)
Java/Processing: https://github.com/KdotJPG/Noise-Extras
❏ great video about programming with noise: https://www.youtube.com/watch?v=CHZtK-keEvU
which explains more advanced techniques, such as:
❏ fractal noise - summing up noise functions (layering the noise)
❏ turbulence noise
❏ domain warping
Advanced stuff
RANDOMNESS
GENERATIVE DESIGN PROGRAMMING
HW1 reminder
GENERATIVE DESIGN PROGRAMMING
Sketches from all classes available at
https://editor.p5js.org/mrehacek/collections/Y7yY_s7PN