html值改变频率,HTML5 可调整频率和幅度的正弦波

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var c = document.getElementById('canv');

var $$ = c.getContext("2d");

var w = c.width;

var h = c.height;

$$.fillStyle = 'hsla(336, 95%, 55%, 1)';

var sine1 = {

amp: w / 4, //amptitude

freq: 0.5 //frequency

};

var sine2 = {

amp: w / 4,

freq: (0.5) * 2 * Math.PI * 1e-3,

spatialFreq: (2) * 2 * Math.PI / h //spatial frequency

};

var sine = sine2;

var spatFreq = true;

function animate() {

requestAnimationFrame(animate);

var passed = Date.now();

// clear whole screen

$$.clearRect(0, 0, 600, 600);

for (var y = 0; y < h; y++) {

if (!spatFreq) {

var xPos = Math.ceil(sine.amp *

Math.sin(sine.freq * (y + passed)));

} else {

var xPos = Math.ceil(sine.amp *

Math.sin(sine.freq * passed +

sine.spatialFreq * y));

}

$$.fillRect(w / 2 + xPos, y, 10, 2);

}

}

animate();

//controls

$('#btn1').click(function() {

sine = sine1;

spatFreq = false;

})

$('#btn2').click(function() {

sine = sine2;

spatFreq = false;

})

$('#btn3').click(function() {

sine = sine2;

spatFreq = true;

})

$('#time').change(function() {

sine2.freq = (this.value) * 2 * Math.PI * 1e-3;

})

$('#space').change(function() {

sine2.spatialFreq = (this.value) * 2 * Math.PI / h

})