Develop Reference

(JavaScript/CEP) Is it possible to get the origin of my page on InDesign?

I'm working on an InDesign plugin and I would like to know if it is possible to get the origin of my page?
I was thinking about something like this :
var origin = app.activeDocument.pages[0].getOrigin();
Thank you in advance for your help !
EDIT:
I will explain my problem more precisely:
The mission I have to accomplish here is to display shapes using coordinates that I receive through an API call.
There's a problem with this: the user can edit the origin (x, y) on InDesign. If it changes the origin of the board, the shapes no longer end up where they should be placed normally on the page.
Here in red, the shapes are in the right place.
In blue, they are not in the right place because I modified the origin of the board.
So I need to recover the origin of the page to be able to calculate the difference between the origin of my board and the origin of my page. This will allow my shapes to always be in the right place.

The value of a documents zeroPoint property is an array of two numbers.
The number at index 0 is the zero point on the X axis
The number at index 1 is the zero point on the Y axis.
For example:
app.activeDocument.zeroPoint;
yields [0,0] for a newly created document, i.e. for a document whose zero point has not been changed from its default position.
Example usage:
When creating a new page item it's necessary to calculate the zeroPoint values to ensure you are positioning it at the desired location.
Example A:
Let's say we want to add a new square shaped text frame on the first page of a document that's always positioned at the top-left corner of the page regardless of the current zero point position.
In which case our code will be akin to the following:
var doc = app.activeDocument;
// 1. Obtain the zero point on the x axis.
var zeroPointX = doc.zeroPoint[0];
// 2. Obtain the zero point on the y axis.
var zeroPointY = doc.zeroPoint[1];
// 3. Create a new text frame that is always positioned at the top left corner
// of the first page, regardless of the zero point position.
doc.pages.item(0).textFrames.add({
geometricBounds: [
0 - zeroPointY,
0 - zeroPointX,
50 - zeroPointY,
50 - zeroPointX
],
contents: "Lorem ipsum dolore"
});
As you can see, in the preceding example, we subtract the zeroPointX and zeroPointY values from the desired geometricBounds values accordingly when defining them for the new text frame.
Example B:
Calculating the the zeroPoint values when setting the geometricBounds can become tedious, particularly when creating multiple page items. It's often simpler and more efficient to:
Obtain the current zero points [x,y].
Set the x and y zero points both to zero.
Then create/add the new page item(s).
Finally, revert the zero points to their original position.
The following gist demonstrates the aforementioned approach:
var doc = app.activeDocument;
// 1. Obtain the original zero point.
var originalZeroPoints = doc.zeroPoint;
// 2. Set x and y zero points both to zero.
doc.zeroPoint = [0,0];
// 3. Create a new text frame that is always positioned at the top left corner
// of the first page, regardless of the zero point position.
doc.pages.item(0).textFrames.add({
geometricBounds: [0, 0, 50, 50],
contents: "Lorem ipsum dolore"
});
// 4. Revert the zero point to original position.
doc.zeroPoint = originalZeroPoints;
As you can see, in this preceding example it produces the same result as "Example A", however we don't do any calculations when setting the geometricBounds, instead we simply define our values as desired, i.e. geometricBounds: [0, 0, 50, 50]

rulerOrigin (if you meant this) is a feature of a document a whole. It's not a feature of a single page.
For example, you can get and see the rulerOrigin of current document this way:
alert(app.activeDocument.viewPreferences.rulerOrigin);
And the same way you can change this feature:
app.activeDocument.viewPreferences.rulerOrigin = RulerOrigin.SPREAD_ORIGIN;
https://documentation.help/InDesign-CS5/pe_RulerOrigin.html

How would I go about drawing a box area using lines in Babylonjs?

I'm attempting to create a box out of lines on the floor of a babylonjs project, I know I need to create a vector for each point, but I can't figure out what the marker points would need.
posOne = new BABYLON.Vector3(10, 0, -100)
posTwo = new BABYLON.Vector3(-100, 0, 10)
posThree = new BABYLON.Vector3(100, 0, 10)
posFour = new BABYLON.Vector3(10, 0, 100)
const updatePath = () => {
path = [];
path.push(posOne);
path.push(posTwo);
path.push(posThree);
path.push(posFour);
};
updatePath();
var linesMesh = BABYLON.Mesh.CreateLines("lines", path, scene, true);
I have this so far, but I can't seem to connect the lines or get them to form a square. I'm really bad at maths, so it would be interesting to know the theory behind this!

