How to pass function objects to web workers in html?

Question

I am animating an svg element in my html code. Basically I have an interval, and each time it runs, it transforms several svg tags. And this causes much lag in the web app. Is there a way I can create a web worker and in there transform the object?

    var walk = function() {
        var step = 0, rotation_angle = 50, head_angle = 10, torso_angle = 5, arm_angle = 15;
        interval = setInterval(function() {
            main.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            head.transform(-(Math.cos(step * 0.8)) * torso_angle, 1, 1, 0, 0, 0, 0);
            torso.transform(-(Math.cos(step * 0.8)) * torso_angle, 1, 1, 0, 0, 0, 0);
            leftArm.transform((Math.sin(step * 0.8)) * arm_angle, 1, 1, 0, 0, 0, 0);
            rightArm.transform(-(Math.cos(step * 0.8)) * arm_angle, 1, 1, 0, 0, 0, 0);
            rightLeg.transform(-(Math.cos(step)) * rotation_angle, 1, 1, 0, 0, 0, 0);
            leftLeg.transform((Math.sin(step)) * rotation_angle, 1, 1, 0, 0, 0, 0);
            step += 0.1;
        }, 0.5);                             
    };

For example, I want to make a walking animation, so I rotate these things. main, head, ... are function objects that I created that has the transform function property. But is there a way I can change it to something like

    var walk = function() {
        var step = 0, rotation_angle = 50, head_angle = 10, torso_angle = 5, arm_angle = 15;
        interval = setInterval(function() {
            new web_worker(function() {
                 main.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            new web_worker(function() {
                 head.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            new web_worker(function() {
                 torso.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            new web_worker(function() {
                 leftArm.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            new web_worker(function() {
                 rightArm.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            new web_worker(function() {
                 rightLeg.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            new web_worker(function() {
                 leftLeg.transform(-(Math.sin(step * 0.8)) * head_angle, 1, 1, w/2, h/2, 0, 0);
            });
            step += 0.1;
        }, 0.5);                             
    };

So that all the transforms happen concurrently in each interval function?

Thanks

Answer 1

I have glanced by this post too many times without giving an answer. Figured someone might want it.

Use the function constructor new Function(argIdentifiers...,scopeString) as shown here.