Hairy Beans

Some initial doodles and process by hand

This week was all about learning about bezier curves, creating classes properly in Processing, understanding push/pop matrices, and how on earth do you make hairy beans drawn by a plotter look like they were drawn by hand. While needed a fairly heavy amount of help, I’m very pleased with the outcome of these beans. The greatest challenge was by far trying to achieve an organic, bean shape. A realization I had was how the easiest thing for a human to make, was the hardest for the computer, as well as vice versa. It’s very hard for a human to freehand a perfect circle, but takes no time at all to make a asymmetric blob with random short lines in all directions. However, in code it takes one line to draw a perfect circle, and it takes much more math and logic to create the organic blobs and the appropriate amount of hairs.

The biggest goal for this week was to create a generative art piece that would be nearly impossible to determine that a machine had drawn. Throughout this semester I want to make my digital art feel as close to my personal illustration style. These hairy beans were a great step in that direction. The organic blobs and small hairs came out just how I wanted them to and I’m quite pleased with the final plot. Using the acrylic paint markers on the translucent vellum paper gave a great dimension to the piece. I also enjoyed playing with line weight, colour, and materials, and how these could really transform the plotted piece from the generated pdf.

 

PDF of what the plotter traces

 

Placing the vellum on top of different surfaces

Plotting in the process

Code for work

 

You can find the code here:

https://github.com/ZariaHoward/EMS2/blob/master/FinalBLMPlot/FinalBLMPlot.pde

You can find the data here:

https://www.theguardian.com/us-news/ng-interactive/2015/jun/01/the-counted-police-killings-us-database

My original inspiration for this piece was the shooting of Alfred Olango last wednesday which you can read here: https://www.theguardian.com/us-news/2016/sep/30/san-diego-police-shooting-video-released-alfred-olango . Honestly I really just wanted to do something to show respect to the lives that are being destroyed publicly approximately every few days. This piece is a representation of the 198 lives that have been taken this year as of 9/28/2016.

One aspect of the publicity of the Black Lives Matter movement is that when stories are reported around the shootings, they are usually from either a statistics and facts and figures perspective or from a perspective that essentially serves to dehumanize the victim and make the victim’s death seem justified. No sufficient homage is paid to the lives these people once lived, and no one recognizes who they could’ve been beyond their current twitter hashtag.

So in this project I created a narrative of a life that could’ve been given to these black men and women, then repeated it line by line for every victim, and cut it off short where the police cut off their lives. The narrative is as follows:

Met Best Friend. Performed On Stage. Had First Kiss. First Day Of High School. Joined Basketball Camp. First Romantic Relationship. First Trophy. First Paycheck. Prom. Finished Freshman Year of College. Pledged To a Fraternity. Voted For The First Time.Celebrates 20th Birthday. First Internship. First Legal Drink. Graduation. Paid First Rent Check. Cooked First Real Meal. First Car. Got Off Of Parents Health Insurance Plan. Spent First Christmas Away From Home. Married the Love of Their Life. Bought First Home. Beginning of Hair Loss. Stopped Wearing Converse Sneakers. First Family Vacation. Watched The Birth Of First Child. Starts Volunteering In The Community. Had Second Child. Invests In The Stock Market. Buys Life Insurance. Awarded Huge Promotion. Got An Office With A View.  Moved Into New Home. Started Their Own Company. Went to High School Reunion. Parents Passed Away .Tries To Get Fit Again. Joined A Church. Celebrated Golden Anniversary. Both Kids Move Out Of The House. Hosted Thanksgiving At Home. Creates A Will. Bought Another Pet. Babysat Grandchildren. Retired. First Grandchild. Openly Uses AARP Discounts.

 

Below are the results of processing sketches that are visual representations of this project. In these first two sketches I played around a lot with how much of the narrative should be visible by overlaying the stories. I also played around with removing the narrative entirely and just letting the numbers be the narrative. But that goes back to reducing these lives to numbers and their deaths. One reason i considered keeping these aesthetics is because they both have that ghostly effect that really screams death to me. And I wasn’t sure if i should place emphasis on the idea of death.
“

