Formulating my div objects in such a way that it resembles a sine wave

So the basic idea is that I have an array of 8 div rectangles with a width of 30 px and a random height through Math. rand. Right now I'm trying to arrange them such that they form a sine wave pattern. I know I have to use Math.sin somewhere, but I have开发者_JAVA技巧 no clue as to go about it. Any help with this issue will be greatly appreciated. Here is what I have so far:

var divArr = new Array();

for(i = 0; i < 8; i++){

 //var rand_numX = Math.floor((100-19)*Math.random()) + 20;
 var rand_numY = Math.floor((100-19)*Math.random()) + 20;
 divArr[i] = OS.dom.add_element('div', view, {position: 'absolute', width:'30px', height: rand_numY+'px', 'background-color': '#000000'});

 }

Here's an example:

for(var i = 0; i <= 7; i++) {
    var yPos = 10 + 10 * Math.sin((i / 7) * 2 * Math.PI);
    var div = $('<div/>').text('*').css({position: 'absolute', left: (i * 10) + 'px', top: yPos + 'px'});
    $('body').append(div);
}

See it in action: http://jsfiddle.net/cJPsT/1/

Math.sin((i / 7) * 2 * Math.PI) is the important part. It calculates the y position for the wave. The 10 + 10 * just offsets the curve so it's not a the very top and makes it bigger.

Dealing with the random heights is left your job. But now you know how to draw a simple sine wave so I'm sure you'll figure it out.