Posted on  by Maarten de Haas
Sketchpad 1

History Interactive Computer Graphics

Computer graphics, animations and interactions with digital equipment are now self-evident. You just have to pick up your smartphone, tablet, desktop computer or what else and you feel intuitively when you have to swipe, click, drag or pinch zoom. You also expect nothing less than nice interfaces with smooth animations.

In this blog series, of which this is the second part of six, I like to take you on a journey through time with our focus on the development before and during the creation of computers, digital graphics, animations, graphical interfaces, graphics software, interactivity, 3D, a pinch of the first games, the creation of the internet and a touch of virtual reality. If I could even mention the largest part of influential events, that would be a world achievement. So that's just impossible. Instead, I like to point out a number of events that I think have made an important contribution to getting where we are now. Sometimes with a slight side-road to a development that indirectly made an important contribution or reflects the spirit of the times and relations between events. Although I personally find audio and music are very important and interesting and I have always been involved in producing music, I have made the decision to omit audio developments in this series to keep the series somewhat concise and focused.

I have made more than 110 illustrations for this series and also provide each part with at least one interactive to bring the events alive as good as possible for you.

If you've not read part one yet, it's worth reading first. You can find it here.

Part 2: From computer animations to the first home game console

We started part one of this blog series long before the computer age dawned. In this second part we immediately enter the computer age. The computer has undergone a development from mechanical to electrical and from analog to digital.

We ended part one with the late 50s and saw among others the very first digital image scanner and the origin of the bitmap, an image built up with pixels. Now we continue enthusiastically with the 60s, which wasn't only the time of flower power, but also an interesting period with many digital developments. The rise of computer games, analog and digital animation techniques and improvements on Virtual Reality devices. In the 60s, an important foundation was laid for tools we still use today.

So let's quickly continue our journey through time with the very first vector animation ever generated by a computer ... from Sweden!

 

1960 - 1969
Rendering of a planned highway excerpt

1960: First computer-generated vector animation

Developments now followed at an increasingly rapid pace. In 1960, the Swedish Royal Institute of Technology created the very first computer-generated vector animation on the Swedish BESK computer and called it 'Rendering of a planned highway excerpt'. This 49-second programmed animation of a simple highway, which you view as if you were in the car and looking at the road, was broadcasted on Swedish national television on November 9th, 1961.

The recording was made by displaying every new computer-calculated frame on an oscilloscope. A camera pointing at that oscilloscope recorded each new frame. The camera received a signal from the computer when there was a new frame ready to take a snapshot of. Watch the short film on YouTube here.

 

Sketchpad I

1962: The Sketchpad 1

At that time more and more experiments were being done with different techniques to make animations with computers.

In 1962 the revolutionary Sketchpad 1 came on the market, designed by the American Ivan Sutherland. Ivan Sutherland is considered by many to be the creator of the first interactive computer graphics. A true pioneer, who later on also wrote many important developments to his name.

With the Sketchpad the computer was put down as a kind of artificial intelligent machine: a computer that thinks along with people while graphically drawing on the computer. An important start in the creation of graphical interfaces and allowing the computer to think along with human actions.

This 'thinking along' took the form of helping to draw circles and lines with handy tools, for example. There was also a kind of 'pen tool', as still being used today in many vector graphics design software applications. The Sketchpad is therefore also an important precursor to programs like Affinity Photo, Affinity Designer, Photoshop and Illustrator.

The Sketchpad 1 was not only the very first intelligent graphic drawing program, it was also the first real Graphical User Interface (GUI) and in a sense, the very first form of interactive computer graphics.

A copy of the original demonstration film of the Sketchpad is available on YouTube. Here you can clearly see how groundbreaking this system was.

 

Spacewar

1962: Spacewar

Now that computers were increasingly capable of doing more and more things, the first computer games also came. The game Spacewar, developed by Steve Russell in collaboration with others, was an important one in the development of computer games and is seen as the first or second computer game ever created in the world. The game was written for the DEC PDP-1 computer.

