New Color

It has been decided that white looks better on screen, I asked around. Here is what it’s going to look like now.

Illustrator Versions of Code

I generated some versions of the code in Illustrator to use to submit for fabrication. I also plan to use these vectors in vinyl wall decals if whatever space this project inhabits allows for it. Here they are.

Images of Code Completions

Here are a few screen shots of the code that was posted here.

The colors and size may still end up being tweaked and a new font will probably be chosen, but this is pretty much the completed functionality for the code.

Code completion.

Some major changes have been made to the source code. I have gotten it down to one class. I have fixed the two-dimensionality which happens when the form is rotated. It has even been compacted down to about 85 lines (I would like to shave off at least 5 more).

There may be one more update with some stylistic changes, variable names, font choice, colors, etc. But functionally it will be the same.

Here is the newest rendition.

 1 import processing.core.*;  
 2 import java.io.*;
 3
 4 public class HelloQuine extends PApplet {
 5     // the size of the stage
 6     private final int WIDTH  = 1280, HEIGHT = 740;
 7     // shape rotation values
 8     private float zRotation = 0, xRotation = 0, yRotation = -1;
 9     // shape translation values
10     private float xMove = WIDTH/2, yMove = HEIGHT/4, zMove = HEIGHT/4;
11     // structures the characters to display
12     char[][] charMatrix; // in the form char[tall][across]
13     File sourceFile;    
14
15     /** Do everything that should be done before objects are drawn. **/
16     public void setup() {
17         size(WIDTH, HEIGHT, P3D); // the size of the stage
18         lights(); // give the stage some ambient light
19         textFont(loadFont("Univers66.vlw.gz"), 8);
20
21         sourceFile = new File("C:\\Users\\Trip\\Desktop\\eclipse\\" +
22                 "workspace\\HelloQuine\\src\\HelloQuine.java");
23         try {
24             charMatrix = new char[countLines()][80];
25             for (int x = 0; x < charMatrix.length; x++) {
26                 for (int y = 0; y < charMatrix[0].length; y++) {
27                     charMatrix[x][y] = ‘ ‘;
28                 }
29             }
30             loadChars();
31         } catch (IOException e) {}
32     }
33
34     /** Repeatedly called to keep drawing to the screen. **/
35     public void draw() {
36         background(0,0,0);  // the background color in RGB
37         pushMatrix();   // start developing a shape
38             translate(xMove, yMove, zMove);
39             rotateX(xRotation); rotateY(yRotation); rotateZ(zRotation);  
40             drawCylinder(100, 80);  
41         popMatrix();    // draw the shape to the screen
42     }
43
44     /** Draw a cylinder of the specified dimensions to the screen. **/
45     public void drawCylinder(float radius, float sides) {
46         float angle = 180;
47         float angleIncrement = radians(360 / sides);
48
49         // draw letters to the screen
50         fill(0×88, 0×99, 0xFF);
51         for (int j = 0; j < charMatrix.length; j++, angle = 180) { // rows
52             for (int i = 0; i < sides; i++) { // letters
53                 beginShape();
54                     text(charMatrix[j][i], 0, j * 9, radius);
55                     rotateY(angleIncrement);
56                 endShape();
57                 angle -= angleIncrement;
58             }
59         }
60     }
61
62     /** Load characters from the source file into the matrix. **/
63     private void loadChars() throws IOException {
64         BufferedReader in = new BufferedReader(new FileReader(sourceFile));
65         String line;
66         char[] chars;
67         int lineCount = 0;
68
69         while ((line = in.readLine()) != null) {
70             chars = line.toCharArray();
71             for (int i = 0; i < chars.length; i++) {
72                 charMatrix[lineCount][i] = chars[i];
73             }
74             lineCount++;
75         }
76     }
77
78     /** Count the lines in the source file. **/
79     private int countLines() throws IOException {
80         int lineCount = 0;
81         BufferedReader in = new BufferedReader(new FileReader(sourceFile));
82
83         while ((in.readLine()) != null) { lineCount++; }
84         return lineCount;
85     }
86 }

Updated Source Code

The code thus far. Right now the code is split into two classes, one that draws the cylinder of text to the screen and one that reads in the cylinder code’s text into a character[][] matrix. These classes will be merged in the future.

Here are some images of the object that this code generates.

