5 Replies - 1346 Views - Last Post: 15 March 2018 - 06:16 PM

#1 UniverseIsASimulation   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 50
  • Joined: 13-February 18

Grandfather Clock

Posted 06 March 2018 - 10:50 PM

Hey, guys! I am trying to make a "Grandfather Clock" animation in Javascript using SVG:
Grandfather Clock
Any ideas how to make the pendulum move more realistically? Currently it moves by the formula:
angular_speed=arctan(sqrt(maximum_height-current_height)))

and the current height is calculated by the formula:
current_height=lenght-length*cos(current_angle)

I thought those were the physically correct formulas, yet somehow it doesn't feel quite realistic.

Is This A Good Question/Topic? 0
  • +

Replies To: Grandfather Clock

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6820
  • View blog
  • Posts: 28,262
  • Joined: 12-December 12

Re: Grandfather Clock

Posted 07 March 2018 - 02:07 AM

Topic moved from Graphic Design to Javascript (it is not to do with Graphic Design, more Javascript and Physics).

Simulate the Physics of a Pendulum's Periodic Swing
Was This Post Helpful? 0
  • +
  • -

#3 UniverseIsASimulation   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 50
  • Joined: 13-February 18

Re: Grandfather Clock

Posted 07 March 2018 - 06:08 AM

Maybe even better in some games-related topic, I guess that the game-programmers tend to know those kind of stuff.
Was This Post Helpful? 0
  • +
  • -

#4 ge∅   User is offline

  • D.I.C Lover

Reputation: 195
  • View blog
  • Posts: 1,194
  • Joined: 21-November 13

Re: Grandfather Clock

Posted 08 March 2018 - 11:48 AM

I actually find the animation quite good. I can feel the pendulum accelerate and decelerate at the right moment. The problem is that the movement is jittery. Can you show us your JS code which updates the SVG as well as the animation loop ?
Was This Post Helpful? 0
  • +
  • -

#5 UniverseIsASimulation   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 50
  • Joined: 13-February 18

Re: Grandfather Clock

Posted 15 March 2018 - 02:23 PM

The code is under 100 lines and everything is in one file. Can you look at the source code in your browser?
Was This Post Helpful? 0
  • +
  • -

#6 ge∅   User is offline

  • D.I.C Lover

Reputation: 195
  • View blog
  • Posts: 1,194
  • Joined: 21-November 13

Re: Grandfather Clock

Posted 15 March 2018 - 06:16 PM

Ok, there are several issues with your code:

1- The animation loop updates every 1/10s, it's not enough. It should update at least 3 (and up to 6) times as much to look fluid.

-> drop setInterval and use requestAnimationFrame with a recursive function to update the animation.

2- you have useless things going on in your animation loop: the hands of the clock don't need to move every tenth (or sixtieth) of a second.

-> don't recompute their angle in the same loop as the pendulum, or add a condition to prevent the computation when not necessary. You should also use getElementById outside the animation loop. There is no need to get the same elements again and again. This function is fast, but still, it will make your code more tidy and meaningful.

3- I noticed you incremented the position of the pendulum. It isn't great with setInterval because setInterval is not very precise, so your pendulum doens't update its position correctly: it will often be a little late or a little early. Using requestAnimationFrame will not necessarily help because it will now run as fast as possible, which will accelerate your pendulum and make it subject to slow downs when there is a drop in the performances.

-> you should predict the angle of the pendulum based on the Date object instead of incrementing the last angle. This is the most important point actually: paradoxically, if you fix the other points, the animation will be more fluid but it will also look less like a pendulum because it won't be accurate.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1