Develop Reference

Transforming Perspective in JavaScript – Matrix Math

I want to recreate the perspectiveTransform function from OpenCV in JavaScript. The reason I need to do this is because of an issue encountered here. I found the actual C++ implementation for this function here and getPerspectiveTransform, which seems to work completely differently here. They both seem to involve a mess of pointers I don't really understand, with no equivalent in JavaScript so I'm not sure how to write something similar.
I figured it's just some type of matrix math and surely there is a simple way to do it mathematically. If anyone knows anything about matrices / transformations like this I would hugely appreciate some advice / pseudo / code.
Example data I got from running a working version in C++
Input 1 (3x3) matrix
[0.4709243769447963, -0.1089570231317744, 289.4386175367417;
-0.05915378097999304, 0.3816064687798928, 503.5397702666958;
-9.054861751225341e-05, -0.0001637295648326533, 1]
Input 2 (2x4) matrix
[0, 0] [1000, 0] [1000, 740] [0, 740]
Desired output
[289.439, 503.54] [836.068, 488.631] [862.289, 921.962] [237.598,
894.279]
Details of the function
Where I am calling it in JavaScript
var H = new cv.Mat();
H = cv.findHomographyEasy(obj, scene, cv.FM_RANSAC);
var obj_corners = new cv.Point2fVector();
obj_corners[0] = new cv.Point(0,0);
obj_corners[1] = new cv.Point(img1Raw.cols,0);
obj_corners[2] = new cv.Point(img1Raw.cols, img1Raw.rows);
obj_corners[3] = new cv.Point(0, img1Raw.rows);
var scene_corners = new cv.Point2fVector();
scene_corners[0] = new cv.Point(0,0);
scene_corners[1] = new cv.Point(0,0);
scene_corners[2] = new cv.Point(0,0);
scene_corners[3] = new cv.Point(0,0);
// NEED TO REMAKE THIS FUNCTION WHICH DOESN'T WORK IN OPENCV.js
cv.perspectiveTransformEasy(obj_corners, scene_corners, H);

Javascript: Array undefined is not an object

