Hi All!) It is necessary when loading the page to draw a Bezier curve. After it is drawn, it is necessary to change its coordinates smoothly so that the effect of "swimming" is

I attach a gif image, as it should be random

At this stage, achieved using svg drawing bezier curve.

http://jsfiddle.net/0mhkx4qd/

Tell me, how can you "force" it to move randomly along a given trajectory? Which steppe to move?

Thank!

    3 answers 3

    var canvas = document.createElement('canvas'); canvas.width = 500; canvas.height = 500; document.body.appendChild(canvas); var AMPLITUDE_START_VALUE = 50; var amplitude = AMPLITUDE_START_VALUE; var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(50, 400); context.bezierCurveTo(450,amplitude,200,100,200,20); context.stroke(); requestAnimationFrame(enterFrame) var object = { direction: 1, speed: .5 }; function change(){ object.direction *= -1; } function enterFrame(){ if(amplitude > 70|| amplitude < 50){ change(); } amplitude += object.speed * object.direction; canvas.width = canvas.width; requestAnimationFrame(enterFrame); context.moveTo(50, 400); context.bezierCurveTo(450,450,200,100,200,amplitude); context.stroke(); }

      I look at the GIF and I cannot understand the trajectory along which it moves.

      But in any case, there are a couple of ways to sanitize it, depending on the effects you need.

      1. Multiply the time dependent translation matrix by a random matrix , or substitute only the coordinates of the opron points in a function depending on time.
      2. The same, but not for the coordinates of the reference points but for the final coordinates. On gifke like the second method is used. Those. draw a curve in memory with a large discretization step. Then multiply each point by the desired matrix, interpolate and then draw the final frame.

        On the timer (see http://javascript.ru/setTimeout ) redraw the curve, smoothly changing the reference points.