# Chaos v.s order

So oddly enough, when I was young i used to have this super vivid dream whenever I had a fever and somehow my Dad gets the same dream. Weird, right? The only way i can describe it is an atmosphere an environment that is super smooth and calm, black and white, and then suddenly chaotic and choppy and scary. I tried to make it here.

```
void setup() {
size(600, 200);
}
void draw () {
background(255);

float randomness = map(mouseX, 0, width, 0, 1);
randomness = constrain(randomness, 0, 1);

// float rX= random(width/2, width);
// float rWidth= random(width/2, width);

for (int i=1; 1<30; i++) {
float rX= (i*20) + randomness * random (-15, 15);
float rWidth= (i*20) + randomness *random (-15, 15);

//if (mouseX>300) {
line(rX, 0, rWidth, height);
}
}

```

# A Diet of Bones

This is an experiment in generated grammar and poetics. the display is a blank black screen, and clicking generates a phrase that will slowly rise on the page.  The type of phrase is based off of this, and are delineated into 3 types:

Left: A grammatically correct english phrase

Middle: a semi-random phrase in disyllabic trimeter (each line has 6 syllables).

Right: a randomised set of words that are in iambic pentameter (each line consists of 4 sets of iambs, which consist of one weak-stress syllable, and one strong-stress syllable).

