Page Section Comments
Introduction Brief overview of page structure
Introduction to Electrostatic Fields Positive and negative charge, lines of force and equipotential surfaces
Field Strength and Potential Charge, field strength and electrical potential- voltage
A Printed Circuit Transmission Line Propagation of a high speed digital signal
The Non-Inverting Mode Operational Amplifier Gain calculations, signal and supply current flow paths
The Inverting Mode Operational Amplifier Calculations, signal and supply current flow, voltage waveforms
Summary Educational, Technological, Mathematical, Testing and Debugging


This article demonstrates how animations can be used to develop concepts of technically difficult subjects.

For the learner animations are supported with concise explanations and mathematics.

For educationalists educational aspects of each animation are briefly described using HTML5 asides.

For developers, technological aspects are itemised at the end of each section.

Each section on the page is an educational snippet, and some snippets are related.

Introduction to Electrostatic Fields

Electrical charge is a basic property of the electron and proton, the elementary particles that make up all matter.

A stationary electric charge has a static electric field associated with it.

The electronic device you are reading this page on uses millions of devices called field effect transistors.

Field effect transistors use electric fields to make your device work: no electric fields, no computers, no industry and not much else.

Figure 1 Basic Properties of Electrical Charge

Imagine an electrical charge in a small region of space, Qplus.

The plus means the charge is positive and we have coloured it red.

A charge may be positive or negative.

Qplus is surrounded by an electric field.

next-An electric field has lines of force associated with it.

The lines of force radiate from Qplus,only a small number are shown.

next- Qplus is surrounded by equipotential surfaces, e.g. S1, they are surfaces of constant potential energy.

next-There are many equipotential surfaces surrounding Qplus, e.g. S2.

The electric field is an electrostatic field, it is static because Qplus is stationary.

next-If we place a small negative charge, qtest (black), on S2 a force acts on it.

The force actually acts on both Qplus and qtest- they are forced together.

The force is attractive, unlike charges attract.

If the charges were not held in place they would move towards each other.

The lines of force and the equipotential surfaces form the electrostatic field.

next-If we place a positive charge, qtest ( red), near to Qplus, they are both subjected to a repulsive force. Like charges repel.

The electrostatic field of Qplus fills all the space around Qplus.

The equation for the electrostatic field is-

$\begin{align} & F=\frac{{{q}_{1}}{{q}_{2}}}{4\pi {{\varepsilon }_{0}}{{r}^{2}}}\text{ } \\ & F\text{=force in newtons} \\ & {{q}_{1}}\text{ and }{{q}_{2}}\text{ are values of charge in coulombs} \\ & r\text{=the distance between to charges, in metres} \\ & {{\varepsilon }_{0}}=\text{the permittivty of free space} \\ \end{align}$

In Figure 1, q1=Qplus, q2=qtest, and r= the distance between the charges.

Technological Aspects

Figure 1 consists of one figure and 5 animations.

Figures and animations are created using the HTML5 canvas, working in conjunction with Javascript (JS).

Fade in of lines of force and surfaces S1 and S2 use rgba() with a being incremented on each canvas update.

Several JS user functions have been used, for example to show arrow heads on lines of force.

Several animations are used on this web page and each animation is stopped on its completion.

If animations were to run continuously user computer resources would be overloaded.

Their computers would run very slowly.

The control button is outside the canvas and has been designed to start the next animation when the current animation has finished.

When the web page loads all the animations on it are initalised.

The equations used for Figure 1 are created as a block using Mathtype 6.9 in MS Word10.

Text in the equation block has been created in Mathtype using the text style.

Electrostatic Field Attributes

Each point in the space around Q has two field values, E the field strength and V the potential.

The units of potential are joules/coulomb and are given the name voltage, that is energy/charge.

The units of E can be in newtons/coulomb or Volts/metre, volts/metre is used to specify the electrical insulation strength of materials.

In Figure 2 the coordinates of a point could be expressed as point x,y or r,θ.

Figure 2 Field Strength and Potential

Q is at point r=0, θ=0: the charge at point A is a very small negative charge of value q.

It is assumed that the field of q is so small it hardly affects the field of Q.

Imagine Q is fixed in position- q must be held in position,otherwise it would move towards Q.

$F=Qq/4\pi {{\varepsilon }_{0}}{{r}^{2}}$ where Q is positive and q is negative