The next two sketches are my experimentations with color. I wasn’t sure whether I wanted to do some type of symbolism through color. I considered red because it symbolizes blood and also the silver-blue of gunmetal or alternatively the police. Ultimately it didn’t add anything in my opinion however when I print the piece I still want it to be printed in silver ink.

This is an up-close snapshot of the composition. The clutter and slight illegibility is intentional. The cutoff of the narrative is intentional. The spacing and gapping is also intentional. The size of how you’re viewing it on your screen (if you are viewing it at 100%) is essentially how small I wanted the text to be to force the viewer closer to the piece. 

This is what the composition looks like as a whole. It’s approximately 24 inches by 72 inches. Due to the scale I had to use a unique method to plot (which I honestly haven’t gotten the hang of yet) I haven’t been able to make the machine that prints large-scale work. Also I can’t reduce the size otherwise you won’t be able to see the narrative. And unfortunately because 198 black people were killed by the cops this year, I have to print the entire 198 lines. Overall my biggest criticism for myself is that I couldn’t get the large plot machine working. This would have been so much more powerful with the handwritten visuals that would have been conveyed by silver pen on paper.

Plot #1 Plot #2

Better scanned images of the plotter drawings coming soon.

I started this project by just Google Image searching “generative plotter art” and the stuff that showed up was honestly some of the coolest looking drawings. One of my favorite series of prints from that short search was Schwarm by Andreas Nicolas Fischer.

Now those drawings are massive and have hundreds of thousands of little lines in them, so I knew I wouldn’t be able to make something with that complexity, but I thought it was awesome and I wanted to make something cool. So like we did with Vera Molnar’s Interruptions, I decided to make my own version of something similar to this.

The cloudy waviness reminded me of some awesome Perlin noise images, of which Dan Shiffman has a great p5 tutorial video on how to make. Because I was following and playing with variations of his tutorial, I started my project in p5 instead of Processing.

Perlin noise particle drawing! Wow!

Instead of making my own physics and dropping particles, I just took the angles assigned to each part of the part according the Perlin noise and changed the direction of a curve based on that angle and where the control point of the curve was. I added some color based on a general location of where the lines were drawn too in order to get a sense of how I would plot it.

Here’s the p5.js code, click to change color combinations for the flow field:

sketch

Screenshot Sample 1 Screenshot Sample 2 B&W version I sent to the plotter since the plotter can’t see color. I just changed the colored pens when I felt like, so they didn’t clump as nicely as on the colored generated images.

I was foolish and didn’t sort the lines before they were drawn so travel time where the pen was up and not drawing cost me a lot of time. After a while I decided they were filled enough and cut it short because other people needed the plotter too. There were also lines drawn beyond the edge of the canvas that I didn’t know about, but the plotter did, so it was drawn way over the dimensions I gave it.

I’d upload a video of it plotting too, but I didn’t have anything better than my phone camera and the video quality is just too crappy.

I think the end results came out pretty nice regardless of all the issues I had while printing. The gel pens give the layers of lines a nice raised texture when you run your fingers across it. I’d like to tweak the code so it doesn’t run off screen and will print in a reasonable amount of time so it can actually finish.

 

There were some fun accidents while generating the the image that would be cool to plot if I had more time. Here’s an example:

 

 

I really enjoy the aesthetics of the handful of plotter art I’ve seen. I wanted to combine the utility of using a plotter while still making a representational image. I liked the idea of making a tunnel by using a series of incrementing curves. It was an interesting challenge to try to make this very mechanical process appear more organic. The plotter actually helped with this, since the pen didn’t consistently apply the ink. The machine also started to have tiny wavers in the line. I plotted it both at 5x6in and 2.5x3in, and the very small scale actually made it a much more intimate image. I hand colored the person, and I think if I were to plot it again I would hand draw the lines of the person as well. The contrast between the plotted and hand drawn parts of the piece is something I’d like to explore.

  

This week, I wanted to work on implementing new techniques or processes that I had never tried before, and find something interesting in these processes that emerged from exploration rather than going in with a set vision.

The two concepts I wanted to explore were voronoi diagrams and polar coordinates, neither were very complex alone, but I’ve never really with either and wanted to see what happened when they were combined.

