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[] dot_intialRadius;
float[] dot_radius;
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++) {
    dot_radius[i] = MAX_RADIUS * mouseNormalized + dot_intialRadius[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);


}

Assignment-04 Face- IKA

plant face

I initially wanted to randomize the plant as well, but I became confused in terms of the curveVertex function. I also wanted the face to be a more irregular shape, possibly stroked with a hand-drawn feeling to it. The curveVertex function frustrates me. Despite how basic this is, I’m awful at code and even this took longer than needed.

float nose1Size= 280;
float nose2Size= 290;
float nose3Size= 300;
float eyesize= 15;
float eyeballs= 10;
float eyebrowWidth= 8;
float facewidth= 200;
float faceheight= 230;

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

void draw (){
   background (193, 211, 222);
   
   
   // plant coming up from head
   
   stroke (148, 173, 146);
   line (300, 450, 300, 100);
   
   fill (148, 173, 146);
   beginShape();
   curveVertex (300, 285);
   curveVertex (330, 270);
   curveVertex (310, 260);
   curveVertex (300, 285);
   endShape ();
   
   beginShape();
   curveVertex (300, 230);
   curveVertex (270, 240);
   curveVertex (240, 256);
   curveVertex (300, 230);
   endShape ();
   
   beginShape ();
   curveVertex (300, 200);
   curveVertex (330, 190);
   curveVertex (310, 182);
   curveVertex (300, 200);
   endShape ();
   
   beginShape ();
   curveVertex (300, 120);
   curveVertex (320, 100);
   curveVertex (310, 98);
   curveVertex (300, 120);
   endShape ();
   
   beginShape ();
   curveVertex (300, 120);
   curveVertex (290, 95);
   curveVertex (282, 90);
   curveVertex (300, 120);
   endShape ();
   
   // done with plant
   
   // face
   fill (250, 245, 232);
   noStroke ();
   ellipse (300,400, facewidth, faceheight);
  
   
   // eyes
   noStroke ();
   fill (180);
   arc  (260, 480, eyesize, eyesize, 0, PI+QUARTER_PI, OPEN);
   arc  (330, 480, eyesize, eyesize, 0, PI+QUARTER_PI, OPEN);
   
   //eyeballs
   
   fill (210);
   ellipse (260, 480, eyeballs, eyeballs);
   ellipse (330, 480, eyeballs, eyeballs);
   
   //nose
   
   fill(204, 186, 186);
   triangle (nose1Size, 530, nose2Size, 510, nose3Size, 520);
   
   //eyebrows
   
   fill (210);
   rect (245, 460, 30, eyebrowWidth);
   rect (310, 460, 30, eyebrowWidth);
   
   
}

void mousePressed (){
  facewidth = random (170, 290);
  faceheight = random (200, 320);
  nose1Size = random (230, 290);
  nose2Size = random (260, 310);
  nose3Size = random (270, 330);
  eyebrowWidth = random (1, 10);
  eyesize = random (10, 20);
  eyeballs = random (5, 15);
}

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 https://openprocessing.orgsketch/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);
    points.add(punt);
  }
   
   //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);
    pos.add(noiseVec);
       //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();

  }
}



Chaos

 

 

void setup(){
  size(500,500); 
  frameRate(10);
}
 
void draw(){
  background(255);
 
  float randomness = map(mouseX, 0,width, 0,1);
  randomness = constrain(randomness, 0,1); 
  float randomColors = map(mouseX, 0,width, 0,255);
  randomColors = constrain(randomColors, 0,255);
  color randomBall = color (255,255,255);
 
  for (int i=1; i < 17; i++){
    for (int j=1; j < 17; j++){
      float x = (i*30)  + randomness * random(-30,30); 
      float y = (j*30)  + randomness * random(-30,30);
      ellipseMode(CENTER);
      randomBall = color(random(0,randomColors),
      random(0,randomColors),random(0,randomColors),100);
      float randomSize = 20 + randomness * random(-20,20);
      fill(randomBall);
      ellipse(x,y,randomSize,randomSize); 
    }
  }
}

Continue reading

Chaotic Swarm

mbk-chaos