It is also the first time that a particle system/pixel cloud was used in a game. And the first time that formulas for calculating the speed and acceleration of vehicles were used in computer games.

 

Simulation of a two-giro gravity attitude control system

1963: First 3D computer simulation

In 1963, the famed Bell Labs, which had already developed many important techniques (for the US Army) and had much more to come, released the very first computer-generated film of a 3D simulation. The name of the project was 'Simulation of a two-giro gravity attitude control system' and it was made by Edward E. Zajac.

You can watch the short film here on YouTube.

Bell Labs had already developed the Vocoder for the US Army in the 1930s. It was used to limit bandwidth in electronic communication and to increase the travel distance of voice communication.

The vocoder is still used today, but now for creative purposes, in many music productions and has actually always been popular. It gives a robotic sound to a human voice by superimposing the human voice on another sound, such as a synthesizer sound.

The Vocoder can be heard on many hits, such as Kraftwerk's 'The Robots' and Phill Collins' 'In the Air Tonight' and is still widely used in Hip Hop and R&B today.

But enough side talking, back to 1963 again!

 

Beflix animation system

1963: Beflix Animation Systeem

That same year the Beflix system/programming language (from Bell Flicks) also came on the market. Developed by Ken Knowlton.

This system was revolutionary because, unlike previous programming languages, it operated with primitive graphical instructions such as 'draw a line from point A to point B', 'copy a region', 'fill an area with a color', 'zoom in on an area' etc. And it worked with raster graphics, so images built with pixels. These techniques are nowadays commonplace and everyone has used such instructions in programs such as Photoshop and Affinity Photo. But at that time this was brand new and revolutionary.

The computer instructions were printed on punch cards and were entered into the computer like this. By inserting a punch card with instructions, a graphical image was read and constructed by the computer. The final result could then be digitally written unto tape. This tape, which also contained control codes, was used to display the frames one by one on a computer screen. At the same time, a camera was automatically controlled to take a photo per each frame. This was repeated for all frames in the animation. This way an animation was recorded frame by frame. Many artistic movies have been made with this method.

 

First computer mouse

1964: The first computer mouse

A year later, Douglas Engelbart, an American electrical engineer, came up with another revolutionary invention: the very first computer mouse. The mouse consisted of a wooden housing with electronics and two metal wheels that came in contact with the surface.

And another leap forward in time; Eight years later, Bill English further took the development of the mouse to a next level and the wheels were replaced by a ball. This was the start of what we called a ball mouse. This ball mouse, unlike the mouse with wheels, was able to detect movements in all directions instead of just two.

And now back to 1964!

 

RAND drawing tablet

1964: The RAND Drawing Tablet

More and more improvements were made to interfaces and equipment to make it possible to do digital graphic work. In 1964, the American RAND Corporation developed the first graphical drawing tablet making it possible to operate in a digital interface with a drawing pen and to draw digitally.

The drawing tablet was 10 x 10 inches in size and would be the first affordable digital graphic input device. A computer program was even written to recognize handwritten letters and convert them to computer characters.

 

Boeing Man

1964: 'Boeing man'

Progress was also made in the field of 3D in 1964. In the same year, William A. Fetter, art director at Boeing in Wichita, made the first 3D image with wireframes. He was also the first to speak of 'computer graphics', the term we still use today.

The wireframe image he made was one of a man. This kind of images was used for aircraft cockpit designs at Boeing and therefore this first wireframe was also known as 'Boeing man'.

Nowadays wireframes are indispensable in 3D modeling software.

The term 'computer graphics' was not coined by William A. Fetter himself. He himself indicates that the term was given to him by Verne Hudson from the same department at Boeing.

 

Hyperlinks

1965: The Hyperlink

In 1965 Ted Nelson of Project Xanadu coined the term Hyperlink. He published a series of books in which he wrote about linking documents on a global network. He did this far before such a network existed, because the internet was not there yet.