I began by implementing a very ‘naive’ voronoi diagram which just jumped a set X and Y position, and drew a line to the nearest node, which were placed randomly across the canvas.

From here I explored number of nodes, number of subdivisions (lines), drawing rectangles instead of lines, then moved into 3D, voronoi in 3D rectangular space, cubes, lines, rectangles, etc.

Here is a collection of screenshots of the experiments and iteration as I went along:

Just after these screenshots, I explored the idea of only plotting the ‘end’ of the voronoi lines, which is where the nodes are located on the outside of a sphere, and then adding a variation in sphere radius using a noise function, then connecting them using a single curve interpolated between the points. The result was the thin and wire-sculpture structures that I ultimately decided to plot.

I liked the results because I thought they struck an interesting balance between computational and hand-drawn, where there’s a sense of geometry and space, but the lines are wavering and ambiguous, looking as if they could have been hand drawn:

Code here:

import peasy.*;
import peasy.org.apache.commons.math.*;
import peasy.org.apache.commons.math.geometry.*;
import peasy.test.*;
import processing.pdf.*;

PeasyCam cam;
boolean savePDF;

//Array of Node objects, where paths are drawn to.
ArrayList nodes = new ArrayList();
//Array of Path objects, which holds paths to be drawn.
ArrayList paths = new ArrayList();

int numNodes = 100;
int subWide = 60;
int subTall = 60;

float minDist;
float nearestX,nearestY,nearestZ;

float margin = 30;
float jitter = 10;
float rad = 100;
float ns = 0.2;
/////////////////////////////SETUP//////////////////////////
void setup(){
  //Visual Things
  size(900,600,P3D);
  pixelDensity(2);
  stroke(30);
  strokeWeight(0.7);
  noFill();
  rectMode(CORNERS);
  ellipseMode(CENTER);
  //camera things
  cam = new PeasyCam(this, 100);
  cam.setMinimumDistance(150);
  cam.setMaximumDistance(400);
  
  //Generate Nodes
  for (int i = 0; i < numNodes; i++){
    Node n = new Node(map(noise(i*ns),0,1,0,rad),
    random(0,2*PI),
    map(i,0,numNodes,0,PI*2));
    nodes.add(n);
  }//end nodes loop
  println("Nodes: "+nodes.size());
  
  //Generate Paths
  for (int col = 0; col < subWide; col++){
    for (int row = 0; row < subTall; row++){
      minDist = 99999999;
      float cRad = rad;
      float cTheta = map(row,0,subWide,0,PI*2);
      float cPhi = map(col,0,subTall,0,PI*2);
      float cx = cRad*sin(cTheta)*cos(cPhi);
      float cy = cRad*sin(cTheta)*sin(cPhi);
      float cz = cRad*cos(cTheta);
      for (int i = 0; i < nodes.size(); i++){
        //If the distance between current XY and Node XY is new minimum
        float distance = dist(cx,cy,cz,nodes.get(i).pos.x,nodes.get(i).pos.y,nodes.get(i).pos.z);
        if ( distance < minDist){
        //Set new minimum and record x,y
        minDist = distance;
        nearestX = nodes.get(i).pos.x;
        nearestY = nodes.get(i).pos.y;
        nearestZ = nodes.get(i).pos.z;
        }//end if distance check
      }//end distance loop
      //Create new path from cx,cy to nearX,nearY
      Path p = new Path(cx,cy,cz,nearestX,nearestY,nearestZ);
      paths.add(p);
    }//end row
  }//end col
  println("Paths: "+paths.size());
} // end setup
/////////////////////////////DRAW//////////////////////////
void draw(){
  background(255);
  if (savePDF == true){
    beginRaw(PDF, "export.pdf");
  }
  
  beginShape();
  //Iterate over path array drawing lines
  for (int p = 0; p < paths.size(); p++){
    //curveVertex(paths.get(p).start.x,paths.get(p).start.y,paths.get(p).start.z);
    curveVertex(paths.get(p).end.x,paths.get(p).end.y,paths.get(p).end.z);
  }//end line loop
  endShape();
  
  
  if (savePDF == true){
  endRaw();
  savePDF = false;
  }
}//end draw
/////////////////////////////KEYPRESSED//////////////////////////
void keyPressed() { if (key == 'p') { savePDF = true; }
}//end keypressed
/////////////////////////////NODE//////////////////////////
class Node {
  PVector pos;
  //Constructor
  Node (float r, float theta, float phi){
    pos = new PVector(r*sin(theta)*cos(phi),r*sin(theta)*sin(phi),r*cos(theta));
  }
}//end node class
/////////////////////////////PATH//////////////////////////
class Path {
  PVector start,end;
  float distance;
  //Constructor
  Path (float sx, float sy, float sz, float ex, float ey, float ez){
    start = new PVector(sx, sy, sz);
    end = new PVector (ex,ey, ez);
    distance = dist(sx, sy, sz,ex,ey, ez);
  }
}//end path class

