this is my jsfiddle : http://jsfiddle.net/mrLt1swj/1/
what i did basically is creating an empty sprite and append the arc as it's child like this :
paddle = graphics2.arc(0, 0, 110, game.math.degToRad(0), game.math.degToRad(45), false);
paddleSprite = game.add.sprite(0, 0);
game.physics.enable(paddleSprite, Phaser.Physics.ARCADE);
paddleSprite.anchor.set(0.5);
// Add the graphics to the sprite as a child
paddleSprite.addChild(paddle);
in this case i can use the physics on the arc , but the problem here
is that the arc is basically a polygon shape, second the position of the sprite is at 0,0 and the arc have different coordinate so the collision will not work if the ball hit the arc instead it will work if it hit the empty sprite
how can i set the collision bound of the arc so the collision between the ball and the arc work
is there any possible solution where i can set physics to arc and not use the sprite
For polygon (non-rectangular) collisions you have to use P2 physics instead of Arcade physics.
Or skip proper physics and calculate the collisions yourself: check the ball's position against the arc radius and angle.
Related
I'm using a PlaneGeometry as water, and have added a ship (gltf model) on it. Problem is, when the boat slightly rests into the water, the water is shown inside the boat, even though the boat is afloat. Is there a way to clip the water when a boat (or other models/objects) intersect with it with motion?
Every material in Three.js has an AlphaMap property that you can use to change the opacity of the mesh. So you could draw a black rectangle where the boat is to "cut out" that part of the water plane with an opacity of 0.
I presume your boat is going to be moving, so your texture would also need to move this black rectangle. To solve this, you could use an HTML <canvas> element to draw and move the black rectangle. Then you could use THREE.CanvasTexture to turn the <canvas> into a texture for your plane's alpha.
const drawingCanvas = document.getElementById( 'drawing-canvas' );
const canvasTexture = new THREE.CanvasTexture( drawingCanvas );
const waterMaterial = new THREE.MeshBasicMaterial({
transparent: true,
alphaMap: squareTexture
});
See this working demo for how to use a 2D canvas as a texture in your 3D scene. When you draw on the top-left square, you'll see it being applied to the cube. You could copy this approach, but instead of assigning it to material.map, you'd use it on material.alphaMap.
You could check for the position of the hull vertices of the ship each frame and, given enough points on the PlaneGeometry, you could displace all vertices of the surface inside the ship hull to the y coordinate of the nearest hull vertex. This could probably also be done by a custom shader, which is probably a more efficient solution.
#Marquizzo's idea with the alpha channel is probably a better solution, too, since you don't really want to simulate the displacement of the water, as I assume, but simply get rid of the display of water inside the ship. In this case, I would place an orthographic camera above the ship, set the near and far clipping planes as close as possible to the plane, and use the alpha channel or rather CanvasTexture inside the alpha channel as rendertarget. This way, you'll get a real time alpha map that also reacts to rolling, pitching and heave of the ship.
Effect of floating is made with sin function, applied to y-coordinate. You can use the same principle to make gltf model(ship) move on any coordinate axis.
Example:
position.y = Math.sin(ship.userData.initFloating + t) * 0.15;
I'm currently writting a 3D implementation of the boids algorithm in P5.js but I'm having trouble orienting my boids according to their direction (velocity). Rotations are limited to RotateX(), RotateY() and RotateZ(). The simplest solution that I feel should work goes along these lines :
push();
translate(this.pos);
rotateZ(createVector(this.vel.x, this.vel.y).heading());
rotateY(createVector(this.vel.x, this.vel.z).heading());
beginShape();
// Draw Boid Vertices..
endShape();
pop();
But it doesn't.
I've written a much smaller version of the program which contains only the orientation for randomly generated particles that go in a single direction. It is available here directly on the p5js website : https://editor.p5js.org/itsKaspar/sketches/JvypSPGGh
There is a default orbit control so you can zoom and drag the mouse to check the orientation of the particles.
Thanks so much, I've been stuck on this for half a day now
From your demo, the z component is flipped, and you can test this from only trying one of the rotations at a time. Second, chaining rotations in 3D this way will usually not do what you want, as rotating will change the "up" or "right" vector of the coordinate system attached to a certain object. For example, rotating about the up (-y for p5) vector, or the yaw angle, will rotate the right vector. The second rotation then needs to be about the rotated right vector (now pitch), so you can't just use rotateX/Y/Z as they are still in world space instead of object space. Note that I'm completely ignoring roll in this solution, but if you look at the boids from the front and top angles, it should be aligned with the velocities
var right = p5.Vector(this.vel.x, 0, this.vel.z);
rotate(atan(this.vel.y/ this.vel.x), right);
rotateY(atan2(-this.vel.z, this.vel.x));
I'm creating a heatmap of my gps tracks and am fighting a bit with canvas. I'm drawing a line with 10% transparency of all my tracks and the issue is that canvas doesn't want to stack the alpha on one line, e.g. with this:
ctx.fillStyle = 'rgba(1,1,1,0.1)';
points.forEach(point => ctx.lineTo(point.x, point.y));
ctx.stroke();
doesn't work as expected as everything, regardless of whether a track crosses over itself 100 times, has the color rgba(1,1,1,0.1)
Now I can draw each and every segment of the line separately, i.e.:
points.forEach(point => {
ctx.lineTo(point.x, point.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(point.x, point.y);
});
This properly stacks the alpha values of lines drawn on top of one another, but it creates a new issue - The line caps overlap. e.g. imagine drawing a "V". There will be a tiny diamond shape at the top of the corner that has overlapping lines. This is creating lots of "dots" all over my heatmap.
Any ideas on how to solve this?
I'm working with Canvas and JS, I have a simple physics sim where a ball is added to the canvas and reacts to gravity, collisions and drag.
Currently it can be fired around by dragging (like an elastic band).
function drawSlingshot() {
if (mouse.isDown) {
ctx.beginPath();
ctx.moveTo(ball.position.x, ball.position.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
ctx.closePath();
}
}
Here's my function for drawing a line indicating where the ball will go. It's unfortunately doing the opposite of what's intended. The ball should travel WITH the line and not against it.
Currently I fetch the location of the X and Y of the ball and the X and Y of the
cursor. if one was to mirror the line through the ball, the point I'm looking for would the the x,y of the mirrored line. (see pic below)
Any idea on how I might do this?
First calculate the difference between cursor and ball.
var difference_x = mouse.x - ball.position.x;
var difference_y = mouse.y - ball.position.y;
Then you draw a line between ball position and ball position minus the difference:
ctx.lineTo(ball.position.x - difference_x, ball.position.y - difference_y);
Can either arc between two arbitrary points on the circumference of circle be deleted by clicking on the first and second point on circumference respectively?
If you know the centerpoint of the circle it's fairly easy.
You can draw your new arc like this using a custom Kinetic.Shape:
context.arc(cx,cy,radius,startAngle,endAngle,sweepCounterclockwise)
Where:
cx,cy: The centerX/centerY of the existing circle are the cx,cy of the new arc.
radius: Use the distance formula to calculate the radius: Math.sqrt(dx*dx+dy*dy).
angles: Use Math.atan2 to calculate the 2 angles of the clicks vs the circles centerpoint.
sweep: Use the counterclockwise option to draw the new arc with a big or little swing.