Ted Nelson was not the first to dream about linking documents, because already in 1945 the American engineer, inventor and scientific administrator Vannevar Bush wrote in his article 'As we may think' about linking documents in microfilm. But in 1965 it was the first time this idea was actually conceived for computers and computer networks.

There were more organizations working on devising hyperlink techniques. Douglas Engelbart, the inventor of the computer mouse as we just saw, led an independent team to actually use the hyperlink technique. He and his team made it possible to navigate with a link within a text to an anchor in the text.

Later they also made it possible to refer to other documents with a link.

 

First touchscreen

1965: First touchscreen

The following year, EA Johnson, working for the Royal Radar Establishment in Malvern, United Kingdom, came with the very first 'capacity' touchscreen. A software application could be operated with a finger on the computer screen. So this was already the distant precursor of touchscreens as we nowadays use as a standard in phones and tablets.

Three years later, in 1968, Johnson published an article with the full description of this touchscreen technology.

 

Kinoautomat

1967: The 'Kinoautomat'

In 1967 there was the very first interactive movie in the world: Kinoautomat. Created by Radúz Činčera for the Czechoslovakian pavilion at Expo 67 in Montreal, Quebec, Canada.
This was a feature film in which the film was paused at nine moments at which a host came onto the stage asking the audience to vote with their voting box about the continuation of the film. So the audience always decided how the film went on.

The film was well received at the expo and the press wrote about a guaranteed hit. Hollywood wanted to start using the technology, but because the project was owned by a communist state, this didn't get off the ground and so unfortunately it was canceled.

Watch an impression of Kinoautomat on YouTube.

 

First programmed character animation

1968: First programmed character animation

In 1968, the Russian Nikolai Konstantinov created the very first computer-generated character animation. Literally, because the animating cat was made up of alphanumeric characters. On a large Russian BESM-4 computer, Konstantinov, together with a group of Russian physicists and mathematicians, developed a mathematical model of the movement of a cat to construct the animation frames.

The hundreds of frames of the animation were printed on paper by the computer and filmed one after the other frame by frame. This made the first computer animation of a running cat a fact.

The short film 'Kitten' can be viewed on YouTube here.

 

Sword of Damocles

1968: 'The Sword of Damocles'

Ivan Sutherland, the creator of the Sketchpad we just have seen in this article at 1962, developed in 1968 together with his student Bob Sproull, the 'Sword of Damocles'. This invention is seen as the first ever head-mounted virtual reality device (HMD). So the very first virtual reality device a person could wear on his/her head.

The graphics that the user was shown were somewhat primitive and consisted of rooms made with wireframes, but there was already head-tracking, so with moving your head you could navigate through the virtual world. That was a major step forward in the development of virtual reality.

A display connected to a digital computer gives us a chance to gain familiarity with concepts not realizable in the physical world. It is a looking glass into a mathematical wonderland.

Ivan Sutherland

 

First framebuffer

1969: First framebuffer

A framebuffer, also known as a frame store, is a memory in which a bitmap (image in pixels) is stored. This buffer of pixels can be used to feed an image to, for example, a computer screen. There had long been talk of making a framebuffer prior to 1969, but computer systems with enough and affordable memory to build it were not available yet.

In 1969 A. Michael Noll of Bell Labs came for the first time with a display which was fitted with a framebuffer. Later this was also used in color monitors and nowadays every video card a framebuffer on board.

In 1974, the American company Evans & Sutherland released the first commercial framebuffer. This framebuffer cost as much as $15,000 and could only hold 512 x 512 pixels in 8-bit grayscale (grayscale store).

 

Scanimate

1969: The Scanimate

In 1969, Lee Harrison of the Computer Image Corporation of Denver developed an important precursor to DVE's (Digital Video Effects): an analog video effects generator: the Scanimate.

