7 ms·

Animations From First Principles (in 5 minutes)

108 points by RojerGS 3y ago

ttfkam 3y ago
Not to be confused with the 12 principles of animation. https://youtu.be/uDqjIdI4bF4 https://youtu.be/uDqjIdI4bF4 mathspp.com will help with making an animation programmatically. The video I linked will help the animation be more compelling for the viewer.
bmer 3y ago
I do not understand how this is from "first principles"?
- cdchn 3y ago
  Drawing circles point by point from sine and cosine seems pretty first principles to me.
  - RojerGS 3y ago
    This.
- lelanthran 3y ago
  > I do not understand how this is from "first principles"? What would be "first principles in animation", in your opinion?
- atoav 3y ago
  I think it is from first principles, cause what more would one want, have them write an OS first? Or should they mine for rare earths to build their own CPU? You have to start somewhere reasonable and rhis is somewhere reasonable, afaik. This is about how to do animations with primitive shapes, that knowledge would probably translate to many other environments. You could even follow the tutorial with pen and paper if you are into that.
noelwelsh 3y ago
Looks really nice. A few things that I think might make the presentation a bit clearer: 1. Using polar coordinates makes the maths a lot cleaner than using Cartesian coordinates. However you then either need to explain polar coordinates, or you assume people remember polar coordinates from high school which is often not the case in my experience. 2. I think the positioning of the points is a little bit opaque. I was expecting to see (r * cos theta, r * sin theta) and it took me by surprise to see an addition in there. Either just noting that stupid computer graphics libraries don't put the origin at the center, or adding that translation later (which is a chance to talk about function composition) might be beneficial. (I've written my own take on this same topic, starting at http://www.creativescala.org/creative-scala/polygons/ http://www.creativescala.org/creative-scala/polygons/ It will take a little bit more than 5 minutes to get through it :-) It's really fun and you can do a huge amount with parametric curves.)
- RojerGS 3y ago
  I can make it more explicit that the addition is to centre the figures in the canvas.
HanClinto 3y ago
Looks great! Really nicely illustrated!
danbruc 3y ago
Drawing a circle by drawing circles - tiny ones, they will just look like single pixels - might be confusing to some, including me. I would suggest connecting adjacent points with lines, that is conceptually not really harder than just drawing the points and it will always give you a complete curve even if a step jumps across a couple of pixels.
throwaway5947 3y ago
Not to be confused with “the twelve”: https://en.m.wikipedia.org/wiki/Twelve_basic_principles_of_animation https://en.m.wikipedia.org/wiki/Twelve_basic_principles_of_a...
samjohnation111 3y ago
[dead]
RojerGS 3y ago
Hey there, OP here. I jotted down some thoughts on how I think about (simple) animations and how to create them with some programming (in Python). I'd love to hear your thoughts on my write up and also what directions you suggest I take these personal explorations in.
toppy 3y ago
I like clarity of your examples. You could draw an inspiration from Daniel Shifman's book "Nature of code" (https://natureofcode.com/book/ https://natureofcode.com/book/) - see chapters 2 and 3 for instance.
- RojerGS 3y ago
  Thanks for the reference! I don’t know this book but I’ll take a look!
tantalor 3y ago
This is very accessible. With a few tiny changes it could run in JS in the browser, in a fiddle or something. Then reader could tweak the code and see changes without having to run pygame.
- RojerGS 3y ago
  That’s a great suggestion. People could immediately see what they’re drawing!

108 points by RojerGS 3y ago

Not to be confused with the 12 principles of animation. https://youtu.be/uDqjIdI4bF4 https://youtu.be/uDqjIdI4bF4 mathspp.com will help with making an animation programmatically. The video I linked will help the animation be more compelling for the viewer.

bmer 3y ago

I do not understand how this is from "first principles"?

cdchn 3y ago
Drawing circles point by point from sine and cosine seems pretty first principles to me.
- RojerGS 3y ago
  This.
lelanthran 3y ago
> I do not understand how this is from "first principles"? What would be "first principles in animation", in your opinion?
atoav 3y ago
I think it is from first principles, cause what more would one want, have them write an OS first? Or should they mine for rare earths to build their own CPU? You have to start somewhere reasonable and rhis is somewhere reasonable, afaik. This is about how to do animations with primitive shapes, that knowledge would probably translate to many other environments. You could even follow the tutorial with pen and paper if you are into that.

noelwelsh 3y ago

Looks really nice. A few things that I think might make the presentation a bit clearer: 1. Using polar coordinates makes the maths a lot cleaner than using Cartesian coordinates. However you then either need to explain polar coordinates, or you assume people remember polar coordinates from high school which is often not the case in my experience. 2. I think the positioning of the points is a little bit opaque. I was expecting to see (r * cos theta, r * sin theta) and it took me by surprise to see an addition in there. Either just noting that stupid computer graphics libraries don't put the origin at the center, or adding that translation later (which is a chance to talk about function composition) might be beneficial. (I've written my own take on this same topic, starting at http://www.creativescala.org/creative-scala/polygons/ http://www.creativescala.org/creative-scala/polygons/ It will take a little bit more than 5 minutes to get through it :-) It's really fun and you can do a huge amount with parametric curves.)

RojerGS 3y ago
I can make it more explicit that the addition is to centre the figures in the canvas.

HanClinto 3y ago

Looks great! Really nicely illustrated!

danbruc 3y ago

Drawing a circle by drawing circles - tiny ones, they will just look like single pixels - might be confusing to some, including me. I would suggest connecting adjacent points with lines, that is conceptually not really harder than just drawing the points and it will always give you a complete curve even if a step jumps across a couple of pixels.

throwaway5947 3y ago

Not to be confused with “the twelve”: https://en.m.wikipedia.org/wiki/Twelve_basic_principles_of_animation https://en.m.wikipedia.org/wiki/Twelve_basic_principles_of_a...

samjohnation111 3y ago

[dead]

RojerGS 3y ago

Hey there, OP here. I jotted down some thoughts on how I think about (simple) animations and how to create them with some programming (in Python). I'd love to hear your thoughts on my write up and also what directions you suggest I take these personal explorations in.

toppy 3y ago

I like clarity of your examples. You could draw an inspiration from Daniel Shifman's book "Nature of code" (https://natureofcode.com/book/ https://natureofcode.com/book/) - see chapters 2 and 3 for instance.

RojerGS 3y ago
Thanks for the reference! I don’t know this book but I’ll take a look!

tantalor 3y ago

This is very accessible. With a few tiny changes it could run in JS in the browser, in a fiddle or something. Then reader could tweak the code and see changes without having to run pygame.

RojerGS 3y ago
That’s a great suggestion. People could immediately see what they’re drawing!