I started this with just wanting to do swarming. After tinkering with the swarming behavior for a while I decided that the particles should have trails. After I added the trails I noticed that in looked like the trails were part of the particles, so I put the trails into a different buffer and drew outlines around the particles in the main buffer. The mouse position only changes the velocity. The chaos comes from the velocity multiplied by its effect constant outgrowing the bounds by which particles can attract each other. This results in particles traveling only in similar directions creating swarms when the mouse is to the right, and particles clustering into groups when the mouse is on the left.

emoticon face generator

For whatever reason I had a lot of trouble getting this to do things that actually looked interesting and good when I started randomizing them so I ended up settling for something really simple, even though I’m not very happy about it.

emotegenerator

I ended up spending so long trying to get the face to actually look skin-colored most of the time (which, as you can see, tanked miserably), and ran out of time to properly address the other things I wanted to add, like hair. And noses. And other necessary facial features, y’know. But at least it makes half-hearted reaction images?

 

//electronic media studio: interactivity

//variable list
float faceradius = 200;
float faceR = 232;
float faceG = 150; 
float faceB = 150;
float rEye = 50;
float gEye = 75;
float bEye = 225;
float eyeSize = 40;
float vertA1 =100;
float vertA2 =100;
float vertB1= 120;
float vertB2C2 =200;
float vertC1 = 180;
float vertD1 = 200;
float vertD2 = 100;

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

void draw(){
  background(146,237,224);
  strokeWeight(1);
  fill(faceR, faceG, faceB);
  ellipse (width/2, height/2, faceradius, faceradius);
  
  float eyeLX = width/2 - faceradius*0.3;
  float eyeRX = width/2 + faceradius*0.3;
   fill(rEye,gEye,bEye);
   ellipse (eyeLX, height/2, eyeSize, eyeSize); 
   ellipse (eyeRX, height/2, eyeSize, eyeSize);
   
   strokeWeight (5);
   noFill();
   curve(vertA1,vertA2, vertB1,vertB2C2, vertC1,vertB2C2, vertD1,vertD2);
}

void mousePressed(){
  eyeSize    = random (10,  30); 
  faceradius = random (100, 200); 
  rEye = random (150, 255);
  gEye = random (150, 255);
  bEye = random (150, 255);
  faceR = random (165, 210);
  faceG = random (120, 210);
  faceB = random (90, 190);
  vertA1 = random (100,200);
  vertA2 = random (80, 250);
  vertB1 = random (100, 140);
  vertB2C2 = random (150,210);
  vertC1 = random (160, 220);
  vertD1 = random (200,300);
  vertD2 = random (80,250);
  
  if (faceradius<150){
    vertB2C2 = random(150,175);
  }

}

Iteration

 

Iteration

I first wanted to create an mirror ball like background iteration but I couldn’t get the hang of it. I tried with rectangles but then it didn’t look as how I wanted it to look like. So instead I made a triangles that will go over and over again but since it looked too simple I added random colours to it mainly something of pink. It did turn out how I wanted it to be and I tried to do it with other shapes too but then the math was too complicated for me to figure out how to put it together into a shape so I just did the one with the triangle.

 

void setup(){
  size(800, 800);
  frameRate(3);
  noStroke();
}

void randomFill(){
  fill(color(random(165, 230), random(70, 185), random(160, 220)));
}

void drawTriangle( int dimension, int x1CoOrd, int y1CoOrd, 
                    int x2CoOrd, int y2CoOrd, int x3CoOrd, 
                    int y3CoOrd){
  int x1 = dimension * x1CoOrd;
  int y1 = dimension * y1CoOrd;
  int x2 = dimension * x2CoOrd;
  int y2 = dimension * y2CoOrd;
  int x3 = dimension * x3CoOrd;
  int y3 = dimension * y3CoOrd;
  randomFill();
  triangle(x1, y1, x2, y2, x3, y3);
}


void pattern(int x, int y, int dimension){
  pushMatrix();
  translate(x, y);
  drawTriangle(dimension, 0, 0, 0, 1, 1, 0);
  drawTriangle(dimension, 0, 1, 1, 0, 1, 1);
  drawTriangle(dimension, 1, 0, 1, 1, 2, 1);
  drawTriangle(dimension, 1, 0, 2, 1, 2, 0);
  drawTriangle(dimension, 0, 1, 0, 2, 1, 2);
  drawTriangle(dimension, 0, 1, 1, 1, 1, 2);
  drawTriangle(dimension, 1, 1, 1, 2, 2, 1);
  drawTriangle(dimension, 1, 2, 2, 1, 2, 2);
  popMatrix();
}

