(JS)罪，cos，tan可视化

Question

我能够成功地可视化上述函数，然后我尝试使用面向对象编程并将我的代码压缩为一个函数，它似乎没有给出任何结果，它没有显示任何错误，但同时，当我运行它时，除了背景之外，它不显示任何内容，我正在使用 p5js 库， 如何解决此问题？

几个月前我刚开始使用JS，对不起我的无知

这是我的代码：

var step = 1;
var scl = 1;
//amplitude for each visualization
var sa, ca, ta;
var ssld, csld, tsld;
//to hold x-values and y-values of the three functions
var sx = [], sy = [], cx = [], cy = [], tx = [], ty = [];
function setup() {
angleMode(DEGREES);
createCanvas(640, 480);
background(55);
ssld = createSlider(0, 150, 75);
ssld.position(10, 10);
csld = createSlider(0, 150, 75);
csld.position(10, 35);
tsld = createSlider(0, 150, 75);
tsld.position(10, 60);
var s_ = generateValues("sin");
var c_ = generateValues("cos");
var t_ = generateValues("tan");
sx = s_[0]
sy = s_[1]
cx = c_[0]
cy = c_[1]
tx = t_[0]
ty = t_[1]
}
function draw() {
var sa = ssld.value();
var ca = csld.value();
var ta = tsld.value();
strokeWeight(scl);
stroke(255, 0, 0);
renderWave(sx, sy);
stroke(0, 255, 0);
renderWave(cx, cy);
stroke(0, 255, 255);
renderWave(tx, ty);
}
//given the wave type, it returns a two-dimensional array containing the x-values, and y-values
function generateValues(wave_type) {
var xvalues = [];
var yvalues = [];
for (var i = 0; i < width; i += step) {
append(xvalues, i)
}
if (wave_type === "sin") {
for (var i = 0; i < xvalues.length; i++) {
var y = sin(xvalues[i]);
append(yvalues, y * sa);
}
return [xvalues, yvalues];  
} else if (wave_type === "cos") {
for (var i = 0; i < xvalues.length; i++) {
var y = cos(xvalues[i]);
append(yvalues, y * ca);
}
return [xvalues, yvalues];  
} else if (wave_type === "tan") {
for (var i = 0; i < xvalues.length; i++) {
var y = tan(xvalues[i]);
append(yvalues, y * ta);
}
return [xvalues, yvalues];  
}
}
function renderWave (array_x, array_y) {
for (var i = 0; i < width; i++) {
point(array_x[i], array_y[i] + (height / 2));
}
}

Answer 1

您没有 sa、ca 和 ta 的初始值。 因此，当您调用 generateValues 时，这些值都是未定义的，并且您的 y 值都是 NaN。 在这里，我在调用 generateValue 之前，在 setup 函数中为它们分配了值。 我还从 draw(( 中的赋值中删除了 var 关键字，因为您想使用/影响全局变量而不是创建新的局部变量。

您的滑块不起作用 - 这是因为您只使用 generateValues 中的 sa、ca、ta 值，您只在安装程序时调用这些值，而不是在每次重绘时调用这些值。 您需要重新考虑这一部分。

var step = 1;
var scl = 1;
//amplitude for each visualization
var sa, ca, ta;
var ssld, csld, tsld;
//to hold x-values and y-values of the three functions
var sx = [], sy = [], cx = [], cy = [], tx = [], ty = [];
function setup() {
angleMode(DEGREES);
createCanvas(640, 480);
background(55);
ssld = createSlider(0, 150, 75);
ssld.position(10, 10);
sa = 10;
csld = createSlider(0, 150, 75);
csld.position(10, 35);
ca = 10;
tsld = createSlider(0, 150, 75);
tsld.position(10, 60);
ta = 10;
var s_ = generateValues("sin");
var c_ = generateValues("cos");
var t_ = generateValues("tan");
sx = s_[0]
sy = s_[1]
cx = c_[0]
cy = c_[1]
tx = t_[0]
ty = t_[1]
}
function draw() {
sa = ssld.value();
ca = csld.value();
ta = tsld.value();
strokeWeight(scl);
stroke(255, 0, 0);
renderWave(sx, sy);
stroke(0, 255, 0);
renderWave(cx, cy);
stroke(0, 255, 255);
renderWave(tx, ty);
}
//given the wave type, it returns a two-dimensional array containing the x-values, and y-values
function generateValues(wave_type) {
var xvalues = [];
var yvalues = [];
for (var i = 0; i < width; i += step) {
append(xvalues, i)
}
if (wave_type === "sin") {
for (var i = 0; i < xvalues.length; i++) {
var y = sin(xvalues[i]);
append(yvalues, y * sa);
}
return [xvalues, yvalues];  
} else if (wave_type === "cos") {
for (var i = 0; i < xvalues.length; i++) {
var y = cos(xvalues[i]);
append(yvalues, y * ca);
}
return [xvalues, yvalues];  
} else if (wave_type === "tan") {
for (var i = 0; i < xvalues.length; i++) {
var y = tan(xvalues[i]);
append(yvalues, y * ta);
}
return [xvalues, yvalues];  
}
}
function renderWave (array_x, array_y) {
for (var i = 0; i < width; i++) {
point(array_x[i], array_y[i] + (height / 2));
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>