I try to cover few of my gallery walls with a simple texture. As far as it concerns simple plane or rectangular shape there is no problem, but in case of a wall with an opening - unwanted effects appear. This is a link to the gallery: http://galleryingrey.com.
Can anyone help me to finad some (not to much sophisticated) solution for this ?
Thanks in advance.
Related
I am working with a face mesh in Autodesk Maya. To each vertex of the mesh, I assigned a specific color, using pycore.polyColorPerVertex function. I would like to see these same colors in the UV view as well, but they are not showing when I open the UV editor. I tried with different setups within the UV editor, but honestly, I have no experience in Maya, and I don't know how to solve this. Is there an (easy) solution?
Here goes a captureenter image description here if it helps..
Our team is working on creating an online collage.
[https://jsfiddle.net/Lfz1bp7r/3/]
Characteristically, the collage should be under the mask of the PNG file. At this stage we are trying different libraries. Attention on fabricJS. The collage scheme is implemented using SVG paths. The first problem was tracking mouse events in SVG pathways. Implemented manually. The main problem is to add a new picture, which should be above the collage but below the mask. Manipulations with globalCompositeOperation do not help. There are no layers in the fabricJS.
So the question is - will the fabricJS allow you to implement the addition of a new picture on top of the collage, but under the PNG mask? It's possible?
Thank you very much in advance!
FabricJS includes two ways to draw on top of the canvas above the standard object and controls layers. You can set an overlayImage, and you can use the after:render event to run additional draw commands on the canvas context. See the Bounding Rectangle demo for a simple example of how to do this.
See How Fabric Canvas Layering Works.
I am developing a game using Phaser where a user is rendered a triangular canvas. User can crop this canvas to any possible shape by drawing any crop pattern on the canvas. Besides this, i need to get this cropped canvas in suitable data format to be used as an image to render and also trace changes made on this canvas for undoing puspose.
Any help to get this through will be appreciated.
Thanks in advance.
Initial canvas
Canvas after crop
Cropped canvas used to create new canvas
So it's like folding a piece of paper and then cutting it so it looks like a snowflake? Interesting idea.
I think you could either use BitmapData to draw the initial cut out, then copy that bitmap 6 (or 12?) times and rotate and flip x-axis to construct the rest. Though maybe there will be seems, so like small lines, between the parts idk.
Another appproach would be to keep track of the initial cutlines like vectors. Then use math/trigonometry to calculate the result. No idea how to do this though, sorry.
Following Quote from this source:
http://www.cambridgeincolour.com/tutorials/image-projections.htm
Equirectangular image projections map the latitude and longitude
coordinates of a spherical globe directly onto horizontal and vertical
coordinates of a grid, where this grid is roughly twice as wide as it
is tall.
I have a 13312 px width and 6656 pixel height Panorama picture. It's a equirectangular projection of a room and have a 2:1 ratio.
I use following formular to calculate the xPosition:
var xPosition = ( panorama.width / 360 ) * azimuth
Azimuth = Phi = Heading = Angle to the left or right
How do I project this now on a 1366x768px browser screen?
I think my results are wrong, because it's not on the point where it should be.. it could be because the sphere has a distortion on the left and right:
Is there any formular to calculate the position with attention to the distortion and scale it to fit on the browser screen? I looked many (MANY) sources to find a solution for this, but they always just say that equirectangular are just lat and long.. they don't consider the distortion.
Last question: To find a special solution, I tryed to put a plane on the circle and expanded the line which shows the alpha angle. I though with Phytagoras I could find the position.. but this didn't worked either.. maybe I did something wrong? Is this the way even possible or am I doing it wrong?
edit
THIS is what I'm actually looking for: http://othree.github.io/360-panorama/three-2d/
The black grid in the background. What is the name of this? For what do I have to google or look for? When you start the 2D Panorama, if you want to get the coordinations of the top right corner of the window, what do you have to do?
The whole calculation problem was about to create a Google Streetview similiar view from a 2:1 equirectangular image. We already found a solution for this with a great help from Martin Matysiak (https://github.com/marmat | Google).
It's been a while so I can't give a direct answer to what the main solution is, but I can provide a URL to an AddOn Martin wrote for adding the custom Markers that we actually were trying to make.
You can follow https://github.com/marmat/google-maps-api-addons and look for yourself. In the end it helped a lot to solve the main problem and let us continue with our main Framework for Google Business Tours.
If you follow the link in the threejs demo you included, it would take you to the source code.
particularly look at:
https://github.com/mrdoob/three.js/blob/dev/examples/webgl_panorama_equirectangular.html
and
https://github.com/mrdoob/three.js/blob/dev/src/geometries/SphereBufferGeometry.js
not sure if there is distortion though. The distortion comes from the fact that the texture is mapped to the sphere, and the sphere is rendered in 3D (openGL).
I am trying to rotate a circle image using jquery rotate plugin. But, I observe that the circle image appears to be oscillating about it's center while rotating. Something like a linear movement.
In IE7, it's pretty much observable. In Chrome/Firefox, if you zoom a bit, this wobbling issue can be observed.
I tried to rotate the image using Raphael library too. But still, the circle was wobbling.
Then I rotated the image with a c# program to see if the problem is with the browsers' graphic engine. But even here this issue is observed. I even took various images to see if the circle was imperfect. But, all the images show this behavior.
Can this be happening because of anti aliasing? Or, is it just an optical illusion?
If not, then what else can be the reason?
I am using jqueryrotate plugin rotate method to do this. $('#circleimg').rotate(Position);
Check this jsFiddle. Btw, this is the kind of source code you can include yourself in your question to make answering it easier for others.
http://jsfiddle.net/KyJzQ/
I used this rotate plugin since you did not specify which one you used.
HTML
<img id="circleimg" src="http://i.imgur.com/KgUDClr.png">
<img id="circleimg2" src="http://i.imgur.com/sK4qP6z.png">
JAVASCRIPT
var rot = 0;
window.setInterval(function() {
$('#circleimg').rotate(rot);
$('#circleimg2').rotate(rot);
rot += 1;
},
5
);
I think the circle you've provided is not actually a perfect circle, hence the tiny "oscillations" you see.
I added another circle that I rendered myself. If you zoom in closely enough you will see jagged pixels moving around the edge of my circle, but I don't see any way around this since the jQuery plugin is not actually re-rendering the image. I don't see any of the "oscillating" you mention in my circle.
This issue is more about vector art than it is about programming. Get a nice vector graphics program and render the nicest circle you can. Even the one I made is not really that good. Or use HTML5 and canvas to draw dynamically, rather than moving a static image around.