void draw(){
  background(100);
  fill( 0, 121, 184 );
  int dimension = 100;
  for (int i = 0; i < 800; i = i+200) {
    pattern(0, i, dimension);
    pattern(200, i, dimension);
    pattern(400, i, dimension);
    pattern(600, i, dimension);
  }
}

Variable Faces

Face

I used the last homework as a template since I couldn’t figure out a way to start from the scratch. I put the face shape, ears(the size and the placement), eye size, eyebrows and mouth as a variable. The mouth and eye placement is not random but is calculated every time and is placed relative to the face and the chin. The face colour is also random on a very small scale, since I wanted to keep the colour close to peach colour

color faceColor = color(200,200,200);

float earPlaceY = 172;
float earSizeX = 27;
float earSizeY = 45;
float faceLengthY = 270;
float faceChinX = 120;
float faceChinY = 230;
float faceWidthX = 100;
float faceWidthY = 150;
float faceForheadX = 130;
float faceForheadY = 100;
float eyeSizeX = 40;
float eyeSizeY = 30;
float eyebrowY1 = 130;
float eyebrowY2 = 150;
float mouthMid = 250;

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

void mousePressed(){
  faceColor = color(random(240,255),random(208,228),random(180,190));
  earPlaceY = random(160,185);
  earSizeX = random(20,35);
  earSizeY = random(35,55);
  faceLengthY = random(230,310);
  faceChinX = random(100,140);
  faceChinY = random(210,250);
  faceWidthX = random(70,130);
  faceWidthY = random(120,180);
  faceForheadX = random(110,150);
  faceForheadY = random(80,120);
  eyeSizeX = random(20,60);
  eyeSizeY = random(15,45);
  eyebrowY1 = random(130,150);
  eyebrowY2 = random(130,150);
  //mouthX = random();
  //mouthY = random();
  mouthMid = random(190,270);
}
 
void draw(){
  background(0,77,153);
  strokeWeight(4);
  stroke(0);
  //face colors
  fill(faceColor);
  //ears
  ellipse(faceWidthX,earPlaceY,earSizeX,earSizeY);
  ellipse(400-faceWidthX,earPlaceY,earSizeX,earSizeY);
  //face
  beginShape();
  curveVertex(400-faceForheadX,faceForheadY);
  curveVertex(faceForheadX,faceForheadY);
  curveVertex(faceWidthX,faceWidthY);
  curveVertex(faceChinX,faceChinY);
  curveVertex(200,faceLengthY);
  curveVertex(400-faceChinX,faceChinY);
  curveVertex(400-faceWidthX,faceWidthY);
  curveVertex(400-faceForheadX,faceForheadY);
  curveVertex(faceForheadX,faceForheadY);
  endShape(CLOSE);
  //eyes
  fill(255);
  ellipse((faceWidthX+200)/2,(5*faceChinY+5*faceWidthY+2*faceForheadY)/12,eyeSizeX,eyeSizeY);
  ellipse(400-(faceWidthX+200)/2,(5*faceChinY+5*faceWidthY+2*faceForheadY)/12,eyeSizeX,eyeSizeY);
  fill(0);
  ellipse((faceWidthX+200)/2,(5*faceChinY+5*faceWidthY+2*faceForheadY)/12,eyeSizeX/3,eyeSizeY/3);
  ellipse(400-(faceWidthX+200)/2,(5*faceChinY+5*faceWidthY+2*faceForheadY)/12,eyeSizeX/3,eyeSizeY/3);
  //mouth
  beginShape();
  curveVertex((faceWidthX+200)/2,faceChinY);
  curveVertex(faceChinX*3/2,faceChinY-20);
  curveVertex(200,mouthMid);
  curveVertex(400-faceChinX*3/2,faceChinY-20);
  curveVertex(400-(faceWidthX+200)/2,faceChinY);
  endShape();
  //eyebrows
  strokeWeight(8);
  line((faceWidthX+200)/2-15,eyebrowY1,(faceWidthX+200)/2+15,eyebrowY2);
  line(415-(faceWidthX+200)/2,eyebrowY1,385-(faceWidthX+200)/2,eyebrowY2);
  //hair
  strokeWeight(4);
}

