Walls are in the incorrect place - famo.us

Question

When I set the balls origin to [0.5,0.5] the walls are placed correctly, when i set its transform or origin to any other location the walls move as well?
I have tried to explicitly set the engines origin but that doesn't work either
this code is copy paste able into main.js in the famous starter kit
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var EventHandler = require('famous/core/EventHandler');
var View = require('famous/core/View');
var Transform = require('famous/core/Transform');
var $ = require('jquery');
var StateModifier = require('famous/modifiers/StateModifier');
var Modifier = require('famous/core/Modifier');
var PhysicsEngine = require('famous/physics/PhysicsEngine');
var Body = require('famous/physics/bodies/Body');
var Circle = require('famous/physics/bodies/Circle');
var Wall = require('famous/physics/constraints/Wall');
var Vector = require('famous/math/Vector');
var context = Engine.createContext();
var handler = new EventHandler();
//{origin:[0.5,0.5]}
var physicsEngine = new PhysicsEngine();
$('#game').on('click', function(event) {
console.log('x '+event.clientX);
console.log('y '+event.clientY)
createBall(event.clientX, event.clientY);
})
var leftWall = new Wall({
normal: [1, 0, 0],
distance: window.innerWidth / 2.0,
restitution: 0.5
});
var rightWall = new Wall({
normal: [-1, 0, 0],
distance: window.innerWidth / 2.0,
restitution: 0.5
});
var topWall = new Wall({
normal: [0, 1, 0],
distance: window.innerHeight / 2.0,
restitution: 0.5
});
console.log(window.innerHeight )
console.log(window.innerWidth )
var bottomWall = new Wall({
normal: [0, -1, 0],
distance: window.innerHeight / 2.0,
restitution: 0.5
});
leftWall = physicsEngine.attach(leftWall,[]);
rightWall = physicsEngine.attach(rightWall,[]);
topWall = physicsEngine.attach(topWall,[]);
bottomWall = physicsEngine.attach(bottomWall,[]);
var balls = []
function createBall(x, y) {
var ball = new Surface({
size: [100, 100],
properties: {
backgroundColor: 'red',
borderRadius: '100px'
}
})
ball.state = new StateModifier({
// transform: Transform.translate(x, y, 0)
});
ball.particle = new Circle({
radius: 50,
position : new Vector(x, y, 0)
});
physicsEngine.addBody(ball.particle);
ball.on("click", function() {
console.log('clicked ball')
ball.particle.setVelocity([1, 1, 0]);
});
context.add(ball.state).add(ball)
Engine.on('prerender', function() {
ball.state.setTransform(ball.particle.getTransform())
});
// balls.push(ball.particle);
//bottomWall = physicsEngine.attach(ball.particle,balls);
physicsEngine.attachTo(leftWall,ball.particle);
physicsEngine.attachTo(rightWall,ball.particle);
physicsEngine.attachTo(topWall,ball.particle);
physicsEngine.attachTo(bottomWall,ball.particle);
}
});

Answer 1

The physics collision and adding of particles is driven by the origin of the physics engine in famo.us, so you would want to set the origin of the physics engine to your render node.
As you can see from the code below or the following link:
jsFiddle Link
The placement of the walls are driven by the origin of the physics engine when they are attached. The particles you attach to the walls are bound by the origin of the physics engine also, so changing their origin is going to have an effect on their collision to the walls.
The example code does not attach a modifier to the circles, but adds them to the particles. I am not sure if you were trying to do something different, but hopefully this answers your question.
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var RenderNode = require('famous/core/RenderNode');
var EventHandler = require('famous/core/EventHandler');
var View = require('famous/core/View');
var Transform = require('famous/core/Transform');
//var $ = require('jquery');
var StateModifier = require('famous/modifiers/StateModifier');
var Modifier = require('famous/core/Modifier');
var PhysicsEngine = require('famous/physics/PhysicsEngine');
var Body = require('famous/physics/bodies/Body');
var Circle = require('famous/physics/bodies/Circle');
var Wall = require('famous/physics/constraints/Wall');
var Vector = require('famous/math/Vector');
var context = Engine.createContext();
var node = new RenderNode();
var physicsOrigin = [0.5, 0.5];
var radius = 50;
context.add(new Modifier({
origin: physicsOrigin
})).add(node);
var handler = new EventHandler();
var physicsEngine = new PhysicsEngine();
node.add(physicsEngine);
console.log(window.innerHeight);
console.log(window.innerWidth);
var dimX = window.innerWidth;
var dimY = window.innerHeight;
Engine.on('click', function (event) {
console.log('x ' + event.clientX);
console.log('y ' + event.clientY)
var x = event.clientX - (dimX * physicsOrigin[0]);
var y = event.clientY - (dimY * physicsOrigin[1]);
createBall(x, y);
});
var leftWall = new Wall({
normal: [1, 0, 0],
distance: Math.round(dimX / 2.0),
restitution: 0.5
});
var rightWall = new Wall({
normal: [-1, 0, 0],
distance: Math.round(dimX / 2.0),
restitution: 0.5
});
var topWall = new Wall({
normal: [0, 1, 0],
distance: Math.round(dimY / 2.0),
restitution: 0.5
});
var bottomWall = new Wall({
normal: [0, -1, 0],
distance: Math.round(dimY / 2.0),
restitution: 0.5
});
var balls = [];
physicsEngine.attach([leftWall, rightWall, topWall, bottomWall], balls);
function createBall(x, y) {
var ball = new Surface({
size: [radius * 2, radius * 2],
properties: {
backgroundColor: 'blue',
borderRadius: (radius * 2) + 'px'
}
})
ball.particle = new Circle({
radius: radius,
position: [x, y, 0]
});
physicsEngine.addBody(ball.particle);
node.add(ball.particle).add(ball)
ball.on("click", function () {
console.log('clicked ball')
ball.setOptions({properties: {backgroundColor: 'red'}});
ball.particle.setVelocity([1, 1, 0]);
});
balls.push(ball.particle);
}
});