Canvas smoke particles not moving

Question

I am building a fancy easteregg for our internal application. Therefor I have an image 'riding' through the screen. To enhance fancyness I want to add smoke to the vehicle that follows the graphic.

For the smoke I implemented a modified version of this pen: http://codepen.io/CucuIonel/pen/hFJlr

Here's the result: http://jsfiddle.net/vc2d08bt/4/

The important codesnippets (as I guess) can be found in the fiddle, search for:

setInterval(function () {
    position.x = $('#crystalship_exhaust').offset().left;
    position.y = $('#crystalship_exhaust').offset().top;
}, 100);

Since the pen binds the smoke to the cursors offset, I tried binding it to a span "inside" the vehicle, to follow. But the Smoke is growing in both X-directions and is not even close to follow the vehicle.

What am I doing wrong here? I am not very familiar with canvas but thankfull for any help.

Thanks in advance!

Answer 1

I've added the movement to the car with smoke going out of the exhaust. On mouse move the travels across the screen but this is easily changeable if you'd like it. I changed the emotion direction of the partials to Y instead of X so it goes backwards and moved the image of the car with the emitter.

http://codepen.io/anon/pen/JYapqr

Javascript :

var canvas = document.createElement('canvas');
var w = canvas.width = 1200,
    h = canvas.height = 700;
var c = canvas.getContext('2d');

var img = new Image();

//Added a new Car Image

var car = new Image();
img.src = 'http://oi41.tinypic.com/4i2aso.jpg';

//And set it's src property

car.src = 'https://openmerchantaccount.com/img2/crystalship.png';

//Set the starting positions to -car length so it doesn't just appear on screen

var position = {x : -250, y : h/2};

document.body.appendChild(canvas);

var particles = [];
var random = function(min, max){
  return Math.random()*(max-min)*min;
};

function Particle(x, y){
  this.x = x;
  this.y = y;

//Changed the direction of the partial to go right, not up.

  this.velX = -2;
  this.velY = (random(1, 10)-5)/10;
  this.size = random(3, 5)/10;
  this.alpha = 1;
  this.update = function(){
    this.y += this.velY;
    this.x += this.velX;
    this.velY *= 0.99;
    if(this.alpha < 0)
      this.alpha = 0;
    c.globalAlpha = this.alpha;
    c.save();
    c.translate(this.x, this.y);
    c.scale(this.size, this.size);

    c.drawImage(img, -img.width/2, -img.height/2);
    c.restore();
    this.alpha *= 0.96;
    this.size += 0.02;//
  };
}

var draw = function(){

//To animate movement, on draw move the position 2px to the right

  position.x+=2;
  position.y;

//If the car reaches the end I just move it back to the start

  if(position.x+250>w){
    position.x=-250;
  }

  var p = new Particle(position.x, position.y);
  particles.push(p);
  while(particles.length > 500) particles.shift();

  c.globalAlpha = 1;
  c.fillStyle = '#000';
  c.fillRect(0,0,w,h);

//Draw the image back on screen

  c.drawImage(car, position.x,position.y-80,250,100);
  for(var i = 0; i < particles.length; i++)
  {
    particles[i].update();
  }
};

setInterval(draw, 1000/60);