Terrain

Random numbers along a sine curve

by soulwire

CSS

html, body {
  margin: 0;
}

JavaScript

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var count = 5;
var frequency = 2;
var phase = Math.random() * Math.PI * 2;
var numbers = [];
var step = 1 / (count - 1);

for (var i = 0; i < count; i++) {
	var t = i * step;
  t += (Math.random() - 0.5) * step * 2;
	numbers.push(
  	0.5 + Math.sin(phase + t * Math.PI * frequency) / 2
  );
}

// graph it
context.beginPath();
numbers.forEach(function(n, i) {
	var t = i * step;
	context.lineTo(
  	t * canvas.width,
    canvas.height - n * canvas.height
 	)
});
context.stroke();