search

gitjhn / p5-vs-R

Processing vs Raphael experiment for HTML5 canvas using javascript.
1 stars 1 forks source link

Animating Splines #2

Open ninjapanzer opened 9 years ago

ninjapanzer commented 9 years ago

So this peeked my curiosity about dynamically creating the spline curve. If I didn't start with a set of points do you think it would be reasonable to project a path in a spiral. Not to bring up games but I would like to move icons across a path like in zuma

zuma-deluxe-3

Basically as the number if items increases on the line I want to keep spiraling them.

gitjhn commented 9 years ago

@ninjapanzer In Raphael once you have a path (number of creation points do not matter) you can follow it. Simple in Raphael.

See: http://raphaeljs.com/gear.html

gitjhn commented 9 years ago

@ninjapanzer Here is a tutorial on creating spiral paths on a canvas. Adapt to your needs.

Circles, Spirals and Sunflowers An HTML5/canvas tutorial by Jim Bumgardner http://krazydad.com/tutorials/circles/

ninjapanzer commented 9 years ago

Cool thats part of the problem next I have to figure out how to build the spiral so it has more levels the longer the path gets. So to kind of looks like a roll of tape being spooled

gitjhn commented 9 years ago

Not sure I understand. I checked out http://zumadeluxe.co/ and the path does not move only the balls. If the path is different on subsequent levels...just draw the new path.

gitjhn commented 9 years ago

@ninjapanzer Can you clarify how you want to build your levels? path? that differs from the above link I looked at?

gitjhn commented 9 years ago

From the above tutorial example 6 has a basic spiral. http://krazydad.com/tutorials/circles/showexample.php?ex=basic_spiral

gitjhn commented 9 years ago

Unless you are trying to do something different then the above linked Zuma game--I would create all the level paths in Inkscape. It would be a lot easier. It even has a spiral tool.

gitjhn commented 9 years ago

21 GIFs That Explain Mathematical Concepts http://www.iflscience.com/brain/math-gifs-will-help-you-understand-these-concepts-better-your-teacher-ever-did