crank motion with svg

Question

Hi I'm trying to reproduce this crank motion animation with svg and javascript. The Crosshead need a translate animation and the Crank a rotation animation but how could I get the ConRod animation ? In the svg there is values given to animate and animateTransform but is there an equation which allow us to reproduce this ? Does anyone have an idea

user_12656388 · Answer

{
    const svg = document.querySelector('svg');
    const crank = svg.querySelector('#crank');
    const crosshead = svg.querySelector('#crosshead');
    const conrod = svg.querySelector('#conrod');
    const bar_rect = svg.querySelector('#slidebar');
    
    const bar1 = svg.querySelector('#bar1');
    const bar2 = svg.querySelector('#bar2');
    
    // You can change those a bit
    const center = [800,150];
    const crank_len = 100;
    const conrod_len = 500;
    const crosshead_len = 100;
    const rotation_speed = 1;
        
    bar_rect.setAttribute('width', crank_len*2 + crosshead_len);
    bar1.setAttribute('y', center[1] - 37.5);
    bar1.setAttribute('x', center[0] - crank_len - conrod_len - crosshead_len/2);
    bar2.setAttribute('y', center[1] + 37.5);
    bar2.setAttribute('x', center[0] - crank_len - conrod_len - crosshead_len/2);
    
    crosshead.querySelector('rect').setAttribute('x', -crosshead_len/2);
    crosshead.querySelector('rect').setAttribute('width', crosshead_len);
    
    let angle = 0;
    
    draw();

    function draw(){
    
        crank.setAttribute('transform', `translate(${center[0]},${center[1]}) rotate(${angle+180}, 0, 0) scale(${crank_len/100})`);
        
        let crank_x = center[0] + Math.cos(angle*(Math.PI/180))*crank_len;
        let crank_y = center[1] + Math.sin(angle*(Math.PI/180))*crank_len;
        
        let crosshead_x = crank_x - Math.sqrt(conrod_len**2 - (crank_y-center[1])**2);
        let crosshead_y = center[1];
        
        crosshead.setAttribute('transform', `translate(${crosshead_x},${crosshead_y})`);
        
        let conrod_angle = Math.acos((crank_x-crosshead_x)/conrod_len)*(180/Math.PI);
        
        conrod_angle = (crank_y > center[1])? conrod_angle : -conrod_angle;
        
        conrod.setAttribute('transform', `translate(${crosshead_x},${crosshead_y}) rotate(${conrod_angle},0,0) scale(${conrod_len/500})`);

                
        angle = angle%(360) + rotation_speed;
        
        requestAnimationFrame(draw);        
    }

}

crank motion with svg

1 Answers