Sorry if this question was already asked. I found undefined errors but not for array so heres my question:
I get an 'undefined is not an object' error when im trying to declare selRef41 with the given Array.
(btw Im using ESTK and i am writing this script for Photoshop)
var docRef = app.activeDocument;
var layRef = docRef.activeLayer;
function createSelection(layRef) {
// Declare function variables
const oneT = 1/3;
const twoT = (1/3)*2;
docRef = app.activeDocument;
layRef = app.activeLayer;
if (detailFactor == "2x2") {
var selRef41 = Array(Array(0, 0),
Array(layRef.width.value / 2, 0),
Array(layRef.width.value / 2, layRef.height.value / 2),
Array(0, layRef.height.value / 2));
}
The corresponding main is just a one-liner to call the function:
function main() {
createSelection(layRef);
}

Where did you find this layRef.width.value? Layers don't have width or height property (only documents have), this is the thing that causes error in your code. You can calculate width and height using their bounds:
var layRef = docRef.activeLayer;
refWidth = layRef.bounds[2] - layRef.bounds[0];
refheight = layRef.bounds[3] - layRef.bounds[1];
alert([refWidth,refheight]);
You can check Photoshop Scripting Reference pdf to check properties and methods of DOM objects.
Also, as cybernetic.nomad noted, this won't work: layRef = app.activeLayer;, and plus you have if (detailFactor == "2x2") but detailFactor wan't assigned.

Why javascript Cannot read property width of textureImage

I am trying to render image texture dynamically but in console it displays Uncaught TypeError: Cannot read property 'width' of undefined. few suggest to make needsUpdate = true to false. When I am doing so some unpleasing black patch is appearing .But I need it true. how can i do so?
Actual code is very big i am pointing where problem occurs..
var g = new THREE.PlaneGeometry(100,100);
var tx =THREE.ImageUtils.loadTexture(imgUrl,undefined,callback,callbackError);
var m = new THREE.MeshBasicMaterial({
map:tx
});
m.map.needsUpdate = true; //1
tx.needsUpdate = true; //2
////if 1 and 2 is commented then its ok but rendering is not good
var b = THREE.SceneUtils.createMultiMaterialObject(g,[
m
,new THREE.MeshBasicMaterial({wireframeLinewidth:3,color:0x222222,wireframe:true})
]);

There may be a situation when renderer tries to use you texture before it is loaded. When you do
var tx =THREE.ImageUtils.loadTexture(imgUrl,undefined,callback,callbackError);
the texture is returned but image itself is not yet loaded. So renderer tries to take width and height to find out is your texture power of 2 and throws an error in this moment.
You may try to wrap creation of your object and placing it to the scene into the callback function and pass it as the third parameter to the loadTexture method. Something like that:
var geometry = new THREE.PlaneGeometry(100, 100);
var tx =THREE.ImageUtils.loadTexture(imgUrl, undefined, function(texture){
var material = new THREE.MeshBasicMaterial({
map: texture
});
var b = THREE.SceneUtils.createMultiMaterialObject(
geometry,
[
material,
new THREE.MeshBasicMaterial({wireframeLinewidth:3,color:0x222222,wireframe:true})
]
);
}, callbackError);

How to connect objects with Bezier-like curves using Paper.js

I have a web app prototype where nodes similar to Blender shader editor are connected to each other. I am using Paper.js framework
I want them to be connected using those smooth Bezier-like curves. So I have 2 shapes and I can connect them by making a straight line, but now I want to have handles at the endpoints that smooth these objects out, kinda like this:
So 2 handles on endpoints, pointing horizontally for half the bounding box of the path.
The problem is I can't figure out how to add and edit those handles using Paper.js
The code I have is this:
function makeRectangle(topLeft, size, cornerSize, colour){
var rectangle = new Rectangle(topLeft, size);
var cornerSize = cornerSize;
var path = new Path.RoundRectangle(rectangle, cornerSize);
path.fillColor = colour;
return path;
}
var xy1 = new Point(50,50); //Position of 1st rectangle.
var size = new Size(100, 80); //Size
var c = new Size(8,8); //Corner radius
var col = "#167ee5"; //Colour
var r1 = makeRectangle(xy1, size, c, col); //Make first rectangle
var xy2 = new Point(467,310); //Position of second rectangle
var size2 = new Size(115, 70); //Size of second rectangle
var r2 = makeRectangle(xy2, size2, c, col); //Make secont rectangle
var r1cent = r1.bounds.center; //Get the center points, they will be used as endpoints for the curve.
var r2cent = r2.bounds.center;
var connector = new Path(r1cent, r2cent); //Ok so I made this path... Now what? How do access and edit the handlers at endpoints like in the image?
connector.strokeColor = 'black'; //Give it some colour so we can see it.
You can paste all this code here without any setup, it's a good way to test the framework.

You can use Segment objects when defining the connector rather than using Points (or you can set the handleIn and handleOut properties after creating the path).
The doc is here: Segment
And here is a sketch showing how to use handleIn and handleOut with your code:
sketch.paperjs.org solution

Draw2D: How to use a port as source/target for more than one connection?

So, I'm trying to build as a personal project my course curriculum and I decided to use Draw2D because I think it's pretty complete. I'm representing the courses as rectangles and setting connections between them to show which ones are pre-requisites for other courses, something like this:
The problem I'm having is that when trying to make the same port the source for two connections it just takes one and ignores the other. Any ideas? Below is a quick sample:
$(window).load(function () {
// Create the paint area. The id in the constructor must be
// an existing DIV
var canvas = new draw2d.Canvas("gfx_holder");
// create and add two nodes which contains Ports (In and OUT)
var start = new draw2d.shape.node.Hub();
var startLocator = new draw2d.layout.locator.BottomLocator(start);
var startLocator2 = new draw2d.layout.locator.BottomLocator(start);
var startPort = start.createPort("output", startLocator);
var end = new draw2d.shape.node.End();
var end2 = new draw2d.shape.node.End();
canvas.addFigure( start, 400,100);
canvas.addFigure( end, 200,150);
canvas.addFigure( end2, 600,150);
var c = new draw2d.Connection();
c.setTargetDecorator(new draw2d.decoration.connection.ArrowDecorator());
c.setSource(startPort);
c.setTarget(end.getInputPort(0));
canvas.addFigure(c);
var c2 = new draw2d.Connection();
c2.setTargetDecorator(new draw2d.decoration.connection.ArrowDecorator());
c2.setSource(startLocator2);
c2.setTarget(end2.getInputPort(0));
canvas.addFigure(c2);
});

I would suspect your problem lies in the setSource function call.
c.setSource(startPort);
c2.setSource(startLocator2);
One seems to specify a port, and the other a Locator.