6

I’m looking for a way to create a wave in a shape designed in canvas. After much research I found something that is pretty close to what I want:

var c = document.getElementById('c'),
  ctx = c.getContext('2d'),
  cw = c.width = window.innerWidth,
  ch = c.height = window.innerHeight,
  points = [],
  tick = 0,
  opt = {
    count: 5,
    range: {
      x: 20,
      y: 80
    },
    duration: {
      min: 20,
      max: 40
    },
    thickness: 10,
    strokeColor: '#444',
    level: .35,
    curved: true
  },
  rand = function(min, max) {
    return Math.floor((Math.random() * (max - min + 1)) + min);
  },
  ease = function(t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t + b;
    return -c / 2 * ((--t) * (t - 2) - 1) + b;
  };

ctx.lineJoin = 'round';
ctx.lineWidth = opt.thickness;
ctx.strokeStyle = opt.strokeColor;

var Point = function(config) {
  this.anchorX = config.x;
  this.anchorY = config.y;
  this.x = config.x;
  this.y = config.y;
  this.setTarget();
};

Point.prototype.setTarget = function() {
  this.initialX = this.x;
  this.initialY = this.y;
  this.targetX = this.anchorX + rand(0, opt.range.x * 2) - opt.range.x;
  this.targetY = this.anchorY + rand(0, opt.range.y * 2) - opt.range.y;
  this.tick = 0;
  this.duration = rand(opt.duration.min, opt.duration.max);
}

Point.prototype.update = function() {
  var dx = this.targetX - this.x;
  var dy = this.targetY - this.y;
  var dist = Math.sqrt(dx * dx + dy * dy);

  if (Math.abs(dist) <= 0) {
    this.setTarget();
  } else {
    var t = this.tick;
    var b = this.initialY;
    var c = this.targetY - this.initialY;
    var d = this.duration;
    this.y = ease(t, b, c, d);

    b = this.initialX;
    c = this.targetX - this.initialX;
    d = this.duration;
    this.x = ease(t, b, c, d);

    this.tick++;
  }
};

Point.prototype.render = function() {
  ctx.beginPath();
  ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
  ctx.fillStyle = '#000';
  ctx.fill();
};

var updatePoints = function() {
  var i = points.length;
  while (i--) {
    points[i].update();
  }
};

var renderPoints = function() {
  var i = points.length;
  while (i--) {
    points[i].render();
  }
};

var renderShape = function() {
  ctx.beginPath();
  var pointCount = points.length;
  ctx.moveTo(points[0].x, points[0].y);
  var i;
  for (i = 0; i < pointCount - 1; i++) {
    var c = (points[i].x + points[i + 1].x) / 2;
    var d = (points[i].y + points[i + 1].y) / 2;
    ctx.quadraticCurveTo(points[i].x, points[i].y, c, d);
  }
  ctx.lineTo(-opt.range.x - opt.thickness, ch + opt.thickness);
  ctx.lineTo(cw + opt.range.x + opt.thickness, ch + opt.thickness);
  ctx.closePath();
  ctx.fillStyle = 'hsl(' + (tick / 2) + ', 80%, 60%)';
  ctx.fill();
  ctx.stroke();
};

var clear = function() {
  ctx.clearRect(0, 0, cw, ch);
};

var loop = function() {
  window.requestAnimFrame(loop, c);
  tick++;
  clear();
  updatePoints();
  renderShape();
  //renderPoints();
};

var i = opt.count + 2;
var spacing = (cw + (opt.range.x * 2)) / (opt.count - 1);
while (i--) {
  points.push(new Point({
    x: (spacing * (i - 1)) - opt.range.x,
    y: ch - (ch * opt.level)
  }));
}

window.requestAnimFrame = function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(a) {
    window.setTimeout(a, 1E3 / 60)
  }
}();

loop();
canvas {
  display: block;
}
<canvas id="c"></canvas>

http://codepen.io/jackrugile/pen/BvLHg

The problem is that the movement of the wave appears a bit unreal. I'd like to keep this notion of random motion and not have a shape that repeats itself by moving from left to right but it will be great if I found a way to create a ‘realistic’ water movement (good fluid dynamics, collisions of this wave with the edges of its container (custom shape)).

I think I'm asking a lot but ... A small line of research could help :)

1
  • There's a LOT of of possible solutions to this, from something the link you gave, to actual attempts to solve Navier–Stokes equations under certain constraints (just look for WebGL fluid solvers for some examples for using a canvas with WebGL). It's not entirely clear from your question which would be better for you, but those solvers are a whole area unto their own and require a lot of processing horsepower, so, it kinda depends on what resources you want to dedicate to that and just how "real" you need it to be.
    – JayC
    Nov 6, 2013 at 6:18

3 Answers 3

20

Interference

You can make a more realistic wave using interference.

  • Have one big wave (swell) running slowly with a big motion
  • Have another one or two smaller sine waves running (oscillators)
  • All with random amplitudes
  • Mix the waves horizontally using average and calculate the various points
  • Draw the result using a cardinal spline (or if the resolution is high you can just draw simple lines between the points instead).

Use various parameters so you can adjust it live to find a good combination.

You can also add oscillators to represent the z axis to make it more realistic in case you want to layer the waves to make a pseudo-3D wave.

Example

