The History of Interactive Computer Graphics - Part 1

1824: The Thaumatrope

The very first form of animation came around only about 1824. The English physicist John Ayrton Paris then co-invented (together with W. Phillips) a method to prove that a visual image always 'remains on our retina' for a little while. He wanted to prove this by having two images alternate at high speed so that the illusion arose that they overlapped eachother as if they were the same image.

In 1825, this was commercially registered under the name 'Thaumatrope' and marketed as a disk, attached between two strings, with an image on each side. If you 'wound up' the disc with the strings by often turning the disc and let the ropes intertwine and then suddenly pull the strings so that the disc starts spinning quickly, the two images alternate quickly and seemed to overlap as if they are the same. If one image is a cage and the other a bird, the bird seemed to be in the cage. By the technique of wrapping the ropes you could even create a simple animation, for example a rider who was thrown off a horse.

This quickly became a popular toy that was frequently copied by others and brought to the market more cheaply. There were also people who claimed that they had come up with this idea earlier.

1832: The Phénakisticope

Now that the technique is known of alternating two frames, the next step was to develop devices that can alternate multiple frames and thus form an animation.

The Belgian physicist Joseph Plateau, as a student, was fascinated by the fact that revolving wheels seem to stand still over each other or show an opposite movement. He went deeper into this theory and also communicated with British scientist Michael Faraday (yes, the one of the Faraday Cage). He came around late 1832 with his invention, which was originally intended as an optical illusion: the Phénakistiscope. This is a cylinder with images drawn inside of them that alternate with rotation, creating a smooth animation. The Austrian professor Simon von Stampfer came around the same time with a similar idea, but seems to have been inspired by the Plateau papers.

Later on, other variants of this principle arose, such as a device in which the images of a revolving cylinder were projected via mirrors in the center to the user as an animation.

But the phénakisticope is thus the first device that actually displays an animation as we still do today: with changing frames. This device soon became a popular toy in Europe and was also released under other names, such as the Stroboscope and the Fantascope.

1854: Boolean algebra

In 1847, the British mathematician George Boole introduced the algebraic system of logic for the first time in his book 'The Mathematical Analysis of Logic'. In other words, calculation with true (one) and false (zero). In 1854 he also came up with a paper in which he described what we now know as Boolean algebra.

Boolean algebra has become an important basis for the development of digital electronics and computers years later. But that was not on their minds at the time.

The basic operations of Boolean algebra are AND, OR and NOT. With these simple operations you can calculate the outcome of a circuit of parallel and serial switches. For example, you can calculate whether a light turns on when you switch certain switches on or off. With this algebra, we still work in computer hardware and programming languages today.

1868: The Kineograph

Meanwhile, considerable progress was made in the field of animation. In September 1868 the British printer John Barnes Linnett patented his invention The Kineograph under the project name 'Improvements in the means of producing optical illusions'. The idea was to quickly scroll through sheets of paper on which frames were drawn. Nowadays we would call this a flip book.

The Kineograph, which stands for moving image, is the oldest known form of a flip book as we know it and was the first way of a linear (instead of circular) sequence of images to form an animation sequence. The principle that we still use today for producing moving images for films was thus born.

1877: The Praxinoscope

There have been more devices that have contributed to where we stood in 1877 on the matter and it would be a long blog if I would write them all down, but I certainly think this one is worthy of mention. This device is an important connection point in history, because for the first time the principles of projecting light (The Magic Lantern) were combined with techniques for creating smooth animations with frames (The Kineograph). The very first projector that projected moving image was born: The Praxinoscope.

And because of these special names for these inventions you have to like this history!

The Praxinoscope was invented in 1877 by the French science teacher Charles-Émile Reynaud and consisted of a revolving cylinder with on the inside the animation frames as images which, illuminated by a lamp, were projected onto a wall as moving images via mirrors and a lens.

You almost start to wonder how it took so long to combine the invention of animation with the principles of the projector, that had been invented already 223 years earlier. Well hey, there was no internet at that time to quickly exchange new ideas and to become smarter together. But now that the Praxinoscope was finally a fact, it was time to develop it further... into the very first film! I leave out the origin of the film in this blog and go straight to the very first film in which a drawn animation was shown.

1900: The Enchanted Drawing and Stop-Motion

And that was 'The Enchanted drawing', made between September and early November 1900 by James Stuart Blackton in his own Vitagraph Studios. So we literally stepped into a new century with the first drawn animation on film. Even if it was still a silent film and had a short duration, this was an important development for animations.

