I'm drawing discs that may or may not be complete. I've found that if I'm drawing a value that goes all the way to 2pi, it tends to not be drawn. It seems like somewhere something is simplifying it to 0.
For example (with my arcs that are offset slightly):
ctx.arc(x, y, radius, startAngle + Math.PI/2, resAngle+Math.PI/2);
When the circle should be complete, the end of the circle is not drawn. I have to check for this condition, then add 0.1 in order to get the circle to appear.
Any ideas why?
What steps will reproduce the problem?
Try to draw a circle clockwise, sometimes it won't draw as the delta
between the start point and the end point is very small.
A fix is located at the following URL:
excanvas-arcfix.js
Which does the following:
Change line 689 :
if (xStart == xEnd && !aClockwise) {
to
if ((abs(xStart - xEnd) < 10e-8) && !aClockwise) {
References
ctx.arc() with a 2*PI angle won't draw anything
Related
I am trying to develop basic enemy AI on a simple platformer game after following Shaun Spalding's gamemaker 2 platformer tutorials on youtube. My code is the exact same as his on the tutorial but for some reason, when my enemy detects collision with the wall he turns around as he is suppose to and then detects another collision where there is none, causing him to turn around again.
This is my code:
// Horizontal collision
if (place_meeting(x+hsp, y, oWall)) {
show_debug_message(hsp)
while (!place_meeting(x+sign(hsp), y, oWall)) {
x += sign(hsp); // slows down I think
}
hsp = -hsp;
}
x += hsp;
The -hsp part is where he turns around. Somehow, he is detecting another collision as soon as he does so, even though the value of hsp is inverted. Can anyone possibly point me in the direction of why this may be occuring?
(Value of hsp initialized at 3 and never changed only for inversion).
Is it turning back to the wall after a short while, or is it stuck and is flickering to left and right rapidly? Both could involve that the collision point isn't updating well.
When I face with collision problems, I'll use a crosshair sprite, and draw it at the same position as where it should be colliding. that way I've a visible view of the 'collision point'.
Another cause could be the sprite's origin point, that determines at which position the x and y appears, and that the sprite by turning collides with the wall itself. Keep in mind that the origin point is at the center of it's collision mask, to avoid been stuck in a wall.
EDIT: Another possibility: the collision point still checks inside the sprite.
For that, you could also try using an offset that keeps the collision point away from the sprite collision, but to let that work, you'll need to keep the inverse direction away from your horizontal speed. Something like this:
// Horizontal collision
_offset = 15; //moves the collision point away to check in front of the sprite. value depends on the size of the sprite.
_dir = 1; //the direction, should only be 1 or -1
//hsp should no longer be used to inverse, use a new variable (like _dir) instead
collisionPoint = (hsp + offset) * _dir;
if (place_meeting(x + collisionPoint , y, oWall)) {
show_debug_message(collisionPoint)
while (!place_meeting(x+sign(collisionPoint), y, oWall)) {
x += sign(collisionPoint); // slows down I think
}
_dir = -_dir
}
x += hsp * _dir;
Currently I'm working on a orbit system for a game. I've got it so an object will move along a circle based on a progress value that'll be between 0.0 and 1.0 (0.5 being half way around the circle). I calculate this like this:
float angle = Mathf.Deg2Rad * 360 * t;
float xPos = Mathf.Sin(angle) * xAxis;
float yPos = Mathf.Cos(angle) * yAxis;
return new Vector3(xPos, yPos, 0.0f);
With t simply being deltatime and the xAxis/yAxis variables being the radius of the circle.
What I'm a little stuck on currently though is how I could possibly get the progress around the circle based on a poisition. So if I have an object that hits the bottom of the circle, how do I calculate that to be a progress of 0.5?
First step: Find out the angle of your given position with the y-axis.
Second step: Calculate the fraction of a full circle (360 degs) that your angle has.
First step involves a bit of trigonometry, and there you have to make sure to get the right type of angle based on what quadrant you're in. Second step should be trivial then.
You can check out the atan2 function that's available in many programming languages: https://en.wikipedia.org/wiki/Atan2
It gives the angle between a point (x, y) and the positive x-axis. So then in your case, depending on where your circle starts, you'd then shift that by 90 degrees to get the angle with the positive y-axis. Other than that it should work fine though.
I've made an Object called Player and an Object called Zombie, I would like to add a shooting function for Player, and the bullet to go from point Player to the point where I am holding my mouse, how can this be achived?
Let's eliminate the other directions first and just imagine that the direction is from left to right.
You first need to get the mouse's position which is possible by using
SDL_GetMouseState(int* placeX, int* placeY)
this pushes the mouses's x location to placeX and the mouses's y location to placeY.
Now you also need to get the position of the player, this could be done by getting the player's texture's rect while in the loop.
So if the character is at
(x,y) (0, 10)
with a
(w, h) (20, 40)
and you have the bullet source right at the middle-right of the character, then that makes it at
(20, 20)
then the actual current bullet source is at
(x, y) -> (20, 30) (basically rect.x + bulletsource.x and rect.y +
bulletsource.y).
Now all you have to do is something like
if(bullet.x < placeX)//this makes it look like the bullet is moving to the right
{
bullet.x++ //this moves the bullet closer to the right
Redraw bullet //you have to redraw to see the changes
}
do the same thing for y, it doesn't really have to be an if statement.
The same logic applies when you have multiple bullet directions.
You just have to think of the bullet's source as the center of the x and y axis and check if the mouseclick is within a certain quadrant (diagonal) or near the line of an axis(straight bullet).
Once you know what quadrant or line the mouse is at, then you just change the texture to be used(diagonal bullet facing north-east or just a plain ol' simple bullet facing the north).
Thanks, for the help, but I solved it by using atan2, and calculated the angle. When I had the angle I just added the value of speed * cos(angle) to the x variable and speed * sin(angle) to the y variable.
I have a grid which is 100 by 100, and I have a circle. I want the circle to put a value in every cell that the circle covers. Is there a good algorithm for this ? I will be using as3 but I don't think that would be a issue.
edit.
I'm trying to find a algorithm which will return all cells within the circle and all cells which are semi in the circle / mostly in the circle (Greater than 50%). As I haven't found algorithm which does this I cannot show any code.
I know this is an old question but might be useful for anyone (like me) looking for an answer here.
The (pseudocode) approach I took was to work out a bounding box around the circle of centre a,b radius r using two opposite corners:
topLeft = (x:a - r, y:b + r)
bottomRight: (x:a + r, y:b - r)
Then iterate over all squares within the bounding box and test if they are in the circle
for(x between topLeft.x and bottomRight.x){
for(y between topLeft.y and bottomRight.y){
if((x-a)^2 + (y-b)^2 < r^2){
// point is in circle
}
}
}
Start at the centre of the circle. Mark that grid square. Now construct a spiral starting from that square, checking each grid square along the spiral and marking as appropriate. There will be some formula for how long each new turn of the spiral will be. When a full turn of the spiral is outside the circle you do not need to check any more grid squares.
I am writing a drawing program, Whyteboard -- http://code.google.com/p/whyteboard/
I have implemented image rotating functionality, except that its behaviour is a little odd. I can't figure out the proper logic to make rotating the image in relation to the mouse position
My code is something similar to this:
(these are called from a mouse event handler)
def resize(self, x, y, direction=None):
"""Rotate the image"""
self.angle += 1
if self.angle > 360:
self.angle = 0
self.rotate()
def rotate(self, angle=None):
"""Rotate the image (in radians), turn it back into a bitmap"""
rad = (2 * math.pi * self.angle) / 360
if angle:
rad = (2 * math.pi * angle) / 360
img = self.img.Rotate(rad, (0, 0))
So, basically the angle to rotate the image keeps getting increased when the user moves the mouse. However, this sometimes means you have to "circle" the mouse many times to rotate an image 90 degrees, let alone 360.
But, I need it similar to other programs - how the image is rotated in relation to your mouse's position to the image.
This is the bit I'm having trouble with. I've left the question language-independent, although using Python and wxPython it could be applicable to any language
I'm assuming resize() is called for every mouse movement update. Your problem seems to be the self.angle += 1, which makes you update your angle by 1 degree on each mouse event.
A solution to your problem would be: pick the point on the image where the rotation will be centered (on this case, it's your (0,0) point on self.img.Rotate(), but usually it is the center of the image). The rotation angle should be the angle formed by the line that goes from this point to the mouse cursor minus the angle formed by the line that goes from this point to the mouse position when the user clicked.
To calculate the angle between two points, use math.atan2(y2-y1, x2-x1) which will give you the angle in radians. (you may have to change the order of the subtractions depending on your mouse position axis).
fserb's solution is the way I would go about the rotation too, but something additional to consider is your use of:
img = self.img.Rotate(rad, (0, 0))
If you are performing a bitmap image rotation in response to every mouse drag event, you are going to get a lot of data loss from the combined effect of all the interpolation required for the rotation. For example, rotating by 1 degree 360 times will give you a much blurrier image than the original.
Try having a rotation system something like this:
display_img = self.img.Rotate(rad, pos)
then use the display_img image while you are in rotation mode. When you end rotation mode (onMouseUp maybe), img = display_img.
This type of strategy is good whenever you have a lossy operation with a user preview.
Here's the solution in the end,
def rotate(self, position, origin):
""" position: mouse x/y position, origin: x/y to rotate around"""
origin_angle = self.find_angle(origin, self.center)
mouse_angle = self.find_angle(position, self.center)
angle = mouse_angle - origin_angle
# do the rotation here
def find_angle(self, a, b):
try:
answer = math.atan2((a[0] - b[0]) , (a[1] - b[1]))
except:
answer = 0
return answer