```//class containgng pertinent information abot a word
class Word {
String sing;
String plur;
int syllables;
int[] metre;

Word(String tempSing, String tempPlur,
int tempSyl, int[] tempMet) {
sing = tempSing;
plur = tempPlur;
syllables = tempSyl;
metre = tempMet;
}
}

// word tupole class - needed for a function return
class WordTuple {
Word x;
Word y;
WordTuple(Word tempX, Word tempY) {
x = tempX;
y = tempY;
}
}

// class that contains the phrases (built from Words) that appear
// on the display
class Phrase {
String contents;
int x;
int y;
Phrase(String tempConts, int tempX, int tempY){
contents = tempConts;
x = tempX;
y = tempY;
}
//phrases rise after generation
void update(){
y = y-1;
}
void display(){
fill(250,250,250);
textAlign(CENTER);
text(contents,x,y);
}
Boolean finished(){
return y < -50;
}
}

//word declaration - I have to hard-code the words right now,
//but processing automitically seems possible, if difficult
Word confessional;
Word studio;
Word Lebanon;
Word diet;
Word timber;
Word along;
Word bee;
Word bone;
Word of;
Word forWord;
Word a;
Word redouble;

Word[] nouns;
Word[] allWords;

//rythm patterns for iambic tetrameter and trimeter - 0 is a soft
//stress, 1 a hard stress. tetram is the only one currently in use
//since makeTrimet only follows the syllable restriuction
//Note: this is oversimplified - actually 4 levels of stress in
//english.
int[] tetramPattern = {0,1,0,1,0,1,0,1};
int[] trimetPattern = {0,1,0,1,0,1};

ArrayList<Phrase> phrases;

//makes a gramatically correct english phrase of one of a set of
//structures and randomly selected nouns
String makePhrase(){
float chooser = random(0,360);
int word1 = floor(random(nouns.length));
int word2 = floor(random(nouns.length));
String result;
if (chooser < 120) {
// a noun for noun
result = "a " + nouns[word1].sing + " for "
+ nouns[word2].plur;
} else if (chooser < 240) {
// the noun noun
result = "the " + nouns[word1].sing + " " + nouns[word2].sing;
} else {
// noun for noun
if (chooser < 300) {
result = nouns[word1].sing + " for " + nouns[word2].plur;
} else {
result = nouns[word1].plur + " for " + nouns[word2].plur;
}
}
return result;
}

//adds a word's metre to the main pattern
int[] addWord( int[] pattern, Word newWord, int patternLen){
/*println("adding" + newWord.sing +
"from " + patternLen + "to:");
printArray(pattern);*/
for(int i = 0; i < newWord.syllables; i++) {
pattern[patternLen + i] = newWord.metre[i];
}
/*println("result:");
printArray(pattern);*/
return pattern;
}

//test wether a metre pattern follows the main pattern up to
//the given size
Boolean followsMetre(int[] pattern, int[] testPattern, int size){
for(int i = 0; i < size; i++){
if (pattern[i] != testPattern[i]) {
return false;
}
}
return true;
}

//maked a nonsense iambic tetrameter
String makeTetram(){
int[] testPattern = new int[tetramPattern.length];
int[] resultPattern = new int[tetramPattern.length];
int currentLen = 0;
int tryI = 0;
int counter = 0;
String result = "";
Word tryWord;

while (currentLen < tetramPattern.length) {
tryI = floor(random(allWords.length));
tryWord = allWords[(tryI + counter) % allWords.length];
if ((currentLen + tryWord.syllables) <= tetramPattern.length){
testPattern = addWord(resultPattern, tryWord, currentLen);
if (followsMetre(tetramPattern, testPattern,
currentLen + tryWord.syllables)) {
resultPattern = testPattern;
currentLen += tryWord.syllables;
result = result + tryWord.sing + " ";
counter = 0;
} else {
testPattern = resultPattern;
}
}
counter += 1;
if (counter >= allWords.length) {
/*println(currentLen);
printArray(resultPattern);*/
return result + "pain "; //code failure
}
}
return result;
}

//chooses 2 words with total syllable cound of sylSum
WordTuple getWords(int sylSum){
Word word1 = allWords[floor(random(allWords.length))];
int[] nul = {};
Word word2 = new Word("","",0,nul);
int goalSyl = sylSum - word1.syllables;
if(goalSyl == 0){
return new WordTuple(word1, word2);
}
int tryI = floor(random(allWords.length));

for(int i=0; i < allWords.length; i++){
word2 = allWords[(tryI + i) % allWords.length];
if(word2.syllables == goalSyl){
return new WordTuple(word1, word2);
}
}
return new WordTuple(word1, word2);
}

// makes a disyllabic trimeter loosely based off of the
// phrase patterns
String makeTrimet(){
float chooser = random(0,360);
WordTuple choices;
String result;
if (chooser < 120) {
choices = getWords(4);
result = "a " + choices.x.sing + " for "
+ choices.y.plur;
} else if (chooser < 240) {
choices = getWords(5);
result = "the " + choices.x.sing + " " + choices.y.sing;
} else {
choices = getWords(5);
if (chooser < 300) {
result = choices.x.sing + " for " + choices.y.plur;
} else {
result = choices.x.plur + " for " + choices.y.plur;
}
}
return result;
}

void setup() {
//sets up words - hard coding
int[] feed4 = {0,1,0,1};
confessional = new Word("confessional",
"confessionals", 4, feed4);

int[] feed3 = {1,0,1};
studio = new Word("studio", "studios", 3, feed3);
Lebanon = new Word("Lebanon", "Lebanon", 3, feed3);
int[] feed3a = {0,1,0};
redouble = new Word("redouble", "redoubles", 3, feed3a);

int[] feed2 = {1,0};
diet = new Word("diet", "diets", 2, feed2);
timber = new Word("timber", "timber", 2, feed2);
int[] feed2a = {0,1};
along = new Word("along", "along", 2, feed2a);

int[] feed1 = {1};
bee = new Word("bee", "bees", 1, feed1);
bone = new Word("bone", "bones", 1, feed1);
int[] feed1a = {0};
of = new Word("of", "ofs", 1, feed1a);
forWord = new Word("for", "fors", 1, feed1a);
a = new Word("a", "a", 1, feed1a);

nouns = new Word[7];
nouns[0] = studio;
nouns[1] = bee;
nouns[2] = Lebanon;
nouns[3] = diet;
nouns[4] = bone;
nouns[5] = timber;
nouns[6] = confessional;
//nouns = {studio, bee, Lebanon, diet, bone, timber};
allWords = new Word[12];
allWords[0] = bee;
allWords[1] = redouble;
allWords[2] = Lebanon;
allWords[3] = of;
allWords[4] = diet;
allWords[5] = confessional;
allWords[6] = bone;
allWords[7] = forWord;
allWords[8] = studio;
allWords[9] = timber;
allWords[10] = along;
allWords[11] = a;

phrases = new ArrayList<Phrase>();

size(800,500);
frameRate(24);

/*println(makePhrase());
println("");
println(makeTetram());
println("");
println(makeTrimet());*/
}

void draw() {
background(0);
Phrase phrase;
for (int i = phrases.size()-1; i >= 0; i--) {
phrase = phrases.get(i);
phrase.update();
phrase.display();
if (phrase.finished()) {
phrases.remove(i);
}
}
}

//what kind of phrase is selected based off of the mouse position
//when clicked3
void mousePressed() {
println("mouse press:" + mouseX + "in" + width);
if(mouseX < (width/3)){
} else if(mouseX < 2*(width/3)){
} else {
}
}```

