Looking to learn more about Physics

[ads]

Hey everyone,

 

I was interested in learning more about how to create a physics animation effect, similar to those that I've seen in demos or in live sites (like kairoswatches.com). 

 

Specifically, I'm interested in learning more about what goes into the creation of say....a field of star-esque lights that just link and float about behind other things (for instance). 

 

I'm not trying to have someone make something for me, but while I am an experienced front-end developer, I find the physics stuff slightly intimidating.

 

In summary, if anyone can recommend some resources/methodologies that would best help me with what I'm trying to achieve I'd appreciate it. 

If I need to add/provide any other info, just let me know. Thanks!

[OSUblake]

Hi @ads

 

Great question! GSAP has a lot of plugins with physics based properties, but understanding how to use them can be a little confusing if you're not familiar with the concepts behind them.

 

I would start out by learning how to create animations without using tweens. So use something like TweenLite.ticker or requestAnimationFrame to update each object individually on every tick. This will give you a better understanding of how certain values are going to be affected by different forces.

 

To get started, check out... 

 

Ralph Thomas

Definitely a person you should follow on GitHub

 

UI demos

http://iamralpht.github.io/physics/

 

Repo for demos

https://github.com/iamralpht/gravitas.js

 

I really love his Gmail demo. I've been wanting to make a GSAP version of that for the longest time, but haven't gotten around to it.

http://iamralpht.github.io/fab/

 

Some of Ralph's experiments

http://iamralpht.github.io

 

Repo for experiments

https://github.com/iamralpht/iamralpht.github.io

 

Verlet Physics

There's a ton of different libraries and resources to choose from, but most are based on Box2D. I really can't recommend one, so I'll just let these demos speak for themselves.

 

Probably the most liked pen on CodePen. Need I say more about the awesomeness of verlet physics?

See the Pen KrAwx by dissimulate (@dissimulate) on CodePen

 

I hate spiders. Try to throw the spider of the web and watch him suffer!

http://subprotocol.com/system/spider.html

 

Bouncy shapes. Drag and throw the shapes around

http://subprotocol.com/system/verlet-hello-world.html

 

Gerard Ferrandez is another person to follow. Here's a demo using a verlet engine he created.

See the Pen wazbjv by ge1doot (@ge1doot) on CodePen

 

Another verlet demo by Gerard

See the Pen PqWZvR by ge1doot (@ge1doot) on CodePen

 

Phaser

Phaser is in league of it's on. It's a game engine built on Pixi.js, and works great with GSAP. It also has one of the most supportive communities around. There's an endless supply of tutorials created by the community, and being a game engine, there's a ton of physics involved.

http://phaser.io/learn/community-tutorials

 

Phaser's Box2D plugin with a bunch of different demos.

http://phaser.io/examples/v2/category/box2d

 

Books

 

HTML5 Animation with JavaScript. This is a MUST HAVE book! I don't think I can stress that enough. When I look at stuff on CodePen, it's really amazing to see how many different people and their work have been inspired by this book. 

http://amzn.com/1430236655

 

Here's the accompanying website and repo for that book. This book has several examples that sound similar to the effect you mentioned, so you might want to check out the demos on that site first.

http://lamberta.github.io/html5-animation/

https://github.com/lamberta/html5-animation

 

The Nature of Code: Simulating Natural Systems with Processing. This is another game changing book, but it's a little more advanced, and is focused on algorithms that can be used to simulate natural systems, i.e. the world around us. Note that it written for Processing and uses Java. I honestly don't know how to use either, but the book is written in such a way that makes it pretty easy to convert what is being shown over to JavaScript. There is also a JavaScript library based on Processing called p5.js which might help out, but again, that's something I know nothing about.

http://amzn.com/0985930802

 

EDIT: You can view this book online here.

http://natureofcode.com/book/

 

Hope that helps!

[OSUblake]

Just to save you some time looking through everything, I think Chapter 12 in the HTML5 Animation with JavaScript book has some of the stuff you are looking for.

http://lamberta.github.io/html5-animation/examples/ch12/08-node-garden-mass.html

 

