2.2 Slanted Oval

This function is basically the same as the circle, but I have rotated the whole thing at 45 degrees. A similar technique could be devised for the other shapes, but they probably wouldn't be as usefull as this one.

function slanted() {
SlaLayername = "layer1";  // name of the layer you want to move
SlaRadius = 100;          // radius of circle in pixels
SlaMultiplier = 0.5;      // oval muliplier, <1 makes thinner, >1 makes fatter
SlaAnglestart = 0;        // starting angle (0 is the right edge of the circle, 90 is at the top and so on)
SlaAngleinc = 5;          // angle incremenation, a larger number makes it go faster
SlaDirection = 1;         // "1" is counter-clockwise, "-1" is clockwise
SlantDir = 1;             // "1" means on 45 degrees, "2" means on -45 degrees
SlaSpeed = 30;            // repetition speed in milliseconds
SlaAngle = SlaAnglestart;
var u = SlaRadius*Math.cos(SlaAngle*Math.PI/180)*Math.SQRT1_2;
var v = SlaMultiplier*SlaRadius*Math.sin(SlaAngle*Math.PI/180)*Math.SQRT1_2;
if (SlantDir == 1) {
SlaLeft = document.layers[SlaLayername].left - (u-v);
SlaTop = document.layers[SlaLayername].top + (u+v);
}
if (SlantDir == 2) {
SlaLeft = document.layers[SlaLayername].left - (u+v);
SlaTop = document.layers[SlaLayername].top + (-u+v);
}
slideslanted();
}

function slideslanted() {
var u = SlaRadius*Math.cos(SlaAngle*Math.PI/180)*Math.SQRT1_2;
var v = SlaMultiplier*SlaRadius*Math.sin(SlaAngle*Math.PI/180)*Math.SQRT1_2;
if (SlantDir == 1) {
var x = SlaLeft + (u-v);
var y = SlaTop - (u+v);
}
if (SlantDir == 2) {
var x = SlaLeft + (u+v);
var y = SlaTop - (-u+v);
}
document.layers[SlaLayername].moveTo(x,y);
setTimeout("slideslanted()",SlaSpeed);
}

 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.