Rocking SVG with Newton's Cradle

I can remember the first time I saw a Newton's Cradle way back in the 60's, and how I couldn't believe it worked the way it did. It was magic.The concepts of conservation of momentum and energy, potential and kinetic energy, and elastic collisions became clear instantly.

A lot of concepts are relatively difficult to teach if the right physical resources are not available. Unfortunately not a lot of schools in rural and isolated areas in developing countries can put a Newton's Cradle high on the "must have" list. It is more than an "executive toy"!

EVENT STOP id=stop click
EVENT B1 id=c1 click
EVENT B2 id=c2 click
EVENT B3 id=c3 click
EVENT B4 id=c4 click
EVENT B5 id=c5 click
ES B1
0 XX COMMAND RESETALL
150 ball1 CMD AC "ball-left" 
150 ball2 CMD AC "ball-stop"
150 ball3 CMD AC "ball-stop
150 ball4 CMD AC "ball-stop"
150 ball5 CMD AC "ball-stop
150 ball6 CMD AC "ball-right"
EE B1
ES B2
0 XX COMMAND RESETALL
150 ball1 CMD AC "ball-left" 
150 ball2 CMD AC "ball-left" 
150 ball3 CMD AC "ball-stop"
150 ball4 CMD AC "ball-stop"
150 ball5 CMD AC "ball-right"
150 ball6 CMD AC "ball-right"
EVENTEND B2
ES B3 
0 XX COMMAND RESETALL
150 ball1 CMD AC "ball-left"
150 ball2 CMD AC "ball-left"
150 ball3 CMD AC "ball-left"
150 ball4 CMD AC "ball-right"
150 ball5 CMD AC "ball-right" 
150 ball6 CMD AC "ball-right" 
EVENTEND B3
ES B4
0 XX COMMAND RESETALL
150 ball1 CMD AC "ball-left"
150 ball2 CMD AC "ball-left"
150 ball3 CMD AC "ball-both"
150 ball4 CMD AC "ball-both"
150 ball5 CMD AC "ball-right"
150 ball6 CMD AC "ball-right" 
EVENTEND B4
ES B5
0 XX COMMAND RESETALL
150 ball1 CMD AC "ball-left"
150 ball2 CMD AC "ball-both"
150 ball3 CMD AC "ball-both"
150 ball4 CMD AC "ball-both"
150 ball5 CMD AC "ball-both"
150 ball6 CMD AC "ball-right" 
EVENTEND B5
ES STOP
0 XX COMMAND RESETALL
100 ball1 CMD AC "ball-stop"
100 ball2 CMD AC "ball-stop"
100 ball3 CMD AC "ball-stop"
100 ball4 CMD AC "ball-stop"
100 ball5 CMD AC "ball-stop"
100 ball6 CMD AC "ball-stop"
EE STOP

NOTE: Use Firefox or Chrome browsers. This does not work with Windows Safari or Edge.

X

1

2

3

4

5

   

A few production notes

• This interactive Newton's Cradle was created using SVG, CSS Animation and the AIE-Event Javascript engine. The file is incredibly small (3.7KB) and can be inserted into HTML5 or loaded as a separate file.
• We made the swing a little slower than would be seen in a desktop Newton's cradle, but that can be changed very quickly and easily.
• The background 100px/10px grid is our standard production presentation and is usually removed for a live image. It really assists with manual SVG positioning, especially with quadratic and cubic bezier curves.
• There are a number of CSS Animation behaviour differences between Firefox and Webkit browsers. These have to be learnt and techniques developed to make the behaviour the same in all browsers.
• There are four simple animations: swing-left, swing-right, swing-left-right and stop. These are applied by click events on the numbers and the CSS is inserted by the AZARDI Interactive Engine (AIE) Javascript. In this example the buttons are outside the SVG in the HTML. But they could quite easily be in the SVG.
• The advantage of using AIE is that complex interactive scripting can be carried out by non-programmers and it can be used online, in web-apps and in e-book format packages.

We have a second version of this animation that shows the transfer of potential and kinetic energy during the swings to more clearly illustrate the concepts of  conservation of momentum and energy, potential and kinetic energy, and elastic collisions. Finally we have a third version that shows the swing reducing due to the imperfect nature of real elastic collisions. Welcome to the real world!

Why education publishers should be interested

These interactive learning tools deliver the following benefits to publishers, especially publishers delivering content in multiple languages:

• It is straight-forward to create interactive learning experiences with no programming required.
• All created components can be used and reused in e-Books, WebApps or on websites.
• Any component can be localized with appropriate graphics quickly and easily.
• Text components can be used in textbooks in any or multiple language easily and quickly.
• The SVG file is incredibly small (3.7KB) and can be inserted into HTML5 or loaded as a separate file. That means low cost and higher speed of bandwidth transfer either by Internet or WiFi.

A framework can easily be added to the core animation if more physical realism is required.

The AZARDI Learning Library

The AZARDI Learning Library is a collection of teaching, learning and text book assets just like this one. They are available for publishers to create highly interactive textbooks at very low cost. They are licensed at no cost with the education version of IGP:Digital Publisher.

The are instantly ready for translation in any language, and just as importantly the artwork can be localized.

The hundreds of interactive modules, combined with thousands of images, equations and other components makes it easy for an education publisher to get to market.

Posted by Richard Pipe