10E80 Atoms

First I want to thank Andrew Glassner for his ‘extremely critical’ but motivating comments on the week 1 homework. With ‘extremely critical’ I mean ‘precise’ and very ‘in-depth’. Amazing how much time and energy he puts into the review, asking questions and analyzing the work the students have made. I hope we can keep this high level for seven more weeks. It is all very informative.

In this second week of the 2D Animation and Interaction Course, variables, integers, floats, a piece of math and print statements are introduced. The homework assignment was very simple: create an animation. Use the function frameCount to change your image from one frame to the next. And do not use language elements we have not covered. That makes it immediately more complex because the smaller your toolbox is the less you can do. Although I now have my doubts about that statement at this moment. But if, for example, you would like to repeat something you’ll have to do that manually. And with manually I mean: typing code. You cannot automate anything.

In the supplemental videos there was one video that deals with scientific notation. I knew a bit about it  but not sufficient. I was quite interested by scientific number 10E80 because this is the number of atoms that our universe has. 10E80 Is a 10 followed by 80 zeros. So I suggested to Andrew Glassner to make an animation with it. He confirmed that current estimates puts the number of atoms in the universe as somewhere around 10E80. Obviously, that’s a number with a lot of guesswork in it. Because nobody really knows how big the universe is. Or how dense it is!

The first thing I did was starting to draw the notation 10E80 manually. This makes it easier to calculate the pixel positions on which characters must start to bring everything on-screen. From there on I went to animate the word.

Draft 10E80

The next step was to make a few tests to check out how the function frameCount is doing its job. I have made a test in which I looked at how you can influence the speed of objects using frameCount. In our example the speed which frameCount generates is sixty frames per second. This amount of frames makes very fast flying elements on the screen possible. Something that I do not really want.


After I had drawn three characters in Processing it seemed more interesting not to animate the number 10E80. It seemed better to me to animate objects around that scientific number. I decided to first focus on the total number and to use animation in a later stage. Thinking about that we are living in an ever-expanding universe the theme of growth seemed fine for the time being.


Over time I found that the number 10E80 actually was not so significant if you did not see it int it’s context. It seemed better to place it in a sentence. So I took the phrase ‘THE UNIVERSE CONTAINS 10E80 ATOMS’ as a starting point. This sentence I sketched out on paper in a very simple font (five by five pixels). I also decided to center 10E80 in a field of eight hundred by eight hundred pixels both horizontally and vertically.


Then it was time to put the text into Processing. I started with the letters ‘THEVERSE’. These eight letters immediately gave me the full width of the entire sentence. This gave me also the possibility to easily check whether the word was well centered. At first I did this with a TextEdit window placed to the left of the word and then (using the same width of the TextEdit window) checking the right side of the word. That sounds pretty amateurish. And  it is. But suddenly I remembered that I had (some OSX versions before) an Art Directors Toolkit. Download Art Directors Toolkit. Very convenient and it only costs € 15.50. I also introduced a variable for the radius of the ellipses of which the letters are constructed. In that way I could figure out at a later stage how big the ellipses could be to enable a good-looking sentence.


One note that Andrew Glassner had on my work was that I not fully commented my code. Because I had written a lot of code it would be very difficult to find errors if there were any. Partly the code was so long because we were not allowed to use unknown functions. And it required a lot of code because I still wanted to make interesting images. Do interesting images contain a lot of objects? Anyway, I decided to follow his advice to use extensive comments. After the first three words were finished, I got dissatisfied with the A character. The A looks like a house symbol. So I replaced the horizontal bar 5 pixels down. But than the A was even more less elegant. Even more less elegant? Is that good English? Anyway… it seemed a better way to go to design another A.


In this proposal I replaced the uppercase A by a lowercase a This is a much more elegant. I also used the variable dotRadius to influence the radius of the ellipses. It also seemed to be better to make the words gray. The elements that I would design later than could be white and move over the words. The atomic world  is actually a gray world.


Now is the time has come to focus on the animations around the words. Of course I could draw circles that are getting bigger. But that’s not really interesting. The circles are getting larger and larger and disappear over time. In addition, larger circles still animate outside the display window and on a certain moment they will be at such a huge sizes that you do not see them anymore. The computer keeps on calculating the unseen circles and the program is getting slower. While visually seen there is no reason for delay.


I decided to see if it was possible to get some small elements to move. Smaller elements (which I will call atoms). Here is an example of four symbolic atoms. Time (when the atoms come into the picture) is influenced by the position they have as a starting point. An atom that starts at a negative position -400 is seen earlier in the display window than an atom which starts at a negative position of -800. These negative positions are located outside of the display window. Therefore these atoms come into the picture later than atoms which start at zero. The tail of the atoms (do atoms have a tail?) is created by displaying a semitransparent square over the total display area sixty times per second. The effect is created by two lines of code which I borrowed from Ben Fry and Casey Reas book “Processing. A Programming Handbook for Visual Designers and Artists.


In this proposal I made the atoms smaller. This gives a better contrast with the text in the center. I also checked whether it was possible to let the atoms travel from left to right. From top to bottom. From right to left and from bottom to top. Then I gave the atoms that move from left to right to give a random-like direction. But because we are not allowed to use the random function I made random direction choices in my head. And that seemed to be a good place to make that choice Andrew Glassner told me.


This is the final animation that I sent as homework for week 2. I also added a print function that indicates how many frames there are rendered in total. In short, with a function as frameCount you can animate many things. It’s just very labor intensive. But maybe that has something to do with my way of designing. Even when I did not program my designs I found it interesting to try as many varieties as possible.



The right way to write inefficient code


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.


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.


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.


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.


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.


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.


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.


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


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.


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.


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.


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


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.


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.