Rotation without rotating.

Рет қаралды 883,816

2 ай бұрын

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/

Пікірлер: 1 700

@SciShow 2 ай бұрын

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.

@BeastGamerSoumya 2 ай бұрын

Wow this comment has only 5 likes when I found it

@YeshwanthReddy 2 ай бұрын

@@BeastGamerSoumya and 42 when I found it

@BeastGamerSoumya 2 ай бұрын

@@YeshwanthReddy dang

@plislegalineu3005 2 ай бұрын

82 now, will make it 83

@XtreeM_FaiL 2 ай бұрын

88. That's bad, maybe?

@colletsers6990 2 ай бұрын

Perfect example of a Parker Rotation

@rrni2343 2 ай бұрын

Yes!

@joechen9770 2 ай бұрын

Just hopping onto what will inevitably be the top comment

@azurewolf5943 2 ай бұрын

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!

@andrewkepert923 2 ай бұрын

Pretty close to a Lorenz transformation, which is the hyperbolic analogue of rotation.

@vyxil8767 2 ай бұрын

@@andrewkepert923 You mean the Parker Lorenz transformation?

@laremere 2 ай бұрын

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.

@Toma-jl9wu 2 ай бұрын

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 ¯\_(ツ)_/¯

@SimonBuchanNz 2 ай бұрын

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.

@Hiltok 2 ай бұрын

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.

@Ceelvain 2 ай бұрын

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.

@SimonBuchanNz 2 ай бұрын

@@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.

@Xphomegra 2 ай бұрын

Next video: "Someone improved my skew code by 40,832,277,770%"

@piano01 Ай бұрын

Misinformation.

@roshan7c356 Күн бұрын

@@piano01 chill it's a joke

@altreusplays 2 ай бұрын

Finally someone calls out low-res art for defying the pixel grid!

@nickfifteen 2 ай бұрын

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!

@colly6022 2 ай бұрын

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!

@andrewdunbar828 2 ай бұрын

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.

@ghasttastic1912 2 ай бұрын

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

@apotatoman4862 2 ай бұрын

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

@Jeroen_Ech 2 ай бұрын

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.

@naga540 2 ай бұрын

How do yo skew in og paint?

@GerhardTreibheit 2 ай бұрын

@@naga540with the scew function

@DeltaNovum 2 ай бұрын

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😊.

@vaj1414 2 ай бұрын

@@naga540 ctrl + W

@tiarkrezar 2 ай бұрын

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.

@sol_in.victus 2 ай бұрын

Crazy that the day after this video released, SethBling released a video where skew rotation was actually useful and integral to his project

@theodorechiou2886 2 ай бұрын

this^ i had a massive sense of dejavu when sethbling started talking about block entities.

@Golgito 2 ай бұрын

Was looking for this comment!

@lukehanson7554 2 ай бұрын

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

@earzo7 2 ай бұрын

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!

@palmberry5576 2 ай бұрын

Couldn’t you just use the Mapping node on the input vector?

@earzo7 2 ай бұрын

@@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.

@maxmyzer9172 2 ай бұрын

Matt, watch out, Nintendo is going to take down this video because you used their 43 year old character without permission

@nicholasvinen 2 ай бұрын

Nintendo is the only law firm with a games division.

@thedrnailsguy 2 ай бұрын

@@nicholasvinenIf you don't mind, I'm stealing that one!

@Axatron 2 ай бұрын

@@thedrnailsguythat "joke" has some years of existance

@erikkonstas 2 ай бұрын

LOL except that's not the real 8-bit Mario, his shirt wasn't blue...

@SeanJMay 2 ай бұрын

@@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.

@Ixions 2 ай бұрын

14:25 The hand waving rationalization of "This is fine." after successful completion of a perfect "Parker Rotation."

@TheBlacktom 2 ай бұрын

Funny he didn't realize it's not a square.

@nsf001-3 2 ай бұрын

@@TheBlacktom It's as square a square could be given the imprecision

@Muhahahahaz 2 ай бұрын

@@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

@FLPhotoCatcher 2 ай бұрын

And funny he, a mathematician, got this wrong. 3:51

@evansaschow 2 ай бұрын

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

@RowsieFox 2 ай бұрын

Was looking for a comment about this lmao

@jarvithink3190 2 ай бұрын

@@RowsieFoxsame

@joeeeee256 2 ай бұрын

Haha we watch the same people! Classic :)

@emmanotsostrong 2 ай бұрын

