I really like the effect of the water in the video game Monument Valley.
I think this is an SVG voronoi diagram, but I am not sure how to get it to animate naturally like water, and how to get it to reflect colors when it is at certain angles.
Note also that Snap.svg has a similar patter in a demo at http://snapsvg.io/demos/#display
I'd like to find a tutorial on how to create this as a background for a welcome screen.
You can try a delaunay triangulation of 3d points. Here is an example for 2d http://sandropaganotti.com/2014/05/04/how-to-render-a-dynamic-animated-delaunay-triangulation/.
Related
building a static website with React.
Description
I want to add a visual effect to the pages of the website, as shown below.
visual effect
I am trying to build a rectangular background. Some triangles will be cut from this rectangle (at least two vertices of the triangle must be on the edge before cutting), as shown in the shaded area in the figure.
Then I want the cut out triangles to float randomly in the page.
And I want the background of the content part in the middle (also a rectangle) not to be cut (ie only the outermost padding part is cut).
Some Attempts
I have tried to randomly generate the vertex coordinates of the polygons after cutting and the vertex coordinates of the cut triangles and display them using css clip-path and animation. But I haven't come up with a usable vertex generation algorithm.
Definitely you would have tried clip-path generator but might find that not working as expected on different screens. There's no efficient vertex generation algorithm for this. The alternate is to do so some random math by yourself. If you feel that your polygons are nice on one screen but scrambles on other, try using media queries.
I need to create a 3D box (transparent) and put inside of it another 3D shapes, such as cylinders and boxes. All of them need to be rendered dynamically based on data fetched from a Data Base. The 3D shapes inside need to respect the edges of the main box and their positions will be determinate by de data which cames from the DB. Any collision must be avoided and the 3D box must be allowed a rotation interaction to allow a visualization from different point of views. When rotated, all the 3D shapes inside must obay the perspective of the main box and their initial positions.
In this perspective, I need help to identify: What is the best and light way to do this for a React application?
I tried CSS 3D Transforms. However, it is not easy to put all the 3D geometric shapes together without any collision or did not see problems when all the set of shapes are rotated. This is the link that I am following: https://3dtransforms.desandro.com/box, to give one idea of what I am searching.
Thanks in advance!
UPDATE: This is some of pictures of what I am trying to do with CSS 3D transform. However, the geometric coordinates is not organized to allow the identification of a pattern to generate the shapes automatically. Besides,the position of inner shapes is not good for all the points of view, as it possible to see in bottom point of view.
I'm using Unity 5.4.f1 and I'm trying to make make a water similar to Where's My Water using particles...
The main issue I have is creating the white outline on particles:
Does anyone have experience with this or perhaps a link that might point me in the right direction? I have my particles blue and reacting nicely together in terms of movement, it's just the white outline that I can't seem to work out right now.
Thanks
I'm working on a floor design app that allows the user to pick preset floor images and view them within a preset room image.
My problem is I'm struggling to get the perspective of the floor image to match the room image properly. I have played around with setting the height of the viewpoint and the tilt but is there a way to calculate what these should be by using the real world measurements of the floor and room image? My knowledge in perspective drawing is very limited so I apologise if I'm using the wrong terminology.
Any help or advice would be appreciated.
Thanks
You should try to find the vanishing point of the structural lines of the room. There are many line-finding algorithms for this.
You have to find two vanishing points, for the two main directions of the floor. On your example, one vanishing point is at the convergence of all red lines, the other one is far on the left side, at the convergence of he blue lines.
Once you have this, you can build a regular tiling starting from these two points:
To map a texture on the floor, you just have to find the bounding rectangle following the tiling:
to stretch your texture inside it:
and to remove extra parts and apply shadows:
I have a texture I want to use for a TriangleMesh (it's a simple cube). Some parts of the texture are transparent. When I put the texture on the mesh, it's black. Is there a possibility to change that? I would like to make it transparent.
Appreciate your help, thanks
Transparency in JavaFX 3D shapes has been a long time request... until recently: Since JDK8u60 early access release b14, transparency is enabled in 3D shapes.
You can add color with transparency as diffuse color, like in this answer.
Also you can add images with some transparency level on every pixel, like this one:
where this is the image used with 50% transparency:
And you can use full transparency areas too. For instance, in this image, Duke has 50% transparency and the rest is 100% transparent:
Giving this result applying that image as diffuse map over the cylinder:
Have a look at FXyz project for more details on creating 3D shapes and using textures in many different ways, and the FXyz Sampler.