We Keep Coding

2D/3D CAD design in JavaScript

I am having 2D design in microstation and I wanted to represent this design in web using any tool(javascript/Unity 3D or any other) where the web tool will not have all the functionality but basic functionality like reshaping or adding a new shape should be available.
As of now, my approach is once I created a design in microstation then I am capturing properties of shapes like the cordinates of a line and now using these coordinates I wanted to represent in the browser since this is a 2D design so it will be plotted in some location (x,y) for example I have created a line in microstation from (2,2) to (10,10) so it will be a straight line and I have all the coordinates I tried redrawing it in Unity which am able to do but I am facing issue to change the length from (2,2) to (20,20) by mouse click. And my goal is to do it in runtime, not in Unity editor tool.
This is an example of a straight line I wanted to do it for all geometric shape,any guidance would be appreciated.
As of now am trying Unity to do so but struggling in the edit part is there a way to achieve this in unity?
I also looked at various javascript libraries like konvaJS, makerJS, ThreeJS, etc. but except konvajs none of the other library provide facilities like reshaping, in Konva also creating shape using a mouse not found any solution for this.
Can we achieve this by any of the two approaches, of course, am not looking for all functionality only a few custom functionality, if yes which approach will be the best, and which tool should I proceed with?
Any guidance will be helpful.

To draw a line-segment, you can use LineRenderer.
//two points of the line-segment are known (or got from the Transform of GameObject)
Vector3 start;
Vector3 end;
GameObject myLine = new GameObject();
myLine.transform.position = start;
myLine.AddComponent<LineRenderer>();
LineRenderer lr = myLine.GetComponent<LineRenderer>();
lr.material = new Material(Shader.Find("Particles/Alpha Blended Premultiply"));
lr.SetColors(color, color);
lr.SetWidth(0.1f, 0.1f);
lr.SetPosition(0, start);
lr.SetPosition(1, end);
//to change the points of this line
myLine.transform.position = another_start;
lr.SetPosition(0, another_start);
lr.SetPosition(1, another_end);
There are also other solutions:
Use scaled cube or capsule primitive.
3rd-party plugins: vectrosity
To get mouse clicked position, use Camera.main.ScreenToWorldPoint(Input.mousePosition).
To determine when your mouse is clicked, use Input.GetMouseButtonUp.

Using masking in Google Earth Engine

I have a thesis that I'm writing about Ice coverage change on rivers, and I decided to use Google Earth Engine for this.
I have an algorithm already that can check if the pixel is icy or not. But the problem is I have to mask this to only calculate it on rivers and not anywhere else.
I have a limited knowledge of JavaScript and looked up the API to find a solution for masking. I tried to incorporate the example into my code but it gives me an error "updatemask" is not defined in this scope.
So how do I define this mask? Because at the moment I just create a variable that contains area of a river and assign it to a mask.
var datamask = ShapeFile; // Uploaded.
var mask = datamask.eq(1); // As I understand this is where you tell the mask which part to use.
var dif = updatemask(datamask);

First, the function is named updateMask. Second, it is an instance method for an ee.Image object, which returns another ee.Image object. So you need to set the mask for a particular image. Assuming you may have an image which represents ice, you might do something like
// I am assuming you are loading this via ee.FeatureCollection etc
var datamask = ShapeFile;
var mask = datamask.eq(1);
var ice = ee.Image(<some ice asset>);
var masked_ice = ice.updateMask(mask);

Double animated Path drawing bug, with Raphael.js

I'm using a custom found function to draw path, in order to draw a logo with animations (using jquery and Raphael.js). This "animateLine" function is usefull since it draws a svg path considering FX, along the "vector" path. For just one path there is no problem with this function (It can be found in the demo ).
function animateLine (canvas, hoverDivName, colorNumber, pathString, duration, destination)
The problem is that there is some kind of conflict when using that function simultaneously (Drawing 2 path at the same time).
You can see my problem here on this fiddle : http://jsfiddle.net/VyRDk/2/
I thought the issue was the conflict with the temporary var "destination", but i'm using 2 diffrent globals vars when calling "AnimateLine" function (you'll notice "lepathanimated1" and "lepathanimated2")
var lepathanimated1;
var lepathanimated2;
Used this way :
animateLine(logo_animated, "canvas", "#1d1d1b", path_circle,1200,lepathanimated1);
I hope you have enough information to maybe find the solution, and if you need more details, just ask =)
Thanks for your time
EDIT: OMG i just found the solution!! #SoHappy
I just created the path object outside the function and used an identifier (# id) to avoid the conflict (and used it for the jquery animate step function)
You can find the correct DEMO HERE
HOWEVER I'm not shure that's the right way to do that (optimisation). Using "animate" in spite of "RequestAnimFram" is it correct? The advantage is having Raphael & jQuery working together (easier that javascript canvas way)
Anyway, hopping it helps =)
PS : If it helped please vote up, cos' that's my first stackoverflow question/answer and still 1 of reputation -_-

Here you go DEMO
You had to adjust setTimeout so that it starts right after the first path is drawn.
setTimeout(function()
{
animateLine(logo_animated, "canvas2", "#1d1d1b",
path_trait_sup,1200,lepathanimated2);
},1200);
Good Luck

Sigma JS node animation

I want to move nodes in Sigma JS on click event. Say from position x 0.7 to position x -0.7.
Is it possible to move nodes in Sigma js, and if it is, kindly guide me to achieve that.

Yes, it is possible. I created a jsfiddle showing how to change node position, size, and color on mouse click here:
http://jsfiddle.net/kaliatech/P255K/
You can bind to custom "downnodes" events like this:
sigInst.bind('downnodes',onNodeDown);
The event callback contains an array of selected node ids. I don't know when it would be more than one when clicking. Perhaps when zoomed out in a complex graph.
One of the more subtle issues when using sigmajs, is that most methods, such as getNodes, return clones, not the instances themselves. This is to protect "private" data in the graph I think, especially data that can not be redrawn after initialization. To actually modify properties, you need to use the iterator methods. Even then, you are only given clones. The library updates the actual node instances using a list of predefined allowable properties. (See the checkNode function in graph.js).
After properties have been set, you then need to refresh/redraw the graph. While the "refresh" method would seem to be an obvious candidate, it did not work. I was able to get it to redraw using the draw method though. You will need to review the source code to understand the different parameters. Example:
function onNodeDown(evt) {
var sigmajs = evt.target;
var nodeId = evt.content[0];
sigmajs.iterNodes(function(n){
n.size = 10;
n.color = "#0000FF";
},[nodeId]);
sigmajs.draw(2, 2, 2, true);
};
For more advanced needs, the sigmajs website includes plugin examples showing other ways of getting mouse events and updating nodes dynamically. One is the advanced plugin example for a fisheye effect:
http://sigmajs.org/examples/a_plugin_example_advanced.html
Another is the example for accessing node attributes:
http://sigmajs.org/examples/more_node_info.html
The sigmajs documentation is weak, so you will need to review the source code to understand things.

There are plugins permitting to move isolated nodes from the graph.
Check
https://github.com/Linkurious/linkurious.js/blob/develop/examples/lasso.html

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.