Sinus Wave Landscape

by schrodingers

JavaScript

var w = 800;
var h = 300;

//---

var center2D = { x:w / 2, y:h / 2 };
var waves = [];
var wavesLength = 30;
var waveDistance = 12;

//---

var canvas = document.createElement( 'canvas' );
	canvas.width = w;
	canvas.height = h;
	
document.body.appendChild( canvas );

var context = canvas.getContext( '2d' );
	context.fillStyle = '#000000';
	context.fillRect( 0, 0, w, h );

var imageData = context.getImageData( 0, 0, w, h );
var data = imageData.data;

//---

function clearImageData() {

    for ( var i = 0, l = data.length; i < l; i += 4 ) {

        data[ i ] = 0;
        data[ i + 1 ] = 0;
        data[ i + 2 ] = 0;
        data[ i + 3 ] = 255;

    }

};

function setPixel( x, y, r, g, b, a ) {

    var i = ( x + y * imageData.width ) * 4;

    data[ i ] = r;
    data[ i + 1 ] = g;
    data[ i + 2 ] = b;
    data[ i + 3 ] = a;

};

//---

function drawSinusWave( wave, color ) {

    var increase = Math.PI * 2 / ( w / wave.interval );
    var counter = wave.position;//increase * ( w / position );//0;

    for ( var x = 0; x < w; x++ ) {

        var y = wave.y + Math.sin( counter ) * wave.unit;

        counter += increase;

        setPixel( x | 0, y | 0, color.r, color.g, color.b, color.a );

    }

};

//---

function addNewWave( unit, interval, position, y ) {

	var wave = { unit:unit, interval:interval, position:position, y:y };
  
  return wave;

};

//---

var time = 0;
var position = 1.0;
var speed = 0.04;
//var interval = Math.sin( time ) + 5;//1.0;
//var unit = Math.sin( time ) * 10;//100.0;

//---

function addLandscape() {

	for( var i = 0; i < wavesLength; i++ ) {
 
  	var wave = addNewWave( Math.sin( time ) * 15, Math.sin( time ) + 5, position, i * waveDistance - 15 );
    
    waves.push( wave );
    
    var colorValue = 255 - Math.round( 255 / ( ( i / 20 ) + 1 ) );
    
    drawSinusWave( wave, { r:colorValue, g:colorValue, b:colorValue, a:255 } );
    
    
    time += speed;
  
  }

	context.putImageData( imageData, 0, 0...