CODEWITHSUNDEEP
javascripthtmlcanvas
jokul
jokul

Reputation: 1339

Translating pixels in canvas on sine wave

I am trying to create an image distortion effect on my canvas, but nothing appears to be happening. Here is my code:

self.drawScreen = function (abilityAnimator, elapsed) {
    if (!self.initialized) {
        self.initialized = true;
        self.rawData = abilityAnimator.context.getImageData(self.targetX, self.targetY, self.width, self.height);
        self.initialImgData = self.rawData.data;
    }
    abilityAnimator.drawBackground();
    self.rawData = abilityAnimator.context.getImageData(self.targetX, self.targetY, self.width, self.height);
    var imgData = self.rawData.data, rootIndex, translationIndex, newX;
    for (var y = 0; y < self.height; y++) {
        for (var x = 0; x < self.width; x++) {
            rootIndex = (y * self.height + x) * 4;
            newX = Math.ceil(self.amplitude * Math.sin(self.frequency * (y + elapsed)));
            translationIndex = (y * self.width + newX) * 4;
            imgData[translationIndex + 0] = self.initialImgData[rootIndex + 0];
            imgData[translationIndex + 1] = self.initialImgData[rootIndex + 1];
            imgData[translationIndex + 2] = self.initialImgData[rootIndex + 2];
            imgData[translationIndex + 3] = self.initialImgData[rootIndex + 3];
        }
    }
    abilityAnimator.context.putImageData(self.rawData, self.targetX, self.targetY);
};

abilityAnimator is a wrapper for my canvas object:

abilityAnimator.context = //canvas.context
abilityAnimator.drawBackground = function(){ 
    this.canvas.width = this.canvas.width; 
}

elapsed is simply the number of milliseconds since the animation began (elapsed is always <= 2000) My member variables have the following values:

self.width = 125;
self.height = 125;
self.frequency = 0.5;
self.amplitude = self.width / 4;
self.targetX = //arbitrary value within canvas
self.targetY = //arbitrary value within canvas

I can translate the image to the right very easily so long as there is no sine function, however, introducing these lines: 

newX = Math.ceil(self.amplitude * Math.sin(self.frequency * (y + elapsed)));
translationIndex = (y * self.width + newX) * 4;

Causes nothing to render at all. The translation indexes don't appear to be very strange, and the nature of the sinusoidal function should guarantee that the offset is no greater than 125 / 4 pixels.

Upvotes: 1

Views: 828

Answers (1)

GameAlchemist
GameAlchemist

Reputation: 19294

Your formula using sin is wrong, the frequency will be so high it will be seen as noise.
The typical formula to build a sinusoid is : 

res = sin ( 2 * PI * frequency * time ) ;

where frequency is in Hz and time in s. So in js that would translate to : 

res = Math.sin (  2 * Math.PI * f * time_ms * 1e-3 ) ;

you can obviously compute just once the constant factor :

 self.frequency = 0.5 * (  2 * Math.PI * 1e-3 );
 // then use
  res = Math.sin (  self.frequency * time_ms ) ;

So you see you were 1000 times too fast.

Second issue : Now that you have your time frequency ok, let's fix your spatial frequency : when multiplying time frequency by y, you're quite adding apples and cats.
To build the formula, think that you want to cross n time 2*PI during the height of the canvas.
So : 

spatialFrequency = ( n ) * 2 * Math.PI / canvasHeight ;

and your formula becomes : 

res = Math.sin (  self.frequency * time_ms + spatialFrequency * y ) ;

You can play with various values with this jsbin i made so you can visualize the effect :

http://jsbin.com/ludizubo/1/edit?js,output

enter image description here

Upvotes: 2

Related Questions