Blending Sine Curve Motions
Nov 25, 2003
I'm looking for a low-overhead algorithm implemented in Javascript for blending between two sine-curves defining distance as a function of time for DHTML animation.
The "primary" motion is described by the equation (1/2)-(1/2)cos(pi*time), which creates 1/2 a cosine curve normalized on (0,1) on both axes, which is useful because I can multiply the amplitude at any given time by the total pixel motion needed to get how far along the movement the object being moved should be at any given time. What I've accomplished so far can be viewed at http://ryan.octospider.com/dev/
The final default behavior of the script will be to cycle through all 6 images endlessly. However, when the user mouses over one of the menu buttons to the left of the design, I want the images to smoothly transition to a faster scroll (the same curve as before, but over a shorter time) without stopping and accelerating again from zero velocity, that carries it to the selected image.
This's easy enough to work out with calculus -- unfortunately, I don't know how to perform the multiple derivatives needed in Javascript in a timely manner.. myself and an engineer friend have been poking at this problem for a while, thinking about weighted averages (with the weights changing linearly over time) and such, but if this has been done, I'd like to know how, to save myself a lot of trial-and-error effort.
View 6 Replies
Aug 14, 2011
I have an animation where a pendulum swings back and forth using css3 rotations. Luckily I can retrieve the current transformation matrix and convert it to radians but unluckily it doesn't sway from -30 degrees to 30 as it is supposed to but instead sways from 0 to 30 with half the period. I want to convert it to a regular curve that goes from amplitude to negative amplitude. Anyone have any idea how its done?[url]...
View 6 Replies
View Related
Feb 17, 2010
I love this site: [URL]. When you click a number at the foot, it suddenly changes to another image in the background. Is there an easy way that these 'blend' into one another, rather than the sudden switch? Their JS file is here: [URL].
View 1 Replies
View Related
Mar 10, 2010
Either I made an uh-oh, or there is a serious problem with Javscripts math functions. Math.sin(x) returns the sine of x in radians. Last time I checked, the sine of pi radians is 0, but in javascript:
View 8 Replies
View Related
Feb 24, 2003
This script creates a motion blur effect of a moving object - Downgrades very well with others.
You must look at a sample to see what it is and how nice it is.
All you need to do is put the code bellow in the body section of your page... Instructions are in the code to change properties...
Go to http://free.7host04.com/logocurve/index.html for the LogoCurve generator to view samples and work out what you need
- It makes life a LOT easier!! :)
Hope you enjoy!
David :thumbsup:
<script language="JavaScript">
<!--Hide
/*
LOGO CURVE Version 3.2
24.01.2003
Writen by David Bann - South Africa
e-mail: david@ftgconsulting.co.za
Feel free to use this code, but please email me the website it is used on,
and leave this commenting in tact. Thank you!
Please let me know of any bugs or if you edit the script.
Additions since version 3.1:
- Added chengeable formulas for curve.
- Added changeable event at which the script is initiated.
Things to come:
- Better use of layers - will use less layers, but still get same
effect... (User will be able to specify how many layers to be used,
adding more functionality and effects, as well as performance)
- I want to add an option of document boundaries for the curve,as to stop
the logo from going out of the document and dissapearing totaly.
- Fade to work in browsers other then IE.
*/
//----------------------- Start Customizable Variables -----------------------//
//=== Positioning ===//
var left = 0;// Starting left position
var top = 20;// Starting left position
//=== Curve and Distance ===//
var topInc = 5;// Incriment of top position
var leftInc = 5;// Incriment of left position
/* Make both the horizontal curve and the vertical curve the same to..
.. get an increasing gap with no curve. */
var hor_curve = 20;// Horizontal curve - 0 for no curve
var ver_curve = -20;// Vertical curve - 0 for no curve
//=== Timing and Other ===//
var noTimes = 50;// Number of times the picture is shown
var waitTime = 1;// Time delay
var layer = 2;// Layer level
var picture = 'smalllogo.gif'// Picture to display (Smaller images work better)
var start_retracted= true;// Start the image retracted (true / false)
var retract= true;// Retract from behind after expanding (true / false)
//=== Fade options (Only IEusers see fade) ===//
var fade = true;// Gradual Fade (true / false) - Only works if retract =true
var fd_destop = 0;// Destination transparency level (ie 80, for mostly solid)
var fd_rate = 10;// Time in milliseconds between trasparency changes (best under 100)
var fd_delta = 5;// Amount of change each time (ie 5, for 5% change in transparency)
var event_init = 'onClick'// Event at which the script is initiated
var left_formula = '(left + leftInc) + ((count/100) * hor_curve)'// Left position formula
var top_formula = '(top + topInc) + ((count/100) * ver_curve)'// Top position formula
//----------------------- End Customizable Variables -----------------------//
//--------------------- DO NOT EDIT BEYOND THIS POINT! ---------------------//
var count = 0;
var count2 = 0;
var timeOutVal = waitTime * 10;
var txt;
var image;
var imageName;
var lay = new Array;
function addLayer(){
left = eval(left_formula);
top = eval(top_formula);
txt = "<div id='Layer" + count + "' style='position:absolute; visibility:hidden; left:" + left + "; top:" + top + "; z-index:" + layer + "'>";
txt += "<a href='#' " + event_init + "='replay()'><img src='" + picture + "' border=0 style='filter:alpha(opacity=100)' name = 'Image" + count + "'></a>";
txt += "</div>";
document.write(txt);
lay[count]=new lib_obj("Layer"+count);
}
function logoCurveInit(){
while (count < noTimes) {
addLayer();
count++;
}
count = 0;
lay[0].showIt();
if (!start_retracted)
animate();
}
function animate(){
if (start_retracted) {
if (!retract){
if (count > 0){
setTimeout('animate()',timeOutVal);
lay[count].hideIt();
count--;
}
}
else{
if (count >= 0){
setTimeout('animate()',timeOutVal);
lay[count].showIt();
if (count != 0)
fadeImage();
count--;
}
}
if (retract){
if(count==0)
retractIt();
}
}
else{
if (count < noTimes){
setTimeout('animate()',timeOutVal);
lay[count].showIt();
if (count != noTimes-1 && retract)
fadeImage();
count++;
}
if (retract){
if (count == noTimes)
retractIt();
}
}
}
function replay(){
if ((count == noTimes || (count == 0 || count == -1)) &&(count2 == noTimes-1 || count2 == 0)){
start_retracted = !start_retracted; // Make the value opposite of what it is
make_all_visible();
if (start_retracted){
count = noTimes-1;
}
else {
count = 0;
}
animate();
}
}
function retractIt(){
if (start_retracted) { // If the logo is not retracted (showing all the layers)
if (count2 > 0){
setTimeout('retractIt()',timeOutVal);
lay[count2].hideIt();
count2--;
}
}
else{ // If the logo is retracted (Only showing the first layer)
if (count2 < noTimes-1){
setTimeout('retractIt()',timeOutVal);
lay[count2].hideIt();
count2++;
}
}
}
function fadeImage(){
if (fade){
if (count >= 0 && count <= noTimes){
image = document.images['Image' + count];
nereidFade(image,fd_destop,fd_rate,fd_delta);
}
}
}
function make_all_visible(){
for (var i = 0; i< noTimes ; i++){
if (document.images['Image' + i].style.MozOpacity){
document.images['Image' + i].style.MozOpacity=100;
}
else if (document.images['Image' + i].filters) {
document.images['Image' + i].filters.alpha.opacity = 100;
}
}
}
////***************(DHTMLCentral.com)****************////
function check_browser(){
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5)
return this
}
bw=new check_browser()
function show_message(txt){alert(txt); return false}
function lib_obj(obj,nest){
if(!bw.bw) return show_message('Old browser')
nest=(!nest) ? "":'document.'+nest+'.'
this.evnt=bw.dom? document.getElementById(obj):
bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
if(!this.evnt) return show_message('The layer does not exist ('+obj+')'
+'- If your using Netscape please check the nesting of your tags!')
this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;
this.ref=bw.dom||bw.ie4?document:this.css.document;
this.x=parseInt(this.css.left)||this.css.pixelLeft||this.evnt.offsetLeft||0;
this.y=parseInt(this.css.top)||this.css.pixelTop||this.evnt.offsetTop||0
this.w=this.evnt.offsetWidth||this.css.clip.width|| this.ref.width||this.css.pixelWidth||0;
this.h=this.evnt.offsetHeight||this.css.clip.height|| this.ref.height||this.css.pixelHeight||0
this.c=0
if((bw.dom || bw.ie4) && this.css.clip) {
this.c=this.css.clip; this.c=this.c.slice(5,this.c.length-1);
this.c=this.c.split(' ');
for(var i=0;i<4;i++){this.c[i]=parseInt(this.c[i])}
}
this.ct=this.css.clip.top||this.c[0]||0;
this.cr=this.css.clip.right||this.c[1]||this.w||0
this.cb=this.css.clip.bottom||this.c[2]||this.h||0;
this.cl=this.css.clip.left||this.c[3]||0
this.obj = obj + "Object"; eval(this.obj + "=this")
return this
}
lib_obj.prototype.showIt = function(){this.css.visibility="visible"}
lib_obj.prototype.hideIt = function(){this.css.visibility="hidden"}
lib_obj.prototype.writeIt = function(text,startHTML,endHTML){
if(bw.ns4){
if(!startHTML){startHTML=""; endHTML=""} this.ref.open("text/html");
this.ref.write(startHTML+text+endHTML);
this.ref.close()
}else this.evnt.innerHTML=text
}
////***************(DHTMLCentral.com)****************////
/* Code taken from DynamicDrive.com (Start)-->
Gradual-Highlight Image Script II-
By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
For full source to script, visit http://dynamicdrive.com */
nereidFadeObjects = new Object();nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)return
if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return;}
clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity;
direction = 1; if (object.filters.alpha.opacity > destOp){direction = -1;}
delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
// <-- Code taken from DynamicDrive.com (End)
window.onload=new logoCurveInit();
//-->End Hide
</script>
View 13 Replies
View Related
