Rotation without rotating.
Вставка
- Опубліковано 7 бер 2024
- Check out Jane Street's excellent Academy of Math and Programming (AMP). bit.ly/3T6gc3n
Jane Street has put together a fun logic puzzle to get folks excited about the AMP program. You don’t need to complete the puzzle to apply - it’s just something fun to get you thinking! Check it out: bit.ly/sum-amp
Here are Andrew Taylors slides on "Rotation with three shears". I saw him give this talk at the MathsJam Gathering 2023. The proof is on page 4. github.andrewt.net/shears/
This is a nice introduction to the concept: cohost.org/tomforsyth/post/89...
Way more details on the maths behind rotating with shears here: www.ocf.berkeley.edu/~fricke/...
Oh dang my book: mathsgear.co.uk/collections/b...
Huge thanks to my Patreon supporters. They spin me right round, baby, right round, like a record, baby, right round^3. / standupmaths
CORRECTIONS
- None yet, let me know if you spot anything!
Filming by Alex Genn-Bash
Editing by Dan Daniel
Written and performed by Matt Parker
Graphics by Matt Parker and Andrew Taylor
Produced by Nicole Jacobus
Music by Howard Carter
Design by Simon Wright and Adam Robinson
MATT PARKER: Stand-up Mathematician
Website: standupmaths.com/ - Розваги
A different problem happened when scientists first tried to watch the earth rotate for 24 straight hours. They got super tired...so they called it a day.
Wow this comment has only 5 likes when I found it
@@BeastGamerSoumya and 42 when I found it
@@YeshwanthReddy dang
82 now, will make it 83
88. That's bad, maybe?
Perfect example of a Parker Rotation
Yes!
Just hopping onto what will inevitably be the top comment
At this rate, Matt will be recognized across history as the one to have most math things named after him.
What a time to be alive!
Pretty close to a Lorenz transformation, which is the hyperbolic analogue of rotation.
@@andrewkepert923 You mean the Parker Lorenz transformation?
Oh, Mr.Parker Square. At 9:37 you note they have to be multiplied in the correct order, but then mistakenly ordered them ABC instead of CBA! In the end it doesn't change the result because C=A. However when you have the position vector on the right, the matrices right to left are the steps applied to the position. So your example shows the last skew (C) being done first, and the first skew (A) being done last.
Yeah, what I was thinking since if the operations happen A -> B -> C then it would look like C( B ( Ax) ). Thanks for pointing it out, I went in the comments to check if someone else mentioned it or if I was the one who was wrong.
Also, somehow the bot account that copied your comment got more likes than you ¯\_(ツ)_/¯
IIRC this also depends on if your matrices are row or column major, and if your vector is interpreted as a row or column.
There's consistent conventions for both of these, but *of course* graphics and math ended up with *different* consistent conventions, making everything unnecessarily confusing.
Yes, I just commented on the same issue. In this case, A=C, so the result is the same but it is not helpful for those just learning matrix algebra to see those transforms in the reverse of the correct order.
I came to the comments just for this. I tried doing the matrix multiplication in my head and was surprised by the order Matt put the matrices in.
@@SimonBuchanNz There's just one math convention for this. You take the dot product of the row vectors of the matrix on the left by the column vectors of the matrix on the right. AFAIK, this convention is international.
The row or column major thing is just an implementation detail of how the matrices are stored in memory and depends on the programming language (Fortran is part of the minority that chose column major). But that doesn't change the math at all. It might merely change the performance of matrix multiplication for large enough matrices.
@@Ceelvain yeah, I meant the math convention is opposite to the graphics convention, IIRC. What I meant about the row vs column major thing was more about if you mess it up, you end up transposing the matrix which also has the effect of reversing the order. And the graphics example matrices for translation, perspective etc are transposed from the math geometry.
It's all very confusing to me.
Next video: "Someone improved my skew code by 40,832,277,770%"
Misinformation.
Finally someone calls out low-res art for defying the pixel grid!
I literally screamed in the shower while watching this, excited that someone else realized that modern low-res games try to rotate objects outside of that pixel grid was WRONG!
YES ikr!? this has always bugged me so much. it's not even hard to do in code!! i can understand when it's a web theme or something, because browsers do a lot of shenanigans, but games and pixel art have no excuse!
I'm from the 8-bit days and I approve of it these days though I hated it back in the day when there was fake pixel art made without computers or any understanding of grids and rasters and pixels.
we will correct this now. it has gotten so bad that some old games that use oversized pixels in their big arts have made me doubt if i was playing a real title or an indie game
to be fair i think it looks nicer if they double the resolution then rotate it regularly because then they get the rotation they want instead of something close to it for low res images
14:25 The hand waving rationalization of "This is fine." after successful completion of a perfect "Parker Rotation."
Funny he didn't realize it's not a square.
@@TheBlacktom It's as square a square could be given the imprecision
@@nsf001-3the point they’re making is that the physical model on the table (where he mistakenly inverted one of the skews) is literally not a rotation
The virtual Lego model that he overlaid in post is correct. Yes, not a “perfect” square, but very close because he performed a proper “rotation” (via 3 specific skews)
But if you invert the direction of any one skew, you will get something that looks nothing like a square (see the physical table model), because those particular 3 skews no longer equal a rotation
And funny he, a mathematician, got this wrong. 3:51
Crazy that the day after this video released, SethBling released a video where skew rotation was actually useful and integral to his project
this^
i had a massive sense of dejavu when sethbling started talking about block entities.
Was looking for this comment!
That's incredible! Thanks for that. I'm back from that video. Insane timing considering how they're exactly the same. I think it's interesting how pointless knowledge often becomes useful to someone later
I was chipping away at a tool for rendering the signed distance functions of shapes in Blender when I ran into trouble with rotation. Little did I know, this treasure of a video had just been uploaded two hours ago and recommended to me by pure chance! It's exactly what I needed, my shapes are rotating perfectly, and you've definitely earned my subscription with this. Thank you so much!
Couldn’t you just use the Mapping node on the input vector?
@@palmberry5576Probably, but having my own solution means I'll be able to more easily do stuff like work with rendering 4D visuals in the future.
Back in oldschool microsoft paint, you weren't able to rotate stuff, so instead i eyeballed it with 2 skews. Even back then i recall thinking there's probably a perfect way to do it, i just didn't know it. So yea i'm prety much the exact person this video is made for.
How do yo skew in og paint?
@@naga540with the scew function
I like how your brain works. Is it a special kind of brain?
P.s. I used old-school paint to make animations when I was in "basisschool" (don't know what that translates to, but I was around 8-10 I think). The old ms paint had multiple ctrl+z's which could also be reversed. Iirc we had 3 or 4 different frames. My friends quickly took the trick and made their own 😀.
At 11 yo I made a scifi shooter, choose your own adventure game, using powerpoint 😅. Using hundreds, maybe thousands of pages. So you could have multiple paths to follow. There was even a moment when a monster showed up in a corridor where it shot a projectile that quickly got closer by automating the page turns. And if you didn't find the gun or you didn't dodge or shoot back in time, you'd die. I think it was a really cool idea and was, within the constraint, a pretty good game😊.
@@naga540 ctrl + W
Haha I did exactly that too back when I was a kid and didn't know of any better editing software. And yep, I used only 2 skews too! Learning that a third skew makes the rotation perfect would've blown my mind back then.
Matt, watch out, Nintendo is going to take down this video because you used their 43 year old character without permission
Nintendo is the only law firm with a games division.
@@nicholasvinenIf you don't mind, I'm stealing that one!
@@thedrnailsguythat "joke" has some years of existance
LOL except that's not the real 8-bit Mario, his shirt wasn't blue...
@@erikkonstas That depends: in SMB1, Mario's shirt was brown, because his hair was brown. In Donkey Kong, Jumpman's hair was blue, because his shirt was blue. Having the shirt, the face, the hair, and the hat be different colors, while still having transparencies (not just being a perfect Spongebob-esque square), would have required a complete character redesign, due to hardware limitations (those limitations being 4 palettized colors; 3 + transparency) per tile, if we're talking about the NES sprites.
Wait, this is the math that Sethbling used in his new Rigid Body Minecraft Datapack. Because Minecraft’s native Block Display Entity only does skews, stretches, and translations. So he could only do rotations via skews
Was looking for a comment about this lmao
@@RowsieFoxsame
Haha we watch the same people! Classic :)
This was exactly what I thought of when I saw this video!
I was thinking the same thing, what timing!
If I'm not mistaken, quaternions, which are used for rotations in game engines such as Unity and Unreal, also perform skewing (and matrix multiplications) instead of actual rotation. But since quaternions are 4-dimensional, the object you rotating also goes one dimension higher, gets skewed there and then flattens one dimension down, which results in a rotation in 3d space.
And this concept can be applied to any-dimensional space
This triggers some good memories. Quaternions were the hot sh*t for us when we were first diving into computer graphics back in the 90s, totally amazed by the pc demoscene. And really hard to wrap our heads around :) Thanks for bringing that up.
And the main reason for dimensional subtraction comes from the fact that any “3d” stuff being emulated in the computer has to eventually be meaningfully rasterized to a 2d screen, so the render engine has to accommodate.
Quaternion multiplication rotates on two perpendicular and non-intersecting (except at the origin) planes at once, then sandwiching a vector between two quaternions will double one of the rotations and nullify the other.
6:24 "my code is not so much a blender as it is a juice loosener" 🤣🤣
I nearly laughed out loud inappropriately at this one haha
Matt saying "look up matrices if you don't already know them" reminds me that a great deal of us have already heard of what he's on about but, heck, we love him for the joy he brings to the material we... ought to know better than we do...
hi Urist!
Love the matrix movie 😅
I love when an educator for higher level topics makes the reasonable assumption that viewers will already understand the underlying topic to at least some degree. The number of times I've had to skip over a "what is binary?" section in a video about semi-advanced software or computer hardware stuff is way too high.
Binary Coded Decimal? Ok, that's a valid topic to cover since there are multiple schemes to make it happen.
Floating point representation? Sure, there are a whole host of ways to do that, and which one you choose alters the result of your calculation.
Both of those require some knowledge of what binary is, but if I'm to the point that I'm learning about those topics I should have the base level down already anyways.
It's also nice, after spending all day wrestling with maths we barely understand, to see fun applications for maths which is very familiar
But I don't feel like sitting 4 movies about a war between humans and machines to understand this stuff.
8:25 code review:
1) int() doesn't round to a whole number, it truncates. That may actually be what you want, since it means you only move the pixel right or left if it passes the full pixel width threshold.
2) You're using mod to clip the image, which creates the weird wraparound. If the width needs to be accounted for at all, you probably would be better off by doing a pure clip. Drop the information for pixels outside of the range.
3) Put the image into a numpy array, use linear algebra to apply the transform to the entire image instead of calculating a new location for each pixel.
Re 1) it rounds towards zero, which is just a different wording for truncation. So both of you are right. There are a lot of possible ways to round, and towards zero is just one possibility. Granted, it's not a "fair" way to round and it will look a bit glitchy especially when used on a low-resolution image.
2) If the rotation is progressive, you'll want the wraparound to preserve information. If you clip/crop, you'll need to do it from the original, not the most recent.
@@uNiels_Heart I guess a maths communicator would see "round toward zero"/truncate as something else than regular rounding.
@@hoejI guess you have a point there.
Matt was using Python there (which I gathered the programming context from, as opposed to pure maths) and I suspect that he's aware that `int()` doesn't do traditional rounding, and I suspect he just didn't want to complicate things when talking about it.
As it's Python, he could just substitute `round()` for `int()` to get a more traditional rounding. However, he might be restricted to Python 2 (or he might not be aware that it has changed for the better in Python 3), as in that older version of Python `round()`, while rounding, still returns a floating point number, not an integer.
I think this is more honest than most youtubers. I love that you kept the erroneous skew in the video, Matt. However I probably would have left it in as a blooper, and "reskewed" it correctly.
In the spirit of your honesty I'll admit, that I have only tried doing a rotation with two skew matrices, but never three. Once you learn about skew matrices for the first time, I think that trying this out seems a very intuititive thing to infer, attempt at it, fail at it, let go of with the intent to try again at a later point, and finally forget about it to never ever try it again. Thank you for setting me straight!
"Juice Loosener"
Absolutely champion XD
The whisper quiet rotation.
IT'S WHISPER QUIET!
We got all that juice from just one bag of oranges?
There's a better way?
1:10 YES!!! Finally somebody says it, it annoys me so much when "lo-fi" sprites are rotated in a very high resolution "canvas"
To be fair, while the "lo-fi" sprite, "hi-fi" canvas thing is ahistorical for 2D games, it *was* something that showed up in early 3D games.
These games generally only had one version of each texture and did nearest neighbour scaling. So when you looked closely at something you would see the pixels of the texture or sprite, scaled/stretched/rotated as necessary to fit their place in the 3D scene. This was exacerbated if you played at a higher than default resolution.
"I'm going to keep doing this until my laptop melts, which it's holding up pre--"
Whether by editing or perfect timing, perfectly cut 😂
I believe this is how Mode 7 on the SNES works. it achieves rotation by skewing various amounts in both the x and y axes.
It could have help to sell the overall visual, but Mode 7 was just very rudimentary 3D rendering.
@@sion8 It really really really wasn't. Mode 7 enabled affine transformations of the background. The fact that you can get a pseudo 3D effect is by changing the affine transformation matrix throughout the various scan lines so that I'd different on each horizontal line, but it is in no way 3D.
Accidently learned this with CSS
Underrated comment
Accidently learned CSS with this
Accidentally learned with this CSS
Accidentally CCSed with this learn
But, can you center a div?
You can use this information to rotate images in Microsoft Paint.
Step 1: Horizontal skew by theta/2 degrees.
Step 2: Vertical skew by -arctan(sin theta).
Step 3: Same as Step 1.
Bug workaround: you have to paste a minus sign into the text field, because you can't type it in
Apparently the people behind MS Paint didn't know this little trick. But who's surprised. Even today windows can't even sort filenames alphabetically.
According to Windows "filename, filename 2, filename 3" in alphabetical order is "filename 2, filename 3, filename".
@@awebmateIt may be because space is before any of the letters/numbers in ASCII
@@awebmatethis only applies to files with an extension since the dot “.” is at 0x2e in ASCII, which is after the space (0x20). «Fi» gets sorted before «Fi 2», but «Fi.txt» after «Fi 2.txt»
you can also flip, skew by a positive amount, and flip again
the worst is when 10 goes between 1 and 2@@awebmate
honestly. I expected to see you do this in an excel spreadsheet!
I'm a retro game dev, so this technique is right up my alley. I'm shocked I didn't know about this already. Thanks for making this video!
I actually wrote my own matrix math transformation routines for translation/rotation/scale in C for SGI workstations/supercomputer in C 30 years ago, for an artificial life virtual reality game that I was developing for SGI. I had found the routines in GL (which soon evolved into OpenGL) at the time to be inadequate for real-time virtual reality, and my own routines solved my problems.
Back then I was all about VR on the highest-end systems possible (I had an Onyx RealityEngine2 as my personal computer, provided by the company I worked for, for several months back then), but anymore I am far more interested in developing for the microcomputers and consoles that came out from the 70s until the early 90s and the handhelds up until the early 2000s.
I remember almost discovering this myself as a kid playing with old MS Paint. There weren't free rotation functions in Paint, but there were skew functions. I figured out that I could "rotate" images by skewing them equally horizontally and vertically, and then fiddle about with the aspect ratio a bit. Never thought of applying a third skew!
That’s where I first encountered this. I’d thought about presenting it at MathsJam, but Andrew Taylor did a much better job of it at last year’s conference than I could have, and that’s presumably where Matt encountered it.
Same but mine was Photoshop lol
Interesting that MS Paint either didn’t see a purpose or realize they have the capability to rotate images but did and could incorporate skew. When there’s so little utility for skew, and by including skew it means they could have rotated. Makes me wonder how computers rotate images these days at its most basic. Maybe it is that skew function
@@monhi64The real problem is that MS Paint hadn't been substantially updated between the 90s and last year
What versions of Paint u people are using? You still cant rotate by any angle..
14:29 Parker skew "sharper than ever before" "I think that worked well enough"
Article from 1986 has always stuck with me. Multiple single direction skews of a picture quickly devolves into chaos with intermittent return of part of original pattern (Chaos, Scientific American 54:12 (1986) 46-57). Phenomenon related to Poincaré Recurrence. Potential video topic.
That seems really nice, I hope he does take the idea!
Only about half way through, so maybe you mention this later, but one huge advantage of this for early/slow computers is that skewing like you did with the plumber can be done entirely with integer math, meaning that there is no need for a floating point unit in the processor. We take this for granted a lot with modern hardware, but so many older computers (let alone microprocessors) couldn't do floating point math at all.
But don't you still need floating point for calculating sin and tan?
@@vibaj16 The point of the skew method highlighted here is that it doesn't use trigonometry, just basic integer math.
@@ex-nerd It still uses trigonometry to figure out the skews.
@@vibaj16 you can precompute the specific skews that you need.
@@lowcostfish then you could just precompute the entire rotation
Back in the MS-DOS days, I designed and co-wrote a powerful graphics library.
It implemented rotations on bitmaps using exactly this method.
It has certain advantages when working with low resolution. It slides rows or columns of pixels and rounds to a whole number of pixels; so it doesn't have any holes or need to interpolate values. Considering the capabilities of the CPU, it is very fast compared to conventional rotation of a bitmap.
P.S. Another nuance is choosing which axis (x or y) to do first, and which way to put the negative sign, depending on the angle.
The code to do the actual copying of pixels was written in 16-bit 8086 assembly language. Higher level logic was written in C++.
Nice!
On top of the interpolation issues, it avoids the need for expensive switch to floating point processing, and even more expensive use of trig functions. To a person, 12*11 is just as hard to do as 1.2*1.1, but they are way different to a 486 processor.
@@bobthecomputerguyYes, and the amount to shift each row, as you move away from the center, is exactly the same as line drawing algorithm.
There were things in the library that didn't use floating point but did use fractions, as fixed-point integers.
'486 processor? Jaw-dropping speed, with most operations done in 1 clock cycle. Multiplication takes 40. The '486 does have floating-point built-in.
But they were super expensive and uncommon when this library was under development. The timings were generally using the '386 specifications.
The physical pixel illustration made it very practical and approachable. Great idea!
Yes, but he should have called them phyxels. Brand new word. :)
7:58 If we want to be *technically* correct, the "int" function is more of a floor function where it always rounds down i.e. int(7.999999) becomes 7 despite it obviously rounding to 8
A fun little observation, I didn't notice when you skewed initially because I had my phone laying on my bed and I was essentially correcting the skew by looking at the video off axis
Next video: Someone improved my code by 3hours /3 milliseconds = 360,000,000 %
Lol, tbf if you use matrix multiplication, this would have been so much faster
3 h / 3 ms = 360 000 000 °/.
360 000 000° rotation = ∞ improvement.
Math confirmed
Seems like something that could easily be handled by a GPU shader, so I'd imagine that the main cost would be encoding the video afterwards. Assuming the GPU used has separate components for decoding video, running shaders, and encoding video, and they can be set up as a continuous pipeline (given that effectively describes streaming a game, probably a use-case considered in its design), it would probably run close to real-time. Maybe 2x or 3x faster? Or depending on target resolution, maybe recent hardware can do far better, you'd have to ask someone who's really gone deep into the technical details about encoding performance to get an estimate with narrow error bounds.
When I was kid, the only art software available to me was MS Paint. Since only skew was available, I figured out that you could achieve a rotation by skewing three times.
Glad to finally see someone else confirm it!
Im still using Paint lol
For another way of rotating without rotating, you can utilize the fact that all (simple) rotations are the composition of two reflections. This is actually still useful today, and I utilize it in my own rendering.
The Parker rotation 😂
I wonder if a game has implemented this skew algorithm in their pixel art. In hindsight, this looks like the right thing that should have been used and I love it.
This has *absolutely* been used by games, for decades. I know it's been used by a bunch of 2D shooters, although I'm drawing a blank on exactly which I've seen it used in.
This has been used for decades on 16-bit consoles.
Surely, right?
Most retro games or games with authentic retro pixel art do something along these lines. Newer (or at least not old) games can get away with not doing pixel perfect rotation, like Terraria, a pixel art game that does not have a pixel grid (uses full-screen native resolution). Other games like Celeste have strict pixel grids, for a more authentic retro look (uses it's own simulated low-res). Old-school games did not have the luxury of choice so they often had to do something clever.
In other words. Modern pixel-art games can rotate their very pixels because your monitor is high-res. So now you see less games using this. It's become a style choice.
The Game Boy Advance has built-in hardware to do affine transformations on sprites, and affine transformations are literally what he's talking about when he gets into matrices. Affine math is really nice for this on retro consoles, because you really get all in one: scaling, rotating, and shearing (and technically translation but most games wouldn't use affine for that); the rotating looks really nice for pixel art because it's equivalent to the three shears instead of a naïve rotate; and the math is surprisingly quick when using lookup tables. I'd say most 2D games in the sixteen bit era and beyond use affine transformations for their stuff, assuming they rotate sprites at all (surprisingly rare if you actually look at older games, usually at most they have one or two hand-drawn rotated images)
I love the joy you have about this! It really makes me want to learn. Thank you so much for bringing such niche topics to our attention and explaining them to us!
Kind of glad to see this, I remember when I was a kid I would try to do this in MSPaint, because you couldn't do non-90-degree rotates in MSPaint, but I could get very close to getting "clean rotations" with skew operations. I could never get it to be quite exactly right looking, though.
Matt has, hands down, the best theme music in mathematics.
parker rotation of the sword
IKR, but it's great, we all ought to shamelessly give it a go, and keep the fails in.
The late Alan W. Paeth is credited as the progenitor of the shear rotate technique. He was a professor at the local college, and generally regarded as an awesome dude.
I'm literally writing a rendering engine on an 20mhz, 8-bit microprocessor for a 1-bit display right now, which will benefit from this information because it does not have advanced math functions. It can't even divide. So, more applicable to modern life than you might first expect, lol.
SethBling posted a video today (his first Minecraft video in 4 years) showing a rigid body physics engine using just a datapack (so it uses no mods). It uses block display entities, which can't be rotated, but can be skewed, so he used this skew trick to rotate them. So it's even more applicable to modern life.
You can see this in action on the title screen of "Brian the lion" on the Amiga. This was an incredibly impressive large rotation for the Amiga 500 at the time, all due to the power of skewing.
funny enough the developer was "Reflections" not "Skews"
Two videos this week, and pi day next? It really is Matt's Year of UA-cam.
Brilliant. No other word for it. This video will still be doing the rounds forever.
I love this video. I ran into this exact problem in classic mspaint by trying to rotate a portion of an image by variable amounts. I found this skew method through Google and was already familiar with all the concepts and mathematics introduced in this video. Despite this, something I took away from the video was how correctly rotating a selection depends on its center point. I was trying it out, but would frequently get inexact results, and I see now that it failed because I was mindlessly selecting a bounding box around the element I wanted rotated.
Can we rotate this image?
We can rotate it at home!
The rotation at home:
IIRC, I used this technique for the little tool I made for Project Zomboid, that turned flat textures into the game's native isometric format.
"This video is claimed by the Nintendo company"
I've been working on a video game for a lil bit and decided to take a break by watching this video only to realize this exact thing can be used to fix an issue ive been having! Thanks Matt!
Once in the times of Windows 3.11 I was playing around in Paintbrush (the ancestor of MS Paint), it only had skew and no rotation. I wanted to rotate things, I tried skewing a few times but never really got it right. Well, this video solves the mystery of the 6yr old me ^^ I love it!
More teachers should adopt the slogan "You'll have to trust me, and / or learn. 10:03
I had to rewind it cuz I thought he said you'll have to trust me *or* you'll learn. 😊 Like a more polite version of f around and find out lol 😂
As a graphics programmer, I have accidentally multiplied matrices together in the wrong order more times than I can count, and I did learn. The results are usually hilarious
Nullius in verba
@@mgmchenry Isn't that how the creeper in Minecraft was invented? It was at least some kind of incorrect transformation on what was supposed to be a pig.
@@DFPercush what happened with the creeper is that notch got the order of (x,y,z) wrong I believe
I've recently been studying image processing and coincidentally our professor asked us to derive the relationship between the skewing and the rotation of the the pixels! How fun.
thanks for this! transformations are the next unit in my geo classes...definitely will post this to my students!
I know its arbitrary because we later see that A = C, but in your matrix multiplication shouldnt the A matrix be on the right since it is being applied to the vector first? (at least since elsewhere in the video column vectors and left hand multiplication are notated)
Great video though! Never seen this specifically applied to pixels in a way that treats each pixel a constant that is just translated three times, very neat.
Matt, we understand how you rotated the video, but how did you rotate the audio to make it so seamlessly match?
I think the best part of the edge cases is the fact that it allows the "frame" to maintain its size throughout the rotation. You can see the edge which would normally represent the screen. It was a really clever and easy way to wrap the image that saves you from having to write something that doesn't save those pixels that are outside the frame. If you plan on manipulating image files then perhaps you could look for image processors in faster languages? A dedicated import for dealing with pixels might allow you to streamline the process. Personally always get a laugh out of hearing the runtimes but it might be easier on you and your computer if you plan to continue to tackle topics that are complemented nicely by your programs.
damn, this brought back an old memory of doing this sorta thing intuitively as a kid on a school computer using ms paint, it didn't feel all that special using the skew window to rotate an image like this, that's pretty neat!
then at the end of the sketch, the camera zooms out and you were oriented at 45° for the whole video (classic Penn and Teller bit)
Every rotation + translation is just a rotation about a different point (thanks to that #Some3 video about it)
And every translation is just two skews, like waddling the image over (according to my brain thinking about it for 2 seconds)
So does that mean skews are the one transform to rule them all?
That is actually really interesting, because yes, it seems to imply that you can perform every basic transform only using skews
Edit: never mind I forgot about scaling lol
@@Scum42 @Scum42 ha true... dang. The missing missing link 🙈
any pair of reflections will also give a rotation or translation.
It's interesting, that skews decompose these into three steps, when reflections decompose them into two steps.
I took a computer graphics class back in the late '80s, and it was all about moving things around with transformation matrices. We did rotations, translations, reflections, and such, but I don't think we ever did skews. It's great to see the same techniques used again.
Two orthogonal skews conserve area too. Used in physics simulation for particle motion under conservative forces, or just photon optics along a beam axis, where horizontal axis is particle coordinate and vertical axis refers to particle angle (or transverse momentum).
NO WAY YOU JUST DROPPED THIS VIDEO! I have OCD and yesterday I was flipping my laptop around trying to figure out which way it was when I took it out of my backpack. And I learned that a reflection over the y-axis and a rotation around the z-axis, gives me the same end result as a rotation around the x-axis.
I was like “woah linear transformations at work!”, and thought what other types of transformations act like that. AND BOOM! You drop this masterpiece of a video!
There's a little issue with that, which is that any reflection in space will always give you a mirrored object which can only be fixed by another reflection. If you did indeed reflect your laptop you would find upon opening it that your keyboard was actually a bɿɒodγɘʞ. Or perhaps more accurately that your qwerty was a γɈɿɘwp.
@@excrubulentsensational unicode-fu
any rotation (even in higher dimensions) can be done with two reflections
@@Kram1032Wow nice, I doubted that, but on reflection (no pun intended) I think I could believe that, when we're not limited to two axes like with pixels.
Do you have a reference to a proof? I'd enjoy reading that!
@@mattbox87 Thanks but it was taken from a mirrored text generator. I would not make that myself.
9:45 Matt: makes a big deal about the fact that the order of multiplication matters for matrices
Video: displays the matrices being multiplied in the wrong order
This was helpful. I have often wondered how software rotates digital images without losing pixels, and now I know.
Thank you Matt, this was awesome and I will be using it in a project
8:06 tiny correction, int does not round, it merely cuts off the values after the decimal point eg. Int(3.99) = 3
that's a type of rounding 🙏
Funny that this principle is exactly what SethBling using in his just released video!
2:43 Thank you for giving the appropriate double take look, this is the icing on the cake I subscribed for
one big upside for this method, especially on limited/older/retro hardware, is the skew can be done entirely with integer operations, whereas trig for a rotation needs floating point. in systems that don't have dedicated floating point math hardware that can be a LOT slower.
3:52 Mario also looks like he's flipping us off!
5:20 bro's in _italics_
I used to use this to rotate images in old MS Paint.
You could only rotate by right angles and skew, so if you wanted to rotate by different angles, you'd have to compute manually which 3 consecutive skews you'd need.
15:13 MatPat, What have you done about the name, I like it.
time to make his horrible code 2384975623847% faster again
Underrated.
I'm disappointed you didn't say Mario was italicised at 3:30
2:43 Kill-a-me
I've been participating in a game jam recently, and one of the early resources someone posted was this exact algorithm for generating rotations of pixel art assets that preserve such things as the number of pixels and such. Very on-point lol.
this reminds me of what I've been studying recently! I've been looking into projective geometric algebra, and it's a very nifty mathematical construction that shows that any two rotations is the same as two reflections (with a rotation around the point at infinity representing a translation). very interesting stuff
I have a feeling that Matt deliberately messes things up. Either to show that making mistakes is ok, or to get as many things named after him as possible, or both.
Since your sentence got cut in half at the very end, can we safely assume that your laptop indeed melted?
A key use for tricks like this is in reducing the amount of trig needed for performing transforms, which is extremely useful on old CPUs with no FPU. Even with trig done by lookup tables it could save a few instructions per pixel, and if you knew you only needed a fixed couple of rotations you could pre-compute the matrices and save more. If you just needed a couple of rotations for a couple of sizes of object (often just one size of object) it might save even more instructions per pixel to pre-compute the skews even more directly than that. Of course if you had a small number of spites to act upon and a small range of angles (and enough memory spare), you could save doing any of this live by pre-computing each result as their own sprite which had the added advantage of being able to manually tweak the result for better aesthetics. Optimising things for old 8-bit micros like the BBCs I cut my programming teeth on (16-bit ones for that matter, or even early 32-bit: lookup some of John Carmack's tricks used in the original Doom) could be an interesting challenge.
I used similar math and pixel manipulation for my senior design project. We put ultrasonic sensors on a projector to detect the angle of projection between the projector and the wall it was throwing the image to. My job was to take those distances and do a bunch of linear algebra and pixel mapping to adjust the image so no matter how off skew the projector was, a square would be square and a circle would be circular, etc. super interesting project, loved the vid!
Mode 7 Matt 😊
Marvellous how thoroughly you fucked that up. Mad props to you
This is a fantastic! Thank you Matt!
Wow, I figured this out randomly while trying to do diagonal text in old Windows Paint, which didn't have a rotate function but did have skew function. I vaguely remember figuring out through trial and error the right skew coefficients to use.
rip to me thinking it was the camera which was rotated
I have to point out that, while Matt didn't write an excellent image manipulation program, he at least wrote affine image manipulation program.
Thanks for leaving in past Matt and explaining. I'm sure some things do just die in post, but that was a great one to have remain.
I've known this for a long time, ever since I tried to rotate something in MS Paint back on Windows 3.5, not that I always remember the order of operations necessary, but I knew it *should* be able to result in a desired rotation.
Who else came here from @SethBling 's Minecraft physics engine video that also talks about using skew to achieve 3d rotation? Did you guys plan ahead to release the videos at same time?
Nintendo lawyers right now foaming at the mouth…
Matt just *_skewing_* around with maths is always fun, no matter how obsolete ^^
I'm gonna write my Linear Algebra 1 exam next week and it's nice to see the usages of the stuff we learn! Wish me luck :)
If they're mathematically equivalent, are you truly not rotating them?
Quick quibble about the Mario analogy: 8 bit games had output resolution higher than the size of each "pixel" of the art, so the naive rotation would look considerably better than the pixel garbler shown here.
Edit to add: I appear to have had this backwards. There is sub-pixel level information and the output rendering can be set to do some stuff (I think, but am not sure, in the case of SNES and maybe also the NES this stuff was specifically tailored to take advantage of the medium of CRT screens, which were the standard at the time) to represent this smoothly at the standard pixel level. This is also an incomplete (and maybe also erroneous) explanation.
Long story short: oops, don't mind me
Not for NES games like Mario.
The NES had some transformations it could run to scale things, but using them ate a lot of CPU time which was important to run a game at 60htz on a relatively slow CPU. Mario's graphics were exactly 1:1 between the sprite in memory and drawn image.
The calculations still used subpixels, but Mario was rendered to screen in the integer portion of his location as if the subpixel didn't exist.
It wasn't until the SNES that dedicated graphics process could run to scale things without requiring CPU time which is why those games played with transformations a lot more(like wrapping/warping backgrounds, sprite growing, shrinking, rotating, flipping, etc). But then the SNES is a 16 bit console so it doesn't count.
@@scragarstill uses no subpixels byw
That's simply not true. The art resolution of 8-bit games perfectly matched the render resolution of the 8-bit hardware. Rendering at higher resolution would have been a waste of scarce compute resources.
15 likes for a completely wrong "correction"
you are thinking about indie games not the nes
"Multiply them in the right order"
And of course he multiplies them in the wrong order. Successive transformations are multiplied from right to left, Matt. You were lucky because at the end A = C, so in this case it doesn't matter.
wasnt expecting a video i resonated so much with, thanks!
Had to figure out how to do this with ms paint, was amazing having my first lin alg class recognizing the actual math