Branching, Then Tiling : Iterative Wallpaper

I created an organic, iterative branching program which takes mouse movement input and creates a ‘trunk’ of sorts using the mouse’s motion vector. This trunk will grow forth shortly, before branching into between zero and three smaller branches, which repeat the process in slightly different directions. This process repeats until the branches have a width of less than 1 pixel, at which point they stop:

output_ZW8nXD

I then realized that I should make the pattern perfectly tile. I decided to take an easy route and simply create a diamond tile pattern using pixel shifting:

initial branching pattern
tile

tileable branching pattern
tilenow

now, tiled together, a variety of pretty wallpapers emerge (click to enlarge):

iterable wallpaper 2

iterable wallpaper 3

iterable wallpaper 4

iterable wallpaper 5

iterable wallpaper 6

iterable wallpaper

code for branching:

class brancher{
  color col;
  PVector pos, ppos, vel, acc, targ, targ2, traveled;
  float dist, ang;
  float radius;
  ArrayList<brancher> b;
  boolean alive;
  brancher(PVector pos, float ang, float dist, ArrayList<brancher> B){
    col = color(255*noise(millis()*PI/5000+1000),255*noise(millis()*PI/5000+2000),255*noise(millis()*PI/5000));
    b = B;
    alive = true;
    this.dist = dist;
    this.ang = ang;
    this.pos = pos.get();
    ppos = pos.get();
    targ = new PVector(1,0);
    targ.rotate(ang);
    targ.setMag(dist);
    targ2 = targ.get();
    targ2.rotate(random(-PI/2,PI/2));
    targ2.mult(random(0.5,1.5));
    targ2.add(pos);
    targ.add(pos);
    vel = new PVector(0,0);
    acc = new PVector(0,0);
    traveled = new PVector(0,0);
    radius = 10;
  }
   
  brancher(PVector pos, float ang, float dist, ArrayList<brancher> B, float rad){
    this(pos, ang, dist, B);
    radius = rad;
    if(rad<2){
      alive = false;
    }
  }
   
  void seek(){
    PVector c = PVector.sub(targ,pos);
    float m = map(c.mag(),0,50,0,2);
      if(traveled.mag() > 2*dist/3  && alive){
        float a1 = ang+random(1)*PI/6;
        float a2 = ang-random(1)*PI/6;
        float a3 = ang;
        float d = dist*(0.9+random(-0.2, 0.2));
        if(random(1)>0.2){
          b.add(new brancher(pos, a1, d, b, radius*(0.5+random(0.5))));
        }
        if(random(1)>0.2){
          b.add(new brancher(pos, a2, d, b, radius*(0.5+random(0.5))));
        }
        if(random(1)>0.5){
          b.add(new brancher(pos, a3, d, b, radius));
        }
        alive = false;
      }
    c.normalize();
    c.mult(m);
    c = PVector.sub(c,vel);
    applyForce(c);
    c = PVector.sub(targ2,pos);
    c.normalize();
    applyForce(c);
  }
   
  void applyForce(PVector f){
    acc.add(f);
  }
   
  void update(){
    vel.add(acc);
    pos.add(vel);
    traveled.add(vel);
    acc.mult(0);
    if(pos.x < 0 || pos.x > 5000 || pos.y < 0 || pos.y > 5000){
     alive = false;
    }
  }
   
