Asemic Writing is a wordless open semantic form of writing. The word asemic means “having no specific semantic content”, or “without the smallest unit of meaning”. With the non-specificity of asemic writing there comes a vacuum of meaning, which is left for the reader to fill in and interpret. …. Asemic writing is a hybrid art form that fuses text and image into a unity, and then sets it free to arbitrary subjective interpretations. …
Inspired by a challenge launched by Robert Boran on the Facebook group Creative Coding with Processing and P5.js I created a Processing sketch that simulates an Asemic Writing. The technique is based on a sequence of eight random “words” that alternates randomly; each “word” is a combination of “elliptic oscillators” that follows the rectlinear movement of the (hidden) pen on the page.
The animation is accompained by a simple purely generative soundscape made with VCV Rack and Native Instruments Absynth VST.
This is the final result.
As soon as I clean-up a little bit the code (actually a mess) I’ll publish it here and add more details.
A Processing 3 sketch of four slowly evolving polygons and a meditative soundscape created by a few Tibetan Singing Bowls.
The algorithm is very simple:
place each vertex of each polygon in a random position
assign to each vertex a random direction (all polygons have the same scalar velocity)
at every frame move each vertex, if the new position is outside a border, simply make it bounce (reverse the velocity component orthogonal to the border)
assign a different color to each polygon and draw only its outer border (no fill)
This is a three-part post about Conway’s Game of Life and some easy-to-implement variations that can lead to interesting visual results.
Part 1: adding colors
Part 2: extending the neighbourhood [… coming soon …]
Part 3: moving to the third dimension [… coming soon …]
Part 1: adding colors
The Conway’s Game of Life is a cellular automaton created by the British mathematician John Horton Conway in 1970. It is a theoretically infinite grid of cells; each cell can be in two states: dead ($0$) or alive ($1$). Initially the grid has a particular initial configuration (for example a percentage of the cells are set to alive). Then the cells evolve, and the state of cell $(x,y)$ at generation $N+1$ depends only on its state and the state of its eight neighbours at generation $N$. The rules are simple:
if a dead cell at generation $N$ is surrounded exactly by 3 alive cells then it willl be alive at generation $N+1$
if an alive cell at generation $N$ is surrounded by 2 or 3 alive cells, then it will stay alive, otherwise it will become a dead cell at generation $N+1$
Despite the simple rules, the Conway’s Game of Life is a Turing Complete model of computation (i.e. it can simulate any computer).
The visual configurations and the animations are also visually interesting.
A first variant can be obtained in the following way:
overlap three independent cell grids (one for each component Red-Green-Blue)
animate each grid using the standard rules, but for each cell $(x,y)$ in each grid also keep a fractional (float) value $C(x,y)$ in the range (0,1) ($C_r$ for the red grid, $C_g$ for the green grid, $C_b$ for the blue grid) and update it using the following rules:
if a cell becomes alive then add a fixed constant $v_1$ to it: $$C(x,y) = C(x,y)+v_1$$
if a cell becomes dead then subtract a fixed constant $v_0$ to it: $$C(x,y) = C(x,y) – v_0$$
render each cell $(x,y)$ with a square (or pixel) and color it according to the three RGB components values $C_r, C_g, C_b$ that it has in the three independent grids: $Red = C_r(x,y)*255$, $Green=C_g(x,y)*255$ , $Blue=C_b(x,y)*255$
This is a video that shows the resulting animation made with Processing 3 using $v_1=0.3$, $v_0=0.04$, starting from an initial random configuration:
The Processing source code can be downloaded here:
A cyclic cellular automaton (CCA) is defined as an automaton where each cell takes one of N states 0, 1,…, N-1 and a cell in state i changes to state i+1 mod N at the next time step if it has a neighbor that is in state i+1 mod N, otherwise it remains in state i at the next time step. Classically CCA are applied on the 2-dimensional integer lattice with Von Neumann neighborhoods (nearest 4 neighbors): if cell is at coordinate (x,y), the four neighbours are those at coordinates (x+1,y), (x-1,y), (x,y+1), (x,y-1).
The cells are arranged in a bidimensional grid and initially they are in a random state. At each generation a cell in state i evolves to state i+1 mod N if at least one of its neighbors is in state i+1. The color of each cell is determined by its state.
The following image is generated using Von Neumann neighborhood:
[click to enlarge]
But very interesting behaviors can also be obtained if we pick irregular/random neighborhoods.
Using computers we have checked the sequence generated by the first 10^20 numbers and all sequences soon or later reaches the value 1.
The Collatz conjecture says that ALL numbers converge to 1 … though the problem is simple, no one has been able to prove (or disprove) it formally. Jeffrey Lagarias stated in 2010 that the Collatz conjecture “is an extraordinarily difficult problem, completely out of reach of present day mathematics”.
I recently found a very interesting and well done video explaining how the Collatz sequences can be visualized graphically. Using simple rules they can be used to build an interesting tree-like pattern. For further details see the original video on the Numberphile channel.
I decided to implement the visualization in Processing and tried to vary some parameters that generate the Collatz-tree. Slowly varying those parameters results in a hypnotic abstract animation. I recorded it (saving each frame and combining them with the free ffmpeg tool) and added an abstract music (the music itself is partially generated using a Collatz sequence and manually adjusted trying to make it more harmonious).
This is the final video:
This is the Processing code; you can experiment with it and freely modify it; let me know if you find interesting variants (you can also download the code CollatzTtree.7z):
/**
* The Collatz Tree v1.0
*
* Put this file in a directory named CollatzTree and open it with Processing.
* ... for futher informtion read the full article at
* https://www.algoritmarte.com/the-collatz-tree/
*
*
* Some PARAMETERS to play with ...
*
*/
float FIRST_BRANCHLEN = 26; // the length of the first branch of the tree
float START_AEVEN = 4; // angle increase for even branches (degrees)
float START_AODD = -8; // angle increse for odd branches (degrees)
int BRANCHES = 24; // number of branches
float SPEED_AEVEN = 0.4; // "speed" of even angle (degrees per second)
float SPEED_AODD = -0.3; // "speed" of odd angle (degrees per second)
int rollcol = 3; // seconds between the roll of palette
int currscene = 1; // current scene (used in animation) 0=static 1=forward 2=backward
// ------------------------------------------------------------
/**
* Other parameters used for the animation
*/
boolean frecord = false; // set to true if you want to generate the frames
String recorddir = "D:/tmp/video/"; // where the frames are generated (warning they can occupy a lot of space)
int numsaved;
long scenelen[] = {
//0, 2000, 3000
//0, 8000, 124000
0, 8000, 100000
};
// ------------------------------------------------------------
/**
* "internal" parameters
*/
int FPS = 30; // frames per second
float ae = START_AEVEN * (PI/90); // convert start angle even in radiants
float ao = START_AODD * (PI/90); // convert start angle odd in radiants
float acce = 0.001; // acceleration even
float acco = 0.001; // acceleration odd
float currspeede = 0; // speed even
float currspeedo = 0; // speed odd
float target_speede = SPEED_AEVEN;
float target_speedo = SPEED_AODD;
float zoom = 1;
float maxy, miny;
float cx, cy;
boolean fsetup = true;
int colray[] = {
0xff0000ff,0xff2000ff,0xff4000ff,0xff6000ff,
0xff8000ff,0xffA000ff,0xffC000ff,0xffE000ff,
0xffff00E0,0xffff00C0,0xffff00A0,0xffff0080,
0xffff0060,0xffff0040,0xffff6020,0xffff8000,
0xffffA000,0xffffC000,0xffffE000,0xffffff00,
0xffffE000,0xffffC000,0xffffA000,0xffff8000,
0xffff6020,0xffff0040,0xffff0060,0xffff0080,
0xffff00A0,0xffff00C0,0xffff00E0,0xffE000ff,
0xffC000ff,0xffA000ff,0xff8000ff,0xff6000ff,
0xff4000ff,0xff2000ff,
};
// ------------------------------------------------------------
// Surge Verb Pad
int coff; // value for shifting colors
long tm0 = 0; // milliseconds at first draw
long maintimer; // current milliseconds
long tmbye;
/**
* A Collatz number
*/
class TCollatzPoint {
float branchlen = FIRST_BRANCHLEN;
float x, y, angle;
int num;
public TCollatzPoint( int num, float x, float y, float angle ) {
this.num = num; this.x = x; this.y = y; this.angle = angle;
}
public TCollatzPoint branch( int num2, float deltaangle ) {
float angle2 = angle + deltaangle;
float x2 = x + branchlen * cos( angle2 ) * zoom;
float y2 = y + branchlen * sin( angle2 ) * zoom;
TCollatzPoint res = new TCollatzPoint( num2, x2, y2, angle2 );
return res;
}
}
/**
* Initilization stuff
*/
void setup() {
frameRate( FPS );
size( 1280, 720, JAVA2D);
background(0);
cx = width / 2;
cy = height / 2;
if ( frecord ) currscene = 0;
zoom = 1;
cy = height-height/10;
drawCollatz( ae , ao, BRANCHES );
drawCollatz( ae , ao, BRANCHES );
fsetup = false;
}
/**
* Draw the Collatz tree
*/
void drawCollatz( float aeven, float aodd, int maxdepth ) {
TCollatzPoint buf[] = new TCollatzPoint[1024];
TCollatzPoint buf2[] = new TCollatzPoint[1024];
TCollatzPoint bufswap[];
int depth = 0;
int n = 0, m;
buf[n++] = new TCollatzPoint( 1, 0, 0, PI / 4 );
maxy = 0;
miny = 0;
strokeWeight( 2 ) ;
noFill();
while ( depth < maxdepth ) {
if (currscene == 0) {
stroke( 0xffffffff );
} else {
int c = colray[(coff + depth) % colray.length];
//c = (c % 0xffffff) | 0x80000000;
stroke( c );
}
m = 0;
for (int i = 0; i < n; i++) {
TCollatzPoint p = buf[i];
int num2 = p.num * 2;
if ( m >= buf.length - 1 ) break;
TCollatzPoint p2 = buf[i].branch( num2, aeven );
if (!fsetup) line( cx + p.x, cy - p.y, cx + p2.x, cy - p2.y );
if ( p2.y > maxy ) maxy = p2.y;
if ( p2.y < miny ) miny = p2.y;
buf2[m++] = p2;
if ( p.num > 1 && (p.num - 1 ) % 3 == 0) {
num2 = (p.num - 1) / 3;
p2 = buf[i].branch( num2, aodd );
if (!fsetup) line( cx + p.x, cy - p.y, cx + p2.x, cy - p2.y );
if ( p2.y > maxy ) maxy = p2.y;
if ( p2.y < miny ) miny = p2.y;
buf2[m++] = p2;
}
}
n = m;
bufswap = buf2;
buf2 = buf;
buf = bufswap;
depth++;
}
strokeWeight( 2 ) ;
stroke( 0xff00ff00);
fill(0xffffffff );
for (int i = 0; i < n; i++) {
TCollatzPoint p = buf[i];
if ( ! fsetup) ellipse( cx + p.x, cy - p.y, 7, 7 );
}
float f = (maxy - miny) / height;
float fy = (maxy + miny) / 2;
if ( fsetup) {
zoom += (0.92 - f );
cy += (height/2 + fy - cy);
} else {
if ( currscene == 0 ) {
//println( "maxy=" + maxy + " miny="+miny + " fy="+fy + " cy="+cy + " f="+f );
//zoom = 1 / f;
//cy = height;
} else {
zoom += (0.92 - f )/10;
cy += (height/2 + fy - cy)/100;
}
}
}
/**
* Current elapsed millisecodns (measured differenty if recording)
*/
long elapsedMs() {
if ( frecord ) {
return (long) 1000.0*(frameCount-1) /FPS;
} else {
return millis() - tm0;
}
}
/**
* Check if we've reached a new scene; if it has changed change the animation parameters
*/
void checkScene() {
int sc = 0;
for (int i = 0; i < scenelen.length; i++) {
if (maintimer > scenelen[i]) sc = i;
}
if ( abs( ae ) < 11*PI/180 && abs( ao ) < 11*PI/180 ) sc = 3;
if (sc != currscene) {
currscene = sc;
switch( currscene ) {
case 1 :
break;
case 2 :
target_speede = -SPEED_AEVEN;
target_speedo = -SPEED_AODD;
break;
case 3 :
acce *= 2; acco *= 2;
tmbye = maintimer + 10000;
target_speede = 0;
target_speedo = 0;
break;
}
}
}
/**
* Very naive speed management
*/
float changeSpeed( float curr, float target, float acc ) {
if ( curr < target ) {
curr += acc;
if ( curr > target ) curr = target;
}
if ( curr > target ) {
curr -= acc;
if ( curr < target ) curr = target;
}
return curr;
}
/**
* Main draw routine
*/
void draw() {
maintimer = elapsedMs();
background(0);
drawCollatz( ae , ao, BRANCHES );
if ( currscene > 0) {
ae += currspeede * (PI/90) / FPS;
ao += currspeedo * (PI/90) / FPS;
currspeede = changeSpeed( currspeede, target_speede, acce );
currspeedo = changeSpeed( currspeedo, target_speedo, acco );
if ( ( frameCount % (rollcol*FPS) ) == 0 && currscene < 3) coff++;
}
if ( frecord ) {
checkScene();
if ( tmbye == 0 || maintimer < tmbye ) {
numsaved = frameCount;
saveFrame( recorddir + "vid-######.tga" );
} else {
strokeWeight( 1 );
stroke(0xffffffff);
fill(0xffffffff);
text( "VIDEO ENDED RECORDED FRAMES: " + numsaved, 50, 50 );
}
}
}
