I'm adding "mouse rotation" to my 2D drawing program. I've got all the code working, by basically calculating the rotation angle from the original mouse click to wherever the mouse currently is.
I also draw a transparent rectangle that rotates, instead of actually rotating the image on every mouse movement event.
Now, my problem is the drawing of this rectangle. I draw the rectangle from the image's x/y position, with its width/height being what the image reports.
However, after rotating a rectangular image, its new width and height is much bigger, as these two screenshots should help clarify: During rotation, and after rotating then rotating again -- the little "handles" show where the images' x/y/width/height extends to
In the second screenshot, because of the rotation, the image has been padded, sort of with whitespace (it's hard to describe with text!). E.g. an image that's 200x100 can end up like 150x150 (approximately) after rotating, which looks a bit strange when resizing the 2nd time.
Does anyone have an idea how to fix this?
As a rule of thumb, never rotate/resize a previously rotated image as the small errors will start creeping in.
Generally, it is easier to keep a copy of the original image and base ALL changes off that image.
For example, the first rotate is 5 degrees. The second rotate is 15 degrees. To render the second image, rotate the original copy 20 degrees and display that.
Not sure if that helps or if I have misread your question.
You should probably keep track of the image's current rotation, so that you can re-draw the rectangle around the image at its current rotation. If you are going to need to rotate more than 1 thing, you will have to keep track of layers, and the rotation of each one.
You'll need to store the original dimensions of the image and the current angle of rotation so that you can effectively back out the rotations correctly. Also, you'll need to save the original image data.
What's happening now is that your program loses the information about the original image size, so it uses what it sees (correctly). What you want is a fresh redraw from the original image data, just with a different rotation.
Related
I have gone through canvas and SVG in html5. When it comes to the difference, It is mentioned that canvas is pixel based and SVG is vector based. I have not got what do they mean by these.
Thanks in advance
There is 2 way to register an image in your computer:
Register in pixel: It means that your image is register as a table of pixel. And in every box of your table a color is register. Such images, have a defined size (1 computer pixel for 1 table box). If you want to reduce the size, an algorithm will mix pixel to render a lower size image. And if you want to display bigger than it is you will see pixel or the image will become blurred.
Register in vector: This kind of image do not own a size. Indeed the file format register vector (direction and scale). And when you want to display it, you will specify a size and the computer will process your image to display it. If you zoom on the image (for example a line). You will never see pixels. Indeed every time you zoom, the image is reprocessed and a line stay a line.
enter image description here
My goal is to take the image above and "open" it along the center so that the 9 black doublets are in a straight line rather than in a circle. I have tried using the cv2.toPolar() function in OpenCV but the image is quite distorted, as can be seen below:
enter image description here
I am attempting to try a different approach now. From the center, I would like to access each of the doublet individually, like a pizza slice, and place them side by side
Initially I was thinking of slicing each doublet using two lines from the center of the image to the mid point between the doublets on either side.
My question is: how can I draw contours from the center of the image to the edge of the image, passing through the mid point between any two doublet. If I can draw one, I know that the angle between any two such consecutive contour is 40 degrees.
Any help is greatly appreciated!
I noted a few problems here:
The toPolar() conversion might have been around the center of the image file, but it is not the center of the object. This causes part of the distortion. If you share your code, I could try playing with the code and improving it.
2.The object is somewhat elliptical, not circular. This means you will still have a wave after correcting the above problem.
If you don't mind a semi-automatic solution, you could use OpenCV mouse events to specify the first line and let the program use the 40 degree angle to calculate the rest.
<------This is an image I made in Photoshop...
It's basically a 160 x 160 box of white with a texture applied.
Below is what it looks like with "background-repeat" in the CSS. I was hoping it'd balance out. Is there a certain percentage the textile has to be at, or size of the original box? For it to be a perfect repeatable texture?
Im trying to do this myself, since I cant find grid patterns that fit the style.
Question: Whats the trick on making textures in Photoshop, that appear as balanced whole backgrounds when repeated?
If you look at the below image where it's in effect, on the very basic start of what Im working on, you can notice it doesnt quite fit together.
Any and all help greatly appreciated. Thanks in advance.
If you want that background for a webpage is better the use of repeating-linear-gradient. It is very easy of implement, less assets to download and it is supported by major browsers.
Look in the top left corner of your image. You'll note that the dark line starts at roughly 4-5 pixels from the top. Then look at the top right corner, and you'll note that the top line starts at just perhaps 2px from the top.
When this image is repeated twice side by side, there will be a disconnect. Just crop the image and shave off the two or three pixels until your lines connect. Repeat by cropping the bottom of the image for vertical alignment.
If you want to do this experimentally, increase the size of your canvas, and copy the pattern into a new 160x160 layer. Place them side by side, and then move the layers one pixel at a time so that they overlap. Where the overlap aligns is where you should crop the image.
How is it possible object can pass through ring spirte like in the image below?
Please can you help me I have no idea how can i do that.
I think you posted a incorrect image. To get the image you posted you just have to draw the red bar on top of the black ring.
I guess you want the ring on the left side to be on top and the right side to be over so it visually goes through. Well this is simply not so easy in 2D since draw order.
I have a couple of suggestion you can explore.
Always draw the ring on top of the bar but when a collision is happening you calculate where the bar overlaps and don't draw the pixels in that place. You can use a Pixmap for calculations like this. Depending on the size of your images this could be very expensive to calculate each frame.
A faster but slightly more hacky way could be to split red bar in multiple images and if a certain part of it should be overlapped by the ring draw it first otherwise draw it after the ring. Depending on what the red bar is going to look in your end product and how much possible angles the bar could have I can imagine this can be very tricky to get right.
Use 3D for this. You could have a billboard with a slight angle for the ring and have the bar locked on the distance axis at the rings center. However, on certain angles of entrance and exit you will get Z fighting since the pixels will be at the same distance from the camera. This might or might not be noticable and I have no idea how LibGDX would handle Z fighting.
I wanna add this solution :
if the object gonna pass through the ring horizontally i propose to devise sprite ring in to to sprite (sprite 1 & sprite 2)
you just have to draw sprites in that order :
Sprite1
Sprite Object
Sprite2
You can do the same if the object is gonna pass through ring vertically
PS : this solution don't work if the object is going to passs through ring both Vertically and Horizontally
Hope this was helpfull
Good luck
I succeeded in retrieving the exact tile my player is on, at runtime when walking around the tiledmap. I'd like now to add some alpha marks on the terrain when passing over, and to do that I need to modify the color of some pixels of the tile.
I really don't know how to do it right now.. any hints?
thanks.
You probably want to draw decorations on top of the tiles, rather than modifying the tiles themselves. The tile images are shared across all cells using a tile, so if you modify the tile itself you would see the change everywhere it was used. Further, modifying the texture is a relatively expensive operation that you probably should try to avoid.
To draw on top the tiles, you might draw additional sprites, or use a custom shader.