sanex3339

Проблема по обоим вопросам была в $outputImage->flattenimages();
Как только убрал - стало все ок.

Читайте про типы данных, и посмотрите - в каком типе у вас возвращает значение document.getElementById('b').value.

Подсказка - не в том, в котором нужно сравнивать числовые значения.

На основе варианта Олег Матрозов'а накидал вот такой пример: https://jsfiddle.net/pvskwe2m/11/
Почти то, что надо, но в Firefox'е при таком подходе толщина линий между th получается в 2px, в хроме - как и должно быть - 1px.

Ну, вроде поправил.



Суть оказалась в том, что у меня итоговая картинка собирается из пассов (для каждого пикселя):
цвет поверхности, пасс - черно-белая маска прямого освещения, пасс прямого освещения (комбинированные 1-е 2 пасса), пасс ambient occlusion и пасс глобального освещения.

При расчете пасса глобального освещения у меня рекурсивно берутся данные глобального освещения за следующие итерации.

И тут крылся баг: если точка, для которой рассчитывалось освещение являлась источником света - я просто возвращал цвет источника (emission color), а надо было еще назначить в сооветствующие переменные пассов - необходимые цвета, т.к. данные переменных каждого пасса используются в предыдущих итерациях:

this.surfaceColor = intersection.getOwner().getMaterial().getEmission().getEmissionColor();
            this.lightSamplingColor = RGBColor.WHITE;
            this.ambientOcclusionColor = this.lightSamplingColor;
            this.globalIlluminationColor = this.surfaceColor;

            return this.surfaceColor;

Вот получившиеся рендеры с одинаковыми настройками:



Теперь бы еще понять - что за дурацкие разводы на сферах, которые имеют место с самых первых версий PathTracer'а.

Нашел решение с использованием CompletitionService.

executorService = Executors.newFixedThreadPool(threadsCount);
        completionService = new ExecutorCompletionService<>(executorService);

        for (int i = 0; i < threadsCount; i++) {
            completionService.submit(
                renderDataProvider.callback()
            );
        }

        while (true) {
            try {
                renderDataHandler.callback(
                    completionService.take()
                );
            } catch (ExecutionException | InterruptedException e) {
                e.printStackTrace();
            }

            completionService.submit(
                renderDataProvider.callback()
            );
        }

Проведите в Paint'е линию диагональную, вот по пикселям этой линии и должен двигаться шарик, ну а движение реализовывать через вектора (и только через них), как написал Александр Аксентьев.

загуглите фразу "javascript array diff". В первом же результате на StackOverflow будет реализация данной ф-ии.

У вас document.getElementById('str1') после клика помещается под курсор, соответственно, при втором клике на другом блоке клик проходит не по блоку а по document.getElementById('str1'), который находится под курсором.
https://jsfiddle.net/4paL37c1/

function makeArmy() {

  var shooters = [];

  for (var i = 0; i < 10; i++) {
    var shooter = function (i) {
        return function () {
            alert(i)
        }
    }(i);
    shooters.push(shooter);
  };

  return shooters;
}

var army = makeArmy();

army[0](); // 0
army[5](); // 5