This was exactly what I thought of when I saw this video!

@TheSilverInfinity 2 ай бұрын

I was thinking the same thing, what timing!

@JustDezz 2 ай бұрын

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

@c7r8 2 ай бұрын

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.

@homedepotindustrialfan936 2 ай бұрын

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.

@benhur2806 2 ай бұрын

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.

@georgH 2 ай бұрын

1:10 YES!!! Finally somebody says it, it annoys me so much when "lo-fi" sprites are rotated in a very high resolution "canvas"

@petermichaelgreen 2 ай бұрын

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.

@EricSullenberger 2 ай бұрын

6:24 "my code is not so much a blender as it is a juice loosener" 🤣🤣

@joespadafora6109 2 ай бұрын

I nearly laughed out loud inappropriately at this one haha

@krabbediem 2 ай бұрын

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!

@chrism6880 2 ай бұрын

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.

@uNiels_Heart 2 ай бұрын

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.

@sabinrawr 2 ай бұрын

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.

@hoej 2 ай бұрын

@@uNiels_Heart I guess a maths communicator would see "round toward zero"/truncate as something else than regular rounding.

@uNiels_Heart 2 ай бұрын

@@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.

@mattbox87 2 ай бұрын

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...

@knight_lautrec_of_carim 2 ай бұрын

hi Urist!

@abramisme 2 ай бұрын

Love the matrix movie 😅

@PendragonDaGreat 2 ай бұрын

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.

@QuantumHistorian 2 ай бұрын

It's also nice, after spending all day wrestling with maths we barely understand, to see fun applications for maths which is very familiar

@Hans-gb4mv 2 ай бұрын

But I don't feel like sitting 4 movies about a war between humans and machines to understand this stuff.

@twotothehalf3725 2 ай бұрын

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!

@martinwhitworth3989 2 ай бұрын

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.

@Razorcarl 2 ай бұрын

Same but mine was Photoshop lol

@monhi64 2 ай бұрын

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

@TheRenegade... 2 ай бұрын

@@monhi64The real problem is that MS Paint hadn't been substantially updated between the 90s and last year

@PinkeySuavo 2 ай бұрын

What versions of Paint u people are using? You still cant rotate by any angle..

@gravelstudios 2 ай бұрын

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.

@sion8 2 ай бұрын

It could have help to sell the overall visual, but Mode 7 was just very rudimentary 3D rendering.

@JoQeZzZ 2 ай бұрын

@@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.

@jonellingson2750 2 ай бұрын

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.

@marioveca6033 2 ай бұрын

That seems really nice, I hope he does take the idea!

@brooksgunn5235 2 ай бұрын

Accidently learned this with CSS

@ProjectileGrommet 2 ай бұрын

Underrated comment

@tedchirvasiu 2 ай бұрын

Accidently learned CSS with this

@MrScorpianwarrior 2 ай бұрын

Accidentally learned with this CSS

@theninjascientist689 2 ай бұрын

Accidentally CCSed with this learn

@devrim-oguz 2 ай бұрын

But, can you center a div?

@txikitofandango 2 ай бұрын

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

@awebmate 2 ай бұрын

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".

@NoTraceOfSense 2 ай бұрын

@@awebmateIt may be because space is before any of the letters/numbers in ASCII

@brighthades5968 2 ай бұрын

@@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»

@psymar 2 ай бұрын

you can also flip, skew by a positive amount, and flip again

@pepinlebref7585 2 ай бұрын

the worst is when 10 goes between 1 and 2@@awebmate

@ericsmith2901 2 ай бұрын

"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 😂

@RetroDawn 2 ай бұрын

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.

@lambda6736 2 ай бұрын

"Juice Loosener" Absolutely champion XD

@Invariel 2 ай бұрын

The whisper quiet rotation.

@nicholasvinen 2 ай бұрын

IT'S WHISPER QUIET! We got all that juice from just one bag of oranges?

@ericp3645 2 ай бұрын

There's a better way?

@JohnDlugosz 2 ай бұрын

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.

@JohnDlugosz 2 ай бұрын

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++.

@LuigiElettrico 2 ай бұрын

Nice!

@bobthecomputerguy 2 ай бұрын

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.

@JohnDlugosz 2 ай бұрын

@@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.

@Garzini 2 ай бұрын

honestly. I expected to see you do this in an excel spreadsheet!

@ex-nerd 2 ай бұрын

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.

@vibaj16 2 ай бұрын

But don't you still need floating point for calculating sin and tan?