Also, I found a nice way to post code in here as well, surprisingly GVim has an option to convert whatever it is displaying into html formatted text. Here is a portable version for Windows that doesn’t require any installation.

HelloQuine.java – Draws the cylinder to the screen.

 1 import processing.core.*;
 2
 3 public class HelloQuine extends PApplet{
 4     //shape rotation values
 5     private float zRotation = 0;
 6     private float xRotation = (float) -0.2;
 7     private float yRotation = 0;
 8     private float xTranslate = width/2+400;
 9     private float yTranslate = height/2+175;
10     private float zTranslate = 200;
11
12     /**
13      * setup
14      * do all of the things that should be done before objects are
15      * drawn to the stage.
16      */
17     public void setup(){
18         size(900, 600, P3D);      //the size of the stage
19         textFont(loadFont("Ziggurat.vlw"), 8);
20     }
21     
22     /**
23      * draw
24      * repeatedly called to keep drawing to the screen.
25      */
26     public void draw(){
27         lights();                     //give the stage some ambient light
28         background(0×000000);         //the background color in RGB
29         noStroke();                       //hide the wire frame
30         
31         pushMatrix(); //start developing a shape
32         
33         translate(xTranslate, yTranslate, zTranslate);    //moves the shape
34         rotateX(xRotation);               //rotates around the x axis
35         rotateY(yRotation);               //rotates around the y axis
36         rotateZ(zRotation);               //rotates around the z axis
37
38         //draw a cylinder object to the screen at the location specified above
39         drawCylinder(100, 100, 350, 80);  
40         
41         popMatrix();  //draw the shape to the screen
42     }
43     
44     /**
45      * drawCylinder
46      * draws a cylinder of the specified dimensions to the screen.
47      */
48     @SuppressWarnings("static-access")
49     public void drawCylinder(float topRadius, float bottomRadius,
50                                                     float tall, int sides) {
51         float angle = 0;  
52         float angleIncrement = TWO_PI / sides;
53         
54         fill(0×88, 0×99, 0xFF);
55         CharacterMatrix cm = null;
56         try {
57             cm = new CharacterMatrix("C:\\Users\\Trip\\Desktop\\eclipse\\" +
58                                 "workspace\\HelloQuine\\src\\HelloQuine.java");
59         }
60         catch (Exception e) {}
61         
62         //draw letters to the screen
63         for(int j = 0; j < cm.getCharMatrix().length; j++){   //strips
64             for(int i = 0; i < sides ; i++) {            //letters
65                 text(cm.getCharMatrix()[j][i], topRadius*cos(angle)-5,
66                                     ((i*20)/80)+j*8, topRadius*sin(angle));
67                 angle -= angleIncrement*2;
68             }
69         }
70     }
71     
72     /**
73      * keyPressed
74      * constantly listened to by the PApplet.
75      */
76     public void keyPressed(){
77         //listen to the non lettered keys
78         if(key == CODED) {
79             if (keyCode == RIGHT) {     yRotation -= .03; }
80             else if (keyCode == LEFT) { yRotation += .03; }
81             else if (keyCode == UP) {   xRotation += .03; }
82             else if (keyCode == DOWN) { xRotation -= .03; }
83         }
84         /* listen to the letter keys */
85         else if(key == ‘w’){ zTranslate += 2; }
86         else if(key == ‘a’){ xTranslate -= 2; }
87         else if(key == ‘s’){ zTranslate -= 2; }
88         else if(key == ‘d’){ xTranslate += 2; }
89         else if(key == ‘r’){ yTranslate -= 2; }
90         else if(key == ‘f’){ yTranslate += 2; }
91     }
92     private static final long serialVersionUID = 1L;
93 }