first - a playground: http://www.babylonjs-playground.com/#XBGEQ
To create a box you will need to connect 5 points (the last point beint the same as the first one). If oyu want them to be at the same height, the y axis (as you understood also) should stay 0. Then, it is all a matter of understanding where the next dot is.
let's say the box should be 10 units wide. the "upper" left corent is (-5, 0, 5), because the x is negative and z is positive forward. The next point, the "upper" right corner is (5,0,5). From there you go "down" (actually towards you) to (5,0,-5) and eventually to (-5,0,-5). Afterwards, just add the first point to complete the box.

How to create 2D physics blob similar to the "Sushi Cat Game" using javascript physics engine?

I am trying to create HTML5 game that similar to Sushi Cat game. I followed a similar tutorial from Emanuele Feronato's blog post and then came up with the structure like the picture A in this image, where the gray orbits are allowed to penetrate each other, and the red lines are distantConstraint.
But the problem is when the blob fell from a high place (or hitting corner), it becomes like in picture B.
I tried to use spring, different constraint force, smaller orbits, but they are not working properly.
My questions:
What is the solution for this? Or where can I find the solution on the web?
Is there any other js physics engine that has a specific feature to do this task?

Remove the symmetry
Just add some additional constraints to the points. The current symmetry of the shape means that round and folded in half are both valid and relaxed configurations.
Radial constraints.
Using one of the lines from the center to the outside as a referance, give each spoke an offset angle from that line.
Then each outside point will be moved as follows.
Get angle of ref line.
var ang = Math.atan2(refLine.p2.y - refLine.p1.y, refLine.p2.x - refLine.p1.x);
Then for each line move the end point towards its desired relative angle position.
// line is a spoke line with a property angle that is the angle from the
// reference line
var x = refLine.p1.x; // get center point
var y = refLine.p2.y;
// get position relative to ref ang
line.x = Math.cos(line.angle + ang) * line.length + x;
line.y = Math.sin(line.angle + ang) * line.length + y;
Do that for each spoked line and apply it after you apply the line length constraints.
In referance to the image you gave the line from center to 12 o'clock is the reference line then the other spoked lines will have angles restrained as follows.
1 o'clock is 30deg from ref
2 o'clock is 60
3 is 90 so on to 6 at 180deg
And the other direction
11 o'clock is -30deg from ref
10 o'clock is -60 and so on
You will be able to ignore the 6 o'clock line incase giving it a constraint makes the object want to roll to the right.
Only one
This now means that there is only one solution to the possible states rather than the many that you had.

The reason why the blob folds into itself, is because gravity will squish the blob points and the distance joints will find a new valid configuration. The job of the distance joint is just to maintain a given distance between two points, and it doesn't really do anything to prevent the self-folding.
An alternative approach is using Prismatic Joints (also called "slider joints"). With prismatic joints, the outer blob circles would slide along an axis radially from the center of the blob. To make the blob springy, you could add some kind of springs between the blob center and the circles. If the blob still self-folds, you could add limits to the prismatic joints, so the circles can only slide a certain distance.
This video demonstrates prismatic joints in a similar fashion, using the RUBE physics editor (using box2d under the hood).
A similar scene was made using p2.js physics engine, read more here. (direct link to demo). The part of the code that constructs the Prismatic Joints in the p2.js demo is:
// Constrain the capsule body to the center body.
// A prismatic constraint lets it move radially from the center body along one axis
var prismatic = new p2.PrismaticConstraint(wheelBody, body, {
localAnchorA : [0, 0],
localAnchorB : [0, 0],
localAxisA : [Math.cos(angle), Math.sin(angle)],
disableRotationalLock: true, // Let the capsule rotate around its own axis
collideConnected: true
});
In JavaScript, there are several ports of Box2D available which have the Prismatic Joint. p2.js has PrismaticConstraint.

