Circle Object

The Circle Object will slide a layer in a perfect circle.

Initialization:

The Circle Object is an addon object to the DynLayer. You must make a new property onto the DynLayer and make that the Circle Object:

objectName.circle = new Circle("objectName","circle")

Example:

mylayer = new DynLayer("mylayerDiv")
mylayer.circle = new Circle("mylayer","circle")

You must pass the name of the DynLayer and the name of the new circle object (which would usually be "circle") to the Circle Object. These 2 pieces of information are needed in order for the circle object to access the DynLayer.

The play() Method:

The play() method begins the slide along a circular path. You must pass information to the play() method that define the shape and properties of the circle:

objectName.circle.play(radius,angleinc,angle,endangle,speed,fn)

Where:
• radius - radius of circle
• angleinc - angle incremention
• angle - starting angle
• endangle - ending angle
• speed - speed of repetition
• fn - (optional) function or statement to execute when complete

Notes:
• to rotate counter-clockwise use a negative angleinc value, for clockwise use a positive value
• If you want the circle to keep looping then pass null for the endangle value.

Examples:

A circle, radius 100, increment 5 degrees (clockwise), starting at 0 degrees, ending at 90 degrees, at 20 milliseconds per repetion:

mylayer.circle.play(100,5,0,90,20)

The same except it loops:

mylayer.circle.play(100,5,0,null,20)

The pause() and stop() Methods:

The pause() method will pause the current circular path. The next time a play() method is called it will continue along the same circular path:

objectName.circle.pause()

The stop() method will stop the current circular motion. The next time a play() method is called it will slide along a new circular path.

objectName.circle.stop()

Source Code:

// Circle Object
// Copyright 1998 Dan Steinman
// Available at the Dynamic Duo (http://www.dansteinman.com/dynduo/)
// June 22, 1998.
// In order to use this code you must keep this disclaimer

function Circle(dynlayer,name) {
	this.dynlayer = dynlayer.obj
	this.name = name
	this.play = CirclePlay
	this.slide = CircleSlide
	this.pause = CirclePause
	this.stop = CircleStop
}
function CirclePlay(radius,angleinc,angle,endangle,speed,fn) {
	if (this.active) return
	if (!this.paused) {
		this.radius = radius
		this.angleinc = angleinc
		this.angle = angle
		this.endangle = endangle
		this.speed = speed
		this.fn = fn
		this.centerX = eval(this.dynlayer+'.x') - this.radius*Math.cos(this.angle*Math.PI/180)
		this.centerY = eval(this.dynlayer+'.y') + this.radius*Math.sin(this.angle*Math.PI/180)
		if (this.endangle!=null) {
			this.angleinc = Math.abs(this.angleinc)
			if (this.endangle<this.angle) this.angleinc *= -1
		}
	}
	this.active = true
	this.paused = false
	eval(this.dynlayer+'.'+this.name+'.slide()')
}
function CircleSlide() {
	if (this.active && (this.endangle==null || Math.abs(this.angleinc)<Math.abs(this.endangle-this.angle))) {
		this.angle += this.angleinc
		var x = this.centerX + this.radius*Math.cos(this.angle*Math.PI/180)
		var y = this.centerY - this.radius*Math.sin(this.angle*Math.PI/180)
		eval(this.dynlayer+'.moveTo('+x+','+y+')')
		setTimeout(this.dynlayer+'.'+this.name+'.slide()',this.speed)
	}
	else {
		if (this.endangle!=null) {
			var x = Math.round(this.centerX + this.radius*Math.cos(this.endangle*Math.PI/180))
			var y = Math.round(this.centerY - this.radius*Math.sin(this.endangle*Math.PI/180))
			eval(this.dynlayer+'.moveTo('+x+','+y+')')
		}
		if (!this.paused) {
			this.active = false
			eval(this.fn)
		}
	}
}
function CirclePause() {
	if (this.active) {
		this.active = false
		this.paused = true
	}
}
function CircleStop() {
	this.active = false
	this.paused = false
}

Demo:

View circle1.html for a circle object demo.

Geometric Objects

• Circle Object
• Hover Object
• Sine Wave Object
• Parabola Object

Home	Next Lesson: Path Animation

copyright 1998 Dan Steinman