CharacterMatrix.java – Reads in a text file and turns it into a matrix.

 1 import java.io.*;
 2
 3 public class CharacterMatrix {
 4     
 5     private static  char[][] charMatrix;   //in the form char[across][tall]
 6     private static String    sourcePath;   //path to the source file
 7     private static File      sourceFile;   //objected source file
 8     
 9     /** CharacterMatrix **/
10     public CharacterMatrix(String filePath) throws IOException{
11         sourcePath = filePath;
12         sourceFile = new File(sourcePath);
13         charMatrix = new char[countLines(sourceFile)][80];
14         fillMatrixWithSpaces(charMatrix);
15         loadChars(charMatrix);
16     }
17
18     private void fillMatrixWithSpaces(char[][] matrix) {
19         for(int x = 0; x < matrix.length; x++){
20             for(int y = 0; y < matrix[0].length; y++){
21                 matrix[x][y] = ‘ ‘;
22             }
23         }
24     }
25
26     public static char[][] getCharMatrix() {
27         return charMatrix;
28     }
29
30     private void loadChars(char[][] matrix) throws IOException {
31         BufferedReader in = new BufferedReader(new FileReader(sourceFile));
32         String line; char[] chars;
33         int lineCount = 0;
34         
35         while((line = in.readLine()) != null){
36             chars = line.toCharArray();
37             for(int i = 0; i < chars.length; i++){
38                 matrix[lineCount][i] = chars[i];
39             }
40             lineCount++;
41         }
42     }
43
44     private int countLines(File file) throws IOException {
45         int lineCount = 0;
46         BufferedReader in = new BufferedReader(new FileReader(file));
47         
48         while ((in.readLine()) != null) { lineCount++; }
49         
50         in.close();
51         return lineCount;
52     }
53 }

Text now on the Cylinder.

The cylinder is no longer a solid object. I got the text from the code to appear around the outside which is much closer to the finished product. The code still contains key handlers for my own testing, this will be removed later. Also I use a separate class to load the text into the cylinder object, but these classes will be merged and cleaned up in the future, for now this is the best approach for my own sanity. I am still working on the correct font and a few other bug fixes, the text tends to get a little two-dimensional as it rotates, this will be fixed some how.

The source code that generates this can be found here.

Code Progress Images

Here are some pictures of the cylinder code thus far.  The cylinder depicted has 80 sides.  This will be enough to accommodate one letter per side to reflect the coding standard of 80 characters maximum per line of code.

 

A Processing decision, and some code.

So I decided to use processing for the code, which is an offshoot of Java,  this decision was mainly because Processing’s ease of readability made it ideal for working with structurally as well as allowing people not extremely proficient in programming to be able to read the code.  When I pasted the code into this screen it took away my indentation, which is sort of ironic as this project is about the beauty of well structured code, this is a HTML issue that I will figure out how to get around in the future.  Either way, here is the processing code that I have been working on thus far.  It produces a cylinder to the screen and that cylinder is alterable in rotation and color.  This isn’t going to be a part of the final application, but it is ideal for testing.  The applet can be downloaded here (Right click -> Save As).  Rename the file extension from .jpg to .zip, unzip it and open index.html.  The file extension renaming thing is because WordPress won’t allow me to upload a .zip file.

 

 

import processing.core.*;