Constant Volume Joint may be what you are looking for. As its name suggests, it tries to maintain the volume it has upon creation despite impulses from outside, much like a water balloon.
Here is a demo.
A working example with Box2dweb can be found here.
If you are interested in creating blobs with the creative application of more standard joints, this article comes to my mind.

Sprite animations in paper.js

I'm working on my project in Paper.js.
In the part of It, I need to use sprite with animation.
To examplain It, I've got a space ship that can be everywhere on the screen, and there is an effect of disortion that happens sometimes.
I got prepared a spritesheet with 10 frames, and all I want is use Paper.js RASTER class to load It and animate on every frame.
The problem is in the positions, that I don't know how to calculate them...
When I load a raster
let slide = new Raster({
source: 'assets/sprite.png',
position: [0, 0]
});
I see center of a very long image, when I need to see the first frame.
My idea was to use group with containts mask (square)
let mask = new Rectangle({
position: [220, 100],
size: [186, 154],
});
That I can change position dynamically and animate the spread at the same time.
Is It possible that way?
It would be cool, If I cant calculate the position of raster against the mask, but for me now It seems impossible.
Anyone have idea how to attain this in a simple way?
Cheers.

I've looked into this in my project. The key is using a group with a pivot point. This code is admittedly unfinished and in raw javascript but it should give you a good idea:
var Sprite = paper.Group.extend({
_class: 'Sprite',
initialize: function Sprite(url, size) {
var maskSize = size || new paper.Size(256, 256);
var that = this;
this._raster = new paper.Raster(url);
this._raster.pivot = new paper.Point();
this._raster.on('load', function () {
that._spriteSheetWidth = Math.floor(this.size.width / maskSize.width);
that.setIndex(that._spriteIndex || 0);
});
this._clipRect = new paper.Path.Rectangle(new paper.Point(), maskSize);
Sprite.base.call(this, [this._clipRect, this._raster]);
this.clipped = true;
// Just use a blank point if you want the position to be in the corner
this.pivot = new paper.Point(maskSize.divide(2));
},
setIndex: function (index) {
if (typeof this._spriteSheetWidth !== "undefined") {
// TODO: FINISH SPRITE SHEET IMPLEMENTATION
}
this._spriteIndex = index;
}
});
I'm not actually using sprites in my project anymore so I never finished the implementation. But the complicated concepts should be completed above. Namely the way that paper.js implements pivot points and clipping masks. The position of an object is the center of it's bounds by default... this is kind of unweildy for a lot of reasons, like an images position will appear to change when it loads etc... or when the contents of a path change. So I like to set a pivot of 0,0 immediately after making any object. The next key section is that clipping masks only work on Groups. And finally you can extend the Group class to make a standard Sprite class.
Normal sprite shifting of this._raster.position.x and this._raster.position.y should finish this implementation off.
Edit: Finished my implementation... https://jsfiddle.net/willstott101/vgxq9kak/

After Effects Extendscript - changing the centerpoint for addlight

Using this example code:
app.project.item(index).layers.addLight(name, centerPoint)
I created the following test code where I add a light to my second scene (composition) in my project to create a shadow:
var s2light1 = scene2.layers.addLight("s2light1", [1143,121]);
This works perfectly. But I now also want to set the 3rd (Z) value for the centerPoint in Extendscript (as is possible in After Effects).
However according to the After Effects CS6 scripting guide it seems you can only set the X and Y values: "The center of the new camera, a floating-point array [x, y]. This is used to set the initial x and y values of the new camera’s Point of Interest property. The z value is set to 0."
Is there another approach or work around to set the Z-value for the center point in Extendscript which I can try?

newLight = app.project.item(1).layers.addLight("foo", [22, 33]);
//now set the point of interest ('center point') value:
newLight.property("Point of Interest").setValue([22, 33, 11]);
and to make a light not auto-orient (one-node):
newLight.autoOrient = AutoOrientType.NO_AUTO_ORIENT;
In which case you would control the Position and Rotation properties -- no point of interest.