How can I create an OpenCV sharpening matrix in JavaScript? - javascript

I am trying to sharpen an image using a sharpening convolution kernel like below:
[[0,-1,0], [-1,5,-1], [0,-1,0]];
Is it possible to define arbitrary matrices like this?
I can do this simply in OpenCV for python by declaring a numpy array like above, but in JavaScript (OpenCV.js) it seems there is no way to do this without using the Mat method and some combination of other methods.
I have tried like this:
let kdata = [[-1,-1,-1], [-1,9,-1], [-1,-1,-1]];
let M = new cv.Mat(kdata);
and by following the example here:
https://docs.opencv.org/master/dd/d6a/tutorial_js_filtering.html
But I can't find anything that allows me to create arbitrary matrices where I have control over each element in the matrix, only methods like eye() or ones() that fill the matrix with some pre-specified values.
Any help in creating arbitrary matrices that can be used with the filter2d method would be very helpful. Thank you!

Ok I just spent the whole day trying to find the solution for this.
let kdata = [-1,-1,-1,-1,9,-1,-1,-1,-1] ;
let M = cv.matFromArray(3,3, cv.CV_32FC1,kdata);
I know this is a very old question but I hope this awnser is helpfull if anyone comes across this in the future.

Related

Recovering elements of a Javascript Path2D

I want to examine the individual path segments of a Path2D object. For example, suppose that
path = new Path2D();
path.ellipse(70,90,2,2,0,0,2*Math.PI);
I want to pass path to some other function and pull out the elements of the Path2D so that they can be translated into another format. The big picture goal is to allow the user to create a path and translate it to TikZ for inclusion in a LaTeX document.
Is there something like Java's Shape.getPathIterator(), which allows one to examine each segment along a path. Can this be done Javascript? As a template, here is an outline of the Java code that does what I'm hoping to do in Javascript.
PathIterator p = path.getPathIterator(new AffineTransform());
while (p.isDone() == false)
{
double c = new double[6];
int t = p.currentSegment(c);
if (t == PathIterator.SEG_MOVETO)
// (c[0],c[1]) is the "move-to" point.
else if (t == PathIterator.SEG_LINETO)
// (c[0],c[1]) is the "line-to" point.
else if (t == == PathIterator.SEG_CUBICTO)
// c[0] through c[5] specify the cubic curve
else
// etc., etc.
}
Editing this after seeing #Kaiido's answer.
What I ended up doing was extending Path2D to a new class that is functionally identical, except that it stores each call to arc(), lineTo(), etc. to an array as the call is made. This allows me to examine the record of past calls. It may not be a sufficiently general solution for everyone, but it works for my needs.
No there is currently nothing in the API that allows us to do that.
There are some discussions to extend the Path2D API so it's less "opaque", but nothing tangible yet, I don't think anyone is actively working on it, and we can't be sure what it will include.
The current proposal reads
Path2D Inspection. Allow inspection of Path2D objects, that are currently opaque.
For what it's worth, I myself started working on this idea a few months ago, in the hope I could help this discussion get started somehow with a possible feature design.
My very ambitious idea is to bring an API like SVG's SVGPathData and add methods to Path2D like getBBox, getPathData(), setPathData(), toSVGString(), getTotalLength(), or getPointAtLength().
You can check this repository where lives my project, and below is a demo using your input.
const path = new Path2D();
path.ellipse(70,90,50,20,0,0,2*Math.PI);
const svgString = path.toSVGString();
document.querySelector("pre").textContent += svgString;
document.querySelector("path").setAttribute("d", svgString);
document.querySelector("canvas").getContext("2d").fill(path);
<script src="https://cdn.jsdelivr.net/gh/Kaiido/path2D-inspection#master/build/path2D-inspection.min.js"></script>
<pre>
const path = new Path2D();
path.ellipse(70,90,50,20,0,0,2*Math.PI);
path.toSVGString();
</pre>
SVG:<br>
<svg><path fill="green"></path></svg><br>
Canvas:<br>
<canvas></canvas>

How to implement basic LOD mechanism on a 3D json asset

I am not able to implement LOD to a 3d Object with json data.
Here is my implementation:
loader.load('models/robot-threejs/robot.json', function(object){
var lod = new THREE.LOD(object);
for (var i=1; i<=3;i++) {
console.log("this"+i);
lod.addLevel(object,i);
}
lod.updateMatrix();
lod.matrixAutoUpdate = false;
// lod.updateMatrix();
// lod.matrixAutoUpdate = false;
scene.add(lod);
//scene.add(object);
// object.position.set(30, 30, 30);
})
You're implementing THREE.LOD wrong.
The constructor does not take any parameters, so when you do this: new THREE.LOD(object);, it does nothing. You just have to use new THREE.LOD();
You're adding the same mesh to LOD 3 times, so you're not gonna see any difference. You need to create separate meshes with different geometries if you want to see any change in detail. Keep in mind that you have to generate these geometries yourself. Three.js doesn't automatically change the geometry for you. But you could use the SimplifyModifier for this.
Not sure why you're playing with matrix updates. There's no reason for this here.
You also need to call lod.update(camera) on your render loop if you want to see the change in detail.
I strongly recommend you read the documentation for LOD and read through the code in this example to better understand how it works.

