Javascript (JS)sin,cos,tan

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

我几个月前才开始使用JS，很抱歉我的无知

这是我的密码：

---

您没有sa、ca和ta的初始值。所以当你调用generateValues时，它们都是未定义的，你的y值都是NaN。在调用generateValues之前，我在setup函数中为它们赋值。我还从draw中的赋值中删除了var关键字，因为您希望使用/影响全局变量，而不是创建新的局部变量

您的滑块不工作-这是因为您仅在GenerateValue中使用sa、ca、ta值，您仅在设置时调用这些值，而不是每次重新绘制时调用它们。你需要重新考虑这一部分

var阶跃=1； var-scl=1； //每次可视化的振幅 var-sa，ca，ta； 变量ssld、csld、tsld； //保存三个函数的x值和y值 变量sx=[]、sy=[]、cx=[]、cy=[]、tx=[]、ty=[]； 功能设置{ 角度度； CreateCanvas640480； 背景55； ssld=createslider0150,75； 位置10，10； sa=10； csld=createslider0150,75； csld.10,35； ca=10； tsld=CreateSlider0150,75； 位置10,60； ta=10； var s_u2;=生成值； var c_u2;=生成价值； var t_u=generateValuestan； sx=s_u0[0] sy=s_u2;[1] cx=c_u0[0] cy=c_U3[1] tx=t_u0[0] ty=t_uu1] } 函数图{ sa=ssld.value； ca=csld.value； ta=tsld.value； 冲程重量； 冲程255,0,0； renderWavesx，sy； 冲程0，255，0； renderWavecx，cy； 冲程0、255、255； renderwavex，ty； } //给定波形类型，它返回一个包含x值和y值的二维数组 函数generateValueswave_类型{ var xvalues=[]； var yvalues=[]； 对于变量i=0；i谢谢，它现在可以工作了，但是您能解释一下声明w/o var之间的区别吗？我认为这将有助于我在未来的项目中给出一个很好的解释。

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