  void display(){
    strokeWeight(radius);
    stroke(col);
    noFill();
    beginShape();
    vertex(ppos.x,ppos.y);
    vertex(pos.x,pos.y);
    endShape();
    ppos = pos.get();
  }
}
 
 
class branchSystem{
  ArrayList<brancher> branchers, newbs;
  branchSystem(float x, float y, float d){
    branchers = new ArrayList();
    newbs = new ArrayList();
    branchers.add(new brancher(new PVector(x,y), PVector.sub(new PVector(mouseX,mouseY),new PVector(pmouseX,pmouseY)).heading(), d*2, newbs, d/5));
  }
  void run(){
    for(int i = branchers.size()-1; i>=0; i--){
      brancher b = branchers.get(i);
      if(!b.alive){
        branchers.remove(b);
      }
      b.seek();
      b.update();
      b.display();
    }
    branchers.addAll(newbs);
    newbs.clear();
  }
}
int imgs;
ArrayList<branchSystem> syss;
void setup(){
  size(1000,800);
  background(0);
  syss = new ArrayList();
  imgs = 1;
}
void draw(){
  for(branchSystem bs: syss){
    bs.run();
  }
}
void mouseDragged(){
  PVector v = new PVector(mouseX,mouseY);
  v.sub(new PVector(pmouseX,pmouseY));
  float d = v.mag()/2;
  syss.add(new branchSystem(mouseX,mouseY,d));
}
 
void keyTyped(){
  if(key=='s') save("branch "+imgs+".jpg");
  imgs ++;
}

code for tiling

class Blotter{
  PImage img;
  Blotter(PImage i){
    img = i;
    int w = img.width;
    int h = img.height;
    img.loadPixels();
    for(int x = 0; x < w; x++){
      for(int y = 0; y < h; y++){
        if(x<w/2 && y<h/2){
          if(y<h/2-x*h/w){
            img.pixels[w*y+x] = img.pixels[w*(y+h/2)+x+w/2];
          }          
        }
        if(x>w/2 && y<h/2){
          if(y<x-w/2){
            img.pixels[w*y+x] = img.pixels[w*(y+h/2)+x-w/2];
          }          
        }
        if(x<w/2 && y>h/2){
          if(y>h/2+x*h/w){
            img.pixels[w*y+x] = img.pixels[w*(y-h/2)+x+w/2];
          }          
        }
        if(x>w/2 && y>h/2){
          if(y>h/2-x*h/w){
            img.pixels[w*y+x] = img.pixels[w*(y-h/2)+x-w/2];
          }          
        }
      }
    }
    save("tiled.tiff");
  }
}

Blotter b;
void setup(){
  b = new Blotter(loadImage("tile.jpg"));
  size(b.img.width,b.img.height);
}
void draw(){
  image(b.img,0,0);
   save("tilenow.jpg");
}

Chaos Halftone

Seizure warning, I guess.

chaos-halftone

 

I liked the halftone stuff I was doing in the iteration assignment so I kept it and messed with it. Sorry the gif seems to be lagging; that’s a problem that happened when I was recording it because my computer can’t actually keep up with the speed that Processing was animating it in.

 

//electronic media studio: interactivity
//copyright 2014 natroze
//with a bit of help from Mark Helenurm (MCS)

void setup(){
  size(500,500);
}

void draw(){
  background(254,255,198);
  noStroke();

//background shenanigans
float bg = map(mouseX, 0,width, 254,random(0,255));
  background(bg,120,198);
 
//tiny halftone
for (int y=0; y< =height; y+=10){
  for (int x=0; x<=width; x+=10){
    //size of each individual circle
    float r3 = map(mouseX, 0,width, 60,random(0,60));
    float r1 = map(x,0,width, 0,r3);
    //transparency and color
    float t1 = map(mouseX, 0,width, 0, random(100,130));
    float red = map(mouseX, 0,width, 0,random(0,255));
    fill(red,187,224, t1);
    ellipse(x+10,y+10, r1,r1);
    }
  }
  
//medium halftone
  for (int y=0; y<=height; y+=30){
    for (int x=5; x<=width; x+=30){
      //size of each individual circle
      float r2 = map(mouseX, 0,width, 60,random(5,100));
      float r1 = map(x,0,width, 0,r2);
      //transparency and color
      float t1 = map(mouseX, 0,width, 255, random(130,180));
      float blue = map(mouseX, 0,width, 187, random(0,255));
      fill(90,blue,224, t1);
      ellipse(x,y, r1,r1);
     }
  }
  
//bigass halftone 
for (int y=0; y<=height; y+=60){
  for (int x=0; x<=width; x+=60){
    float r1 = map(x,0,width, 0,60);
    float t1 = map(mouseX, 0,width, 0, random(0,255));
    float red = map(mouseX, 0,width, 90, random(0,255));
    fill(red,210,224, t1);
    ellipse(x+50,y, r1,r1);
    }
  }
}