Graphics to Sprite creates pixelated edges - phaser-framework

I have the latest sprite and have the following code:
let graphics = this.add.graphics();
graphics.fillStyle(0xFF0000);
graphics.fillCircle(radius, radius, radius * 0.95);
graphics.fillStyle(0xffffff);
graphics.fillCircle(radius, radius, radius * 0.1);
graphics.generateTexture("BALL", radius * 2, radius * 2)
let ball = this.physics.add.sprite(this.platformWidth / 2, -100, "BALL");
The ball unfortunately has pixelated edges. In fact, there is almost a gray circle around the ball and that area specifically gets pixelated. This happens especially when I restart my scene as I move from one level to the next in my game.
I’d be grateful if you have any pointer on the issue?
Thanks,
Doug

Related

SVG animations - how to keep text horizontal while its parent rotates around a center point

I have the following animation:
I want the circle containing the ETH / USD animation to rotate around the centerpoint of all these circles, but the text itself I want to stay perfectly horizontal. How do I do this?
If it helps, I'm using the svg.js library (https://github.com/svgdotjs/svg.js)
Rotate the circle counterclockwise around its own center whiile it is rotating clockwise around the main center.
Let group be a group containing the small circle with radius r and the text. Let them be centered on (0,0). Let (cx, cy) be the central rotation point. Loop endlessly with even pace in a full circle taking 15s:
var group = draw.group();
group.circle(r, 0, 0);
group.text('ETH / USD');
group.animate(15000, '-').rotate(-360).loop()
.animate(15000, '-').rotate(360, cx, cy).loop();

Having the coordinates of the two triangles of a twisted triangle prism, how can I know if a point is inside it?

Here some examples of twisted triangle prisms.
I want to know if a moving triangle will hit a certain point. That's why I need to solve this problem.
The idea is that a triangle with random coordinates becomes the other random triangle whose vertices all move between then
related: How to determine point/time of intersection for ray hitting a moving triangle?
One of my students made this little animation in Mathematica.
It shows the twisting of a prism to the Schönhardt polyhedron.
See the Wikipedia page for its significance.
It would be easy to determine if a particular point is inside the polyhedron.
But whether it is inside a particular smooth twisting, as in your image, depends on the details (the rate) of the twisting.
Let's bottom triangle lies in plane z=0, it has rotation angle 0, top triangle has rotation angle Fi. Height of twisted prism is Hgt.
Rotation angle linearly depends on height, so layer at height h has rotation angle
a(h) = Fi * h / Hgt
If point coordinates are (x,y,z), then shift point to z=0 and rotate (x,y) coordinates about rotation axis (rx, ry) by -a(z) angle
t = -a(z) = - Fi * z / Hgt
xn = rx + (x-rx) * Cos(t) - (y-ry) * Sin(t)
yn = ry + (x-rx) * Sin(t) - (y-ry) * Cos(t)
Then check whether (xn, yn) lies inside bottom triangle

Area of hexagon outside circle

Let's have a circle with radius r.
I want to find out the area of the hexagon drawn around the circle. Supplemented is a sample image except I need to whole are of hexagon, not just intersection.
Area of hexagon drawn inside circle is:
(sqrt3*r)^2
as far as I know.
This hexagon consists of 6 equilateral triangles with height R. Area of such triangle is
s = R * R * Sqrt(3) / 3
Area of hexagon
S = 6 * s = 2 * Sqrt(3) * R^2
(If you need area of colored region, it is R^2 * (2 * Sqrt(3) - Pi))

how to draw circular arc with give two points and radius and clockwise direction

The problem is draw arc with two pints on bitmap with radius and clockwise direction.
From your one-sentence question, I'm gonna assume you're ok with drawing Bezier curves. If not, there is plenty of information about them out there.
Anyway, you cannot create a perfect circular arc with Bezier curves (or splines). What you can do is approximating a circle to a level where the eye won't be able to see the difference. This is usually done with 8 quadratic Bezier curve segments, each covering 1/8th of the circle. This is i.e. how Adobe Flash creates circles.
If you're after a plain parametrization using sin and cos, it's way easier:
for (float t = 0; t < 2 * Math.PI; t+=0.05) {
float x = radius * sin(t);
float y = radius * cos(t);
}

Ray Generation Inconsistency

I have written code that generates a ray from the "eye" of the camera to the viewing plane some distance away from the camera's eye:
R3Ray ConstructRayThroughPixel(...)
{
R3Point p;
double increments_x = (lr.X() - ul.X())/(double)width;
double increments_y = (ul.Y() - lr.Y())/(double)height;
p.SetX( ul.X() + ((double)i_pos+0.5)*increments_x );
p.SetY( lr.Y() + ((double)j_pos+0.5)*increments_y );
p.SetZ( lr.Z() );
R3Vector v = p-camera_pos;
R3Ray new_ray(camera_pos,v);
return new_ray;
}
ul is the upper left corner of the viewing plane and lr is the lower left corner of the viewing plane. They are defined as follows:
R3Point org = scene->camera.eye + scene->camera.towards * radius;
R3Vector dx = scene->camera.right * radius * tan(scene->camera.xfov);
R3Vector dy = scene->camera.up * radius * tan(scene->camera.yfov);
R3Point lr = org + dx - dy;
R3Point ul = org - dx + dy;
Here, org is the center of the viewing plane with radius being the distance between the viewing plane and the camera eye, dx and dy are the displacements in the x and y directions from the center of the viewing plane.
The ConstructRayThroughPixel(...) function works perfectly for a camera whose eye is at (0,0,0). However, when the camera is at some different position, not all needed rays are produced for the image.
Any suggestions what could be going wrong? Maybe something wrong with my equations?
Thanks for the help.
Here's a quibble that may have nothing to do with you problem:
When you do this:
R3Vector dx = scene->camera.right * radius * tan(scene->camera.xfov);
R3Vector dy = scene->camera.up * radius * tan(scene->camera.yfov);
I assume that the right and up vectors are normalized, right? In that case you want sin not tan. Of course, if the fov angles are small it won't make much difference.
The reason why my code wasn't working was because I was treating x,y,z values separately. This is wrong, since the camera can be facing in any direction and thus if it was facing down the x-axis, the x coordinates would be the same, producing increments of 0 (which is incorrect). Instead, what should be done is an interpolation of corner points (where points have x,y,z coordinates). Please see answer in related post: 3D coordinate of 2D point given camera and view plane

Resources