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.
WAW! impressive.
I’m on win7. it runs very smooth on FireFox, very very smooth on Chrome (like 15 sec faster than ff) and on safari iphone4 it says “SyntaxHighlighter, Can’t find brush for: php”
That’s pretty friggin cool…
Nice Tutorial! Thanks!
You’re a programming god.