Discuss Scratch

Pickynickel
Scratcher
23 posts

Grid snapping

I want a square grid snapping, my square is 47 x 47 square, i want it to grid snap, i cannot resize it because it has more than 1 costume, a very long time to figure it out



I used YouTube tutorials, but they did not work

The tutorials is here


when green flag clicked
forever
grid snap to (mouse-pointer v) :: motion
end
ItBeJC
Scratcher
1000+ posts

Grid snapping

forever
go to x: ((round ((mouse x) / (pixels))) * (pixels)) y: ((round ((mouse y) / (pixels))) * (pixels))
end
where pixels is the grid tile size. (for example, if pixels = 5 then the coordinates will snap to the nearest 5 pixels)

Last edited by ItBeJC (Feb. 3, 2025 07:41:34)

deck26
Scratcher
1000+ posts

Grid snapping

Some useful additional info to modify @ItBeJC's code.

For example if the value of pixels is 50 that gives values that are a multiple of 50. If your centres are at 25, 75, 125 etc you need to adjust the code. I always work with a few test values that are close to grid cell edges (in this case 49 and 51 should be in different cells, for example. That quickly leads us to something like

set x to ((([ceiling v] of  ((mouse x) / (pixels))) * (pixels)) - [25])  // ignoring y to keep it simple

If the 50 x 50 grid was centred on more awkward values like 15, 65, 115 etc you need to consider cells edges at 40 and 90 so the values from 39 and 41 should give different cells. This is just a more general case (the first example was a special case where we can use ceiling or floor instead of round). I still prefer to use floor or ceiling as it feels clearer than round when thinking things through. So in this case we've just moved the grid 10 cells left of the previous value so we modify to

set x to ((([ceiling v] of  (((mouse x) + [10]) / (pixels))) * (pixels)) - [35])  // note we correct both mousex and the constant changes
A quick test with the values 39 (result 15) and 41 (result 65) confirm we've got it right.

I probably prefer to use floor rather than ceiling which gives a rough equivalent

set x to ((([floor v] of  (((mouse x) + [10]) / (pixels))) * (pixels)) + [15])  // floor gives a cell one left of ceiling so we add 15 instead of subtracting 35

One of the main differences between using floor and ceiling is how you treat edge cases. If 40 is the actual line between cells and mouse x = 40 you can choose the cell to the right if you use floor or to the left if you use ceiling.

ItBeJC
Scratcher
1000+ posts

Grid snapping

deck26 wrote:

~Snip~

Thanks :p

Last edited by ItBeJC (Feb. 3, 2025 18:12:40)

theodorwscratcher
Scratcher
100+ posts

Grid snapping

You can use:

set x to ((nearest) * (round ((value) / (nearest)))
set y to ((nearest) * (round ((value) / (nearest)))

Or if you need an offset, you can use:

set x to (((nearest) * ([floor v] of ((value) / (nearest))::operators)) + (offset))
set y to (((nearest) * ([floor v] of ((value) / (nearest))::operators)) + (offset))

This should be enough for grid snapping.

Last edited by theodorwscratcher (Feb. 4, 2025 14:21:34)

Nolswit
Scratcher
100+ posts

Grid snapping

https://scratch.mit.edu/projects/1008415668/ This project of mine has a chess board with grid snap for the pieces. you can just expand the board and edit values to your liking

Powered by DjangoBB