Выявление изображения (p5.js)

Question

Я пытаюсь сделать что-то, где изображение постепенно раскрывается путем спирали. Я дошел до того, что смогу сделать так, чтобы оно имело цвета изображения, которое я использую, я могу получить его по спирали, но я не могу понять, как заставить его делать то и другое. Вот код, который я использую:

var img;
var ct = 0;
var pixColor;
function preload() {
    img = loadImage("test_image.png")
}

function draw() {
    //this makes it use the colors of the image
    for (var x = 0; x <= width; x++) {
        for (var y = 0; y <= height; y++) {
            pixColor = img.get(x,y);
        }
    }
    fill(pixColor[0],pixColor[1],pixColor(2));
    //this makes the image spiral
    ellipse(125+cos(ct)*frameCount/10,175+sin(ct)*frameCount/10,5)
    ct+=0.1;
}

Любая помощь будет оценена. Спасибо!

Answer 1

Я рекомендую разбить вашу проблему на более мелкие части. Начните с эскиза, который просто показывает путь спирали. Получите это работает отлично. Затем начните заново с нового эскиза, который просто показывает изображение с жестко заданными значениями точек или там, где находится мышь. Получите те, кто работает отлично, прежде чем вы думаете о их объединении.

Но если взглянуть на ваш код, этот раздел не имеет смысла:

for (var x = 0; x <= width; x++) {
    for (var y = 0; y <= height; y++) {
        pixColor = img.get(x,y);
    }
}
fill(pixColor[0],pixColor[1],pixColor[2]);

Здесь вы используете вложенный for Цикл, чтобы получить цвет каждого пикселя. Но вы на самом деле ничего не делаете с этим цветом до for петли завершены. Другими словами, pixColor будет только последний цвет, который он видел. Это не то, что вы хотите.

Вместо этого вы, вероятно, хотите получить цвет, который находится "под" текущей спиральной позицией. Вам не нужен for петля для этого вообще.

var x = 125 + cos(ct) * frameCount / 10;
var y= 175 + sin(ct) * frameCount / 10;
pixColor = img.get(x, y);
ellipse(x, y, 5);

Также обратите внимание, что так как вы звоните background() в каждом кадре вы увидите только один круг. Если это не то, что вам нужно (если вы хотите, чтобы спираль оставалась на экране в том виде, в котором она нарисована), подумайте о переносе вызова на background() быть внутри setup() функция.