JavaScript 正弦波

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)
        };
    }

这个程序让雪花以正弦波的方式飞舞。

但它是如何做到的呢？请解释。

It uses Math.sin for x; and Math.cos for y，但我见过的其他片段以相反的方式使用它们。为什么？到底为什么top/20 and top/25?

整个代码：

<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>

基本正弦函数定义为：

f(x) = A sin(wt + p)

where

• A是振幅
• w 是频率
• p 是相位

这些因素决定了 f 的图形的外观。

幅度可以被认为是一个比例因子，A 越大，f 的峰值和低值（绝对值）就越大。

频率决定了正弦函数运行其所有值直到重新开始的速度 - 正弦是一个周期函数。 k 越大，f 运行一个周期的速度就越快。

p 是相位，可以将其视为将函数的起点向右（正 p）或向左（负）“移动”。很难用言语解释，看看here http://www.algebralab.org/lessons/lesson.aspx?file=trigonometry_trigperiodfreq.xml对于图表。

您在示例中给出的函数是通用版本

f: R->R², f(t)=(sin(t), cos(t))

这是（之一）单位圆的参数化 http://colalg.math.csusb.edu/~devel/precalcdemo/param/src/param.html。如果单调增加 t 并绘制 x (sin(t)) 和 y (cos(t))，您将得到一个在半径为 1 的圆上飞行的点。

你的广义函数是

f: R->R², f(t) = (A sin(1/wt), A cos(1/wt)), w > 1

在您的情况下，A=ampl，t=top，x 坐标为 w=20，y 坐标为 w=25。 w 的这些轻微偏差使运动变得不稳定，因此它不再是一个完美的圆形，而是一些“扭曲”的椭圆形 - 我猜雪花不会以完美的圆形落下。此外，这使得薄片的路径看起来比直的完美圆更加随机。但这只是一种幻觉，这一切都是确定性的并且仍然是周期性的 - 只是 x 和 y 运动“异相”，因此需要更长的时间才能完成一个周期。

选择 w > 1 以“减慢”圆周运动。你选择的w越大，频率就越低，你的移动点完成一整圈的速度就会慢得多。

你选择的A越大，你的圈子就会变得越大。