Forum - Socoder

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|384\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> On Topic -> How do I rotate a array(tiles) in reverse?
Thu, 22 Jul 2021, 05:22
Pakz	How do I rotate a array(tiles) in reverse? For a sprite editor I was looking to create a function that rotates a selection by any angle. I have a working rotation but this loses cells in the grid. On stackexchange I think it was there was mention you should use a reverse rotation. Where you get the final rotated cells and from these find the cells from the original non rotated grid. I think I might be able to just copy the selected data into a image and rotate that and copy the pixels back, but maybe having the code that does it itself might be more flexible. Below is the cos and sin magic that rotates a grid right now. The grid is 32by32. The -16 is so it rotates from the center. float x2=(cos(angle)(x-16) - sin(angle)(y-16)); float y2=(sin(angle)(x-16) + cos(angle)(y-16)); --v How would I do a reverse rotation so there is no lost pixels? edit:There was mention of interpolation, but god knows what that is.
Thu, 22 Jul 2021, 05:54
Jayenkai	You more or less have it.. (Assuming I'm understanding your question correctly) Remove the floats, they're getting in the way.. Make it Floor(), so you get exact tile references. The trick to filling up the whole map is that for each x/y of the Rotation, you check the x/y of the mathematically worked out position on the original Tilemap. Fill up the whole Rotation that way, so that no tiles are empty. You will still lose some data, but that's just due to the small resolution. It's never going to be perfect. // Rotation of an Array // by Jayenkai (That rhymes!) // Created 2021/7/22 Symbol 0,"04_8/989!A89!A89!A89!A89!A89!A9A/"; Symbol 1,"05_Q/PQP!NQP!NQP!NQP!NQP!NQP!NPN/"; Symbol 2,"06_N/ONO!PNO!POP/N/ONO!PNO!POP/"; Dim Tiles(32,32) Dim Rotated(32,32) for x=0 to 31 for y=0 to 31 Tiles(x,y)=Rand(0,2) if Abs(x-16)<3 then Tiles(x,y)=2 if Abs(y-4)<3 then Tiles(x,y)=1 next next Border 30,30,80 Graphics 1024,1024,1 Repeat ango=1024/360 angle=Floor(MouseX()/ango) for x=0 to 31 for y=0 to 31 x2=Floor((cos(angle)(x-16) - sin(angle)(y-16)))+16 y2=Floor((sin(angle)(x-16) + cos(angle)(y-16)))+16 x2=Limit(x2,0,31) y2=Limit(y2,0,31) Rotated(x,y)=Tiles(x2,y2) if MouseDown then Rotated(x,y)=Tiles(x,y) DrawImg x32+16,y32+16,Rotated(x,y) next next Text 32,32,angle,1 Flip Forever --v -=-=- ''Load, Next List!''
Thu, 22 Jul 2021, 06:20
cyangames	Regarding interpolation, you could check each tile for a NULL or invalid value, then if found, do the following: 1: Look at the surrounding valid tiles values ( 1 up down, left , right and diagonals) 2: Total up the values in each of those valid tiles. 3: Divide it by the number of valid tiles. Then you should arrive at your interpolated tile value. -=-=- Web / Game Dev, occasionally finishes off coding games also!
Thu, 22 Jul 2021, 06:39
Pakz	Yours works different than mine. It might be something becouse of the radians in the c language? When I rotate a small rectangle in the center with yours it does not loose tiles. When I do it with mine there are blanks. I keep staring at it but am at a loss. raylib clanguage: #include "raylib.h" #include "math.h" // // float angle=0; // radians int main(void) { // Initialization //-------------------------------------------------------------------------------------- const int screenWidth = 800; const int screenHeight = 450; InitWindow(screenWidth, screenHeight, "raylib example."); // Put some tiles in the map.. int map[32][32] = {0}; for (int y = 0; y < 32; y++) { for (int x = 0; x < 32; x++) { map[x][y]=1; }} SetTargetFPS(60); // Set our game to run at 60 frames-per-second //-------------------------------------------------------------------------------------- // Main game loop while (!WindowShouldClose()) // Detect window close button or ESC key { // Update //---------------------------------------------------------------------------------- if(IsKeyDown(KEY_RIGHT)){ angle+=0.1; } if(IsKeyDown(KEY_LEFT)){ angle-=0.1; } //---------------------------------------------------------------------------------- // Draw //---------------------------------------------------------------------------------- BeginDrawing(); ClearBackground(RAYWHITE); int rotated[32][32]={0}; for(int y=0;y<32;y++){ for(int x=0;x<32;x++){ int x2=floor((cos(angle)(x-16) - sin(angle)(y-16)))+16; int y2=floor((sin(angle)(x-16) + cos(angle)(y-16)))+16; if(x2>-1 && y2>-1 && x2<32 && y2<32){ rotated[x2][y2]=map[x][y]; } } } for(int y=0;y<32;y++){ for(int x=0;x<32;x++){ if(rotated[x][y]!=0){ DrawRectangle(x16,y8,16,8,RED); } }} EndDrawing(); //---------------------------------------------------------------------------------- } // De-Initialization //-------------------------------------------------------------------------------------- CloseWindow(); // Close window and OpenGL context //-------------------------------------------------------------------------------------- return 0; } --v edit: I just missed rychan's comment. Wil be looking at that.
Thu, 22 Jul 2021, 07:02
Pakz	Ok, that interpolating seemed to be something I can use! It is like it is blurring the image if I think I understand it correctly? Not sure how I should do this with palette values. Maybe just pick one of the surrounding colors? edit: I think the palette color that is there most in the surrounding cells would be a candidate.
Thu, 22 Jul 2021, 07:32
Jayenkai	Your issue is with this line.. rotated[x2][y2]=map[x][y]; X2 and y2 are barely ever going to run through every single rotated tile. But X and Y DO run through every tile. Instead of passing through every unrotated tile, then approximating where it should go. And having spaces along the way... ... for every rotated tile, approximate where you're taking it from (do the maths bit) then take that, and place it into the rotated map every single tile. rotated[x][y]=map[x2][y2]; -=-=- ''Load, Next List!''
Thu, 22 Jul 2021, 07:47
Pakz	Yes! that solved it. Thanks!
Thu, 22 Jul 2021, 08:13
cyangames	Yeah, it's essentially blurring it. Can the palette values be converted into HEX or RGB? If so then you might be able to do a (best match / shortest distance from) other palette entries when converted to HEX or RGB. -=-=- Web / Game Dev, occasionally finishes off coding games also!
Thu, 22 Jul 2021, 17:00
shroom_monk	All this stuff comes down to signal processing, and thinking a bit more precisely about what the 2d array of numbers that is your sprite actually represents. It can seem a bit counter-intuitive at first to think about for traditional sprites, but those values in your array don't necessarily represent the 'entire' image - they're just 'samples' of the colour at a specific position. Typically you'll just take this to mean that the pixel at integer coordinates (x,y) just has a specific colour, and that's usually enough! But as soon as you want to scale or rotate the sprite, you have to consider how you sample the fractional coordinates. e.g. what is the colour at coordinates (10.5, 12.8) There are many different sampling methods, and no single one is the 'correct' choice - it depends what you're going for artistically. For example, say you zoom in on a sprite, and need to fill in the gaps 'between' pixels from your original image - what approach do you take? You could just pick the exact colour of the nearest neighbour to your fractional coordinates, and get the more traditional 'blocky' view as a result. Or you could interpolate between the nearest pixels to the fractional coordinates (e.g. by average the values), resulting in a more blurred result. When it comes to rotation, you have no choice but to sample fractional coordinates! Attempting to treat the original image as a set of discrete points, rotate those around, and then alias those back onto the pixel grid isn't going to work for exactly the reason Jay describes, hence why you need to go 'backwards' and sample the fractional positions directly. When doing that sampling, once again you could just pick the nearest neighbour colour (which is what Jay's code does) or use interpolation to sample 'between' the raw colours and get something smoother. The nearest neighbour approach is likely to look blockier and may have weird artefacts depending on the angle (especially if scaling is also involved), but won't give you any colours not in your original image. Interpolation is likely to look cleaner as it plays much better with how your eye works, but will give you colours not in your original image. The choice of which to use is pretty much just one of artistic preference. Anyway, this is pretty much just me repackaging what others have already said in slightly more technical terms (and poorly, at that - it's late, it's too warm, and this really needs some diagrams to make much sense), but it can be useful (and interesting!) to think about when writing code to transform images like this. The wider internet almost certainly has better resources on signal processing and sampling (though naturally the wikipedia articles tend to be quite dense and jargon strewn!). -=-=- A mushroom a day keeps the doctor away... Keep It Simple, Shroom!

How do I rotate a array(tiles) in reverse?