I knew right off the bat that I wanted to explore the some sort of curve, so I just clicked around on math world until I found a curve that I liked (this one is called a lituus), and went from there. I figured out the properties and arranged them in a composition I found compelling. I then generated a pdf and plotted it.

The quality of the picture that I’ve attached isn’t particularly high, so all of the spirals look like they’re silver, when in reality, they’re different metallic colors. But the lines are so thin that the variation in the color is quite subtle, creating an effect that I really like.

 

For this project, I created a simple gradient from disorder to order using bezier curves. With each iteration of my Processing application, the randomized parameters of the bezier curves would decrease. This resulted in a relaxing of the “wavy-ness” or “knotty-ness” of my lines, ending in 25 straight horizontal lines. I originally considered making a flip book because there was such a clean progression between my frames, but ultimately I only had time to plot 9 frames.

 

Table of Contents

• Inspiration
  • Idea
  • Visuals
• Technique
  • Shape of Terrain
  • Texture of Terrain
  • Generative Ruins
  • Edge finding
  • Half tone
• Result
• Thoughts
• Code
• Sketches

(This post is very long and boring. Please, just jump to the pictures.)

INSPIRATION

Idea

My project is partly inspired by ideas hidden in the traditional Chinese landscape paintings that have always been fascinating to me. In these paintings, the artist tries to create a spiritual world consisting of mountains and waters into which he can escape from the worldly values. Thus the painter never tries to copy a mountain from life, instead he paints the mountain as he envisions in his mind, which often resembles an amalgamation of many mountains he has in his memory. That way the rocks and trees in the painting don’t represent actual rocks and trees, and instead they speak a language of their own and tell of the inner state of the painter. These paintings are often immersed in a sense of stillness and solitude.

And this is my inspiration. The plotter, a machine, shall draw a landscape conceived in its mind, using the elements not to depict an actual scene, but only to tell about the deep sense of distantness and desolation in its heart, to show us the world to which it desperately wants to escape.

 

Visuals

The fact that the plotter draws only uniform width lines reminds me of the hatching technique in drawing. I am fascinated by the way how lines closely drawn to each other seem like grayscale when viewed at a distance and at the same time feel very delicate when looked at closely. More specifically, I was thinking of Piranesi, the 18th century Italian printmaker’s etchings of Rome in ruins.

 

I also want my plotter drawing to look as if it is done by a person, albeit an incredibly patient one. I want it to have the imperfections, the whims and variations that are usually present in drawings done by a human artist. Moreover, I want it to resemble the style of my own drawings, so that when people see the plot done, they would say: “That’s Ngdon’s plot.”

 

 

These considerations led me to decide that line hatching and dots will be the major elements in my plotter drawing.

TECHNIQUE

The drawing is rendered with two major steps. In the first step, the program procedurally generates a photo-ish picture of the landscape, and in the second, translates it into a half-tone drawing to be plotted.

Shape of Terrain

The shape of the mountains is generated with 3 perlin noises added on top of each other. As you can see in the image above, the red line represents a perlin noise with very small steps between seeds yet multiplied by a huge coefficient. This determines the general shape of the whole mountain. The green noise has a larger steps between seeds and a smaller coefficient, thus gives the mountain a more detailed outline. The blue noise, with large steps between seeds and a tiny coefficient, adds the finest details to the shape.

Such process is repeated multiple times to generate many mountains. To create the illusion of depth and distance, the y coordinate offset from bottom of the screen is incremented with every mountain. The field in the foreground is just basically very low mountains.

 

Texture of Terrain

The texture of the terrain is also generated with a controlled Perlin noise to imitate a rocky and grainy surface. Near the peak of a mountain it would be “noisier” and at the foot of the mountain less so. Then, a second perlin noise, closely related to the noises that generated the shape of the mountain, is used to divide the terrain into highlights and shadows.

 

Generative Ruins

I generated some ancient ruins at the foot of the mountains with an algorithm similar to the Markov Chain. Each piece of the ruin, a column, a wall, etc. would guess who its neighbor shall be to its right and above. For example, a piece of floor would probably guess that next to it is also a piece of floor, and above it, a column. And that column also tries to guess who its neighbor shall be: may be another column, or may be a wall.

 

