 | |
| 2.2 | Spiral |
| |
| 2.2 | Spiral |
A spiral is exactly the same as the circle but there's just one more option to set in the setoptions() function, the "SpiralValue". This determines how many pixels the radius will decrease for every angle incrementation. This script can be fun to play around with. You can begin with a very small radius and spiral outward from there. Or if you fool with the number of cycles it'll go past the center and begin spiraling outward.
function spiral() {
SpirLayername = "layer1"; // name of the layer you want to move
SpirRadius = 160; // radius of Circle in pixels
SpirVertical = 1.0; // vertical multiplier, <1 makes thinner, >1 makes fatter
SpirHorizontal = 1.0; // horizontal multiplier
SpirAnglestart = 0; // starting angle (0 is the right edge of the cirrle, 90 is at the top and so on)
SpirAngleinc = 7; // angle incremenation, a larger number makes it go faster
SpirCycles = 3.0; // the number of times you want to go around (decimals allowed)
SpirDirection = 1; // "1" is clockwise, "-1" is counter-clockwise
SpirSpeed = 30; // repetition speed in milliseconds
SpiralValue = 1.0; // the number of pixles to spiral inward (decimals allowed, use negative to move outward)
SpirAngle = SpirAnglestart;
SpirLeft = document.layers[SpirLayername].left - SpirHorizontal*SpirRadius*Math.cos(SpirAngle*Math.PI/180);
SpirTop = document.layers[SpirLayername].top + SpirVertical*SpirRadius*Math.sin(SpirAngle*Math.PI/180);
slidespiral();
}
function slidespiral() {
if (Math.abs(SpirAngle - SpirAnglestart) < SpirCycles*360) {
SpirAngle += SpirDirection*SpirAngleinc;
SpirRadius -= SpiralValue;
var x = SpirLeft + SpirHorizontal*SpirRadius*Math.cos(SpirAngle*Math.PI/180);
var y = SpirTop - SpirVertical*SpirRadius*Math.sin(SpirAngle*Math.PI/180);
document.layers[SpirLayername].moveTo(x,y);
setTimeout("slidespiral()",SpirSpeed);
}
}
If you want the function to keep looping you can remove the "if" statement entirely.
| ||
| 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 |
| ||