How do i give curvature to edges in cytoscape.js? - cytoscape.js

I think there is a curvature attribute given to the edges. or should it be given in cytoscape.stylesheet

You use the stylesheet. Relevant properties: http://js.cytoscape.org/#style/edge-line
Specific properties of interest include the control point properties:
curve-style: bezier for bundled (spaced) curved edges; curve-style: unbundled-bezier for complete manual control
control-point-step-size : for bundled bezier spacing
control-point-distance : manual spacing
control-point-weight : to pull the control point more towards the source or target

Related

How can I fill the circle when pressing on F in blender 2.83?

The tutorial is using blender 2.82
I added a circle and when I change it to edit mode and press on the F key instead filling the circle it's giving me this error :
This is the circle in object mode :
Then changing to edit mode and pressing F :
Following a tutorial when he press on F the result is :
I didn't see in the tutorial that he selected any points or how to do it.
TLDR: use Add -> Mesh -> Circle, and always use mesh unless otherwise stated.
You added curve -> circle but you should add mesh -> circle
There are many different types of object in blender. Mesh and curve are different and has different purpose in blender:
Mesh is basic and most used type of geometry in blender. It's made of vertices (points) and edges (straight lines between points) and faces (at last 3 edges creating a plane).
Curve is made from points with handles connected with curve generated accordingly to handles and type of point. It used to create some basic round shapes (like paths and motion guides) and can be optionally convert to Mesh.
You can convert curve to mesh from menu object -> Convert to -> Mesh form Curve[..],
when add a circle, choose it from mesh, mot curve.
I don't know why either but that worked for me.

MLT - How to add easing to transition or filter?

Is it possible to make some smooth movement with a picture (or anything else)? An acceleration, deceleration...
I know we can use keyframe geometry to move an element but the movement is not smooth. The goal is to add some easing (ease-in / ease-out / ease-inout...) in a pictures slideshow.
This "bouncy ball" example is not really smooth:
https://github.com/mltframework/mlt/blob/master/demo/mlt_bouncy_ball
My use is with the command line on a linux server, I do not use any Kdenlive or shotcut.
The bouncy ball example is not intended to show smoothness or easing. The examples are basic intended to get people to walk before running.
MLT Property Animation defines "smooth" keyframes. In order to make something move, you need to pick a filter such as affine that supports animated position properties. Then, how you define keyframes and their types depends on whether using the API or a property string value (command line, XML). When using the multi-value string format, you use ~= instead of = between the time and the value. For example with the affine filter:
transition.rect=0~=0/0:100%x100%;100~=45%/45%:100%x100%;120~=50%/50%:100%x100%
Now, smooth keyframes alone do not provide easing, but you can add one or more keyframes towards the target (ease in) or leaving the target (ease out). The smooth keyframes simply help make the curve instead of you having to add many keyframes to smooth it out yourself. Think about drawing a curve with an illustration program. If you only have a straight line tool that connects at points, you need many points to make a smooth curve - the more points, the more smooth it will be. Now, if you have a curve tool, then you only need a few points. The Catmull-Rom spline used by MLT smooth keyframes was chosen for simplicity: It draws a curve through the points given.
As is often repeated, the easiest way to learn how to use the filters and their properties is to mock things up in a video editor and view its MLT XML output. Keep the project as simple as possible to keep the amount of XML to look through shorter.

Edge Style For Tree

I would like to have edges that are straight with right angles, similar to the family tree layout mentioned here: Styling edges in Cytoscape.js for a Family Tree
I've also attached an image showing what I would like to achieve.
In the link above they mention hyperedges, and changing the curve-style to "segments". I've done that, but there are only 2 segments and they do not form a right angle. There are some attributes that can be set for the segments, but I have not figured out how to make them work. Any help would be appreciated.
You have to calculate the points where the lines should be bent and set the segment style properties appropriately.
If you want an alternative way of specifying bent edges, you could investigate zigzag edges: https://github.com/cytoscape/cytoscape.js/issues/882

How to build a smart bezier curve?

Demo Image : http://i.picpar.com/bzH.png
I want to build a smart bezier curve like this. There are 100 targets (grid) in the map. I know the source point (Rocket), and the target point (Grid). How to calculate two control points to build a beautiful bezier curve which can not across the blue map?
Find curve bounding box and then check if it is contained in blue map rectangle. If it will be outside move control points respectively.
Assuming that you are using cubic Bezier curve (4 control points) for first try You might set some default coordinates of curve control points:
P1(p0.x-10,p0.y+10)
P2(p3.x-10,p3.y+10)
I do not know what language/libraries You are using but it might have Rectangle.Contains(Bezier.BoundingBox) function which might make things easier.

Refraction for object { mesh {...}} surface shows artifacts

We want to render a parametrized surface in front of a grid plane and observe the transformation of the grid due to refraction happening at the surface. Our surface is in this simple example a 2D normal distribution which we will view directly from above and the grid plane is placed below:
The surface is given in many triangle directives which we put together in a mesh and used it with
object {
fovea
scale <1,1,3>
texture { pigment {color rgbt <0,0,1,0.5> }}
interior {ior 1.4}
}
The scale here is not necessary and used only to amplify the artifacts. What you see in the image below is, that the refraction seems not to happen smoothly, but creates some sharp artifacts in the underlying grid pattern.
This image was created with Povray 3.6.1 under MacOS X 10.5.6 with the settings +Q9, +A and -J. Can anyone point out a hint? Thanks.
This was a stupid mistake. Since in Mathematica the surface looked really smooth, I assumed that it created a large number of triangle-faces. This assumption was wrong. The rendering engine Mathematica uses, seems to interpolate the normals given for each vertex and therefore the surfaces only looks as it has a high resolution.
A check of the underlying polygons reveals the truth:
Therefore, what looks like refraction artifacts in the rendered image above is actually correct behavior, because the face-normals of neighboring triangles really change that much.
Increasing the resolution of the surface grid solves the problem.