@ex-nerd 2 ай бұрын

@@vibaj16 The point of the skew method highlighted here is that it doesn't use trigonometry, just basic integer math.

@vibaj16 2 ай бұрын

@@ex-nerd It still uses trigonometry to figure out the skews.

@lowcostfish 2 ай бұрын

@@vibaj16 you can precompute the specific skews that you need.

@vibaj16 2 ай бұрын

@@lowcostfish then you could just precompute the entire rotation

@matthewryan4844 2 ай бұрын

14:29 Parker skew "sharper than ever before" "I think that worked well enough"

@madmoo2658 2 ай бұрын

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

@novarender_ 2 ай бұрын

5:12 He has been italicized.

@bosch992 2 ай бұрын

The physical pixel illustration made it very practical and approachable. Great idea!

@keithbromley6070 2 ай бұрын

Yes, but he should have called them phyxels. Brand new word. :)

@BlackHayateMX 2 ай бұрын

The Parker rotation 😂

@richiejacobson4272 2 ай бұрын

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

@sudgylacmoe 2 ай бұрын

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.

@VaradMahashabde 2 ай бұрын

Next video: Someone improved my code by 3hours /3 milliseconds = 360,000,000 %

@paulroberto2286 2 ай бұрын

Lol, tbf if you use matrix multiplication, this would have been so much faster

@lockaltube 2 ай бұрын

3 h / 3 ms = 360 000 000 °/. 360 000 000° rotation = ∞ improvement. Math confirmed

@Uristqwerty 2 ай бұрын

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.

@Smitology 2 ай бұрын

parker rotation of the sword

@mattbox87 2 ай бұрын

IKR, but it's great, we all ought to shamelessly give it a go, and keep the fails in.

@AstroTibs 2 ай бұрын

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!

@PinkeySuavo 2 ай бұрын

Im still using Paint lol

@beefchicken 2 ай бұрын

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.

@gallium-gonzollium 2 ай бұрын

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.

@AdrianWoodUK 2 ай бұрын

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.

@coffee115 2 ай бұрын

This has been used for decades on 16-bit consoles.

@mattbox87 2 ай бұрын

Surely, right?

@tgmoitinho 2 ай бұрын

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.

@nytpu 2 ай бұрын

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)

@xeroniris 2 ай бұрын

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.

@AtomicAndi 2 ай бұрын

funny enough the developer was "Reflections" not "Skews"

@FuchsDanin 2 ай бұрын

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.

@vibaj16 2 ай бұрын

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.

@devilbob 2 ай бұрын

"This video is claimed by the Nintendo company"

@davecgriffith 2 ай бұрын

Matt has, hands down, the best theme music in mathematics.

@DieterDuplak314 3 күн бұрын

matt-theme-matics

@Okamikurainya 2 ай бұрын

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.

@twertygo 2 ай бұрын

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!

@adityavardhanjain 2 ай бұрын

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.

@wojciechszmyt3360 2 ай бұрын

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!

@adamplace1414 2 ай бұрын

Two videos this week, and pi day next? It really is Matt's Year of KZfaq.

@tciddados 2 ай бұрын

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.

@markojojic6223 2 ай бұрын

15:13 MatPat, What have you done about the name, I like it.

@gordonwiley2006 2 ай бұрын

Can we rotate this image? We can rotate it at home! The rotation at home:

@CarletonTorpin 2 ай бұрын

More teachers should adopt the slogan "You'll have to trust me, and / or learn. 10:03

@mgmchenry 2 ай бұрын

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 😂

@mgmchenry 2 ай бұрын

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

@darkmusica1346 2 ай бұрын

Nullius in verba

@DFPercush 2 ай бұрын

@@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.

@thezipcreator 2 ай бұрын

@@DFPercush what happened with the creeper is that notch got the order of (x,y,z) wrong I believe

@DoctorPolski 2 ай бұрын

Brilliant. No other word for it. This video will still be doing the rounds forever.

@paulzagieboylo7315 2 ай бұрын

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

@roippi3985 2 ай бұрын

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)

@legitgopnik8431 2 ай бұрын

Matt, we understand how you rotated the video, but how did you rotate the audio to make it so seamlessly match?

@randallking1646 2 ай бұрын

thanks for this! transformations are the next unit in my geo classes...definitely will post this to my students!

@loganwinfree4386 2 ай бұрын

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.

@brainstink 2 ай бұрын

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!

@excrubulent 2 ай бұрын

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.

