Функция не меняет значение, и анимация исчезает

Question

Я использую скрипт для анимации маятника, найденного в Интернете. Теперь я хочу добавить кнопки для изменения любого из параметров маятника, объявленного глобальным. Я пытаюсь глобальная функция OnClick в HTML, но после нажмите анимацию disapeared ...

var pendulum = {mass: 100, length:500, theta: (Math.PI/2) - 0.05, omega: 0, alpha:0, J:0}; 
 

 
/* My changes... */ 
 
function changeBig(){ 
 
    pendulum = {mass: 100, length:100, theta: (Math.PI/2) - 0.05, omega: 10, alpha:0, J:0}; 
 
} 
 

 
function changeSmall(){ 
 
    pendulum = {mass: 100, length:100, theta: (Math.PI/2) - 0.05, omega: 1, alpha:0, J:0}; 
 
} 
 
/* My changes end */

canvas { 
 
    display:block; 
 
    margin:0px auto; 
 
    height:600px; 
 
    width:400px; 
 
    border:none; 
 
}

<canvas id="canvas" height="600" width="400"></canvas> 
 
<button onClick="changeSmall()">Small</button> 
 
<button onclick="changeBig()">Huge </button>

Так что я должен изменить, чтобы сделать эти кнопки работают, я имею в виду изменить омега здесь (как далеко маятник будет качаются?

Answer 1

Вы не можете просто переписать pendulum объекта. Он используется во время анимации для изменения значений.

Простого исправления, чтобы изменить значение омеги с

function changeBig(){ 
    pendulum.omega = 10; 
} 

function changeSmall(){ 
    pendulum.omega = 1; 
} 

Все более активное участие потребует существенного рефакторинга кода.