The force between the charges is attractive, unlike charges attract

The electric field of Q at distance r is $E=F/q=Q/4\pi {{\varepsilon }_{0}}{{r}^{2}}$

The force on q is $F=qE=Qq/4\pi {{\varepsilon }_{0}}{{r}^{2}}$

If we move the charge q from A to B we have to do work against the attractive force F

Let r1 = radius of circle S1 and r2= radius of circle S2

The work done when we move q from A to B is:
${{W}_{AB}}=\int\limits_{{{r}_{1}}}^{{{r}_{2}}}{Fdr}=\int\limits_{{{r}_{1}}}^{{{r}_{2}}}{\frac{Qq}{4\pi {{\varepsilon }_{0}}{{r}^{2}}}}dr=\left[ \frac{-Qq}{4\pi {{\varepsilon }_{0}}r} \right]_{{{r}_{1}}}^{{{r}_{2}}}=\frac{Qq}{4\pi {{\varepsilon }_{0}}}\left[ \frac{1}{{{r}_{1}}}-\frac{1}{{{r}_{2}}} \right]$

WAB has the units of energy

The basic electrical entity is charge: charge can be positive or negative.

A force exists between two point charges that is described by the inverse square law $F=Qq/4\pi {{\varepsilon }_{0}}{{r}^{2}}$

Q and q are point charges, r is the distance between them.

F is in newtons, q is in coulombs, r is metres and ${{\varepsilon }_{0}}$ is the permittivity of free space $8.85\times {{10}^{-12}}$ Farads/metre

$V=Q/4\pi {{\varepsilon }_{0}}r$ is the value of the voltage of at any distance r from Q.

The electric field in the direction of r is $\partial V/\partial r=-E,\text{ }E=Q/4\pi {{\varepsilon }_{0}}{{r}^{2}}$

Technological Aspects

Equations have been created using Mathtype 6.9 in MS Word 10.

Equation formats have been converted to TeX, using Mathtype in Word 10.

Equations are rendered using mathjax in CDN mode.

A Printed Circuit Transmission Line

A typical high speed digital circuit would use a clock frequency in excess of 1GHz.

The behaviour of PCB interconnects in this frequency domain critically affect product performance.

In what follows ε0= permittivity of free space and μ0= permeability of free space

Figure 3 The propagation of a high speed digital signal

Figure 3 (a) shows the leading edge of digital signal Vs, with a rise time Tr.

0V represents logic LO, VH represents logic HI.

At point A, the signal starts to rise towards VH- it takes Tr seconds to reach VH.

A clock signal of $1GHz={{10}^{9}}$ cycles per second

The periodic time of the clock is $Tp=1/{{10}^{9}}={{10}^{-9}}=1ns$, that is 1 billionth of a second.

A typical rise time for such a signal is $Tr=0.1\times {{10}^{-9}}=100\times {{10}^{-12}}$, that is 100ps.

Figure 3 (b) represents the side view of a PCB trace driven by the signal source Vs.

The length of the trace is Len and it is terminated by a resistance RL.

The time it takes for the signal to propagate along PCB traces is important, it limits the speed digital circuits.

Electronic engineers developing high speed circuits require a 'practical feel' for-

electromagnetic theory

propagation delays

signal reflections

impedance matching

noise immunity


and power consumption.

They also need to be able to work with numerical values that range from billions to billionths.

The sequence of animations in Figure 3 covers just the propagation of the electrostatic field and the electromagnetic field in the signal wave front.

Mathematics are kept simple to enable the learner to develop a conceptual model of the processes involved.

A complete course on high speed digital signal integrity would take an honours graduate about 200 hours to complete.

Technological Aspects

Using mathjax in CDN mode slows down the rendering of equations on the web page.

This web page uses about 17 animations and numerous equations.

It is sensible to consider how the page appears to the learner when it is being loaded.

For example the first equations on the page could be placed below the HTML fold.

The Non-Inverting Mode Operational Amplifier

The differential voltage amplifier is a fundamental building block for analogue circuits.

The voltage gain of the circuit in Figure 4 is controlled accurately by the use of negative feedback.

It has a positive, precisely defined voltage gain, a high input impedance and a very low output impedance.

The circuit uses a positive voltage supply, Vcc=+10V, and a negative voltage supply, Vee -10V.