@mattbox87 2 ай бұрын

@@excrubulentsensational unicode-fu

@Kram1032 2 ай бұрын

any rotation (even in higher dimensions) can be done with two reflections

@mattbox87 2 ай бұрын

@@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!

@excrubulent 2 ай бұрын

@@mattbox87 Thanks but it was taken from a mirrored text generator. I would not make that myself.

@SoundsOfTheWildYT 2 ай бұрын

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.

@TheSpore360 11 күн бұрын

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!

@Ptoad 2 ай бұрын

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.

@namewarvergeben 2 ай бұрын

3:52 Mario also looks like he's flipping us off!

@drcaiius 2 ай бұрын

Funny that this principle is exactly what SethBling using in his just released video!

@vorpalthefox 2 ай бұрын

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!

@glenmorrison8080 2 ай бұрын

This was helpful. I have often wondered how software rotates digital images without losing pixels, and now I know.

@LetsGetIntoItMedia 2 ай бұрын

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?

@Scum42 2 ай бұрын

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

@LetsGetIntoItMedia 2 ай бұрын

@@Scum42 @Scum42 ha true... dang. The missing missing link 🙈

@Kram1032 2 ай бұрын

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.

@thatonefrenchguy937 2 ай бұрын

5:20 bro's in _italics_

@EliasMheart 2 ай бұрын

Matt just *_skewing_* around with maths is always fun, no matter how obsolete ^^

@UZPvNUCaaQdF 2 ай бұрын

Thank you Matt, this was awesome and I will be using it in a project

@DarquosLeblack 2 ай бұрын

I'm disappointed you didn't say Mario was italicised at 3:30

@peterdagrape 2 ай бұрын

8:06 tiny correction, int does not round, it merely cuts off the values after the decimal point eg. Int(3.99) = 3

@user-bz3kd2mt3u 2 ай бұрын

that's a type of rounding 🙏

@Napert 2 ай бұрын

time to make his horrible code 2384975623847% faster again

@c.jishnu378 22 күн бұрын

Underrated.

@ArbitraryConstant 2 ай бұрын

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.

@r..k.. 2 ай бұрын

Scalable Vector Graphics (SVG) - 1.0 Specification - W3C Recommendation 04 September 2001 - has it, chapter 7.4 Coordinate system transformations (I’m quoting this early version because I learned about this with this version). Later versions build on top of it. Worth to have a look from mathematicians point of view (😉)

@bj_ 2 ай бұрын

Mode 7 Matt 😊

@Dywindel 2 ай бұрын

2:43 Kill-a-me

@pfcrow 2 ай бұрын

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.

@Raging_Redhead 2 ай бұрын

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.

@hubertjatkowski4056 2 ай бұрын

rip to me thinking it was the camera which was rotated

@xicufwm 2 ай бұрын

Since your sentence got cut in half at the very end, can we safely assume that your laptop indeed melted?

@qunas101 2 ай бұрын

interesting timing of the video, because that's how SethBling implemented his physics simulation datapack in Minecraft. There is no built in function for rotating a block entity but you can skew it on each axis

@z4502 2 ай бұрын

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.

@essentialatom 2 ай бұрын

Marvellous how thoroughly you fucked that up. Mad props to you

@iabervon 2 ай бұрын

I have to point out that, while Matt didn't write an excellent image manipulation program, he at least wrote affine image manipulation program.

@seedmole 2 ай бұрын

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.

@hashtagPoundsign 2 ай бұрын

This is a fantastic! Thank you Matt!

@JayJay64100 2 ай бұрын

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.

@Balajamas 2 ай бұрын

Yes you are 45° man

@jeffersonshaunreyyu 2 ай бұрын

Nuh uh

@flikkie72 2 ай бұрын

Celsius or Fahrenheit? Because that's either a lethally high fever, or near freezing

@legoworks-cg5hk 2 ай бұрын

This is the original of the stolen top comment

@ArchDennam Ай бұрын

2:43 Thank you for giving the appropriate double take look, this is the icing on the cake I subscribed for

@majorjohnson8001 2 ай бұрын

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.

@GabrielJones 2 ай бұрын

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?

@PluetoeInc. 2 ай бұрын

3:23 Mario ---> _mario_

@brunnomenxa 2 ай бұрын

Well, Mario is Italian so it makes sense.

@aisaboringname 2 ай бұрын

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

@patricks2645 2 ай бұрын

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!

@Pulsar77 2 ай бұрын

"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.