Github

My project is initially inspired by the planning diagrams of PCB circuit board. Basically it contains lines with circles on both ends (tiny holes to insert electronic components) that make 45 degree turns. While I tried very hard to grasp the relationships among the lines and small circles, the combination of horizontal, vertical lines and lines with 45 degree angle, led me to another direction of creating something that resembles Frank Lloyd Wright’s window patterns, and somewhat art deco:

        

So I started to experiment different parameters to generate the patterns that I like the most. Here are some of the early versions(some of them are still on the circuit side):

And this is the version that I decided to laser cut:

Cutting…

 

Here is the result of the laser cut(I think processing does not export circles and arcs to dxf file which is needed for laser cutting):

I noticed that when laser cutting, the repetition of some lines in the center part(mostly where the pattern is intense and the strokes are on top of each other) of each pattern can cut through the paper therefore creates areas that have a different color from the paper, therefore provides diversity and glowing effects to the pattern.

In a dark room towards the sun with high contrast:

       

        

Finally a glitch:

 

 

 

 

 

img_4370 plotter plotter1 plotter2 plotter3 plotter4 plotter5 plotter6 plotter7 plotter8 plotter9 plotter10 plotter11 plotter12 I would say that I went with premises I and II. I was inspired by 8-Ecke, and found a way to generate something similar and build off, while also creating a system which used randomization in an organized way. I generated randomized shapes, and the number of shapes was different each time a pdf was created. I created a dice rolling function, which would spit out an integer from one to six. I called the die rolling function at each subsection that a shape was drawn. the number of rows and columns determined the number of shapes. If the number one was rolled, a shape would not be drawn, and in its place, a hole would be cut out. I manipulated the strokeWeight and colors of the parts of my composition as a way of directing the laser cutter to do what I wanted. I do not undersand because sometimes, it will still cut out a random shape, but it will cut out so few that I almost find it to be another element which adds complexity to the piece. I really enjoyed working on this one, I am in the process of making a book with what I have printed from the laser cutter. I liked the idea of allowing the holes to serve as little peepholes so you could peer through to the next page. While making this project, I felt a lot like I was in a printmaking studio, just because of how getting a nice print takes time. There is something elegant about the work when it is in physical form.

 Intro

For my plotter my goal was to make a Mandala generator. As a disclaimer, I am not Buddhist or Hindu, however I’ve been intrigued with and reading about Mandalas for a couple years now and I am very interested with their form. Every Mandala has a sort of uniqueness about it but they tend toward the same geometrical shapes, composition (symmetry) and patterns. Thus I wanted to explore the idea of computationally generating a highly spirtual yet mass-producible symbol.

Process

I started by choosing shapes and patterns I see very often in Mandalas. These same shapes tend to occur often in Henna designs as well, some more complex than others. I settled on a few of the simpler ones to code: circles (of course), polygons, lotus petals (the teardrop curve),  the bumpy moon cake shaped flower (most prevalent on the third image pictured above), and the dollop shaped curve(most prevalent in the middle image). Mandalas are also highly symmetrical, therefore unit circles came back from high school trigonometry to haunt me. This also constrained the time I had to express more of the complexities of the Mandala I initially wanted, such as complex geometry, shading and patterns.

sketches

Github Gist Link

 

Conclusion

