我正在寻找一种方法，在网页上拍摄图像或图像的一部分，并渲染此或类似的动画效果，其中图像为“波浪形”。例子:

“灵”区:



袍区 :



袍区 :



最好我想参数化地控制波的速度和调制。

对我来说，它看起来像是某种置换贴图。我想过使用片段着色器 threejs\seriously.js或使用 Canvas 元素来实现相同的图像处理，但我不确定要使用的算法。

实现这一目标的方法是什么？

最佳答案

振荡器和位移

您可以通过将振荡器与网格结合使用来解决此问题。网格中的每条线都是振荡的，线之间的差异用于置换图像的一部分。

在我看来，最简单的方法是首先创建一个振荡器对象。它可以是非常基本的，但重点是对象可以被实例化，并且它在本地跟踪当前值。

第 1 步:振荡器对象

function Osc(speed) {

    var frame = 0;                           // pseudo frame to enable animation

    this.current = function(x) {             // returns current sinus value
        frame += 0.005 * speed;              // value to tweak..
        return Math.sin(frame + x * speed);
    };
}

function Osc(speed) {

  var frame = 0;

  this.current = function(x) {
    frame += 0.005 * speed;
    return Math.sin(frame + x * speed);
  };
}

var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    w = canvas.width,
    h = canvas.height;

var o1 = new Osc(0.05), // oscillator 1
    o2 = new Osc(0.03), // oscillator 2
    o3 = new Osc(0.06); // oscillator 3

(function loop() {
  ctx.clearRect(0, 0, w, h);
  for (var y = 0; y < h; y++) {
    ctx.fillRect(w * 0.25 + o1.current(y * 0.2) * 10, y, 1, 1);
    ctx.fillRect(w * 0.50 + o2.current(y * 0.2) * 10, y, 1, 1);
    ctx.fillRect(w * 0.75 + o3.current(y * 0.2) * 10, y, 1, 1);
  }
  requestAnimationFrame(loop);
})();

<canvas width=230 height=250></canvas>

// initial static values representing the grid line positions:
var w = canvas.width, h = canvas.height,
    x0 = 0, x1 = w * 0.25, x2 = w * 0.5, x3 = w * 0.75, x4 = w;

// absolute positions for wavy lines
var lx1 = x1 + o1.current(y*0.2);  // 0.2 is arbitrary and tweak-able
var lx2 = x2 + o2.current(y*0.2);
var lx3 = x3 + o3.current(y*0.2);

// calculate each segment's width
var w0 = lx1;        // - x0
var w1 = lx2 - lx1;
var w2 = lx3 - lx2;
var w3 =  x4 - lx3;

var img = new Image();
img.onload = waves;
img.src = "//i.imgur.com/PwzfNTk.png";

function waves() {

  var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    w = canvas.width,
    h = canvas.height;

  ctx.drawImage(this, 0, 0);

  var o1 = new Osc(0.05), o2 = new Osc(0.03), o3 = new Osc(0.06),
      x0 = 0, x1 = w * 0.25, x2 = w * 0.5, x3 = w * 0.75, x4 = w;

  (function loop() {
    ctx.clearRect(0, 0, w, h);
    for (var y = 0; y < h; y++) {

      // segment positions
      var lx1 = x1 + o1.current(y * 0.2) * 3; // scaled to enhance demo effect
      var lx2 = x2 + o2.current(y * 0.2) * 3;
      var lx3 = x3 + o3.current(y * 0.2) * 3;

      // segment widths
      var w0 = lx1;
      var w1 = lx2 - lx1;
      var w2 = lx3 - lx2;
      var w3 = x4 - lx3;

      // draw image lines ---- source ----   --- destination ---
      ctx.drawImage(img, x0, y, x1     , 1,  0        , y, w0, 1);
      ctx.drawImage(img, x1, y, x2 - x1, 1,  lx1 - 0.5, y, w1, 1);
      ctx.drawImage(img, x2, y, x3 - x2, 1,  lx2 - 1  , y, w2, 1);
      ctx.drawImage(img, x3, y, x4 - x3, 1,  lx3 - 1.5, y, w3, 1);
    }
    requestAnimationFrame(loop);
  })();
}

function Osc(speed) {

  var frame = 0;

  this.current = function(x) {
    frame += 0.002 * speed;
    return Math.sin(frame + x * speed * 10);
  };
}

