I’m not a programmer. I repeat, I am not a programmer. I have taken VB.net classes and Java classes in high school (my grades were okay). I’ve dabbled with nonsense VB code when I was a kid and plugged away cluelessly at PHP code (frustrating myself in the process). But I never got the hang of programming.

It’s not that I didn’t understand what programming was. The fundamentals of all computer languages boil to the same common constructs (variables, arrays, object-oriented structures, functions, classes, syntax). I didn’t have trouble logically breaking down a problem (I hated programming flow charts, I was pretty good at making them). Give me some source code and I can probably work to decipher what you are trying to do. I understand code.

But when it comes to writing my own code, I am not quite up to speed. For me, a programming language is similar to a foreign language: brain-numbingly difficult. I don’t know if it’s the memorization of syntax, the overthinking involved with the logic, or the frustration of constant failure to produce something great. For me, programming just sucked.

However, it is a necessity in the world of computing. Not only do I understand that, I highly respect those who wield the ordinary craft into something extraordinary like complex web applications, video games, mobile apps, and more. High quality programmers are scarce in the tech world and they are highly-sought after. With a serious, growing demand outlasting the supply, tech megastars like Zuckerberg and Gates as well as startups like Treehouse and Codecademy are all tackling the problem of getting people (like me) to get involved and learn how to code.

In essence, learning how to program is my path to owning my vision. So, what the hell, right? Let me try with all my might and dive in. If I want to bring my ideas to reality, I should muster up the skills in my own sandbox and test them, refine them, and ultimately shape them to my vision.

I have embarked on a journey to give myself a new project. I’ve been sketching this idea for the last week involving analog clocks, typography, and a pinball. I wanted to create a minimalistic mobile game that was more like an art project, exploring moving analog clocks that can be placed on a canvas by a user. Then, the hands could be manipulated and resized to create a drawing with multiple clocks in hand. All the clocks would move at their own pace, while a ball would be dropped from the top of the screen. In a sense, the user is creating an artwork and a game map for the ball to navigate through.

It kind of looks like this (crude) sketch:

To experiment outside the fold of Sketch and Photoshop, I am toying with Processing. It’s basically an environment with java-like syntax where you can make artistic expressions using lines of code.

It seemed fairly easy to setup up. Download the app. Launch it. Type in some code. Watch it run. Simple and straightforward. I was able to quickly start drawing lines and circles and squares and triangles. It was also fun to be able to perform some interactivity simply by using my mouse coordinates as a variable to manipulate a line on a background.

I continued forward by doing some searching on how to create an analog clock. One of the best things about starting as a beginner programmer is the wealth of information available just by googling. I personally love Stack Overflow for its incredible, rich resource of nice tech guys helping newbies like me. Pretty soon I came across a couple of links on Analog Clocks and settled with this code example as my base. Before I went ahead to run the code, I made myself more familiar with the syntax with the first few tutorials available on the site. This helped me understand the built in functions ( such as setup() and draw() ) along with class structures.

To bring my idea to fruition, I needed to be able to wield multiple analog clocks. Some research revealed that using a class would help me reuse my code efficiently. I used a tutorial on OOP on the processing site to restructure the example code as a class. Finally, I linked my mouse to the position of the analog clocks. This was to prove to myself that I could manipulate the canvas with simple code while giving me the success of interactivity with little programming knowledge.

Here is the source code so far:

Clock clockOne;
Clock clockTwo;

void setup()
{
size(500,500);
}

void draw()
{
background(255);
clockOne = new Clock(mouseX,250,245,200);
clockTwo = new Clock(250,mouseY,0,50);
clockOne.display();
clockTwo.display();
}



class Clock {
float as = map(second(),0,60,0,TWO_PI); // angle of second hand, from 12
float am = map(minute()+second()/60.0,0,60,0,TWO_PI); // angle of minute hand, from 12
float ah = map(hour()+minute()/60.0,0,24,0,TWO_PI*2); // angle of hour hand, from 12

float posi;

float xpos;
float ypos;
float fill;

float mLen;
float sLen;
float hLen;

Clock (float tempXpos, float tempYpos, float tempFill, float tempPosi) {
xpos = tempXpos;
ypos = tempYpos;
fill = tempFill;
posi = tempPosi;

mLen = posi*.4; // length of hands (m,s,h)
sLen = posi*.4;
hLen = posi*.25;
}


void display () {
pushMatrix();
translate(xpos,ypos); // Much simpler if we translate to the center of the screen
fill(fill);

// draw second hand
pushMatrix();
rotate(as);
stroke(255,0,0);
line(0,10,0,-sLen); // draw as if it's at noon, rotation takes care of the rest
stroke(0);
popMatrix();

// draw minute hand
pushMatrix();
rotate(am);
triangle(-5,10,0,-mLen,5,10); // draw as if it's at noon, rotation takes care of the rest
popMatrix();

// draw hour hand
pushMatrix();
rotate(ah);
triangle(-5,10,0,-hLen,5,10); // draw as if it's at noon, rotation takes care of the rest
popMatrix();

popMatrix();
}


}

And here is a screenshot of the program in action:

Programming can be tricky and confusing at first. There are not too many safety guards if you code fails to compile (or worse, when the program is running but without the desired effect). For instance, when I was building the class structure, I repeated a variable which didn’t pass my mouseY variable to the code. I furiously moved the mouse to get my work to respond but to no avail. Only upon close inspection of my code did I notice my error in repeated variables.

However, I must admit: it is empowering. I spent 40 minutes going through Processing exhibits and use cases, bursting in a flurry of creative outbursts (it could also be the double shot of coffee I drank earlier). I was thinking about how I could use an Apple Remote to manipulate objects on screen, or involve a hardware layer with Arduino to react to real-world conditions. Throw in a racing wheel to direct input and you can create generative art. You can really bridge some great ideas from simple but potent lines of code.

I also love being forced to break down ideas into very small, abstract pieces in order to build them. An analog clock is really just two triangles and a line wedged around a dot, rotating. But these small shapes produce greater information for the user. It’s the iterative thinking that can culminate into a project that is greater than the sum of its parts.

No matter what the outcome of this experiment of me programming, I am willing to make this work and give it a chance. A designer shouldn’t be limited to Photoshop or Illustrator. Nor should they be restrained to pen, paper, or even pastels. There are new mediums for expression that should be explored and taken advantage of. It’s the way to make my soul grow.