The right way to write inefficient code

Introduction

On September 30th 2010 I bought Andrew Glassner’s book ‘Processing for Visual Artists, How to create expressive images and interactive art’. An impressive book which has taken my programming to another level. I have done some jobs in the real world with the Processing language since than but I found that there was not enough progress for a while. But on April 17th I received an email from Andrew Glassner where he announced an 8-week class that you’ll learn not only the tools of modern computer graphics, but also the techniques and principles that make them work. The class is completely designed and taught by Andrew Glassner who has more than 25-years of experience in computer graphics.

So on May 8th 2013 I joined the 2D Animation and Interaction course at ‘The Imaginary Institute’ lead by Andrew Glassner. After going through the very interesting movies and program examples I had to do some homework. The homework assignment was divided in three parts. First part is to create a composition of rectangles. Second part is to create a composition of ellipses. And the third part is to create a composition of rectangles, ellipses and lines. I have to use comments to describe what the code does. And don’t use Processing language elements we have not covered yet. When ready zip the files end send them to Andrew Glassner. He will than create a personalized video with expert feedback on my homework.

Create a composition with rectangles

I started the composition with something I did not know. Although I work for three years with Processing I never noticed (or felt the need to) create a rectangle using negative numbers. That means for instance: rect (-10, -10, 20, 20). This seems to be fully legal code. So I started to use the idea of using negative numbers to create the first composition using only rectangles. Here is my starting point.

(W1_G6_01_01)

The second step was to check the positioning of the rectangles. Do they nicely fit in the width and height. It looked like that an imaginary grid of 20 x 20 pixels would seem to be fine. I also found out that using zero’s would lead to a zero displayed rectangle (nothing is displayed). So I left out the zero number.

(W1_G6_01_02)

I filled the black background with white rectangles which were all sized between -10 and 10 pixels in width and -10 and 10 pixels in height. The sizes were chosen fully arbitrary by me (in my head). To code this graphic image, using only Processing’s rect function, you need to type 1457 lines of code. You don’t have to type everything of course because you can use TextEdit to copy and paste. Or use TextEdit’s find and replace stuff. That gave me the following graphic image.

(W1_G6_01_03)

Than I used colour. I decide to change the background into a dark grey. The rectangle would be filled with cyan when the rectangle would use two positive width / height numbers (7, 7). The rectangle would be filled with magenta when the rectangle would use two negative width / height numbers (-10, -10). The rectangle would be filled with black when a negative and a positive width / height number (-3, 7) was used. Together with the color statements and comments this lead to 2208 lines of code. Here is the result.

(W1_G6_01_04)

Create a composition with ellipses

The ellipses composition was an easy one because I could re-use the code for the rectangles composition. Copy all rectangle code into TextEdit and use find and replace to replace the rect function with the ellipse function. Easy and a great time-saver! Here it is.

(W1_G6_02_01)

But although there was nothing wrong with the graphic image I thought that it might be better to give it another try. I thought it would be better to do something else than to let TextEdit do the job. So I filled my 20 x 20 grid with random sized circles of 10, 15 and 20 pixels.

(W1_G6_02_02)

I used cyan to fill the 10 pixels ellipses. Magenta to fill the 15 pixels ellipses. And I left the 20 pixels sized ellipses transparent. Maybe I could have made that choise different but I was to far gone in the code already to change that. Otherwise I had to start all over again with scattering the filling statements through te program. So I just continued.

(W1_G6_02_03)

To finish everything with comments and to fill most of the ellipses I had to write 2522 lines of code.

(W1_G6_02_04)

Create a composition with rectangles, ellipses and lines

This last homework assignment started a bit different from the previous two assignments. I decided to split the 800 x 800 sized window into 4 fields. Each field contains 17 squares in width and 17 squares in height. Each square is measured 20 x 20 pixels. Top left field would be used to be filled by crosses created with lines. Top right field would be filled with ellipses. Bottom left field would be filled with rectangles. And bottom right field would be filled with multiply signs made with lines. But first I checked if all the sizes would match. So I created this image.

(W1_G6_03_01)

When I added all the crosses in the top left square it looked very boring. You could not see the crosses at all. It was just a bunch of horizontal and vertical lines. So I added an arbitrary color to most of the lines in order that they stand out and could be seen as a separate lines. I also decided to leave the gray lines in the background because it looked good to me.

(W1_G6_03_02)

Filling the top right square with ellipses looked also pretty flat. And because I thought it would even be more humdrum when the ellipses were placed exactly into a gray box I positioned them at the crossings of the grey lines. 10 Pixels down and 10 pixels to the right that is.

(W1_G6_03_03)

Using the same cyan, magenta and black colours as in the previous sketches makes it a bit less monotonous.

(W1_G6_03_04)

After positioning all the rectangles in the lower right square I thought it was wrong. I did not like the fact that the ellipses in the top right box were not aligned with the crosses in the top left box. And I also did not like that the rectangles were not aligned with the top left field filled with crosses. So I had to redo the positioning of the circles and the rectangles. That took me another extra 1023 repositioning lines of code. This is what I ended up with.

(W1_G6_03_05)

And this is the final image which. I have removed the gray lines and added the multiply signs in the lower right square. I have also made the lines thicker. They are now six pixels thick. This code is 3050 lines long. Which gives a grand total of the three images together of 7780 lines of code. Which is probably the most code I have ever typed. It is completely inefficient but it is a nice experiment in patience and endurance.

(W1_G6_03_06)

Advertisements

Comments? Leave a reply.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s