# Control/Chaos x SelfPortrait

For the selfPortrait assignment, I had a lot of trouble figuring out how to insert images. That being said, I decided to continue working on it for the order chaos assignment. The mouseX position is used to control randomly changing bars that cover my image. As you move the mouse to the right side of the window, the bars move away from the face. Moving back to the left covers the face in chaos via quickly changing colored ellipses/rectangles. The mouseY position makes it more likely for the bars and ellipses to be thinner as you approach the bottom of the window.

Unfortunately, the code for this assignment was reverted to my first 30 minutes of work when my computer died.

# Assignment 4: Chaos/Order/Faces Experiments

My Chaos vs. Order and Face projects kind of merged together in terms of what ideas they explore, so I’ve combined them into one blog post here…

I decided to research chaos and faces through visual distortion and face detection algorithms. I was inspired greatly by this blog post about “machine pareidolia”.

For the Chaos/Order project, I took an image of a human face and slowly distorted it until it was not recognizable by a face detection algorithm. Each step of the program increments a chaos constant which controls the amount of distortion that is passed into a shader that uses a perlin noise texture to transform the texture coordinates of a quad textured with the face image. Here are the results:

The face was obviously detected at step 0, where chaos=0…

At step 30, the face begins to look slightly “off”, but is still recognized.

Step 57 is still considered a face…

The face stays a face until step 162.

It’s interesting to see that step 161, the previous step, is only so slightly different enough from step 162 that it is still a machine-readable face!

On a similar note, my Generative Face project was about finding more faces from distorted faces (meta pareidolia?). I started with a basic geometric machine-recognisable face and incremented a similar chaos variable. Here are the results (detected faces are highlighted by squares):

Chaos = 5

Chaos = 10

Chaos = 50

# The Enemies

New Version

The Enemy
When given the theme of working with chaos and order, for some reason my mind immediately went back to viruses. I wanted to create a program where on the surface the objects appeared to be ordered and calm but when the user interacted with it became a chaotic frenzy. With that in mind I set out to create the ‘enemies’, viruses that would scramble as the user pressed the screen and moved the mouse from the top of it to the bottom. Honestly my biggest obstacle was creating the actual shape of the virus. I used the createShape() function but really had a difficult time picturing where I would plot the points that made my shape come together. It was a lot of guess work which I found troublesome, especially because for some reason, the tweak mode on processing wasn’t working for my computer. After that I created a loop that repeated the image of the virus over an increment of 100 on the y value, in order to space it out. Then I mapped the movement of the y value on the mouse so that as the user when down it became more chaotic. I used a constraint to make the top of the screen the most static. I also made it so that as long as the mouse wasn’t pressed the viruses won’t move. I did this by creating an if statement that was dependent on the Boolean move which functioned to make the viruses move only if the mouseisPressed function was true.