Figure 4 A non inverting mode operational amplifier circuit with + and - supplies

The circuit output voltage Vo is an amplified version of the input signal Vs.

Vo is always the same polarity as that of Vs.

The circuit uses negative voltage feedback, to control the voltage gain.

The differential voltage gain of the amplifier is ${{A}_{VD}}$.

The amplifier output voltage is ${{V}_{0}}={{A}_{VD}}({{e}_{1}}-{{e}_{2}})$.

The amplifier amplifies the difference between e1 and e2.

$e1=Vs\text{ and }{{e}_{2}}={{V}_{F}}\text{ so }{{V}_{0}}={{A}_{VD}}({{V}_{S}}-{{V}_{F}})$

Assuming the amplifier input impedance is infinite, its signal input current is = 0.

The voltage ${{V}_{F}}={{V}_{0}}{{R}_{1}}/({{R}_{1}}+{{R}_{F}})$ is the feedback voltage.

${{R}_{1}}/({{R}_{1}}+{{R}_{F}})=\beta$ the feedback factor.

Substituting ${{V}_{0}}={{A}_{VD}}({{V}_{S}}-\beta {{V}_{0}})$

Rearranging ${{V}_{0}}(1+{{A}_{VD}}\beta )={{A}_{VD}}{{V}_{S}}$

Hence ${{V}_{0}}/{{V}_{S}}={{A}_{VF}}={{A}_{VD}}/(1+{{A}_{VD}}\beta )$

${{A}_{VF}}$ is the voltage gain of the circuit with negative feedback applied

If ${{A}_{VD}}\to \infty ,{{A}_{VD}}\beta >>1,{{A}_{VF}}={{A}_{VD}}/{{A}_{VD}}\beta =1/\beta $

$\therefore {{A}_{VF}}=1/\beta =(RF+R1)/R1$ and ${{V}_{O}}={{A}_{VF}}{{V}_{S}}=\frac{R1+RF}{R1}{{V}_{S}}$

The differential amplifier can be used with just a single power supply, which is popular when analogue signals are processed by a digital system, for example a microprocessor using embedded software.

However if signals swing about 0V so that positive and negative values are required, plus and minus power supplies may be necessary.

Technological Aspects

The animations use sequenced HTML divs that display content associated with each animation frame and their transitions.

The animation file is written in native Javascript, and a switch construct is used to sequence both animations and their associated divs.

Static elements are drawn using Javascript, which requires the generation of connection points between them.

The HTML file that contains the animations is linked to all the animations on this page: it is fairly complex.

Note the variation in symbol size for equations that use fractions.

The Inverting Mode Operational Amplifier

This circuit has a well defined voltage gain, a very low output impedance and an input impedance of value R1.

The circuit uses negative feedback to accurately define the voltage gain as the ratio of two resistors: RF/R1.

Negative feedback has many beneficial attributes, one of which is that it makes mass production practical.

Figure 5 An inverting mode operational amplifier circuit with + and - supplies

The important parameters of the circuit are developed below.

The amplifer output voltage is $Vo={{A}_{VD}}({{e}_{1}}-{{e}_{2}})$

e1=0V, $Vo={{A}_{VD}}(0-{{e}_{2}})=-{{A}_{VD}}{{e}_{2}}\text{ so }{{e}_{2}}=-Vo/{{A}_{VD}}$

If ${{A}_{VD}}\to \infty \text{ }{{e}_{2}}\to 0,\text{ }{{i}_{F}}\to Vo/{{R}_{F}}\text{ and }{{i}_{1}}\to Vs/{{R}_{1}}$

The input impedance of the amplifier is very high, hence ${{i}_{F}}={{i}_{1}}\text{ so Vo/}{{\text{R}}_{\text{F}}}\text{=Vs/}{{\text{R}}_{\text{1}}}$

Hence the output voltage $Vo=-Vs{{R}_{F}}/{{R}_{1}}$

The negative sign means the output voltage is always the opposite polarity to that of the input voltage.

The ideal voltage gain is ${{A}_{VFI}}=-{{R}_{F}}/{{R}_{1}}$, the ratio of two re si tors.

Assume ${{R}_{F}}=300K\Omega ,\text{ }{{R}_{1}}=100K\Omega ,\text{ }Vs=-2V$

