JavaScript onde sinusoïdale
track : function(x, y, top, ampl) {
return {
top : top + 2,
x : x + ampl * Math.sin(top / 20),
y : (top / this.screenHeight < 0.65) ? y + 2 : 1 + y + ampl * Math.cos(top / 25)
};
}
Cette routine envoie des flocons de neige de vol de l'onde sinusoïdale.
Mais comment fait-il? Veuillez expliquer.
Il utilise Math.sin
pour x
; et Math.cos
pour y
, mais d'autres extraits que j'ai vu utiliser dans le sens inverse. Pourquoi? Exactement pourquoi top/20
et top/25
?
L'ensemble du code:
<script type="text/javascript">
var snowflakes = { //Namespace
/* Settings */
pics : [
['snow.gif' , 24, 24],
['snow2.gif', 24, 24],
['snow3.gif', 24, 24]
],
track : function(x, y, top, ampl) {
return {
top : top + 2,
x : x + ampl * Math.sin(top / 20),
y : (top / this.screenHeight < 0.65) ? y + 2 : 1 + y + ampl * Math.cos(top / 25)
};
},
quantity : 30,
minSpeed : 20, //1 - 100, minSpeed <= maxSpeed
maxSpeed : 40, //1 - 100, maxSpeed >= minSpeed
isMelt : true, //true OR false
/* Properties */
screenWidth : 0,
screenHeight : 0,
archive : [],
timer : null,
/* Methods */
addHandler : function(object, event, handler, useCapture) {
if (object.addEventListener) object.addEventListener(event, handler, useCapture);
else if (object.attachEvent)object.attachEvent('on' + event, handler);
else object['on' + event] = handler;
},
create : function(o, index) {
var rand = Math.random();
this.timer = null;
this.o = o;
this.index = index;
this.ampl = 3 + 7*rand;
this.type = Math.round((o.pics.length - 1) * rand);
this.width = o.pics[this.type][1];
this.height = o.pics[this.type][2];
this.speed = o.minSpeed + (o.maxSpeed - o.minSpeed) * rand;
this.speed = 1000 / this.speed;
this.deviation = o.maxDeviation * rand;
this.x = o.screenWidth * rand - this.width;
this.y = 0 - this.height;
this.top = this.y;
this.img = document.createElement('img');
this.img.src = o.pics[this.type][0];
this.img.style.top = this.y + 'px';
this.img.style.position = 'absolute';
this.img.style.zIndex = 10000;
this.img.style.left = this.x + 'px';
this.img.obj = this;
if (o.isMelt) this.img.onmouseover = function() {
clearTimeout(this.obj.timer);
this.obj.timer = null;
this.parentNode.removeChild(this);
}
document.body.appendChild(this.img);
this.move();
},
init : function() {
this.screenWidth = window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth);
this.screenWidth = navigator.userAgent.toLowerCase().indexOf('gecko') == -1 ? this.screenWidth : document.body.offsetWidth;
this.screenHeight = window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight);
this.screenScroll = (window.scrollY) ? window.scrollY : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
this.archive[this.archive.length] = new this.create(this, this.archive.length);
clearTimeout(this.timer);
this.timer = null
this.timer = setTimeout(function(){snowflakes.init()}, 60000 / this.quantity);
}
};
snowflakes.create.prototype = {
move : function() {
var newXY = this.o.track(this.x, this.y, this.top, this.ampl);
this.x = newXY.x;
this.y = newXY.y;
this.top = newXY.top;
if (this.y < this.o.screenHeight + this.o.screenScroll - this.height) {
this.img.style.top = this.y + 'px';
this.x = this.x < this.o.screenWidth - this.width ? this.x : this.o.screenWidth - this.width;
this.img.style.left = this.x + 'px';
var index = this.index;
this.timer = setTimeout(function(){snowflakes.archive[index].move()}, this.speed);
} else {
delete(this.o.archive[this.index]);
this.img.parentNode.removeChild(this.img);
}
}
};
snowflakes.addHandler(window, 'load', function() {snowflakes.init();});
snowflakes.addHandler(window, 'resize', function() {snowflakes.init();});
</script>
Oui, en général x = cos(theta) et y = sin(theta), mais c'est ok. Si vous retournez l'un des axes x et y, vous obtenez toujours le mouvement ondulé. du tout bon. Haut/20 et haut/25 va faire x & y un peu hors-phase, ce qui est agréable pour le mouvement.
OriginalL'auteur DrStrangeLove | 2011-08-26
Vous devez vous connecter pour publier un commentaire.
La base de la fonction sinus est défini comme:
où
Ces facteurs déterminent la façon dont le graphe de f va ressembler.
L'amplitude peut être considéré comme un facteur d'échelle, le plus volumineux, le plus grand (en valeur absolue) que les pics et les creux de f.
La fréquence détermine la vitesse à laquelle la fonction sinus seront utilisés dans l'ensemble de ses valeurs jusqu'à ce qu'il recommence à - sinus est une fonction périodique. Le plus grand k, le plus rapide f traversent une période.
p est la phase de la penser comme un "déplacement" le point de départ de la fonction pour le droit (positif p) ou de gauche (négatif). Difficile à expliquer en mots, avoir un regard ici pour les graphes.
La fonction que vous donnez dans votre exemple est une version généralisée de
Qui est (l'une des)paramétrisations du cercle unité . Si vous augmentez t monotone et carré x (sin(t)) et y (cos(t)), vous aurez un point de voler sur un cercle de rayon 1.
Votre fonction généralisée est
Dans votre cas A=ampl, t=top et w=20 pour les coordonnées x et w=25 pour la coordonnée y de la. Ces légères variations de w sont, à y faire le mouvement de nervosité, de sorte qu'il n'est plus un cercle parfait, mais plutôt un peu "déformé" ellipse - flocons de neige de ne pas tomber dans des cercles parfaits, je suppose. De plus, ce qui rend le chemin des flocons semblent être plus aléatoire que droite des cercles parfaits. C'est une illusion si, c'est également très déterministe et encore périodique - c'est juste que x et y de circulation sont "hors phase" donc, il faut un ensemble beaucoup plus jusqu'à ce qu'une période est terminée.
w est choisi > 1 à "ralentir" le mouvement circulaire. Le plus grand que vous choisissez w, plus la fréquence de l'être et de votre déménagement point d'un cercle beaucoup plus lent.
Le plus grand que vous choisissez, le plus grand que votre cercle deviendra.
LOL, ça arrive quand il est tard - j'ai lu de haut/20 o.2*dessus, donc w aurait été de 5... c'est 20 et 25 bien sûr, désolé pour la confusion, je vais mettre à jour tout de suite. R->R2 est domaine et de la fonction prend des valeurs de R en entrée, la sortie est un vectoriel en deux dimensions (x,y) où y et y dans R, alors (x, y) est dans RxR qui est abrégé en R2 en mathématiques.
OriginalL'auteur emboss
Il est tout simplement l'onde sinusoïdale plus grand que les courbes peuvent être plus faciles à observer.
Ici un violon j'ai essayé de faire. Si je change de 20 et de 25 à 1, le mouvement est moins intéressant. http://jsfiddle.net/AbM9z/1/
Il serait utile de savoir ce que les valeurs de la fonction est appelée.
sons sur la droite
Où avez-vous changer à 1?? Dans ce fiddle je vois en haut/20 et haut/25
Je l'ai changé, mais n'a pas l'enregistrer. J'aurais fait la bascule entre les deux. En fait, je pense que je vais le faire aujourd'hui.
OK, j'ai 'em side-by-side maintenant.
OriginalL'auteur Benjamin Atkin