Trying to use spirals to show an image in p5.js

Question

I have an image which I am trying to show using a spiral with varying thickness depending upon the image pixel. But the thickness of my line/ellipses in spiral is not coming out correctly.

The image I am using:

The image I am getting

As you can see for whatever reason the bottom right quadrant is getting thick and nothing else, this is happening even if I use other images.

My code:

FG = '#222323';
BG = '#f0f6f0';

function preload() {    
    Img = loadImage('black.png');
}


function setup() {
    createCanvas(500, 500);
    Img.resize(500, 500);
    background(BG);
    fill(FG);
    colorMode(HSB, 255);
    noLoop();
    noStroke(); 
}

function draw() {   
    var r = width;
    var a = 0;
    while (r > 1) {
        strokeWeight(1);
        var x1 = r * cos(a);
        var y1 = r * sin(a);
        
        a += 0.01;
        r -= 0.03;
        
        var x2 = r * cos(a);
        var y2 = r * sin(a);
        
        let c = Img.get(x1, y1);
        let b = brightness(c);
        const val = map(b, 0, 255, 1, 10);
        
        push();
        translate(width/2, height/2);
        ellipse(x1, y1, val, val);
        pop();
    }
}

Answer 1

The coordinates where you're sampling from aren't the same where you're rendering.

Because you use translate(), the ellipses themselves are offset based on the centre (but there's nothing changing where you're sampling from in the image (x1,y1).

You can offset x1,y1 to take the centre of the stage into account and then you sample from the right location (and draw offset to the centre):

FG = '#222323';
BG = '#f0f6f0';

function preload() {    
    // Img = loadImage('black.png');
  Img = loadImage('data:image/png;base64,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');
}


function setup() {
    createCanvas(500, 500);
    Img.resize(500, 500);
    background(BG);
    fill(FG);
    colorMode(HSB, 255);
    noLoop();
    noStroke(); 
}

function draw() {   
    var r = width;
    var a = 0;
    
    const centerX = width * 0.5;
    const centerY = height * 0.5;
    
    while (r > 1) {
        
        var x1 = centerX + (r * cos(a));
        var y1 = centerX + (r * sin(a));
        
        a += 0.01;
        r -= 0.03;
        
        let c = Img.get(x1, y1);
        let b = brightness(c);
        const val = map(b, 0, 255, 1, 10);
        
      ellipse(x1, y1, val, val);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>

(Notice the central area where the source image has a black circle is what based on your mapping. You can reverse that as well if that's more interesting (const val = map(b, 0, 255, 10, 1);))