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:
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'm doing some simple plotting and would like to increase the usability of my figure.
I have quite a lot of points on my graph and have issues with selecting the ones I want because the click radius is so tiny.
I can increase the circle radius of my point but the radius of the area which displays a tooltip is still only 1 dot. Can I increase the radius somehow without having to create additional points around which respond the same?
Would it be even possible to increase the click detection radius without increasing the actual circle radius?
in the current version (0.8.2) and in the upcoming version (0.9) this is not yet a tunable parameter. It would be a good feature to expose a click radius, so I have made an issue on our issue tracker, that you can follow, here:
https://github.com/bokeh/bokeh/issues/2230
In the short term, a possible workaround is to have a second, invisible set of glyphs that are used for hit testing. They would be at the same locations, but bigger, to provide a bigger hit area.
I would like draw a filled polygon on iPhone with Google map (Version 1.1.1, the last one).
Anyone knows how to do like that on ios :
(My code on Android)
mMap.addPolygon(new PolygonOptions()
.addAll(latLngList)
.fillColor(Color.BLUE)
.strokeColor(Color.RED)
.strokeWidth(3));
Regards,
PS : If you have many solutions, keep in mind that I have many Polygon to draw.
The SDK currently doesn't support filled polygons, however there is a feature request to add them here:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=5070
In the meantime, one option could be to draw your polygons into an image, and then add them as a ground overlay. This would be very limiting, but might work as a temporary workaround.
Another option is to add another view over the top of the map view and draw the polygons into it, and then update them whenever the map view moves. It isn't possible to perfectly synchronize another view with the map view, so your polygons will lag behind a bit as you pan/zoom around, but this might also be okay for you as a temporary workaround.
UPDATE
These are just some random ideas to try for the ground overlay approach, I'm not sure if they would work, but they might get you started:
I would suggest converting the lat/lon corners of the rectangle into MKMapPoint (using MKMapPointForCoordinate). These are equivalent to Google's coordinate system at zoom level 20.
You can then use the aspect ratio of the width/height of the rectangle in MKMapPoint coordinates to determine the aspect ratio of your ground overlay UIImage. Once you have the aspect ratio, you'll just need to experiment with actual sizes (ie guess a width, calculate the height from the aspect ratio) to find one which looks okay. The bigger it is, the finer the detail of your rectangle will be, but the more memory it will use, and probably the slower the performance will be. Also you might hit a hard limit at some size - I'm guessing the UIImage gets converted by the Google Maps SDK into a texture, and textures have a max size of 2048x2048 on iPhone 3GS+.
Then, use something similar to How to setRegion with google maps sdk for iOS? to calculate a zoom level and centre lat/lon. Instead of the map view width/height you would use your UIImage width/height, and you'd use the bounds of your rectangle instead of the bounds of the desired view. You also wouldn't need to calculate the scale from both the width and height (as the scale should be the same) - so just use one of them. Instead of creating a camera with the zoom level and centre lat/lon, set them on the GMSGroundOverlayOptions. Also set the ground overlay's anchor to the centre of the image (ie 0.5, 0.5).
The above describes how to add one GroundOverlay per rectangle. If you have lots of overlapping or nearby rectangles you could probably combine them into a single UIImage, but that would be a bit more complicated.
I would like to add a sphere with a 2d gradient as texture to create a skydome. I read that in openGL this is often solved by rendering the skybox without depthtest in an additonal pass.
I disabled depthTest on my sphere so everything else is drawn in front of it, it's kinda giving me the disired effect but depending on the camera angle it clips through other objects in my scene.
I was looking at several examples which make use of THREE.EffectComposer and a second scene, I may be completely after the wrong thing here but I think that could solve this. The thing is I havent ever touched the effectComposer and have no idea at all how to work with it and which things i exactly need.
I would aprreciate any input on this, maybe I'm after the wrong stuff at all.
Here are two three.js examples in which a skydome with a gradient is created. They do not involve EffectComposer or disabling depth test.
http://mrdoob.github.com/three.js/examples/webgl_lights_hemisphere.html
http://mrdoob.github.com/three.js/examples/webgl_materials_lightmap.html
three.js r.55
You dont have to use a cone or other 3D-geometry to simulate a gradient sky.
I solved it using a canvas (with 3 gradient-spots, lightblue -> white (horizon) -> darkblue) and draw it as sprite in front of my camera with the right distance to it (fog-distance).
You only have to manage the distance when moving/rotating your cam.
Tip: Use mesh.scale.set (xx,xx,1) to zoom the canvas-texture to needed size.
I'm currently working on a WYSISYG editor that allows the user to move, resize and rotate shapes by directly manipulating them. The resizing seems to be fairly complex when the shape is rotated. I got this working for non-rotated shapes, but it will take some trigonometric calculations to resize shapes that are rotated. The registration point is always is the middle of the rectangle because this makes rotating a lot easier.
Before I start implementing this, I was wondering if anyone knew of any libraries or sample source code that does this, or could share some tips and tricks to calculate the transformations.
I have the following parameters:
rotation (in degrees)
width, height
x, y
mouseX, mouseY
I attached a screenshot of what I'm trying to accomplish and another one that has some lines drawn onto it that should allow me to deduct the trigonometric calculations. The cross is the cursor.
alt text http://www.herrodius.com/images/resize.jpg
alt text http://www.herrodius.com/images/resize_lines.jpg
You might look at flex-object-handles, in particular the more recent version 2.
I recommend Transform Manager - http://www.greensock.com/transformmanageras3/
It's actually not that hard. Use the mouse coordinates (mouseX / mouseY)from the rotated display object and they will be transformed for you!