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]

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