Изменить цвет фона JavaScript-анимации холста

Question

Я нашел эту фантастическую HTML5-анимацию огня онлайн [кредит: iBasskung на YouTube] и пытаюсь понять, как сделать черный фон прозрачным. Я являюсь промежуточным JS-кодером, но кажется, что фон является частью огня и требует непрозрачности 0.

Я исследовал массив цветов и модуль рендеринга пламени, но я не вижу ни одного гексаили значения RGBA в любом месте.

Мысли о том, как вытащить черную БГ из самого пламени?

FIDDLE

// color array
for (i = 0; i < 32; ++i) {
    colors[i][2] = i << 1;
    colors[i + 32][0] = i << 3;
    colors[i + 32][2] = 64 - (i << 1);
    colors[i + 64][0] = 255;
    colors[i + 64][1] = i << 3;
    colors[i + 96][0] = 255;
    colors[i + 96][1] = 255;
    colors[i + 96][2] = i << 2;
    colors[i + 128][0] = 255;
    colors[i + 128][1] = 255;
    colors[i + 128][2] = 64 + (i << 2);
    colors[i + 160][0] = 255;
    colors[i + 160][1] = 255;
    colors[i + 160][2] = 128 + (i << 2);
    colors[i + 192][0] = 255;
    colors[i + 192][1] = 255;
    colors[i + 192][2] = 192 + i;
    colors[i + 224][0] = 255;
    colors[i + 224][1] = 255;
    colors[i + 224][2] = 224 + i;
  }

// render the flames
for (let y = skipRows; y < canvasHeight; ++y) {
  for (x = 0; x < canvasWidth; ++x) {
    index = y * canvasWidth * 4 + x * 4;
    let value = fire[(y - skipRows) * canvasWidth + x];

    data[index] = colors[value][0];
    data[++index] = colors[value][1];
    data[++index] = colors[value][2];
    data[++index] = 255;
  }
} 

Answer 1

Ключевым моментом здесь является понимание того, как установка / получение пикселей работает на холсте. И getImageData, и putImageData работают со значениями пикселей в одномерном массиве. Вы можете увидеть это в своем коде с массивом data:

// red value 0-255
data[index] = colors[value][0];

// green value 0-255
data[++index] = colors[value][1];

// blue value 0-255
data[++index] = colors[value][2];

// alpha value 0-255
data[++index] = 255;

Поскольку огонь имеет полное красное значение, близкое к 255, вы можете просто использовать красный канал для своей альфы.

// alpha value 0-255
data[++index] = colors[value][0];

Вот рабочая версия вашей скрипки:

https://jsfiddle.net/jq6urawb/