The Scanimate was a device that could generate video effects with analog electronics, such as waveform generators. The device was used a lot in making video animations for television programs, commercials, show titles and films, among other things. The animations could be generated in real time by changing the settings of oscillators etc. by knobs. The fact that this could be done in real time was a major advantage compared to the still primitive and slow digital systems at the time.

On YouTube there is an introduction video of the Scanimate.

 

1970 - 1979
Genesys

1970: Genesys Animation System

As part of his doctoral dissertation, Ronald 'Ron' Baecker built a software animation system on a TX-2 computer in MIT's Lincoln Lab.

This was one of the first user centered computer systems. Thus, unlike previous systems, it was not assumed that the system was operated by a programmer knowing everything about computers, but by a user without computer knowledge, like an animator.

The animation software could be used with a RAND drawing tablet with which pen movements were recorded. Unlike many computers, still only having a text only interface, the software could be operated graphically with the electronic drawing pen.

Each drawn frame was immediately stored in memory while drawing. And the frames could be played afterwards one after the other. Even curved paths could be drawn over which a graphic object could move. So the system already worked with animation tweens.

It was also possible to disconnect drawn images from movements. A movement could be stored separately and applied to any image. Furthermore, you could copy, undo, delete images and movements, etc. The animation system was therefore far ahead of its time.

Click here to view a copy of the original demonstration film of the Genesys on YouTube.

 

OOP

1970: The start of OOP

Alan Kay, a student at the University of Utah, was inspired by the computer language Simula. Because of the features that already made some of Object Oriented Programming (OOP) possible. He wanted to design a computer language that went further with those characteristics. For people without specialist knowledge. A language that was purely Object Oriented.

He sold his idea to the Xerox Palo Alto Research Center (Xerox PARC) and together with a group of researchers he developed a programming language called Smalltalk. The language would run on the very first personal computer ever built: the Dynabook. It was given important Object Oriented, simulation and graphics-specific features, which we still use in modern Object Oriented Programming languages. Such as working with classes, objects, inheritance, etc. Smalltalk still exists today, in 2019, but is not used much anymore.

I think it's important to include Smalltalk in this blog series, because OOP was revolutionary and has accelerated a lot in developing graphic interfaces and setting up software applications. It has also directly contributed to a faster development of graphic software and techniques that have been pioneering and improving, especially in the graphic and interactive field, and which we still use today. The developments ultimately led to the creation of the C++ programming language, which to this day is still an important basis for many software applications and has set an important standard on which many current programming languages ​​are based.

Alan Kay was at the university in the same class as Ed Catmull, who meant a lot to technical computer graphics developments and would later become the director of Pixar and still is today (2019). We will certainly read more about Ed Catmull in this blog series. This man has meant a lot to computer graphics.

 

Inbetweens

1971: Metadata and the first Keyframe Animation

The scientist Nestor Burtnyk, who worked for the National Research Council (NRC) in Canada, had heard from an animator at Disney that for traditional animations, the draughtsmen drew head frames and that assistants then filled the intervening frames. He thought it would be better if computers were used to create these fill-in frames. So together with Marceli Wein he developed animation software to automatically calculate and create these in-between frames. This was the first time morphing techniques were used to calculate frames between A and B. They called this new technique 'keyframe animation'.

In 1971, Hungarian-born director and animator Peter Foldes, who had emigrated to Great Britain in 1946 and later lived in France, made an experimental short film with seamless morphs on this new keyframe animation software at the invitation of the National Film Board (NFB) in Canada. The film consisted of hand-drawn digital keyframe illustrations that were interpolated to each other with automatically calculated in-betweens. This was the very first film made with keyframe animation software with in-betweening. The film was named Metadata. I found a copy of the short film on Youtube here.

These days, every animator is familiar with these techniques and it is frequently used in animation software.

 

ARPANET

1972: ARPANET