*EDITED: I created a gif of the project working and also resized the viruses so they are smaller and there are more of them. This change can be seen in the gif and in the code below.

```//order mouseX= left chaos mouseX is right
float x=0;
float y=0;
float xmove;
float trying;
float trying2;
boolean moving= false;

void setup(){
size(400,405);

}

void draw(){
smooth();
background(255,15,72);

xmove= map(0,mouseY,1,height,0);
xmove= constrain( xmove,1,0);

for( x=0; x< =width*20; x+=100){
for( y=0; y<=height*20; y+=200){

trying= x + xmove*random(-30,30);
trying2= y+ xmove*random(-30,30);

if (mousePressed==true){//will run the code as long as the mouse is held down

x=trying;
y=trying2;
}

stroke(5);

fill(132,199,44);

beginShape();
//triangle 1 top
vertex((x)/3,(y+50)/3);//outsidebeginingline
vertex((x+50)/3,(y+15)/3);
vertex((x+100)/3,(y+50)/3);
vertex((x)/3,(y+50)/3);

//triangle2bottom

vertex((x+50)/3,(y+100)/3);
vertex((x+100)/3,(y+50)/3);

endShape();
line((x+50)/3,(y+15)/3,(x+50)/3,(y+100)/3);

fill(0,0,182);
//bottom virus;
beginShape();
vertex((x+25)/3,(y+100)/3);
vertex((x+75)/3,(y+100)/3);
vertex((x+75)/3,(y+200)/3);
vertex((x+25)/3,(y+200)/3);
vertex((x+25)/3,(y+100)/3);
endShape();

stroke(0,0,0);
line((x+25)/3,(y+200)/3,(x+15)/3,(y+215)/3);
line((x+45)/3,(y+200)/3,(x+35)/3,(y+215)/3);
line((x+55)/3,(y+200)/3,(x+65)/3,(y+215)/3);
line((x+75)/3,(y+200)/3,(x+85)/3,(y+215)/3);
}//inloop
}//ousideloop

}//end draw

```

# Jingle Balls

Not really music to anyone’s ears…

```import ddf.minim.*;
import ddf.minim.ugens.*;

Minim       minim;
AudioOutput out;
Oscil       wave;

void setup(){
size(1000,500);
minim = new Minim(this);
out = minim.getLineOut();
wave = new Oscil( 300, 0.5f, Waves.SINE );
wave.patch( out );
}

void draw(){
background(255);
smooth();

//golan's randomness
float randomness = map(mouseX, 0,width, 0,1);
randomness = constrain(randomness, 0,1);

for (int i=1; i

```

# Financial Seismograph

Based on your control and data ripped from live stock trades the financial seismograph is meant to disorient and remind the user of the fragile nature of their financial system by allowing them to control the chaotic state of their world’s digital representation.

(The live data doesn’t work yet, but it will soon…)