Although the computer generated images took some time, the laser cutter took about 14 minutes each to produce these. My lesson existed more in the realm of the difficulty of producing random patterns but with a goal aesthetic, rather than the time it takes to cut them in real life. I guess you could say I’ve achieved a greater appreciation for the art of designing Mandalas as well as Henna– its not as easy as I thought to compute their visual motifs.

Table of Contents:

1. Process
2. Technical Details
3. Photo & Video Gallery
4. Full Code Embed

Process

I kicked off my thought process for this project thinking about this font specimen and how I liked the seemingly arbitrary selection of numbers used. I wanted to create a system that would allow the continual generation of such values and also the spatial placement of such (typographic) numbers.

In contrast to my clock project, where I did a lot of drawing in Sketch App to define my design before beginning to code, with this project, I jumped into Processing almost right away. I did this to ’embrace the symptom’  and let the limitations of the tool guide my way through the design problem.

To be completely honest, this is a foreign way of working for me. I’m very used to asking the traditional question of “What should be designed?”, not the engineering question of “what is designable?” Playing with this question was an ongoing game of discovery during the project and one I’m learning to better understand. Furthermore, the way I setup my code using the provided template made my program consistently export PDFs throughout my working process, so I have a good amount of iteration history. [see above and below]

Technical Details

From an engineering point of view, this project involved more complexity than I’ve dealt with in the past. To start, I used a dynamic-grid-column drawing system to define the regions of my canvas. Then I use those predefined rectangular shapes to write numbers inside of them using the createFont() method, but importantly, instead of drawing the fonts to the canvas, I drew them to a JAVA2D PGraphics ‘offscreen’ canvas. I remixed some of the code for this from this github project. This means all of the numbers are being drawn in my custom font, GT Walsheim, directly onto an image object instead onto the primary canvas. The reason I do this is to allow for easy distortion and warping of the pixels and elements without having to convert text to outlines and deal with bezier curves.

The followup question was how do I get my design back out of raster format into ‘vector/object’ format, so I can use an exported PDF with the AkiDraw device? I used a method for scanning the pixels of the raster with the get() method, then I’m able to ‘etch the drawing’ back out of pixels and place objects that will export in the PDF where the colour values register in certain ranges. [see the video below for an example]

Etching Method Test

Photo & Video Gallery

Full Code Embed

// see https://processing.org/reference/libraries/pdf/index.html //<>// //<>//
import processing.pdf.*;
boolean bRecordingPDF;
int pdfOutputCount = 0; 
PFont myFont;
Gridmaker newGrid;
PGraphics pg;
int textSize = 40;
float magicYimpactor;
float amount; 
float currentChaos;

void setup() {
  size(612, 792);
  bRecordingPDF = true;
  myFont = createFont("GT-Walsheim-Thin-Trial.otf", textSize);
  textFont(myFont);

  newGrid = new Gridmaker();
  pg = createGraphics(width, height, JAVA2D); // create a PGraphics the same size as the main sketch display window
}

void draw() {
  if (bRecordingPDF) {
    background(255); // this should come BEFORE beginRecord()

    //START -- -- -- CAMBU FUNCTIONS
    pg.beginDraw(); // start drawing to the PGraphics
    drawGrid();
    chaosRepresentation();

    pg.endDraw(); // finish drawing to the PGraphics
    //END -- -- -- CAMBU FUNCTIONS
    image(pg, 0, 0);
    // -- -- -- function that reads all of pg and places points/ellipses at certain values of a certain brightness
    beginRecord(PDF, "cambu_" + pdfOutputCount + ".pdf");
    rasterToNotVector();
    endRecord();
    bRecordingPDF = false;
    pdfOutputCount++;
  }
}

void keyPressed() {
  //rasterToNotVector();
  //magicYimpactor = mouseX*0.0005;
  magicYimpactor = mouseX*0.05;
  //magicXXX = mouseX;
  //magicXimpactor = mouseY*0.0005;
  //amount = mouseX*0.0005;
  bRecordingPDF = true;
}