In 1963 the idea for a large computer network came into being at scientist J.C.R. Licklider. In October of that year, now working at the department of Advanced Research Projects Agency (ARPA) of the US defense, he persuaded Ivan Sutherland and Robert (Bob) Taylor that this network would become very important.

Licklider left ARPA before the actual development started, but Sutherland and Taylor continued working with the idea. Taylor hired Larry Roberts to participate in realizing the network that would be called ARPANET. The ARPANET was an early form of a packet-switching network.

By them 140 computer science companies were approached to invest in the ARPANET, but only 12 companies were willing to do so. The others thought the idea was strange. Ultimately, the company Bold, Beranek and Newman Inc. (BBN) was selected and the construction of the network started on April 7, 1969.

Initially, the network connected one computer in Utah with three computers in California. Later the American universities were also connected to the network. The ARPANET was also opened to non-universities in 1972. The size of the network quickly became larger and larger.

Just an interim leap of eleven years ahead; in 1983, the ARPANET switched to the TCP/IP Protocol, thus creating the current internet. The TCP/IP communication protocols were developed for the ARPANET by computer scientists Robert E. Kahn and Vint Cerf.

And now back to 1972!

 

Atari Pong

1972: Foundation of Atari and the arcade game Pong

On June 27, 1972, Nolan Bushnell and Ted Daphney established in the United States a company called Atari. This company played an important role in the rise of the arcade game industry with the game Pong. Allan 'Al' Alcorn, the first design engineer hired at Atari, was commissioned to make an arcade version of the Magnavox Odysey tennis game. This game was named Pong.

The Magnavox Odysey was a home game console that came on the market in the same year, but just a month earlier than the founding of Atari. I will talk more about this in the next part of this series.

Computers and digital technology were still expensive, so the first version of the Pong hardware was still built with separate electronic components that could only be used to play the Pong game. There was no question of a processor yet.

A lot of people have ideas, but there are few who decide to do something about them now. Not tomorrow. Not next week. But today. The true entrepreneur is a doer, not a dreamer.

Nolan Bushnell

 

Play responsive Pong

To revive times, I made a responsive version of Pong that you can play well on all screen sizes and aspect ratios. Switch to fullscreen with the fullscreen button that you will find below the game in the explanation bar to play the game full screen. You don't see a fullscreen button? Then unfortunately your browser or device doesn't support fullscreen mode. Lots of fun!

Click on 'Play'. Select the player mode and click 'Start' to start the game. Swipe with your finger or move your mouse over the half of the game, or use arrow keys (and WASD keys for the extra player when in two player mode) to move the paddles.

Conclusion

That was it for part two. In this part we saw the first developments of digital computers, interfaces and also the mouse and the drawing tablet. We saw the very first computer game in the world, the very beginning of 3D techniques, primitive animation systems and the very first real computer network that was going to become very large. We saw computer-generated animations on one hand and the very first keyframe animation made by humans and computers together on the other, to come up with a short film for a large audience at a film festival for the first time. Although still at an early stage, there clearly began to be movement in the development of computers during this period. And a growing group of developers, inventors, techies and creatives began to dream and set themselves the goal of being able to make animations with computers and to think about graphic, interactive interfaces.

In part three we will continue where we left off and see how these developments continued. To home game computers, developments in the field of graphic interfaces, 3D modeling, morphing and more. Developments followed at an increasingly rapid pace. In the coming months I will continue to write and publish a new volume in this series up to six volumes in total. So I look forward to seeing you again at part three!

Maarten de Haas

Senior Front-end Developer / Interactive Motion Designer

Maarten de Haas

With over 16 years experience as Senior Front-end Developer / Interactive Motion Designer I am fulltime passionately committed to designing and developing interactives and code-based animations, interactive maps and web games for companies.

Previously I've been responsible for live graphics and software development for many famous television productions in The Netherlands and abroad for more than 13 years.

I know the graphical and technical capabilities in 2D and 3D, as well as the hiccups of different browsers and optimizations in order to get the best possible online performance.

Worked for and collaborated with