```Stock stockValue;

int prevSign = 0;

int centerScreenX;
int centerScreenY;

void setup() {
size(1200,500);
background(100);
stockValue = new Stock();
centerScreenX = displayWidth/2 - (width/2);
centerScreenY = displayHeight/2 - (height/2);
ellipseMode(CENTER);

}

void draw() {
background(100);
drawBackground();
drawTicker();
if (frameCount % 1 == 0) {
makeStock();
}
makeLines();
frame.setLocation(centerScreenX,centerScreenY + stockValue.change);
drawSeismo();
//drawStock();
}

void drawBackground() {
for (int x = 0; x < width; x += width/10) {
stroke(127);
line(x,0, x,height);
}
for (int y = 0; y < height; y += height/10) {
line(0, y, width, y);
}
}

void mousePressed() {
stockValue.y = height/2;
}

void drawSeismo() {
line(width,height/2, stockValue.x,stockValue.y);
fill(0);
ellipse(width,height/2,height/20,height/20);
}

void drawTicker() {
strokeWeight(2);
stroke(color(map(stockValue.average, height/2, height, 0, 155)+100, 0,0));
line(0,stockValue.average, int(width), stockValue.average);
}

void makeLines() {
for (int i = 0; i &lt; circleList.size(); i++) {
if (i &gt; 0) {
Circle left = circleList.get(i-1);
Circle right = circleList.get(i);
Line currLine = new Line(left.x,left.y,right.x, right.y,right.fillColor);
currLine.drawMe();
}
}
}

void makeStock() {
}

int total = 0;
for (Circle circ: circleList) {
circ.move(circ.velX, circ.velY);
circ.formatPos();
total += circ.y;
circ.update();
}

for (int i =0; i &lt; circleList.size(); i++) {
if (!(circleList.get(i).alive)) {
circleList.remove(i);
}
}
stockValue.update();
stockValue.average = total /(circleList.size()+1);
}

void drawStock() {
for (Circle circ: circleList) {
circ.drawMe();
}
}

class Stock {
int change;
int x;
int y;
float average;
int prevSign;
int prevVal;
int valChange;

Stock() {
this.x = int(width * .9);
this.y = int(height * .5);
this.change = 0;
this.valChange = this.y;
this.prevSign = 1;
this.prevVal = this.y;
}

void update() {
this.change = this.checkChange();
this.y += change;
}

int checkChange() {
float changeConstant = .2; //Value between 1 and 0, higher numbers = rapid changes
float upperBound = height * changeConstant ;
int ratio = int(map(mouseX, 0,width,0,upperBound));

int sign;
int check;

float a1 = height * .1;
float a2 = height * .2;
float b2 = height * .8;
float b1 = height * .9;

if (stockValue.y &lt; 0) {
check = 0;
} else if (stockValue.y &lt; a1) {
check = 1;
} else if (stockValue.y &lt; a2) {
check = 3;
} else if (stockValue.y &gt; height) {
check = 10;
} else if (stockValue.y &gt; b2) {
check = 9;
} else if (stockValue.y &gt; b1) {
check = 7;
} else {
check = 5;
}

float randomNum = random(0,10);
if (randomNum &lt; check) {
sign = -1;
} else {
sign = 1;
}

if (sign != this.prevSign) {
this.valChange = this.prevVal + int(map(this.y,0,height,height/2,0)) - height/2;
}

float smallestChange = random(ratio/5.0);
int largestChange = ratio;

return sign * (int(random(smallestChange,largestChange)));
}
}

class Shape {
int x;
int y;
int regX;
int regY;
color fillColor = color(0);
int sWeight = 1;
boolean alive = true;
int diameter;
int velX;
int velY;

Shape(int x, int y) {
this.regX = x;
this.regY = y;
this.formatPos();
}

void move(int xVel,int yVel) {
this.regX += xVel;
this.regY += yVel;
}

void check() {
if ((this.x + this.diameter) &lt; 0) {
this.alive = false;
}
}

void update() {
this.check();
}

void formatPos() {
this.y = this.regY + stockValue.change;
this.x = this.regX;
}
}

class Circle extends Shape {
int size;
int velY;
int velX;
int diameter;

Circle(int x, int y) {
super(x,y);
this.size = 5;
this.velY = 0;
this.velX = -1;
this.diameter = this.size;
this.fillColor = this.chooseColor();
}

void drawMe() {
fill(this.fillColor);
noStroke();
ellipse(this.x, this.y, this.size, this.size);
}

color chooseColor() {
return color(map(this.y, height/2, height, 0, 155)+100, 0,0);
}
}

class Line extends Shape {
int x1;
int y1;
int x2;
int y2;
color strokeColor;

Line(int x1, int y1, int x2, int y2, color strokeColor) {
super(x1,y1);
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.strokeColor = strokeColor;
}

void drawMe() {
stroke(this.strokeColor);
line(this.x1, this.y1, this.x2, this.y2);
}
}```

# Generated PseudoEnglish