That chapter is towards the end of the book, so it might not be something that you can just jump into without going through earlier chapters.

[PointC]

Great links Blake.

 

I'm really interested in learning more in this area so I'm gonna get started with your book recommendation.

[Dipscom]

Ditto PointC.

[PointC]

Hey Pedro

 

I just got my copy yesterday and went through the first few chapters last night. It's nice having the Trigonometry chapters in there for a refresher as it's been some time since I've used a lot of it. I flipped through the later chapters as well and it all looks like a lot of fun. Tons of awesome information.

 

I'm glad Blake recommended it, but now I know his secret. He may not actually be an AI from the Matrix, but just a human that's really good at math.    

[ads]

Hey all,

 

OP here. Sorry i've been so busy with some job-changing stuff to reply sooner! 


Thanks a ton everyone, this is exactly the type of thing I was looking for. I really appreciate your detailed replies and I plan to visit each of these resources in detail. Thank you again!

[OSUblake]

I'm glad Blake recommended it, but now I know his secret. He may not actually be an AI from the Matrix, but just a human that's really good at math.    

 

Haha! I brought up this book to Diaco some time ago, and it turns out it he knew about it too! But you don't have to be good at math, you just need to understand the different relationships of a triangle.

 

My favorite part of the book was working on the inverse kinematics. I modified this demo into an octo-monster that was throwing people and cars around. So much fun watching them be thrown around like a bunch of rag dolls.

http://lamberta.github.io/html5-animation/examples/ch14/07-play-ball.html

[PointC]

Thanks again for the recommendation Blake.

 

The IK information is also the most interesting to me. I do a lot of puppet work in After Effects and a fair amount of IK/FK work in Cinema 4D so learning to make those types of animations for the browser is quite intriguing to me.

[Dipscom]

This will take me back to my days of 3D... I have been waiting for WebGL, GPU in the browser and things like ThreeJS for years now.

 

Most definitely will be looking into that. Specially the IK systems. 

 

(Just need to stop saying yes to every single banner campaign that gets thrown my way...)

[OSUblake]

Unfortunately, there's no WebGL or matrix math in the book. However, it does a good job covering the fundamentals of 3d animation. I was able to use a lot of the 3d techniques from the book to make an SVG in 3D. It's slow, and I wouldn't recommend doing something like that for production, but it works!

 

See the Pen eNKYbG?editors=0010 by osublake (@osublake) on CodePen

[Dipscom]

Shoulda have bought the book and read it all over the last weekend... Now I need to discover how viable is to make a exploding ball of pink dust and/or coloured liquid mixing.

 

Clients, eh? Will ask you the world.

[OSUblake]

Liquid is hard. I only know how to do it in 2D with meatballs...

http://gamemechanicexplorer.com/#fluid-1

 

Here's a really nice version of that.

See the Pen jbbeMo by tmrDevelops (@tmrDevelops) on CodePen

[Dipscom]

The hard bit is going to be fitting it all in the allocated file size... I'm still waiting some confirmation but it can be anywhere between 10kb and 200bk. Possibly no libraries allowed...

 

:'(

 

 

Thanks for the examples Blake - I will sink my teeth into them later on.

[OSUblake]

I don't get the point of a library restriction. We want quality work from you, but no outside help!

 

But you'd be surprised how much stuff you can do with 10kb. Just look at some of the stuff you can do with only 50 LOC...

http://codepen.io/tmrDevelops/post/50lines-less

[OSUblake]

Sarah Drasner is working on a repo where she is rewriting stuff from The Nature of Code and some of Rachel Smith's hack physics demos over to plain JavaScript and SVG. You might want to follow along. She knows her stuff!

https://github.com/sdras/JS-stroll

 

I also found out that you can actually view The Nature of Code online for free! It even has some examples you can play around with.

http://natureofcode.com/book/

 

@@PointC

You don't have to use the canvas with that HTML Animation book if you don't want to. You can do the exact thing Sarah is doing, and use SVG instead. The only part of the book you can't use SVG for is the image/pixel manipulation. The 3D animation part is possible with SVG, but it's a little trickier because you need to re-append your elements to change their z-index.