# Procedural Animation Dev Page **URL:** https://forum.makecode.com/t/procedural-animation-dev-page/41737 **Category:** Arcade **Tags:** art, graphics-and-math, extension **Created:** [January 27, 2026, 2:51am UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737 "2026-01-27T02:51:44Z") **Posts on this page:** 1 **Showing post:** 38
### Author: ![BLADEr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blader/32/16422_2.png) [@BLADEr](https://forum.makecode.com/u/BLADEr) #### Post date: [February 17, 2026, 2:13am UTC](https://forum.makecode.com/t/procedural-animation-dev-page/41737/38 "2026-02-17T02:13:23Z")
Ok. As promised, later than expected, here’s all the math and logic that goes into making these extensions! The reason for this is so you guys can get a better understanding of how to use the extensions at their fullest, and I hope all this in general is useful to some of you! > **Softbodies** > > This extension is used for primarily 1-demensional rope physics. > > The main creation block makes an array _from_ an already existing sprite, meaning it duplicates that sprite. that’s why when you create a new rope, the _source sprite_ is still left behind. > > In this extension there are two different types of rendering: > > 1. Fill rendering > > - Takes the _width_ of each segment image and connects all the edges to make a unified outline-fill. > > 1. Line Rendering > > - Simply draws lines between each segment > > Both rendering styles can be used on sprite’s image or standalone image. Using the block that renders on a sprite’s image is useful because maybe there’s camera movement involved and we want the canvas to the given softbody to move with it. > > The math I use for keeping the segments together is [Verlet Integration](https://en.wikipedia.org/wiki/Verlet_integration), [Hooke’s Law](https://en.wikipedia.org/wiki/Hooke%27s_law) springs, and simple constrain projection. I have 4 blocks for changing the spring forces currently maybe to add more in the future: > > 1. Set Max Stretch > > - Changes how _far apart_ each segment is allowed to be from each other > > 1. Set Segment Max Velocity > > - Changes how _fast_ segments are allowed to travel > > 1. Set Spring Stiffness > > - Changes how _aggressive_ position error is corrected > > 1. Set Damping > > - Changes how _fast the velocity is reduced_ > > There are also a few blocks on query that make finding segments/softbodies easier. > > And that’s it for this extension! > **Inverse Kinematics** > > The type of integration I use for this extension is [FABRIC](https://www.youtube.com/watch?v=tN6RQ4yrNPU&pp=ygUxRm9yd2FyZCBBbmQgQmFja3dhcmQgUmVhY2hpbmcgSW52ZXJzZSBLaW5lbWF0aWNzLg%3D%3D) (Forward And Backward Reaching Inverse Kinematics). > > That link is a video, and I think it explains it pretty well. > > Like the video said, the physics is iterative, meaning the position of each of the joints is calculated by the other joints’ positions, so no velocity here. > > I’m planning on adding blocks for angle clamping. > > I made this extension a while back and haven’t really touched it sense. I’m up to suggestions about this extension, what might be cool add-ons, what could be changed? > > That’s it for this extension! > **Ragdoll Physics** > > This extension is better if you want to get down to the structure of your softbody. > It’s like the softbody extension, it has similar math, but in this extension you make your own connections from sprites. > This is better for making 2-dimensional softbodies. > > This extension is fairly new. I haven’t done really anything with it besides create the core idea. > In the near future, I will add blocks similar to that of the softbody extension (for changing the physics) > > Although it’s like the softbody extension, there’s no way right now to define all the sprites that are connected to a given sprite; there’s no array’s involved as your making the single connections yourself. > > That’s it! > **Line Canvas** > > This extension basically makes a new image that stays in-between two sprites and draws a line between them. > > What’s happening is a new canvas sprite is created and its width and height change based on the x and y differences between the two sprites you chose. Its width and height change every frame. > > I might add more to this extension, but for right now it’s just a nice little function if you don’t want to do all the math for drawing a line from two points! > > I meant to put this in my first post, but here’s the topic this extension really got out: > [Link](https://forum.makecode.com/t/i-need-help-making-a-game/36982) > **Continuous Rotation** > > This extension is great for procedural animation in the image processing sense, because there’s no physics involved. This extension is for rotating images. > > The reason I created this extension is because I wanted to animate a spinning effect on one of my sprites so that it would face another sprite. I was trying to make a game where you put skeletal bones together to make a creature of some kind. Although I didn’t end up finishing that game, I came up with a cool idea that had many applications. > > I used this extension in one of my games for [this](https://forum.makecode.com/t/javascript-game-jam/37064) topic, where I set each of the segments in a softbody to rotate continuously towards one another (which is totally doable!) > > Along with being able to keep a sprite rotating towards another sprite, this extension can simply be used to rotate a standalone image towards a point. > > That is it for this extension! Thank you everybody for participating and I hope this post is of some use! Also, I would love some suggestions to the IK extension and Ragdoll extension because they need some work! Any suggestions or thoughts are welcome as always. --- _[View the full topic](https://forum.makecode.com/t/procedural-animation-dev-page/41737)._