Edge Finding

The pixels in the generated scene are categorized based on their greyscale values. Each pixel is rated in a scale of 1 (very dark) to 20 (very bright), and the score is stored in an array. Then, a loop iterate through this array, and checks if a pixel has a different score than the one next to it, and if so, that pixel is an point on edge.

I originally wanted to use a more sophisticated algorithm such as Sobel, but tried this first as a test. Then I discovered that I quite like the result, so I clang on to the method.

Half Tone

I used horizontal lines to hatch my drawing. Hatching generally works as follows: the darker an area is, the more hatches it’s going to get. Therefore, a very dark area might get a horizontal hatch every other row of pixels, while a very bright area might only get one every five rows of pixels.
Therefore, for each edge point, the program checks if the brightness of that pixel dictates that a hatch shall be drawn on that row, and if so, a horizontal line will start from that edge point and extend to the right, until it meets another edge point.

RESULT

PDF Exports

The Final Plot

THOUGHTS

Plotting my design was a complicated experience. Five minutes into plotting and the tip of my micron pen is already bent. An hour later the plotter started rocking back and fro as its weight shifted. Another hour later it refuse to plot on certain areas due to uneven height. While I was having dinner for some reason it decided to make a black smear on the paper.

However I found that it was these unpredictable events/accidents that made the final plot so enchanting, so more interesting than something printed out of a printer. The errors in small places and the variation in line quality look almost human. The dots exhibits a wide range of variations due to the bent in shape of the pen tip. All the struggles I had been having with the plotter while it was plotting, now turns out to the most exciting parts of the result.

As I watched the plotter draw the plot almost the whole time, it felt as if I myself did the drawing. Looking at it afterwards, I can recall all the details about it such as “When drawing that tree, I so thought that it’s going to screw up the whole piece, but it turns out it didn’t” or “It felt so nice drawing this outline of mountain”. This kind of recollection I had been only able to do with my own drawings.

So it becomes a very strange feeling. I instinctively believe that I had done the piece myself, but then I know I didn’t. It’s like a dream, a deja-vu.

CODE

public class Piece {
  Piece right;
  Piece up;
  Piece down;
  Piece left;
  int w;
  int h;
  float l;
  int typ;
  int[] dat;
  
  int row;
  int col;
  public Piece(int typ){
    
    this.typ = typ;    
    this.l = random(1.0);
    if (typ == 0){
      this.w = 50; this.h = 20;
      
    }else if (typ == 1){
      this.w = 15; this.h = 120;

      this.l = ceil(random(2.0));
      if (this.l == 1){
        this.l = 1;
      }else{
        this.l = random(1.0);
      }
    }else if (typ == 2){
      this.w = 50; this.h = 30;
    }else if (typ == 3){
      this.w = 60; this.h = 30;
    }else if (typ == 4){
      this.w = 50; this.h = 120;
    }
    //grow();
  }
  