public class BasicCylinder extends PApplet{

private static final long serialVersionUID = 1L;
//color and opacity values for drawing
private float red = 150, green = 150,  blue = 150;
private float opacity = 255;   
//shape rotation values
private float zRotation = (float) 0;
private float xRotation = (float) -(0.5);
private float yRotation = (float) 0;
          

/**
 * setup
 * do all of the things that should be done before objects are 
 * drawn to the stage.
 */
public void setup(){
size(800, 600, P3D); //the size of the stage
}

/**
 * draw
 * repeatedly called to keep drawing to the screen.
 */
public void draw(){
lights(); //give the stage some ambient light
background(0, 0, 0); //the background color in RGB

fill(red, green, blue, opacity);//the color of the next drawn object in RGB
// stroke(255); //wire set wire frame to white
noStroke(); //hide the wire frame
// noFill(); //hide the object's solidity

/* pushMatrix starts developing shape */
pushMatrix();
translate(width/2, height/2-100, 0); //moves the shape to this location
rotateX((float) xRotation); //rotates the shape around the x axis
rotateY((float) yRotation); //rotates the shape around the y axis
rotateZ((float) zRotation); //rotates the shape around the z axis

//draw a cylinder object to the screen at the location specified above
drawCylinder((float)100, (float)100, (float)350, 80);
popMatrix();
/* popMatrix draws the shape to the screen */
}

/**
 * drawCylinder
 * draws a cylinder of the specified dimensions to the screen.
 * @param topRadius
 * @param bottomRadius
 * @param tall
 * @param sides
 */
public void drawCylinder(float topRadius, float bottomRadius, float tall, int sides) {
  
float angle = 0;
float angleIncrement = TWO_PI / sides;

/* define the shape of a side of the cylinder. */
beginShape(QUAD_STRIP);
//for each side draw a plane and increase the angle around the cylinder
for (int i = 0; i < sides + 1; ++i) {
    vertex(topRadius*cos(angle), 0, topRadius*sin(angle));
    vertex(bottomRadius*cos(angle), tall, bottomRadius*sin(angle));
    angle += angleIncrement;
}
endShape();
  
/* If it is not a cone, draw the circular top cap */
if (topRadius != 0) {
angle = 0;

beginShape(TRIANGLE_FAN);
// Center point
   vertex(0, 0, 0);
   //for each side draw a triangle from the top of the plane to the center of the top cap
   for (int i = 0; i < sides + 1; i++) {
   vertex(topRadius * cos(angle), 0, topRadius * sin(angle));
   angle += angleIncrement;
   }
endShape();
}

/* If it is not a cone, draw the circular bottom cap */
if (bottomRadius != 0) {
angle = 0;
beginShape(TRIANGLE_FAN);
// Center point
vertex(0, tall, 0);
   //for each side draw a triangle from the bottom of the plane to the center of the bottom cap
for (int i = 0; i < sides + 1; i++) {
vertex(bottomRadius * cos(angle), tall, bottomRadius * sin(angle));
angle += angleIncrement;
}
endShape();
}
}

/**
 * keyPressed
 * constantly listened to by the PApplet.
 * Arrow keys rotate the cylinder
 * 'r' resets the cylinder
 * number keys change color and opacity, 1-6 = RGB, 7-8 Opacity
 */
public void keyPressed(){
//listen to the non lettered keys
if(key == CODED) { 
    if (keyCode == RIGHT) { 
     zRotation -= .03;
    } 
    else if (keyCode == LEFT) { 
     zRotation += .03;
    } 
    else if (keyCode == UP) { 
     xRotation += .03;
    }
    else if (keyCode == DOWN) { 
     xRotation -= .03;
    }
}
/* listen to the letter keys */
//reset everything
else if(key == 'r'){
zRotation = (float) 0;
xRotation = (float) -(0.5);
red = green = blue = 150;
opacity = 255;
}
/* listen to the number keys */
//change the red value
else if(key == '1'){
if(red >= 5){ red -= 5; }
}
else if(key == '2'){
if(red <= 250){ red += 5; }
}
//change the green value
else if(key == '3'){
if(green >= 5){ green -= 5; }
}
else if(key == '4'){
if(green <= 250){ green += 5; }
}
//change the blue value
else if(key == '5'){
if(blue >= 5){ blue -= 5; }
}
else if(key == '6'){
if(blue <= 250){ blue += 5; }
}
//change the opacity value
else if(key == '7'){
if(opacity >= 5){ opacity -= 5; }
}
else if(key == '8'){
if(opacity <= 250){ opacity += 5; }
}
}
}


The Project Proposal

The “Hello Quine” project aims to explore the aesthetic and sculptural quality of written source code.  I plan to write a program that will utilize the various structural necessities of well written code. The final application will showcase this concern with well structured code in the form of a quine, a computer program which produces a copy of its own source code as its output. This quine will take the form a virtual three-dimensional object.  This digital object will visually resemble a Greek column to represent the order and structure used in the code’s creation and maintenance.  This is similar to an actual Greek column as an architectural column gives structure and order for the building it supports.  This virtual column will be a quine as well as it will be composed of the code used to generate it.  Such a quine allows the code to display its inherent aesthetic design and order.

Once the virtual quine is written and displayable a physical representation of this code will be created.  The physical object will be relatively identical to the virtual object, the same source code in the shape of a column.  With the code complete, it can be copied into Illustrator or Photoshop and have a font applied to it in order to give it a particular style.  This object will be somewhere between three to four feet tall, depending on how much code ends up being required to generate the virtual column, and it will be around one foot wide.  The code will be laser cut from transparent acrylic sheets to remind us of the intangibility of digital objects.

With the virtual and physical objects complete, the three layers of code can be displayed as a whole or in parts.  Each stage, the source code, the output, and the physical sculpture, will have their own unique aesthetic qualities yet will be enhanced when displayed in conjunction with the other pieces.