I created a sentence generator which chooses which letter comes next based on the most likely letter to follow it in English words. When the mouse is on the left side (order), the probability is always taken into account, and the words generated fall within normal linguistic patterns of English. As the mouse moves further to the right, however, the next character becomes random, and symbols from outside of the alphabet begin to appear.
chaosnorda

# chaos versus order : cellular matter

ribosomes leaving

Thank you Miles Peyton for helping me to understand trig and arrays.
Initially I had wanted for the tiny particles to be moving around in a circle, continuously, and for there to be a reaction from the cell when the particles leave .
I though of Chaos and Order in terms of cells and their functioning parts. Parts of wholes that are so incredibly important, if we lose them, higher structures and larger ideas cannot be maintained. Even something as tiny as the ribosomes missing would undermine the system.

```int numDots;

float[] dot_rotation;
float dotSize = 5;
float MAX_RADIUS = 90;

void setup () {
size (600, 300);

numDots = int(random(90, 120));
dot_rotation = new float[numDots];
dot_intialRadius = new float[numDots];
dot_radius = new float[numDots];

for (int i = 0; i < numDots; i++) {
dot_intialRadius[i] = random(40, 100);
dot_rotation[i] = random(0, TWO_PI);
}
}

void draw () {
background (250);
smooth ();

noFill ();
stroke (170);
ellipse (300, 150, 200, 200);
ellipse (300, 150, 120, 120);

float mouseNormalized = float(mouseX) / float(width);

pushMatrix();
translate(width/2, height/2);
fill (120);
noStroke ();

for (int i = 0; i < numDots; i++) {
float thisDot_x = cos(dot_rotation[i]) * dot_radius[i];
float thisDot_y = sin(dot_rotation[i]) * dot_radius[i];
ellipse(thisDot_x, thisDot_y, dotSize, dotSize);
}

popMatrix();

fill (240);
ellipse (300, 150, 95, 95);
fill (230);
ellipse ( 300, 150, 70, 70);

fill (190);
noStroke ();
ellipse (290, 130, 20, 17);
ellipse (320, 165, 15, 9);
ellipse (285, 175, 27, 20);

}```

# Either Chaos to Calm or Calm to Chaos

This is nothing like my original idea, which was that the particles would be randomly moving around and as mouseX increased they would come together to form the shape of a folding chair. This is as far as I got, just the particle system. The noise field is made from fiddling around with the noise function in the velocity of the points. Noise fields are really great for experimenting with, because no matter what you put, it comes out looking sweet.

```//cc charlotte stiles
//studied this http://www.openprocessing.org/sketch/10475 to understand particle systems

ArrayList points = new ArrayList();
boolean drawing = true;

void setup(){
smooth();
size(600,600);

background(255);
}
void draw(){
fill(255,50);
rect(0,0,width,height);
//magic if statement, dont touch
if(drawing == true){
//pvector comes with x and y
PVector pos = new PVector();
pos.x = random(width);
pos.y = random(height);
//velocity
PVector vel = new PVector();
vel.x = (0);
vel.y = (0);

Point punt = new Point(pos, vel);
}

//draws the points
for(int i = 0; i < points.size(); i++){
Point localPoint = (Point) points.get(i);

localPoint.update();
localPoint.draw();
}
}

class Point{
PVector pos, noiseVec,vel;
float noiseFloat;

public Point(PVector _pos, PVector _vel){
//these are for the punt
pos = _pos;
vel = _vel;

}

void update(){
//This is what gives the curvy shape
noiseVec = new PVector();
noiseVec.x = mouseX/100*( noise(pos.x/100)-.06);
noiseVec.y = mouseX/100*(noise(pos.y/100)-.06);
//warping, so it get heavier over time
if(pos.x < 0 || pos.x > width || pos.y < 0 || pos.y > height){
pos.x = random(width);
pos.y = random(height);
}
//all that for this
ellipse(pos.x, pos.y, 3, 3);

}

void draw(){
fill(0);
noStroke();

}
}

```