shaping triangle and sawtooth wave

Question

I'm having really hard time drawing a triangle and sawtooth wave shape with open charts. The formulas are from the answer in this post. This is what I have for the triangle:

    var myArray = [];
    var myVals = [];
    var mytrin = [];
    ti = 2.0 * Math.PI * (880 / 44100);
    theta = 0;
    for(i = 0; i <500; i++){
        myArray.push(i);
        var ke = value = (1.0 - Math.abs(theta - 0.5) * 4);
        mytrin.push(ke);
        theta = theta + ti;
    }

Here's an online demo.

About the same thing for the sawtooth:

var myArray = [];
var myVals = [];
var mytrin = [];
ti = 2.0 * Math.PI * (880 / 44100);
theta = 0;
for(i = 0; i <1000; i++){
    myArray.push(i);
    var ke = theta*2-1;
    mytrin.push(ke);
    theta = theta + ti;
}

And here's the demo.

Any ideas with what is wrong?

Answer 1

The problem is in your working out of ke. You have this:

(1.0 - Math.abs(theta - 0.5) * 4)

At theta = 0 this will give -1. As theta hits 0.5 you would get up to one but then as theta increases from there Math.abs(theta - 0.5) will keep increasing and thus ke will keep going down and down and down.

What you want to do is use a bit of modular arithmatic to keep it within a bound range.

I've played and modified it to:

1-Math.abs((theta%4)-2);

http://jsfiddle.net/chrisvenus/tMHR8/

What this does is does a modulus to make the value go 0-4 and then 0-4 and repeat (a kind fo sawtooth). Subtracting 2 makes it repeat -2 to +2. Taking abs of this makes it bounce from 2 to 0 to 2 and then subtract 1 to get the nice -1 to 1 triangle wave.

My fiddle reduces i too to make the graph more visible. :)

Edit to add:

The reason that the functions from the other question don't work is he states there that his pos is a cylcing variable from 0 to 1 (though I don't feel it is explained very clearly).