<canvas width=230 height=300></canvas>

When a canvas or CanvasRenderingContext2D object is drawn onto itself, the drawing model requires the source to be copied before the image is drawn, so it is possible to copy parts of a canvas or scratch bitmap onto overlapping parts of itself.

var img = new Image();
img.onload = waves;
img.src = "//i.imgur.com/nMZoUok.png";

function waves() {
  var canvas = document.querySelector("canvas"),
      ctx = canvas.getContext("2d"),
      w = canvas.width,
      h = canvas.height;

  ctx.drawImage(this, 0, 0);

  var o1 = new Osc(0.05), o2 = new Osc(0.03), o3 = new Osc(0.06),  // osc. for vert
      o4 = new Osc(0.08), o5 = new Osc(0.04), o6 = new Osc(0.067), // osc. for hori
      
      // source grid lines
      x0 = 0, x1 = w * 0.25, x2 = w * 0.5, x3 = w * 0.75, x4 = w,
      y0 = 0, y1 = h * 0.25, y2 = h * 0.5, y3 = h * 0.75, y4 = h,
      
      // cache source widths/heights
      sw0 = x1, sw1 = x2 - x1, sw2 = x3 - x2, sw3 = x4 - x3,
      sh0 = y1, sh1 = y2 - y1, sh2 = y3 - y2, sh3 = y4 - y3,
      
      vcanvas = document.createElement("canvas"),  // off-screen canvas for 2. pass
      vctx = vcanvas.getContext("2d");

  vcanvas.width = w; vcanvas.height = h;           // set to same size as main canvas

  (function loop() {
    ctx.clearRect(0, 0, w, h);
    
    for (var y = 0; y < h; y++) {

      // segment positions
      var lx1 = x1 + o1.current(y * 0.2) * 2.5,
          lx2 = x2 + o2.current(y * 0.2) * 2,
          lx3 = x3 + o3.current(y * 0.2) * 1.5,

          // segment widths
          w0 = lx1,
          w1 = lx2 - lx1,
          w2 = lx3 - lx2,
          w3 =  x4 - lx3;

      // draw image lines
      ctx.drawImage(img, x0, y, sw0, 1, 0        , y, w0      , 1);
      ctx.drawImage(img, x1, y, sw1, 1, lx1 - 0.5, y, w1 + 0.5, 1);
      ctx.drawImage(img, x2, y, sw2, 1, lx2 - 0.5, y, w2 + 0.5, 1);
      ctx.drawImage(img, x3, y, sw3, 1, lx3 - 0.5, y, w3 + 0.5, 1);
    }

    // pass 1 done, copy to off-screen canvas:
    vctx.clearRect(0, 0, w, h);    // clear off-screen canvas (only if alpha)
    vctx.drawImage(canvas, 0, 0);
    ctx.clearRect(0, 0, w, h);     // clear main (onlyif alpha)

    for (var x = 0; x < w; x++) {
      var ly1 = y1 + o4.current(x * 0.32),
          ly2 = y2 + o5.current(x * 0.3) * 2,
          ly3 = y3 + o6.current(x * 0.4) * 1.5;

      ctx.drawImage(vcanvas, x, y0, 1, sh0, x, 0        , 1, ly1);
      ctx.drawImage(vcanvas, x, y1, 1, sh1, x, ly1 - 0.5, 1, ly2 - ly1 + 0.5);
      ctx.drawImage(vcanvas, x, y2, 1, sh2, x, ly2 - 0.5, 1, ly3 - ly2 + 0.5);
      ctx.drawImage(vcanvas, x, y3, 1, sh3, x, ly3 - 0.5, 1,  y4 - ly3 + 0.5);
    }

    requestAnimationFrame(loop);
  })();
}

function Osc(speed) {

  var frame = 0;

  this.current = function(x) {
    frame += 0.002 * speed;
    return Math.sin(frame + x * speed * 10);
  };
}

html, body {width:100%;height:100%;background:#555;margin:0;overflow:hidden}
canvas {background:url(https://i.imgur.com/KbKlmpk.png);background-size:cover;height:100%;width:auto;min-height:300px}

<canvas width=230 height=300></canvas>

关于javascript - 如何重新创建此 "wavy"图像效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29586754/