(JS) sin, cos, tan visualization

Question

I was able to visualize the aforementioned functions successfully, then I tried to use Object Oriented Programming and compress my code into one function, it seems to not give any result, it doesn't show any errors but in same time, it doesn't display anything except the background when I run it, I am using the p5js library, How can I fix this issue?

I just started working with JS a few months ago, sorry for my ignorance

Here is my code:

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

You don't have initial values for sa, ca and ta. So when you call generateValues, those are all undefined, and your y-values are all NaN. Here I've assigned values to them in the setup function, before the call to generateValues. I also removed the var keyword from the assignments in draw(), because you want to use/affect the global variables not create new local variables.

Your sliders don't work - this is because you only use the sa, ca, ta values in generateValues, which you only call on setup, not each time it redraws. You'll need to re-think that part.

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>