2.2	Sine Wave

A sine wave is very similar to the hover and circle. The movement along the horizontal is a constant value, but it is related to the wavelength. This made it a little tricky but I got it to work.

function sine() {
	SinLayername = "layer1";   // name of the layer you want to move
	SinAmplitude = 120;        // amplitude of wave in pixels (remember you go up AND down this amount)
	SinWavelength = 300;       // wavelength in pixels
	SinCycles = 1;             // the number of times you want to cycle through the wave (decimals allowed)
	SinAngleinc = 5;           // angle incrementation
	SinAnglestart = 0;         // angle you want to start the wave at
	SinDirection = 1;          // use "1" to move right, "-1" to move left
	SinSpeed = 20;             // speed of repetition in milliseconds
	SinAngle = SinAnglestart;
	SinLeft = document.layers[SinLayername].left;
	SinTop = document.layers[SinLayername].top;
	slidesine();
}

function slidesine() {
	if (Math.abs(SinAngle) < SinCycles*360) {
		var x = SinLeft + SinDirection*(SinAngle / (360/SinWavelength)) - SinDirection*(SinAnglestart / (360/SinWavelength));
		var y = SinTop - (SinAmplitude/2 * Math.sin(SinAngle*Math.PI/180)) + (SinAmplitude/2 * Math.sin(SinAnglestart*Math.PI/180));
		document.layers[SinLayername].moveTo(x,y);
		SinAngle += SinAngleinc;
		setTimeout("slidesine()",SinSpeed);
	}
}

• 2.2 Pre-Built Functions
  • Circle
  • Spiral
  • Hovering
  • Sine Wave
  • Parabola
  • Figure-8
  • Slanted Oval

1.1 Introduction 1.2 Overlapping 1.3 Nesting 1.4 Using JavaScript	2.1 Sliding Layers 2.2 Pre-Built Functions 2.3 Clipping Layers 2.4 Looping Animations 2.5 Changing Images	3.1 Mouse-Click Animation 3.2 Capturing Keystrokes 3.3 Drag and Drop 4.1 Making Demos 4.4 Problems 4.5 Screen Sizes
Copyright © 1997 Dan Steinman. All rights reserved.