void chaosRepresentation() {
  float chaosStart = 1;
  int startX = 0;
  int startY = 0;

  int chaosIndex = 0;
  for (int y = 0; y < newGrid.numberOfRows; y++) { //verticalDivisor, x amount
    startX = 0;
    for (int x = 0; x < newGrid.numberOfCols; x++) { // horizontalDivisor, y amount
      fill((255/newGrid.numberOfCols)*(y/2), (255/newGrid.numberOfRows)*x, 200);
      //rect(startX,startY,newGrid.horizontalDivisor,newGrid.verticalDivisor); //within the domain & range of this rectangle, transform the pixels on pg 
      chaosIndex = chaosIndex + 1;
      currentChaos = chaosStart * chaosIndex;
      charsHere(startX, startY, currentChaos);
      startX = startX + newGrid.horizontalDivisor;
    }
    startY = startY + newGrid.verticalDivisor;
  }
}

void charsHere(int x, int y, float currentChaos) {
  int a = round((x + y)*.5);

  pg.textFont(myFont);
  pg.textSize(textSize);
  pg.fill(0, 0, 0);

  int xDes = x+(newGrid.horizontalDivisor/16);
  int yDes = y-(newGrid.verticalDivisor/4);

  pg.text(a, xDes, yDes);
  quadrantDestoryer(xDes, yDes, currentChaos); // operates between (startX, startY, newGrid.horizontalDivisor, newGrid.verticalDivisor)
}

void quadrantDestoryer(int xToDes, int yToDes, float currentChaos) {
  float xA = xToDes + 0.6*newGrid.horizontalDivisor - noise(currentChaos, yToDes, xToDes);
  float yA = yToDes - 0.2*newGrid.verticalDivisor;

  pg.fill(255, 235, 250);
  //pg.noStroke();
  //pg.ellipse(xToDes + 0.5*newGrid.horizontalDivisor * noise(currentChaos, yToDes), yToDes - 0.2*newGrid.verticalDivisor, noise(currentChaos, yToDes)*0.5*currentChaos, 0.05*currentChaos);
  //pg.ellipse(xA, yA, random(0, newGrid.horizontalDivisor)*0.8, noise(50, newGrid.horizontalDivisor)*2);
  //pg.rect(xA-8, yA, xA+ 30, yA + newGrid.verticalDivisor * 0.5);
  //pg.ellipse(xToDes, yToDes, currentChaos*noise(xToDes, yToDes), noise(currentChaos+currentChaos));
}

void rasterToNotVector() {//y down
  for (int y = 0; y < height; y ++) {
    for (int x = 0; x < width; x++) { //x across              
      color cp = get(x, y);
      int b = (int)blue(cp);
      int g = (int)green(cp); 
      int r = (int)red(cp);
      int tolerance = 150;

      float noised = 30;

      if (r < tolerance && g < tolerance && b < tolerance) { 

        float amount = 30;

        float nx = noise(x/noised, y/noised); 
        float ny = noise(magicYimpactor + x/noised, magicYimpactor + y/noised); 

        nx = map(nx, 0, 1, -amount, amount); //cc to Golan for explaining distortion fields.

        ny = map(ny, 0, 1, -amount, amount*magicYimpactor); 

        //line(x, y, x+nx, y+ny);
        strokeWeight(2);
        fill(34, 78, 240);
        ellipse(x + nx*0.5, y + ny/2, 4, 3);
      }
    }
  }
}
void drawGrid() {
  noStroke();
  int i = 0;
  for (int y = 0; y < newGrid.totalHeight; y = y + newGrid.verticalDivisor) { //squares down
    if (i % 2 == 0) {
      fill(140, 140, 140, 80);
    } else {
      fill(240, 240, 240, 80);
    } //if even, else odd
    i++;
  }

  int j = 0;
  for (int x = 0; x < newGrid.totalWidth; x = x + newGrid.horizontalDivisor) { ////squares across
    if (j % 2 == 0) {
      fill(140, 140, 140, 80);
    } else {
      fill(240, 240, 240, 80);
    } //if even, else odd
    j++;
  }
}

class Gridmaker {
  int totalHeight = height;
  int totalWidth = width;
  int numberOfRows = 12;
  int numberOfCols = 54;
  int verticalDivisor = round(totalHeight/numberOfRows);
  int horizontalDivisor = totalWidth/numberOfCols;
}

Final Product:

Link to code on Github:

