Linescapes Iteration 7

Put back in a bit of randomness. A more interesting form. Draw progressively so screen doesn’t hang.

[php lang=”JavaScript”]$(function() {
var canvas, context, width, height, x, x1, x2, y, z = 5000, fl = 350, xres = 2, zres = 2, xcenter, ycenter, zcenter, scale, interval;

canvas = $(“#canvas”).get(0);
context = canvas.getContext(“2d”);
width = canvas.width;
height = canvas.height;
xcenter = width / 2;
ycenter = height / 2;
zcenter = 500;
context.fillStyle = “#ffffff”;
interval = setInterval(draw, 30/1000);

function draw() {
scale = fl / (fl + z);
x1 = xcenter – width / scale / 2 * scale;
x2 = xcenter + width / scale / 2 * scale;
y = ycenter + (200 + Math.random() * 5) * scale;
context.strokeStyle = “rgba(0,0,0,” + scale + “)”;
context.beginPath();
context.moveTo(x1, y);
for(x = x1; x <= x2; x += xres) { y = gety(x, z) * scale; context.lineTo(x, y); } context.stroke(); context.lineTo(x, height); context.lineTo(0, height); context.closePath(); context.fill(); z -= zres; if(z < -fl) { clearInterval(interval); } } function gety(x, z) { var x1 = xcenter - x; var z1 = zcenter - z; var dist = Math.sqrt(x1 * x1 + z1 * z1); return ycenter + 200 + Math.sin(dist * 0.1) * 30 * (1 - 1000 / dist) + Math.random() * 2 - 1; } });[/php] Result.