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。在调用generateValues之前，我在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>

（JS）sin，cos，tan可视化

1 个答案: