Linescapes Iteration 8

Create a LineScape object in LineScape08.js:

[php lang=”JavaScript”]function LineScape(canvas) {

this.context = canvas.getContext(“2d”);
this.width = canvas.width;
this.height = canvas.height;
this.xcenter = this.width / 2;
this.ycenter = this.height / 2;
this.zcenter = 500;
this.z = 5000;
this.fl = 350;
this.xres = 2;
this.zres = 2;

this.context.fillStyle = “#ffffff”;

this.draw = function() {
var self = this;
this.interval = setInterval(function() {self.drawline();}, 30/1000);
}

this.drawline = function() {
var x, y, x1, x2, scale;
scale = this.fl / (this.fl + this.z);
x1 = this.xcenter – this.width / scale / 2 * scale;
x2 = this.xcenter + this.width / scale / 2 * scale;
y = this.ycenter + (200 + Math.random() * 5) * scale;
this.context.strokeStyle = “rgba(0,0,0,” + scale + “)”;
this.context.beginPath();
this.context.moveTo(x1, y);
for(x = x1; x <= x2; x += this.xres) { y = this.gety(x, this.z) * scale; this.context.lineTo(x, y); } this.context.stroke(); this.context.lineTo(x, this.height); this.context.lineTo(0, this.height); this.context.closePath(); this.context.fill(); this.z -= this.zres; if(this.z < -this.fl) { clearInterval(this.interval); } } this.gety = function(x, z) { return 200; } }[/php] Create an instance. Customize it. Draw it: [php lang="JavaScript"]$(function() { var canvas, linescape, xc1 = 200, zc1 = 600, xc2 = 700, zc2 = 150; canvas = $("#canvas").get(0); linescape = new LineScape(canvas); linescape.xres = 1; linescape.zres = 1; linescape.gety = function(x, z) { var x1 = xc1 - x; var z1 = zc1 - z; var dist1 = Math.sqrt(x1 * x1 + z1 * z1); var x2 = xc2 - x; var z2 = zc2 - z; var dist2 = Math.sqrt(x2 * x2 + z2 * z2); return this.ycenter + 200 + Math.sin(dist1 * 0.1) * 30 + Math.cos(dist2 * 0.02) * 35 + Math.random() - 0.5; } linescape.draw(); });[/php] Result.