# PhysicsJS on mobile devices: how to optimize for speed

I'm (physics n00b) developing a small animation (gamification) in a mobile HTML5 app (PhysicsJS, HTML5, Cordova, Ionic, JavaScript).

This animation is derived from Basket of verlet constraints. This basket has to carry a lot more bodies (circles).

I'm experiencing performance problems, even on decent hardware (iOS and Android, the latter is worse). The bodies move like if they were in an aquarium. If I remove the basket, the performance is way better, but not yet satisfactory.

How can this be optimized in a sense that users don't have the feeling of watching a film in slow-motion?

Are there any tweaks to control the engine to do less calculation?

Am I using the appropriate physics engine or are there alternatives with significant better performance?

Remark: on my MacBook in Chrome, there is absolutely no performance problem and all movements are very smooth -> no aquarium.

Theres the parameter maxIPF given to the Physics constructor, set that lower for a faster but less precise simulation. But this may be a question more of whole program optimization, do some profiling.

I've found following tweaks to gain performance on mobile devices:

• removed basket (too many bodies to calculate)
• don't render on each step (see code below)
• use world.warp() to scale time increments
• use a changed gravity factor
• call world.pause() and world.unpause() whenever appropriate (e.g. when canvas gets invisible due to a dialog covering it)

With following options the tweaks are set:

var options = {
gravityFactor: 1,
warp: 1,
renderSteps: 1
};
if (ionic.Platform.isWebView()) {
options = {
gravityFactor: 2,
warp: 5,
renderSteps: 2
};
}


Don't render on each step

// render on each step
var stepNo = 0;
world.on('step', function () {
++stepNo;
if (stepNo % options.renderSteps === 0) {
world.render();
}
});


use world.warp() to scale time increments

world.warp(options.warp);


use a changed gravity factor

var GRAVITY = 0.0004; // standard gravity for PhysicsJS

var acceleration = Physics.behavior('constant-acceleration')
.setAcceleration({x: 0, y: GRAVITY * options.gravityFactor});