https://github.com/catlu4416/60-212/blob/master/catluBuddhaPlot.pde

For this project, I had 2 main ideas I thought about. The first idea I pursued was the idea of a falling leaf that would be pushed around by an invisible wind. The leaf would leave a trail on the drawing and travel from top to bottom, chaos to order. This idea I started coding until I realized that visually it did not seem very interesting, and the idea gradually became boring. The second idea I had was inspired by my trip to see family in China this past summer. There was one day we were touring the Mogao Caves, and I distinctly remember the walls full of mini Buddhas that were almost identical but ever so different. Golan’s second prompt reminded me of them, and I decided to let this guide me. I made a program so that with every click, a new, slightly different set of Buddha heads appeared. I went with a very stylized and simple look for the small Buddha heads and wanted to create something with a more ancient sort of feeling. To achieve this, I first tried paper and then ultimately wood veneer with a laser cutter instead of a plotter so I could get the distinct mark of the burnt wood markings. Having to come up with something physical was different, and made me think about both how the code would look on the screen, and how it would translate over onto a physical object. Overall, I’m happy with my result. I think the laser cutting on the wood veneer was successful, although there definitely could be a few more tweaks and maybe more detail/decoration.

I couldn’t get good video of the laser cutter doing my code because the cover on the laser cutter is dark to protect your eyes. The camera brightness never adjusted right, but you can still see a bit.

 

Here’s a picture of the laser cutter in action.

Here are inspiration and sketch pictures.

 

 

 

 

 

 

I loved the idea of plotter-made artwork when I first heard about it, but as it turned out, I didn’t have any great plotter ideas. Unlike screens, plotters can’t create moving images (which I usually like to make). They also don’t have nearly the range of colors, gradients, and opacities that screens do. Basically everything had to be line-based. I spent the first half of this week trying to make a maze generator, and while I still like that idea in theory, I struggled to come up with a creative way to design a maze that wouldn’t be too hard to generate with a program. Then, one night I was at Resnik and thought “What about binary trees?” I remembered from 15-051 that real numbers can be represented as line-based “trees”, and quickly drew out on a receipt (see below) all eight possible trees for the number 3. I thought that with a little randomization, those trees could look really nice, so I changed my plan.

First, I wrote up code that would just generate eight random trees (checking each time to make sure it doesn’t do an arrangement it has done before) and turn them into a pdf. To be safe, I printed this on the Axidraw with pen:

However, I still wanted to do more. So, I restructured my code entirely such that instead of generating a pdf, it would control the Axidraw in real time. I did this so I could have the Axidraw paint the trees. I added some code so that it would go back for more ink before every tree, and after a few messy trial runs, it worked as well as I imagined it would! The video at the beginning of this post shows the Axidraw painting my design, which I named “Three Trees.” Some pictures of my final paintings are below, followed by pictures of the digital images the computer generated while making them.

They actually turned out more artistic-looking than I originally anticipated. Several people have told me they look like characters in a foreign language, but I prefer to think they look like little dancing people (with stretched out bodies, I guess). Sometimes the ink splashed or dripped a bit, and I think that makes it look a little more hand-painted. I wish I could have made a maze generator work, but I really do like my trees!

Here is a link to the pdf generating code on Github.
Here is a link to the paintbrush version.

This project doesn’t have sketches because I began my process with an intent on experimenting with my previous project, Loops. And my experiment was so successful that I never had reason to try another idea. Instead of drawing the cycloid circles in the Loop project, I tried plotting their center points throughout their movement in a circle (within a circle, within a circle, etc). This worked out beautifully, creating an intricate, delicate looking pattern. I then found an optimal variable to modify in as many ways as I could think of, changing the constants and variables with different mathematical operations, negative values, and additional constants and value changes. I named each work after it’s mathematical expression, which also helped in recreating it later if I needed to revisit it.

This is the original loop project, followed by an example of my modified visuals for this project drawing themselves:

I created over 20 unique designs, a few of which are outlined below:

GENERATIVE FACES

I decided to generate some faces…or rather some “creepers” entirely out of ellipses.

INITIAL THOUGHTS

Initial sketches and thoughts.

The first prototype for the faces.

