Part 2 was a little math heavy so I want to change tact a little bit in this part. We’re going to talk about how we can ‘fake’ spring physics to animate stuff with canvas, but I also want to demystify/address my process for coding pens a little.
Here are some things I am commonly told/asked
- "How do you know what to make on CodePen and then how to make it?"
- "You must be a math wiz!"
- "I’m not good at math so I could never make the cool stuff you do."
- "What do I need to read to make the things you do?"
Some #realtalk about me
- I am not that good at math and in fact know very little math off the top of my head
- I rarely know what to put in my pens, 90% of the time the end result is actually due to an “accidental discovery” while messing around
- I didn’t read a whole lot of material before making any canvas pens or using the canvas element.
- I am really good at Googling and then not-reading stuff until I find something useful
- I am completely unafraid to take someone else's code and just start hacking away at it
Why am I telling you this? Well it plays in to how I came up with the spring physics code I’m using for this post. I didn’t actually know the code to create a spring animation off the top of my head before writing this series so I needed to figure it out before I could share it with you, fabulous reader.
Step 1 - Google
Maybe you’re one of those people that likes to develop a deep understanding of a subject when you approach it. I am definitely not one of those people. I just learn the minimal amount to get shit done. That’s why when I come across articles like this I skip over theory explanation and go straight to the code example.
Step 2 - Hack at someone else’s code
So at the bottom of the article there is a JS fiddle example of the spring equation in action. I took the code right out of there and dumped it in a pen so I could edit it. This part is important. I think its where a lot of people stop themselves. How much time do you spend on CodePen looking at all the pretty things, wishing you could do the same without ever forking and having a go at it? I know I used to do this a lot.
I think there’s a fear of trying to mess with other people’s code. Maybe we’re scared we’ll break it and won’t be able to fix it and then we’ll feel stupid or something? But there is no better way to learn! I’m going to make like Shia Lebouf here and tell you to just do it. JUST DO IT!
Don’t let your dreams be dreams.
// this the spring magic in the loop - for example the x property of an object // spring & damper from k (stiffness) and b (damping constant) var spring_x = k * ( (block.x - target.x)); var damper_x = b * ( block.vx ); // update acceleration block.ax = ( spring_x + damper_x ) / block.mass; // update velocity block.vx += block.ax * (t/1000); // update position block.x += block.vx * (t/1000);
I don’t know what the damping constant is about, I don’t know what the stiffness means. I don’t really care! It works.
So now we have the spring equation we can spring all the things!
Spring the position of this circle!
Spring the radius of these circles!
Spring the curve of these lines! (they ain't even canvas, this is in SVG)
You see, once we figure out something like how to create spring motion, we can create any number of derivative effects based on the same code. And I still don’t know what damping even means! Hack physics!
I love love love getting your tweets and comments showing me the things you made after reading my blog posts, so please keep sending them to me!
If you have a question or a topic you would like me to write about next, please leave a comment for me a below, send me a tweet at @rachsmithtweets or flick me an email at contact at rachsmith dot com.