Turning image into a spiral (canvas)

[meager finch]

Instead of filling the cells draw a centered line in each cell with variable thickness

[blissful anchor]

i never intended to fill the cells

[blissful anchor]

how would i take the center of a 5x5 cell?

[meager finch]

Ok... you might need to copy your canvas but with a cell-size of 1x1 then each line-center would be at px 3 + n * 5

[blissful anchor]

huh?

cell size is not 1x1

its 5x5

[meager finch]

To get the center you need to split the 5x5 cells, I'd say

[blissful anchor]

🤔

@ ChooKing

[meager finch]

As I have no idea how you calc in your canvas, assuming you use a variable "cellSize" and row/colls... just go to the cell and then - 3 to draw at the center of that cell. Can't explain petter

[obtuse condor]

Disregard my question. I just realized that you want to center it.

[meager finch]

I assume I didn't get task.
I had thought it would be about drawing a line and give this line a thickness relative to the pixel's darkness. So I thought of drawing a lune in each cell centered around the middle px, so 3

[obtuse condor]

There is a critical question not answered by the instructions. What color goes in the empty areas that have a thickness less than 5?

I examined the spiral image and I think that I understand the problem now. What you need to do is a spiral iteration of 5x5 blocks. Replace each block with a black rectangle on top of a 5x5 white rectangle. The black rectangle's dimensions depend on the direction of iteration in addition to the darkness of the cell. If you are iterating horizontally, then the black rectangle always has a width of 5 but the height depends on the darkness. If you are iterating vertically, then the black rectangle always has a height of 5 but the width depends on the darkness.

[meager finch]

Aaah... so it's not about drawing a centered line with adjusted thickness and the provided images group shows how it ~should~ look finally!

[blissful anchor]

if you look at the spiral image you can see that the thickness doesnt increase evenly on both sides, it only gets extruded from one side

[blissful anchor]

I asked the instructor and he says one way to do it is to represent 0-25% black shade (that means from white to some light-grey shades) with 1-pixel width lines, 25-50% with 2-pixel lines, etc.

[obtuse condor]

I don't understand. That looks even to me. If it wasn't even, then some edges would be slanted. I noticed that your screenshot includes more than one black rectangle. Maybe you are trying to compare the two thicker ones. It looks to me like the wider one is actually two adjacent cells of the same thickness and the narrower one is one cell.

[blissful anchor]

no i mean like this, it only increases thickness in one direction

[blissful anchor]

this is what i mean by even thickness

(sorry for late replies)

[obtuse condor]

That actually makes things easier. You don't have to calculate the center.

[blissful anchor]

i dont understand. when i do line.width = double, wont it increase in both ways?

[obtuse condor]

Barbwire's suggestion was to use a line. Mine was to use a rectangle. I specifically meant a filled rectangle. There is no thickness. There is a height, width, and the coordinates of the top left corner.

[blissful anchor]

yeah lets say when you increase rectangles width, it will expand in both left AND right

or both up AND down

[obtuse condor]

No. The coordinate of a rectangle is based on the top left corner. The width is always to the right of that and the height is always below that, unless you use negative values, but you have no reason to do that.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect

[blissful anchor]

but some of the cells will need to be colored like so

you cant do this with a single black rectangle

[obtuse condor]

Why?

[blissful anchor]

whenever it goes from up to right

changes from increasing upwards to right

[obtuse condor]

I see. The instructions don't explain what to do with corners.

[obtuse condor]

OK. Draw two black rectangles inside that 5x5 space.

[blissful anchor]

seems unnecessarily complicated

😩

[obtuse condor]

Is there a simpler solution?

[blissful anchor]

i wish i knew

[obtuse condor]

I can't prove it, but my instinct tells me that it's mathematically impossible for a simpler solution.

[blissful anchor]

one of the extra requirements (for bonus points) is to make it so it is circular

and not rectangular

with this method it would be impossible to do it

i was thinking about drawing a spiral line and 5 pixels at a time checking to which cell it corresponds to

and based on that increasing the width

but i dont know how to actually align it with the cells

[obtuse condor]

The math needed for the circular version would be complex. I don't think I even know the math well enough to help you if you wanted to try it. The shape itself won't be a rectangle. It also would not even be a perferct arc. It would be a slight deviation from an arc.

[blissful anchor]

yeah no shape wont be rectangle

[obtuse condor]

A segment of a spiral is not the same as a segment of a circle. It's mathematically a much more complex shape.

[blissful anchor]

do you still think this? 😓

[obtuse condor]

Yes. Make two black rectangles in the corners.

[blissful anchor]

okay

[meager finch]

Hmmm... the images you shared, the group with the 4, was that how it is expected to look?
Then I think you might just draw a rect per cell - like ChooKing suggested - and vary the heigth/width corresponding to the darkness you calculated in the task before.
You'd need to calculate with the real pixels inside the cell

[blissful anchor]

yeah bottom right is how final image should look

[meager finch]

I now made a spiral with random thickness per cell but all centered, I think It would need to shift the lines depending on thickness so the alway have the edge on the same level (top, right, bottom or left)
That's really an interesting challenge 😅
I'll have another look to morrow to fox this

[blissful anchor]

haha looks cool

looks like pipes

[blissful anchor]

I am also getting there

[blissful anchor]

Okay did it fully now

what a pain in the a$$

[meager finch]

great!!!! Congratulations!!!
Yes, it really is. TBH I HATE canvas 🙈 😅
The only thing I see with your spiral is that the corners don't match accurately. You might need to adjust the coords by 3 px in two direction-turns

[meager finch]

oh and the lines right from center seem to be all "black"

[blissful anchor]

oh yeah that pic is old

here is a random image

and here is my version

[meager finch]

Nice!!! You really made it. Congrats again!!! 🥳