${{A}_{VFI}}=-300\times {{10}^{3}}/100\times {{10}^{3}}=-3$

$Vo={{A}_{VFI}}Vs=-3\times 2=-6V$

The current ${{i}_{1}}=2/(100\times {{10}^{3}})=20\mu A$

The feedback current ${{i}_{F}}=6/(300\times 100\times {{10}^{3}})=20\mu A$

The currents are equal, as stated above.

The inverting mode amplifier circuit is especially useful for carrying out analogue mathematical operations, like addition, subtraction and integration.

A disadvantage of analogue techniques is they are of limited accuracy- for example voltage gain is controlled by the ratio of two resistors, which may have a manufacturing tolerance of +/- 1%.

As more amplifiers are used the tolerance error is cumulative, 3 amplifiers in cascade would introduce an error of +/- 3%.

Technological Aspects

The sinusoidal signal animations are relatively simple- the graph axes are always the same, for each animation frame.

The sinusoidal waveforms are created by incrementing each animated waveform by a small amount.

Unlike the other animations on this page, the canvas is never cleared.



The animations on this page are used to develop concepts of entities that have no visual existence.

Numerous entities in physics and engineering have no visual existence, which makes them difficult to conceptualise.

Engineers that develop new products need an understanding and a feel for such entities, if the are to be effective product developers.


Each section can be considered to be an educational snippet.

Each snippet contains a canvas, with explanatory text above it, to the right of it and below it.

The text to the right of an animation may be static or sequenced.

When the user clicks the next button, an animation is started and right hand text is sequenced in all the animations with the exception in those of Figure 1.

More complex button arrangements may be used to increase the level of learner interactivety.


Each animation in a sequence and its associated right hand text is within the field of view of the user.

Text above, to the right and below an animation may contain mathematical equations.

Each animation ends with a static view, that enables the user read and re-read the text associated with it.

Users may spend as much time as they like studying any of the animations.


In practice the snippets would be supported with examples and problems that help develop understanding and a feel for the topic.

Self assessment could be used to assist the learner in applying newly developed skills and concepts to practical problems.


All the animations on this page use the HTML5 canvas and pure Javascript.

Each figure on the page consists of a sequence of several, related animations.

When the page is loaded, all the Figures are initalised with a static drawing created with the Javascript drawing API.

Animations are not started on page load.

Animations are started when the user clicks a simple HTML button that is just below each canvas.

Usually only one animation is running at a time, so user computer resources are not overloaded.


Animations use several types of Javascripts:

Utility scripts that are used by all the animations, for example a script that initialises scripts on page load1

Drawing scripts that may be used by any animation as appropriate, for example the operational amplifier symbol

Scripts that are specific to a set of animations, for example a circuit diagram

Animation scripts that carry out the actual animations.

Each animation references scripts in a utils file and a shapes file and has a specifc.js file and anim.js file.

The anim.js file contains a switch construct in which each case implements a specific animation in a sequence.

All the animations are presented to the user in a common HTML5 file, which is the web page you are reading.

The HTML5 page has been styled using CSS.


Using shape functions to draw circuit diagrams requires each js shape function to return connection points to their calling routine.

This allows circuit interconnects to be drawn.

Connection points require multiple values to be returned to the calling routine, which has been accomplished using associative arrays.



Mathematical equations have been created using the MathType 6.9 equation editor for MS Word 10.

Equations are generally in-line and are converted to TeX format within Word by Mathtype.

The resulting equations, in TeX format, are pasted into the HTML page.

Text associated with equations is HTML that has been styled using CSS.

The equations are rendered by MathJax working in Content Distribution Network (CDN) mode.

This mode of working can slow down page rendering for the user, but if equations are necessary this is a price worth paying.

Remember, the learner will study such educational pages for long periods and will not mind waiting a few seconds for the page to load.

The effect of using MathJax in CDN mode can be offset by not using equations above the HTML fold.

Testing and Debugging

Effective and efficient testing and debugging is essential to develop animations.

This is even more so when numerous animations are referenced on one HTML page.

A clear and consistent naming strategy should be used.

All the animations on this web page have been debugged and tested using Firebug, the excellent Firefox debugger.


Finally all the animations were tested in:


Internet Explorer




1I believe this script should be attributed to Simon Wilson.