ripple游戏水波模拟_CANVAS 3D模拟动态水波

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var canvas = document.getElementById('canvas'),

ctx = canvas.getContext('2d'),

fps = 60,

fov = 200,

waveHeight = 15,

cols = 40,

rows = 40,

offsetX = 0,

offsetY = 0,

inc = 0.01,

mesh = [];

function resizeCanvas() {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight

}

function generateMesh() {

mesh = [];

var gridWidth = (canvas.width) / cols;

var gridHeight = (canvas.height) / rows;

var gridDepth = fov / rows;

for (var col = 0; col < cols; col++) {

for (var row = 0; row < rows; row++) {

mesh.push([{

x: col * gridWidth,

y: row * gridHeight + gridHeight,

z: fov - (row * gridDepth + gridDepth),

}, {

x: col * gridWidth,

y: row * gridHeight,

z: fov - (row * gridDepth),

}, {

x: col * gridWidth + gridWidth,

y: row * gridHeight,

z: fov - (row * gridDepth)

}]);

// Reflext

mesh.push([{

x: col * gridWidth + gridWidth,

y: row * gridHeight,

z: fov - (row * gridDepth)

}, {

x: col * gridWidth + gridWidth,

y: row * gridHeight + gridHeight,

z: fov - (row * gridDepth + gridDepth),

}, {

x: col * gridWidth,

y: row * gridHeight + gridHeight,

z: fov - (row * gridDepth + gridDepth),

}]);

}

}

}

function drawMesh() {

ctx.strokeStyle = 'steelblue';

ctx.fillStyle = 'rgba(150,200,220,0.2)';

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var m = 0; m < mesh.length; m++) {

var poly = mesh[m];

ctx.beginPath();

ctx.moveTo(poly[0].x, poly[0].y);

for (var p = 0; p < poly.length; p++) {

ctx.lineTo(poly[p].x, poly[p].y);

}

ctx.closePath();

ctx.stroke();

//ctx.fill();// This really impacts performance

}

}

function addNoise(offsetX, offsetY) {

// You could do all sorts of things to cause different motion

for (var m = 0; m < mesh.length; m++) {

var poly = mesh[m];

for (var p = 0; p < poly.length; p++) {

poly[p].y = poly[p].y + (waveHeight * noise((poly[p].x / 50) + offsetX, (poly[p].y / 50) + offsetY));

}

}

}

// Helper funtion for projection

function clip(x, w) {

return x - w / 2;

}

// Tihs is a little crude

function projectMesh() {

for (var m = 0; m < mesh.length; m++) {

var poly = mesh[m];

for (var p = 0; p < poly.length; p++) {

var scale = fov / (fov + poly[p].z);

poly[p].x = clip(poly[p].x, canvas.width) * scale + canvas.width / 2;

poly[p].y = clip(poly[p].y, canvas.height) * scale + canvas.height / 3;

}

}

}

function draw() {

// ToDo: inc should not be tied to framerate

offsetX += inc;

offsetY -= inc;

generateMesh(); // ToDo: Probably don't need to do this every frame

addNoise(offsetX, offsetY);

projectMesh();

drawMesh();

}

// Initialise and set frame rate.

(function() {

var now;

var then = Date.now();

var interval = 1000 / fps;

var delta;

function tick() {

now = Date.now();

delta = now - then;

if (delta > interval) {

then = now - (delta % interval);

draw();

}

requestAnimationFrame(tick);

}

window.addEventListener('resize', resizeCanvas, false);

resizeCanvas();

tick();

})();