I cannot give you wave collision, fluid dynamics - that would be a bit too broad for SO but I can give you a fluid-ish wave example (as you have the point of each segment you can use that for collision detection).

And example would be to create an oscillator object which you could set the various settings on such as amplitude, rotation speed (phase) etc.

Then have a mixer function which mixes the result of these oscillators that you use.

Live demo here (full-screen version here)

Demo snapshot

The oscillator object in this demo look like this:

function osc() {

    /// various settings        
    this.variation = 0.4;  /// how much variation between random and max
    this.max       = 100;  /// max amplitude (radius)
    this.speed     = 0.02; /// rotation speed (for radians)

    var me  = this,        /// keep reference to 'this' (getMax)
        a   = 0,           /// current angle
        max = getMax();    /// create a temp. current max

    /// this will be called by mixer
    this.getAmp = function() {

        a += this.speed;   /// add to rotation angle

        if (a >= 2.0) {    /// at break, reset (see note)
            a = 0;
            max = getMax();
        }

        /// calculate y position
        return max * Math.sin(a * Math.PI) + this.horizon;
    }

    function getMax() {
        return Math.random() * me.max * me.variation +
               me.max * (1 - me.variation);
    }

    return this;
}

This do all the setup and calculations for us and all we need to do is to call the getAmp() to get a new value for each frame.

Instead of doing it manually we can use a "mixer". This mixer allows us to add as many oscillators we want to the mix:

function mixer() {

    var d = arguments.length,  /// number of arguments
        i = d,                 /// initialize counter
        sum = 0;               /// sum of y-points

    if (d < 1) return horizon; /// if none, return

    while(i--) sum += arguments[i].getAmp(); /// call getAmp and sum

    return sum / d + horizon;  /// get average and add horizon
}

Putting this in a loop with a point recorder which shifts the point in one direction will create a fluid looking wave.

The demo above uses three oscillators. (A tip in that regard is to keep the rotation speed lower than the big swell or else you will get small bumps on it.)

NOTE: The way I create a new random max is not the best way as I use a break point (but simple for demo purpose). You can instead replace this with something better.

3
  • Hello! Thank you very much for your help! This is 99% perfect! Ken, your example of the wave is exactly what I want to do but I would like it to be smoother. Currently we see a slight effect of aliasing and I cant find a way to fix it... (i.imgur.com/0LLh1bp.png) Would you have an idea? Please.
    – Antoine
    Nov 6, 2013 at 15:52
  • 1
    @Antoine try now. I used integer types arrays instead of floating points. I updated the fiddle to just use regular arrays.
    – user1693593
    Nov 6, 2013 at 21:19
  • Hi! It's P-E-R-F-E-C-T, you are awesome men ! Thanks a lot :)
    – Antoine
    Nov 8, 2013 at 8:06
14

Since you are searching for a realistic effect, best idea might be to simulate the water. It is not that hard, in fact : water can be nicely enough approximated by a network of springs linked together.

Result is quite good, you can find it here : http://jsfiddle.net/gamealchemist/Z7fs5/

enter image description here

So i assumed it was 2D effect and built an array holding, for each point of a water surface, its acceleration, speed, and position. I store them in a single array, at 3*i + 0, 3*i + 1, and 3*i+2.
Then on each update, i simply apply newton's laws with elasticity, and with some friction to get the movement to stop.
I influence each point so it goes to its stable state + get influenced by its right and left neighboor.
(If you want smoother animation, use also i-2 and i+2 points, and lower kFactor.)

var left = 0, y = -1;
var right = water[2];
for (pt = 0 ; pt < pointCount; pt++, i += 3) {
    y = right;
    right = (pt < pointCount - 1) ? water[i + 5] : 0;
    if (right === undefined) alert('nooo');
    // acceleration
    water[i] = (-0.3 * y + (left - y) + (right - y)) * kFactor - water[i + 1] * friction;
    // speed
    water[i + 1] += water[i] * dt;
    // height
    water[i + 2] += water[i + 1] * dt;
    left = y;
}

The draw is very simple : just iterate though the points and draw. But it's hard to get a smooth effect while drawing, since it's hard to have bezier and quadraticCurve to have their derivates match. I suggested a few drawing methods, you can switch if you want.

Then i added rain, so that the water can move in a random way. Here it's just very simple trajectory, then i compute if there's collision with the water, and, if so, i add some velocity and shift the point.

2
  • Very impressive implementation. May 21, 2016 at 6:25
  • Mind blown! Thanks a lot :)
    – ShellZero
    Jun 1, 2017 at 23:38
2

I'd like to create a ‘realistic’ water movement with good fluid dynamics, collisions of this wave with the edges of a custom container..

Oh boy.. That is quite a mouthful. You should probably ask your Question here: gamedev.stackexchange

Anyways, have you tried to program any sort of wave yet, or are you just looking for WaveCreator.js ?

Go and Google some Non-language-specific Guides on how to create 2D water.

If you are a beginner, then start with something simple to get the idea behind things. How about creating a bunch of Boxes for "minecraft-style" water ?

enter image description here

Here every "line" of water could be represented as a position in an Array. Then loop through it and set the "height" of the water based on the previous Array Index. (You could smooth the water out by either making the blocks very thin (More work for your program!) or by smoothing out the edges and giving them an angle based on the other Squares.

I think this could be a neat solution. Anyhow. Hope that gave you some ideas.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.