Blackton made the film with the still relatively new stop motion technique, which was used for the first time in 1897, so three years earlier. In The Enchanted Drawing, a man draws a character on an easel, and fed him a bottle of wine so the drawing got drunk. This short film is seen now as the father of all animated films. This set the tone for more drawn animations and the step to Disney is now only small.

1923: Walt Disney

In 1923 the animator Walt Disney made the short film 'Alice's Wonderland', starring a young actress who communicates with animated drawn characters. Walt Disney had another company at that time, but when he went bankrupt he moved to Hollywood.

He and his brother Roy were approached by film distributor Winkler Productions to make the series 'Alice Comedies' and founded 'Disney Brothers Cartoon Studio' on October 16, 1923. We can say that it has become a huge success and Disney has helped animation a lot moving forward.

1933: Multiplane and Parallax Scrolling

In 1933 the Walt Disney Studios came up with a new technique to bring depth to illustrations. This was done through the multiplane camera technique. Drawings were made on transparent sheets and placed in layers above each other under the camera. Because of this layer structure, each layer could be moved independently of each other, resulting for the first time in the parallax scrolling effect that would later be copied into the computer in many computer games, such as Super Mario Bros.

Since 2011, the parallax scrolling effect has also been used extensively in websites by allowing background photos to move more slowly than the 'foreground' of the website, creating depth during scrolling of the page.

Disney wasn't the first to use the multiplane technique. It was already used seven years earlier, in 1926, by Lotte Reiniger for her film 'The Adventures of Prince Achmed'. But Disney improved and showed the technology worldwide.

1933: Chroma Key

In order to combine drawn animations with camera images, Disney already used drawings with white backgrounds that were projected over film images. Other producers were already using a sort of keying, as Frank Williams did in 'The Invisible Man'. But the use of blue and green screens to replace part of the image with another image was first done in 1933 by visual special effects pioneer Linwood G. Dunn for the film 'Flying Down to Rio'. Done at the time with an optical printer.

Since then, the technology has evolved a lot and now this is a standard technique in every film and television studio and can be found in every professional video editing/effects package.

1937: Circuit with relays and switches

In 1937 the later called 'Father of Information Theory', the American mathematician, electrical engineer and cryptographer Claude Shannon wrote his MIT master's thesis. In his thesis he used Boolean algebra for calculating the outcomes of circuits with relays and switches. It was the first time that Boolean algebra was used to calculate logical electrical systems and this formed a very important basis for digital systems that would be developed many years later, such as computers. Digital devices today still work with these techniques.

1939: The View-Master

In 1926 on the west coast of the United States, a company started producing postcards and album-souvenirs. This company, Sawyer's, was led by Ed Mayer and marketing by Harold Graves. Soon adding photographic postcards to their assortment, the company became the largest producer of picturesque postcards in America at the time and they sold to large department stores.

In 1938 a new technique was invented by the German William Gruber: the stereophoto. This gave a photo depth. Sawyer's took this technique into production at a factory in Portland, which resulted in a viewer and discs with stereophotos that could be viewed with it: The View-Master.

In 1940 the American army saw great advantages of using these View-Masters for training American soldiers during the Second World War. Some 100,000 viewers were ordered by the army, and between 1942 and the end of the war in 1945 nearly 6 million discs were ordered for it. Later, the View-Master was mainly sold as children's toys.

1940: Alan Turing and The Bombe

During the Second World War the Germans communicated with one another via an encryption device called the Enigma Machine. In order to prevent the Enigma's key being cracked and the secret messages to be deciphered on this device every day the many settings were changed by the Germans, so the key to decipher codes changed making cracking of the key and thus the communication virtually impossible. Even if the key would be known, it still could only be used for a maximum of 24 hours. After that, the Enigma settings and thus the encryption-key would be changed again.

Amongst others in Great Britain, they were busy trying every day to crack the codes. But that did not went well and seemed impossible to do on time. Until the day a mathematician reported to the army and said he had an idea to crack the Enigma codes. His name was Alan Turing and by a lot of calculating and a little trial and error he developed a machine, an electromechanical computer, that had to crack the every day changing code to decipher the German messages: The Bombe.

1947: The Bit

Information technology also started to get off to a good start and in 1947 the American statistician John Tukey came up with the term 'Bit'.