  public int[] locPiece(){
    if (left == null && down == null){
      return new int[] {0,0};
    }else if (left != null){
      return new int[] {left.locPiece()[0]+left.w, left.locPiece()[1]};
    }else{
      return new int[] {down.locPiece()[0], down.locPiece()[1]-down.h};
    }
    
  }
  public void gr(int n){
    //println(col);
    if (col < random(1.0)*20){
      right = new Piece(n);
      right.left = this;
      right.col = col + 1;
      right.row = row;
      right.grow();
    }
  }
  public void gu(int n){
    if (row < random(1.0)*4){ up = new Piece(n); up.down = this; up.col = col; up.row = row+1; up.grow(); } } public void grow(){ if (typ == 0){ gr(0); if (random(1.0)>0.5){
        gu(1);
      }else{
        gu(4);
      }
    }
    if (typ == 1){
      if (l == 1){
        if (random(1.0)>0.1){
          gu(2);
        }else{
          gu(3);
        }
      }
    }
    if (typ == 2){
      if (random(1.0)>0.2){
        gu(1);
      }else{
        gu(4);
      }
    }    

    
  }
  
  
  public void drawPiece(){
    int[] loc = locPiece();
    //println(loc);
    if (typ == 0){
      fill(200,210);//floor(random(2.0))*180+20);
      stroke(0);
      rect(loc[0]-5,loc[1]-h,w+10,h);

    } else if (typ == 1){
      int mseg = 5;
      
      int seg = ceil(l*mseg);
      pushMatrix();
      translate(10,0);
      for (int i = 0; i< seg; i++){
        noStroke();
        fill(220);
        rect(loc[0],loc[1]-(i+1)*h/mseg,w,h/mseg);
        for (int j = 0; j Lines=new ArrayList();

int[] Epts;

PImage img;


int[][][] Vmap;




void tree(float x,float y,float a,float o, float l, int depth){
  if (depth > 0){
    float x1 = x + l*cos(a-o);
    float y1 = y + l*sin(a-o);
    float x2 = x + l*cos(a+o);
    float y2 = y + l*sin(a+o);
    strokeWeight(1);
    stroke(random(1.0)*255);
    line(x,y,x1,y1);
    line(x,y,x2,y2);
    tree(x1,y1,a-o,o,l*0.6,depth-1);
    tree(x2,y2,a+o,o,l*0.6,depth-1);
  }
  
}



void tree2(float x, float y, float l, int depth){
  if (depth > 0){
    float x1 = x;
    float y1 = y-l;
    strokeWeight(1);
    stroke(0,0,0);
    tree(x1,y1,-PI,PI/16,l,2);
    tree(x1,y1,0,PI/16,l,2);
    line(x,y,x1,y1);
    tree2(x1,y1,l*0.8,depth-1);
  }
}



void noisefill(int[][][] vm){
  for (int i = 0; i < vm.length; i++){
    for (int j = 0; j < vm[i].length; j++){
      vm[i][j][0] = parseInt(noise(0.01*i,0.004*j)*255);
    }
  } 
}

void scanimg(int[][][] vm){
  //image(img,0,0);
  for (int i = 0; i < vm.length; i++){
    for (int j = 0; j < vm[i].length; j++){
      
      vm[i][j][0] = parseInt((red(get(j+dx,i+dy))+green(get(j+dx,i+dy))+blue(get(j+dx,i+dy)))/3);
    }
  }  
  
  
}


void genterr(int[][][] vm){
  for (int i = 450; i < vm.length*2; i+=50){
    float hl = 0;
    for (int j = 0; j < vm[0].length; j++){
      float nz0 = noise(0.005*i,0.001*j);
      float nz1 = noise(0.1*i,0.005*j);
      float nz2 = noise(0.1*i,0.05*j,200);
      //stroke(map(i,0,vm.length,0,255));
      //line(j,i,j,i-nz*100);
      float h;
      if (i < vm.length*0.9){
        h = nz0*500+nz1*200+nz2*20;
      }else if (i < vm.length*0.95){
        h = 0;
      }else{
        h = 200+nz0*200+nz1*40+nz2*4;
      }
      for (int k = 0; k < h; k++){ float nz3 = noise(0.1*i,0.1*j,0.1*k); if (k > 2.0*h*noise(0.005*i,0.001*(j+1000))){
          if (i < vm.length*0.9){
            fill(constrain(parseInt(map(k,h/2,h,0,300)*(0.9+0.1*((1-k/h)+(k/h)*nz3))*i/vm.length),0,255));
          }else{
            fill(constrain(parseInt(map(k,h/2,h,0,250)*(0.8+0.2*((1-k/h)+(k/h)*nz3))*i/vm.length),0,255));
            //fill(0,0);
          }
        }else{
          if (i < vm.length*0.9){ fill(constrain(parseInt(map(k,h/2,h,0,80)*(0.1+0.9*((1-k/h)+(k/h)*nz3))*i/vm.length),0,255)); }else{ fill(constrain(parseInt(map(k,h/2,h,0,120)*(0.1+0.9*((1-k/h)+(k/h)*nz3))*i/vm.length),0,255)); //fill(0,0); } } noStroke(); rect(j,i-k,1,1); if (random(1) > 0.99 && k < h*0.7 && k > h*0.5 && i < vm.length*0.8){ tree2(j,i-k,5+5*random(1.0),5); } } fill(200); if (random(1) > 0.5){
        rect(j,i-h,1,1);
        
      }
      if (random(1) > 0.9){
        //tree2(j,i-h*0.9,5+5*random(1.0),5);
      }
      
      
      hl = h;
    }
    for (int j = 0;  j < vm[0].length; j++){ float h = 400; if (random(1) > 0.9995 && i > vm.length*1.0 && i < vm.length*1.2){
        Piece p = new Piece(0);
        p.grow();
        pushMatrix();
        translate(j,i-h*random(0.7,0.9));
        scale(0.0+3*(i-vm.length*0.9)/(vm.length*1.1));

        p.drawPiece();
        popMatrix();
      }
    }
    
  }
  
}






void levelfygrc(int[][][] vm){
  for (int i = 0; i < vm.length; i++){
    for (int j = 0; j < vm[i].length; j++){
      vm[i][j][1] = max(parseInt(map(vm[i][j][0],0,255,1,20))*2,1);
      //println(vm[i][j][1]);
      //vm[i][j][1] = 2*parseInt(255/max(1,vm[i][j][0]));
      
    }
  }    
}


int[] getedgepts(int[][][] vm){
  int[] epts = new int[width*height*2];
  epts[0] = 1;
  for (int i = 0; i < vm.length; i++){
    for (int j = 0; j < vm[i].length; j++){
      if (j==0 || vm[i][j-1][1] != vm[i][j][1]){
        epts[epts[0]] = i;
        epts[epts[0]+1] = j;
        epts[0] += 2;
      }
    }
  }  
  return epts;
}


void shade(int[][][] vm, int[] epts){
  
  for (int i = 1; i < epts[0]; i+=2){
    if (epts[i]%vm[epts[i]][epts[i+1]][1]==0){
      int[] l = new int[4];
      l[1] = epts[i];
      l[0] = epts[i+1];
      for (int j = 0; j < width; j++){
        if (epts[i+1]+j==vm[0].length-1
            //||epts[i]+j==vm.length-1
            ||vm[epts[i]][epts[i+1]+j][1] != vm[epts[i]][epts[i+1]][1]
           ){
          l[3] = epts[i];
          l[2] = epts[i+1]+j;
          //stroke(0,255,0,200);
          //line(l[0],l[1],l[2],l[3]);
          float d = dist(l[0],l[1],l[2],l[3]);
          int[] w = wiggle(l,max(parseInt(0.1*d),1),parseInt(vm[epts[i]][epts[i+1]][1]/2));
          for (int k = 2; k < w.length-1; k+=2){ int[] nl = new int[4]; nl[0] = w[k-2]; nl[1] = w[k-1]; nl[2] = w[k]; nl[3] = w[k+1]; if (random(10) > 0.0001*pow(vm[epts[i]][epts[i+1]][1],3)){
              //Lines.add(nl);
            }
          }
          
          Lines.add(l);
          break;
        }
      }
    }
    
  }
  
}

int[] wiggle(int[] l, int p1, int p2){
  //int d = parseInt(dist(l[0],l[1],l[2],l[3])/p1);
  if (p2 == width){p2 = 0;}
  int[] ls = new int[p1*2+2];
  for (int i = 0; i < p1+1; i++){
    ls[i*2] = l[0] + i*(l[2]-l[0])/p1;
    ls[i*2+1] = l[1] + i*(l[3]-l[1])/p1;
    
    ls[i*2] += parseInt(noise(0.1*ls[i*2]/p1,ls[i*2+1],10)*p2-p2/2);
    ls[i*2+1] += parseInt(noise(0.1*ls[i*2]/p1,ls[i*2+1],100)*p2-p2/2);
  }
  
  return ls;
  
}

int dx = 50;
int dy = 40;

import processing.pdf.*;
boolean bRecordingPDF;
int pdfOutputCount = 0; 

void setup(){
  size(1060,820);
  background(0);
  

  Vmap = new int[height-100][width-100][2];
  //noisefill(Vmap);
  translate(dx,dy);
  genterr(Vmap);

  scanimg(Vmap);

  levelfygrc(Vmap);
  Epts = getedgepts(Vmap);

  shade( Vmap,Epts);
  noLoop();
  
}

void draw(){
  beginRecord(PDF, ""+parseInt(floor(random(1000000000)))+".pdf");
  
  background(255);

  translate(dx,dy);

  
  for (int i = 1; i < Epts[0]; i+=2){
   stroke(0);
   strokeWeight(1);
   noFill();
   line(Epts[i+1],Epts[i],Epts[i+1],Epts[i]);
    
  }


  println(Lines.size());
  for (int i = 0; i < Lines.size(); i++){
    
    stroke(0);
    strokeWeight(1);
    line(Lines.get(i)[0],Lines.get(i)[1],Lines.get(i)[2],Lines.get(i)[3]);
  }

  endRecord();
  
}

SKETCHES

P.S. Sincere apologies to those who couldn't use the plotter on Wednesday night because my plot was taking so long.

 

I made this animation to create some pdfs for the plotter to plot. Unfortunately, they look more like this when translated to pdf: output. Although it looks different from the intended product, I still think this was a success. I wanted to make a waterfall of cubes and that is exactly what happened. I didn’t know about the fact that the pdf export of 3D things can’t take into account things that the viewer shouldn’t be able to see (like the cubes behind the ones in the foreground), which is something I will keep in mind for future plotter projects.

Here are the processing files for both transparent and non-transparent cube animations:

https://github.com/AndyChanglee/60-212/blob/readme-edits/cubes.pde

https://github.com/AndyChanglee/60-212/blob/readme-edits/cubesNoFill.pde

 

 

   

I decided to work from the template of order to disorder, already conjuring ideas of singular, streamlined designs that somehow branch out or disperse into randomness and chaos–from then it was a methodical process of polishing the visuals: I would hardcode the “organized” half of my piece to make sure relevant segments or shapes are precisely and consciously positioned with a purpose, and then gradually lose control on the “disorganized” half with randomly generated float variables.
I created several nature-based themes to represent this idea of orderly lines becoming jagged; there were multiple ways of approach: flat landscapes to jagged mountains, calm waters to dangerous waves, silence to noise, stalk to branches and swirling vines–all of which I sketched and considered.
In conjunction with my past inspirations and works, I settled with the seascape version, and I customized accordingly with the necessary pens of differing stroke sizes and azure colors to give the flat design a subtle sense of depth. I originally planned for the water design to be on a paper that was naturally a light to dark blue gradient color, and to position the waves near the boundaries of two opposing shades, but I was unable to obtain such a colored paper and settled on a gray-light blue which I felt was neutral. From then, I used the axidraw at paused intervals where I switched out pens to accommodate each particular wave–and then I actually shifted and re-ran my program twice to give the visual impression of more lines and depth to the overall product, and to retrace some of the lighter, thinner wavelengths to make them darker.
If time and my own mental capabilities when it comes to coding allowed, I would strive to expand this series to encompass my other nature ideas as well (landscape, vines, trees, noise), each with its own considered color palette and background texture.

// see https://processing.org/reference/libraries/pdf/index.html
// deliverable04 template by golan 
import processing.pdf.*;
boolean bRecordingPDF;
int pdfOutputCount = 0; 
 
void setup() {
  size(600, 400);
  bRecordingPDF = true;
}
 
void keyPressed() {
  // When you press a key, it will initiate a PDF export
  bRecordingPDF = true;
}

class LineInfo {
  int x1, x2, y1, y2;
  LineInfo(int x1, int y1, int x2, int y2) {
   this.x1 = x1;
   this.x2 = x2;
   this.y1 = y1;
   this.y2 = y2;
  }
}
 
void draw() {
  if (bRecordingPDF) {
    background(255); // this should come BEFORE beginRecord()
    beginRecord(PDF, "myName_" + pdfOutputCount + ".pdf");
 
    //--------------------------
    noFill(); 
    int mid = width/2;
    strokeWeight(1.5);
    LineInfo[] lines = { new LineInfo(10,200,mid+10,200),
                         new LineInfo(10,210,mid-10,210),
                         new LineInfo(10,190,mid+5,190),
                         new LineInfo(10,185,mid-5,185),
                         new LineInfo(10,172,mid,172),
                         new LineInfo(10,230,mid,230),
                         new LineInfo(10,240,mid+2,240),
                         new LineInfo(10,168,mid-15,168) };

    for (int i = 0; i < lines.length; i++) {
      beginShape();
      smooth();
      LineInfo l = lines[i];
      line(l.x1,l.y1,l.x2,l.y2); 
      curveVertex(l.x2,l.y2);
      curveVertex(l.x2,l.y2);
      float rx = l.x2;
      float ry= l.y2;
      for (int j=0; j < 100; j++) {
        rx = rx + random(12,14); 
        ry = ry + random(-30, 25); 
        curveVertex(rx, ry);
      }
      endShape();
    }
     
    endRecord();
    bRecordingPDF = false;
    pdfOutputCount++;
  }
}

GitHub repository//

I was really hyped over premise 5 and 6 – the visual processing of real time data and the custom pixel (would be really cool to have a program that runs through a poem and manipulates the type elements with scale and color to fit the color data of an imported image within the script).

For the real time data ….well, I wasn’t as interested in manipulating the plotter in real time, I am really excited to explore data visualization – in this, I’ve been using IFTTT to use IOS location services – whenever my phone detects I’ve entered a predetermined area, the data/time info is recorded in a google spreadsheet. I figured it wouldn’t have been too complicated to set up a system to access the google data (downloading it as a csv/text file at continuous intervals – version control it up with git to push to a repository where then I could have a visualized report of how/where I’ve spent my time every time I pull up that url)….only time got short, plumbing got a little over my head and I really wanted to see what I could do about generative typography with interesting ‘pixels’ or strokes that create the letters.

The first idea was to go with Hershey fonts (see clock project where I wrote a program that would refit hershey font data to a series of vector points in an array that are fitted to a specified size/proportion of your choosing) and have lines go from the vector points to some randomly generated other formula (was really excited to go through the interesting polar graphs/formulas Golan previewed last class).

I argue that the lines, while they can do with some more consideration towards….designerly restraint, certainly do add a certain smoky ephemerality to the aesthetic that I think works well metaphorically with the question this type exploration brings up.

lumar_7

I messed up slightly on the plotter; the first black pen on there was a little thicker than I’d like (0.2 micron) and the thinner copic multiliners I brought in didn’t run smoothly. (hence the blue – I was very much under the impression this was going to be my test run and I would come back to print my final design which would be different on nicer paper with nicer pens). The fluorescent pink was only meant for the heart shaped ? ‘p’ of “hope”.

What I had ended up using instead of hershey fonts (because the vectors for those aren’t evenly spread over the letter and the letter itself is a single stroke collection rather than a complete shape) was the library ‘Geomerative’ (thank you Golan for all the advice!!).

The first iteration self critique:

• Needs some designerly restraint – the message is interesting (HO?E – spells out “hope” except with a “?” instead of a “P” but the execution is difficult to read)
• Again – too much going on without a justification for it.

Second iteration (thursday night trying to figure out my own plotter at home):

• planning:
• 
• Really wanted to make a limited color palette type poster for World Vision or Compassion international (international programs that sponsor children – covers their education, clothing, shelter, food, etc)
• The composition would be the word in diagonal with all the other squares within the grid as the letters becoming increasingly disintegrated/randomized

NOTE: the first iteration is what I’m turning in. (the second iteration is what I’m doing for fun – running a fundraiser for World Vision/Compassion international in November, so I wanted to get a head start on making a poster for it)

Process:

I first made iterating shapes in a grid:

lumar_1

I’ll post the next step wherein the diagonal HOPE is the clearest and the rest of the letters slowly ‘disintegrate’ and become more randomized if I have more time just for fun!