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.



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