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:

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

tileable branching pattern

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

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");
}

mbk-wallpaper

I started by wanting to explore additive coloring with simple circles and see how nice I could get it to look. After I mapped the colors to the width and height, I liked the effect of overlaps and the subtle gradient, but I thought I could add something. I had overheard someone mention noise function. When I realized that it was a three dimensional continuous perlin noise function, I realized I could make a nice flowy effect with it. I like the results. I tried this in blue as well, but I liked the red more. I tried using additive color blending, but went with dodging due to a p5.js error.

I wish I could say something really interesting about how this project evolved into what it is, but really what it comes down to is that I have very little programming experience and as such this was born out of me trying things and keeping them if I liked how they looked, and deleting them if I didn’t. It was more of an exercise into “let’s see if this generates something cool” instead of a “let’s actively set out with a plan to make something” kind of a project.

It’s pretty though. And I’m actually relatively proud of myself because this is the first time I’ve ever successfully programmed something and had it turn out a) functioning properly and b) nice.

edit: forgot the code oops here

 

//copyright 2014 natroze
//electronic media studio: interactivity

size(1080,720);
background(242,230,173);
noStroke();

//larger squares
for(int y = 5; y < =height; y+=60) {
  for(int x = 5; x <= width; x +=60) {
    float t2 = random(70,140);
    float t1 = map(y,0,height, t2,0);
    fill(138,217,245, t1);
    rect(x,y, 50,50);
  }
}
//smaller squares
for(int y = 15; y <=height; y+=60) {
  for(int x = 15; x <= width; x +=60) {
    float squareRed = map(y,0,height, 80,200);
    float squareGreen = map(y,0,height, 190,220);
    float t2 = random(20,90);
    float t1 = map(y,0,height, t2,0);
    fill(squareRed,squareGreen,245, t1);
    rect(x,y, 30,30);
  }
}
//circles
for (int y = 0; y<=height; y+=60) {
  for (int x = 0; x<=width; x+=60){
    float circleRed = map(x,0,width, 255,130); 
    float circleGreen = random(135,185); 
    float r1 = map(y,0,height, 10,60);
    float t3 = random(60,130);
    fill(circleRed,circleGreen,223, t3);
    ellipse(x,y, r1,r1);
  }
}

//offset circles
for (int y = 0; y<=height; y+=30) {
  for (int x = 0; x<=width; x+=30){
    float circleRed = map(x,0,width, 255,130); 
    float circleGreen = random(135,185); 
    float r1 = map(y,0,height, 10,30);
    float t5 = random(10,30);
    float t4 = map(y,0,height, 0,t5);
    fill(circleRed,circleGreen,223, t4);
    ellipse(x,y, r1,r1);
  }
}

My goal was to use the geometric primitives built into processing to make an unpredictable set of patterns, layered on one another. I was interested in using the built-in gradients to see if i could something 3d looking also. Different gradient “layers” (low opacity) are introduced sequentially as a function of the # of mouse clicks.

CSBWALLPAPER

I also included screenshots of some earlier attempts, some of which which how the nested for loop functions/malfunctions.

Wallpaper

For this assignment, I had trouble thinking of an end result so I just tweaked around with different numbers and variables. I started off with the template. Then, I decided to change the size of the rects and add a gradient of color to them. Then, I began playing around with the number in “gridSize”. I found that as the number in creased, the amount of rects decreased and vise versa. So I set the size to 10 and a beautiful patterning occurred with the lines. So, I decided to add random coloring to the lines and rects. However, I switched the green and blue variables in the rects and found that different colors appeared for the lines and the rects. I then proceeded too add ellipses and messed around with their size so many times until I got the interesting randomized striations.

size(600,300);
background(0);



int gridSize = 10;
float r= random(0,255);
float g= random(0,255);
float b= random(0,255);

for (int x = gridSize; x < = width - gridSize; x += gridSize) {
  for (int y = gridSize; y <= height - gridSize; y += gridSize) {
    
    float p= random(0,600);
    noStroke();
    fill(x*r,b,g);
    rect(x-1, y-1, 10, 10);
    
    stroke(r*x,g,b);
    line(x, y, width/2, height/2);
    
      fill(0);
    ellipse(p,y, x,2);
  }
}
fill(0);
noStroke();
rect(0,0, width/2, height);

I decided to create a tile-like pattern once I’d realized that I could overlap colors to create new ones by using the fourth parameter of fill(), which modifies opacity/transparency. The overall aesthetic reminds me of the tile work one would expect to find at the bottom of a fountain. I think this project gave me a firm understanding of the visual capabilities of nested for-loops (although I shudder to think what a nested-nested-nested for-loop would look like).

//Miranda Jacoby
//EMS Interactivity Section A
//majacoby@andrew.cmu.edu
//Copyright Miranda Jacoby 2014

int cx = 20;
int cy = 20;
int cw = 50;
int ch = 50;
int offsetx = 25;
int offsety = 25;

void setup () {
 size (800, 800) ;
 //background(130, 108, 245);
}

void draw () {
  
  for (int i=0; i<17; i++) {
    cx = 50*i;
        for (int j=0; j<17; j++) {
          cy = 50*j;
          
          //fill(150, 25); //smoother? what is the difference of calling fill here?
            //fill(150, 30, 255, 50);    //pattern with color
          fill(105, 0, 0, 25);
          ellipse(cx, cy, cw, ch);
          //pattern withuot color
         // fill(150, 50);
               //fill(42, 208, 165, 50); //mixing colors with transparency
          fill(0, 225, 0, 25);
          ellipse(cx, cy, cw + offsetx, ch + offsety);
          //ellipse(cx, cy, cw + offsetx/2, ch + offsety/2); //More complex
          fill(0, 0, 255, 25);
          ellipse(cx, cy, cw + offsetx*2, ch + offsety*2); //Tile-like
        
    }
  }
}
void mousePressed(){
 println("mousepressed"); 
  saveFrame();
}