The encoding of data with bits has been done since 1732 when making punch cards where each punch position on the card may or may not have been punched. But there was no name for this yet. Claude Shannon used the term 'Bit' in his Information Technology paper and made it a strong definition. But the origin came from John Tukey who already one year earlier wrote about 'Bits' in his memo to the company Bell Labs. More about Claude Shannon later in this blog.

Bit stands for binary digit. Binary, because there are two possibilities on a bit, it can be either true (1) or false (0). At the same time the term 'Bit' is a wordplay on 'a little bit' and 'bits of information'.

1950: The SEAC

In April that same year, for the first time a programmable computer was shown for the first time. This SEAC (Standards Eastern Automatic Computer) was built by the U.S. National Bureau of Standards (NBS) (now called National Institute of Standards and Technology - NIST), led by Samuel N. Alexander.

It wasn't only the first computer that could be programmed and therefore had no fixed task, like its predecessors. It was also the first computer to work with solid-state equipment (the SEAC used tubes and diodes) and therefore did not use punched cards, tapes or the like. The instruction set consisted of 11 to 16 instructions and programming was done linearly. The device weighed about 1360 kg and was very large, but for that time a huge step forward and it could be operated remotely.

1955: The Sensorama

The cinemas had undergone some development and filmmaker Morton Heilig worked on a paper called 'The Cinema of the Future', in which he wrote about an 'Experience Theater' in which you as a user would be offered a full experience that went beyond watching a movie alone.

Seven years later, in 1962, his paper resulted into a prototype: The Sensorama. This is one of the first virtual reality-like experiences in history and the device was way ahead of its time. It was able to show the stereoscopic 3D image, made use of a seat with body tilting, stereo sound and even had separate channels to spread different scents and wind during a film. Unfortunately, further development had to be stopped due to financial problems. Morton is now seen as the 'Father of Virtual Reality'.

1957: First image-scanner and first raster graphic

American computer pioneer Russel A. Kirsch was working with a team to develop the first digital photo scanner in the world. This he presented in 1957. The scanner was connected to the SEAC computer and was capable of making photo scans of 176 by 176 pixels. With that, not only the first scanner was born, but also the very first images that were built with pixels, so raster graphics. The famous first scan he made was one of a photo of his son.

This scanner and the use of pixels had laid the foundation for many important computer graphics techniques that we use frequently today. Such as digital photos, editing programs like Photoshop, making digital films, textures etc.

1959: The Casteljau Algorithm / Bézier Curve

You can see that mathematics, electrical engineering, graphics, film and animation techniques are starting to come together more and more in new technological developments.

In the field of mathematics an important development for computer graphics was the algorithm that Paul de Casteljau devised in 1959: The Casteljau algorithm. We now know this algorithm better as the Bézier Curve, because later the Frenchman Pierre Étienne Bézier, engineer at Renault, further developed the algorithm and provided the 'control handles' that we still use in programs such as Adobe Illustrator or Affinity Designer today to make curved shapes.

Casteljau / Bézier Interactive

Now it's time for an interactive to see how the Casteljau / Bézier algorithm calculates points on the curve to be able to display it on a monitor. The variant shown below is one with a single control point (C). There are also variants with two or even more control points, although more than two control points are rarely used and are not needed for graphics work.

First position the points S (start), E (end) and C (control) to shape the curve. To see how the points are calculated that are on the curve, move one of the handles with a T on it. These represent the time from 0% to 100% that the curve traverses from start to end point. By taking the same percentage of the green cut line you arrive at the location that the point for that time on the curve has. If you move a handle T from start to finish you can see that the curve is being drawn from start to finish.

Conclusion

That was it for part one, in which it was mainly about the origin of the first animations, computers and even the first steps towards Virtual Reality. But this was just the beginning. If you find it as interesting as I do seeing how different movements, such as mathematics, electrical engineering, science, logic, creativity, animations and illustrations come together to lead to major developments, I like to see you again in the next part of this series.

In part two we will continue where we left off and we will immediately start with the development of computers and graphics, which really got started at that point. A very interesting period in which many important and groundbreaking developments have taken place. And you will probably even be surprised about a number of things in history.

In the coming months I will continue to write new parts in this series up to six volumes in total. Did you find this interesting or do you want to ask something or comment? Let me hear from you below and share the blog on social media. It motivates me to keep writing quality blogs like this one. Also after clicking on like or dislike you have the option to add comments if you'd like to comment on something (optional). Thanks and 'till next time!

Continue reading part 2 >