Another idea I had resulted in using these “creepers” as pixels and generating another grid like visual. However, there were some complications in how it would render out on paper and also wasn’t as charming as the previous.

PROCESS

Some action shots of the plotter. (Action Shot #1)

Action Shot #2

I ended up rendering a PDF entirely for the creeper’s lower region (i.e. – spine, vomit, etc.). This would make it easier when switching out the colors(pens) used on the plotters.

Here is the other PDF of the creeper faces.

In program shot.

First rendering.

CONCLUSION
The process for generating these creeper faces involved a lot of trial and error (specifically in the early programming stages). I initially created a grid of these creepers as my initial idea. However, I was unsatisfied with what I had, so I began to play around with the number of generated creepers and ended up making a mess of an image (see last picture thoughts). After some consulting with Golan, I ended up going back to my original idea and made some changes to the creepers to make each individual one more unique and awkward (differences in “bodies” and angles of faces).

Much different from the almost instant timing of a program, the rendering of the image using a plotter took a while. Although my particular image didn’t require a lot to plot, there were complications with getting the plotter to align evenly throughout the page. If I had the chance to go back in and make some changes, I think I would change the weight of the pens (uneven because of pressure of plotter at different points). Overall, I was satisfied with what I came up with and glad I went back to my initial idea.

CODE

//Template Provided by Golan
// Xavier Apostol (Xastol)
// 60-212 (8:30 - 11:20am & 1:30 - 4:20pm)
// xapostol@andrew.cmu.edu
// Composition For A Line Plotter (Processing)

import processing.pdf.*;
boolean bRecordingPDF;
int pdfOutputCount = 11; 
 
void setup() {
  size(1000, 1000);
  bRecordingPDF = true;
  strokeWeight(1);
}
 
void keyPressed() {
  // When you press a key, it will initiate a PDF export
  bRecordingPDF = true;
}
 
void draw() {
  if (bRecordingPDF) {
    background(255); // this should come BEFORE beginRecord()
    beginRecord(PDF, "weird" + pdfOutputCount + ".pdf");
 
//--------------------------------------------------------------
    //Make all drawings here.
    noFill(); 
    beginShape();
    float offset = 100;
    float ranX = random(100);
    float ranY = random(100);
    for (float x=offset; x <= width - offset/2; x+=offset) {
      for (float y=offset; y <= height - offset/2; y+=offset) {
        creeper_pixel(x,y, 1, offset);
      }
    }
    endShape();
//--------------------------------------------------------------
    endRecord();
    bRecordingPDF = false;
    pdfOutputCount++;
  }
}

void creeper_pixel(float x,float y, float sz, float spacing) {
  float genSz = spacing/4;
  float fcOff = genSz/2;
  float spineX = x;
  float spineY = y;
  
  noFill();
  beginShape();
  
  //Eyes
  for (float i=0; i <= sz; i++) {
    float lEyeX = sin(sz*i) + random(genSz);
    float lEyeY = cos(sz*i) + random(genSz);
    float rEyeX = sin(sz*i) + random(genSz);
    float rEyeY = cos(sz*i) + random(genSz);
    ellipse(x-fcOff,y, lEyeX,lEyeY);
    ellipse(x+fcOff,y, rEyeX,rEyeY);
  }
  
  //Head
  for (float j=0; j < sz; j++) {
    //Face
    float rotInt = 15;
    float hdX = cos(sz*j) + random(genSz, 3*genSz);
    float hdY = sin(sz*j) + random(genSz, 3*genSz);
    spineY += (hdY/2);
    pushMatrix();
    translate(x,y);
    rotate(radians(random(-rotInt,rotInt)));
    ellipse(0,0, hdX,hdY);
    popMatrix();
    
    //Mouth
    float mthX = cos(sz*j) + random(genSz);
    float mthY = sin(sz*j) + random(genSz);
    ellipse(x,y+fcOff, mthX,mthY);
  }
  
  
  //Spine(Body)
  for (float s=0; s < 5; s++) {
    float spineSz = random(genSz/2);
    spineX += random(-8, 8);
    spineY += random(genSz/3);
    ellipse(spineX,spineY, spineSz,spineSz); 
  }
  
  endShape();
}

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!