Text with inset shadow three.js

I need to create text with inset shadow on my object in three.js, which looks like this:
Something like ring with engraved text.
I think the easier way to do that would be to use a normal-map for the engraving, at least if the text doesn't have to be dynamic (here's how you can export a normal-map from blender). And even if it needs to be dynamic it might be easier to create a normal-map dynamically in a canvas than to actually create a geometry for the engraving.
Another option would be to actually create a geometry that contains the engraving. For that you might want to look at the ThreeCSG-library, that let's you use boolean operators on geometries: You create the 3D-text mesh, warp and align it to the curvature of the ring and finally subtract it from the ring-mesh. This should give you the ring with the engraving spared out.
In fact, I was curious how this would actually work out and implemented something very similar here: https://usefulthink.github.io/three-text-warp-csg/ (source here).
In essence, This is using ThreeCSG to subtract a text-geometry from a cylinder-geometry like so:
const textBSP = new ThreeBSP(textGeometry);
const cylinderBSP = new ThreeBSP(cylinderGeometry);
const resultGeometry = cylinderBSP.subtract(textBSP).toGeometry();
scene.add(new THREE.Mesh(resultGeometry, new THREE.MeshStandardMaterial());
Turns out that the tessellation created by threeCSG really slow (I had to move it into a worker so the page doesn't freeze for almost 10 seconds). It doesn't look too good right now, as there is still a problem with the computed normals that i haven't figured out yet.
The third option would be to use a combination of displacement and normal-maps.
This would be a lot easier and faster in processing, but you would need to add a whole lot of vertices in order to have vertices available where you want an displacement to happen. Here is a small piece of code by mrdoob that can help you with creating the normal-map based on the displacement: http://mrdoob.com/lab/javascript/height2normal/

Finding coordinates in the ZXing library and outputting on canvas

I'm using this JS code scanner based on the ZXing library and I would like to find the coordinates of the QR code found and then put a border around the found QR code on the <canvas> element. I cannot find the vars containing the coordinates of the QR code. I cannot find any good information on the net either, so I would appreciate any help.
Note: It would be helpful if you could tell me what vars have the coordinates saved; I'll be much closer to the answer then.
Note: This is a shot in the dark as I can't test it.
In detector.js there is a detect method that returns the object "info". This object has the properties:
var topLeft = info.TopLeft;
var topRight = info.TopRight;
var bottomLeft = info.BottomLeft;
You can see these variables in action in the processFinderPatternInfo method.
If you're using jQuery, you can find the position of any element using $(element).position
It should be easy enough to find the ID or Class the QR code belongs to and find the position of it.
http://api.jquery.com/position/

Trying to move/animate a container in javascript using the easeljs library

I am trying to adapt the gamefromscratch page showing how to Handling sprite based shooting. But I'm trying to replace the sprite with a bitmap that's in a container. The point where I'm stumbling is the end of the onTick(delta) where there is a graphics object created , I don't know the syntax to replace
var g = new createjs.Graphics();
g.setStrokeStyle(5);
g.beginStroke(createjs.Graphics.getRGB(255,0,0));
g.drawCircle(this.x,this.y,10);
this.bulletGraphic = new createjs.Shape(g);
stage.addChild(this.bulletGraphic);
}
bullets.push(bullet);
with code that would work for a Bitmap In a container.
Thanks for looking .
I believe you are looking for g.beginBitmapStroke() to replace the g.drawCircle()
You can find the EaselJS Documentation here:
http://www.createjs.com/Docs/EaselJS/classes/Graphics.html#yui_3_8_0pr2_2_1363403850534_598
For just using a Bitmap instead of a Shape you could use:
this.bulletGraphic = new createjs.Bitmap('urlOrImage');
stage.addChild(this.bulletGraphic);
}
bullets.push(bullet);
if you want the bullet-Bitmap additionally to be in a container (for whatever reason):
this.bulletGraphic = new createjs.Container();
this.bulletBitmap = new createjs.Bitmap('urlOrImage');
this.bulletGraphic.addChild(this.bulletBitmap);
stage.addChild(this.bulletGraphic);
}
bullets.push(bullet);
A little sidenote from me (note related to your question, but in case you care):
The code-example given on that page explains the Math behind the topic pretty good, but code-wise I would not take this as a good example. For a bullet you would usually create a new class, inheriting from Shape or Bitmap, the author of this example uses a plain object and just references the graphical-asset (this.bulletGraphic) through it. So if you're just using this to learn the Math, this is good, if you want to take this to create a real game out of it, I'd suggest you to restructure the code quite a bit, because this will get messy very soon.

Categories