Elastic Collisions on Your Own Page

Elastic Collisions for Your Own Web Page

If you would like to put a box of bouncers on your own web page, you can have one provided your web host allows you to send Java applets to your users. You can configure the display in a number of ways, as you can see on my examples of a banner greeting, brownian motion and an executive toy

These are the steps you need to do:

Design a bounce-field as you would like to see it. You can try out various options using the Elastic Forge.
Download the java classes in the archive 'jar' file bounce.zip. These are compiled using java 1.0.2, which means that the code should run on most browsers which support java.
Build a webpage incorporating the applet code described below.
Upload the webpage and the archive to your web host site. The archive should go in a sub-directory with the same name as the 'codebase' argument in the applet tag.
For older browsers! Older browsers (such as Netscape 3) are not able to access the code from an archive file. You can still make your applet available to them by 'unpacking' the archive and putting the individual files in a sub-directory. This must be under the directory named in the 'codebase' argument, with the path name com/lmconsult/elastic102. This shows the structure:

              yoursite
	         |
                Classes (contains bounce.zip)
                   |
                  com
		     |
                    lmconsult
		       |
                      elastic102 (this contains the individual .class files)

If you are not familiar with using Java applets, there is a very good tutorial at Sun's Java site. Your applet should look something like the following:

<applet code="com.lmconsult.elastic102.BounceClient.class" archive="bounce.zip" codebase="Classes/" width="200" height="100"> <param name="field" value="ffffff,200,100"> <param name="obj0" value="ff0000,10"> <param name="impulse0" value="100"> <param name="obj1" value="00ff00,20"> <param name="obj2" value="0000ff,30"> </applet>
*The definitions of the attributes in the applet tag are:* <applet code="com.lmconsult.elastic102.BounceClient.class" archive="bounce.zip" codebase="Classes/" width="200" height="100">
	archive	the name of the code archive directory
	codebase	the base directory in which the browser expects to find the code for the applet
	width	width (in pixels) of the applet area
	height	height of the applet area
*The definitions of each of the parameter tags follows:* The order in which the lines are given does not matter. <param name="field" value="COLOR,WIDTH,HEIGHT"> This defines the playing field for the bouncers.
	COLOR	The hexidecimal color code of the background
	WIDTH	Width (in pixels) of the field (should match the value in the applet tag)
	HEIGHT	Height of the field
<param name="objN" value="COLOR,RADIUS,X,Y,MASS"> This defines an 'object N'. Other parameters for this object may be set below. Note that any arguments not specified for an object will default to the values set for the previous object (N-1).
	COLOR	The hexidecimal color code of the object
	RADIUS	Object radius (in pixels)
	X	Initial horizontal position on the field
	Y	Initial vertical position of the field
	MASS	Notional mass of the object, used in calculating momtentum tranfers between objects when they collide
<param name="textN" value="LABEL"> Defines a text display for object N.
	LABEL	A text string which will be displayed on the object
<param name="styleN value="SIZE,FACE,STYLE,COLOR-TEXT,COLOR-BOX,COLOR-EDGE"> Defines the style, size and colors of the text label being displayed on object N.
	SIZE	Size of the font used for the label (in points)
	FACE	Font name (may be Serif, Sans or Monospaced)
	STYLE	Font Style (may be Reg, Ital, Bld or BldItal)
	COLOR-TEXT	The hexidecimal color code of the text
	COLOR-BOX	The hexidecimal color code of a box surrounding the text
	COLOR-EDGE	The hexidecimal color code of object and box edges
<param name="impulseN" value="X-IMPULSE,Y-IMPULSE,RANDOM"> Defines the momentum to be given to object N.
	X-IMPULSE	Pixels/second impulse to be given in the horizontal direction
	Y-IMPULSE	Pixels/second impulse to be given in the vertical direction (downwards)
	RANDOM	If this the letter "r", the above values will be a maximum value, applied randomly in either direction.

Please send me any comments or suggestions: mailto: webrelay@lmcd.demon.co.uk

This page is part of Lewis Morton's Web presence.
Thanks for stopping by.

This page © 1998, 1999, 2000 Lewis Morton

Back to the home page

Visit some links

About this website!

mailto: webrelay@lmcd.demon.co.uk

Version 1.1: April 20, 2000