The gravity is turned on. Other bodies like Polygonshape is behaving normally but my chainshape body just freezes to the position when it touches the ground.
Short answer: Chain shapes aren't designed for full dynamics.
Longer answer: The box2d.org manual explains that Chain shapes are for constructing your static worlds. In this regard, Chain shapes are similar to Edge shapes:
they can collide with circles and polygons but not with themselves.
Furthermore, they're not designed for fully dynamic behaviors like shapes such as the Polygon shape.
Hope this answers your question.
Related
How do I check if a circle and a rectangle intersect in P5.js?
I'm working on this game, and I don't know how to check if the circle goes through the rectangle, or if it doesn't.
https://editor.p5js.org/AlexArek/sketches/rkoc4XA3m
Sounds like you're looking for something called collision detection.
There are a ton of resources on the internet, so I recommend googling something like "rectangle circle collision detection" for a bunch of results.
Another option to consider: you can usually get away with treating your circle as a rectangle and doing rectangle-rectangle collision detection. This approach is called bounding box collision detection and is very common in things like video games.
Shameless self-promotion: here is a tutorial on collision detection. It's written for Processing, but the same ideas apply to P5.js.
I recommend you try something out and post a question along with a MCVE if you have a more specific question. Good luck!
if(object1.collide(object2){
console.log("Objects interesected");
}
Hello I have two smaller questions:
Is it possible to map the Shape of the Body 1:1 to the texture so I have a perfect collision detection ? Because right now I only know of two ways to do it: Create the Shape before and load it up with a texture or load the texture first and then set the shape as a box ... But that is too simple I think.
Also does anyone know how I can turn off the physics of the world ? When Body A hits Body B I want the Body to do a certain animation and fall to the ground with some sound effects, but when the two objects collide they bounce off each other in different directions etc. When two objects collide I want it to be "Game over" basically and stop calculating momentum etc.
I dont care about the solution itself, just telling me if its possible at all for both questions would be enough.
I guess you are using Box2d
Is it possible to map the Shape of the Body 1:1 to the texture so I
have a perfect collision detection ?
It possible, you can use PolygonShape in Box2D, but it has to be a convex polygon. Furthermore it slower then predefined shapes.
Also does anyone know how I can turn off the physics of the world ?
With box2d Physics you can simply stop the simulation on your own by not executing the world.step() command
This visualization is created using Away3D (Flash):
www.guardian.co.uk/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline
Would it be possible to create something of the same quality (re. interaction, animation, performance, pixel-perfection etc.) using WebGL?
Bonus: How would one set up the basic scene? (without interaction and animation)
Yes, it would be. The scene is not complex at all, so it would have good performance. Interaction, yes, depends how you implement it, but if you are doing project with, for example, Three.js it wouldn't be a problem. Pixel perfection, obviously, yes.
In the scene, you could have curved plane, with texture that is changing UVs of vertices when you use 'navigate'. Pins could be done with particle, or better, simple quads with transparent textures. To have pixel-precise pin picking, you could depth-test pins on ray trace, or use pin-shaped geometry with shader, which probably the best solution.
So, basic scene - curved plane with per-vertex-changing-UV, pin-shaped and texture pins.
Alternatively, you could do exactly the same thing with 2D canvas. All elements are just drawn and scaled, text would be much simpler, and picking would be with 2d calculations.
Hope this helps.
I know it is not possible to add eventhandlers to specific circles or rectangles in canvas. But there are some nice frameworks like EaselJS, KineticJS, Paper.js, Fabric.js that support the eventhandling on specific elements.
Can someone explain me how do they work?
I think there are only two solutions.
1. You create for each element a new canvas region and put them on each other. In this way you can give each region an event handler.
2. You have only one canvas region and one event handler. In this way you have to do complex mathematical calculations to find out if a specific element was clicked. If you have only circles or rectangles, this solution might be easy. But if you have path with lots of curves, this solution is quite difficult.
I don't want to use the libraries. So it would be nice, if someone can help me.
Here's a BRIEF summary of how canvas drawing libraries work
An unaltered canvas is just a big bitmap. Once you draw shapes on the canvas, they are unaccessible, forgotten pixels.
Canvas drawing libraries store all your shapes into “retained” objects. Each shape object has sufficient information about itself to allow the drawing library to redraw it whenever necessary.
The canvas drawing libraries are the "controllers" for objects. The libraries have the algorithms necessary to track, manipulate and redraw all shape objects as necessary.
The following information is retained about every shape object:
Basic identification
ID,
Shape name
Parent or Container
Inherent properties of the shape:
Rectangular shapes( rect, image, text) know width and height.
Circular shapes (circles, elipses, regular polygons, stars) know radius and sidecount.
Lines know length.
Curved shapes (arcs, beziers, paths) know anchor points and control points.
Text also knows…well, the text!
Images also know their pixel data (usually stored in javascript Image objects)
Transformational information:
Starting X/Y coordinate
Translations—accumulated movements off the starting coordinate.
Rotations—accumulated rotations of this shape (usually in radians).
Scalings—accumulated resizings
Other transforms (less common) are skews and warps
Layering information—the current z-index
Styling information:
StrokeColor,
StrokeWidth,
FillColor,
Opacity,
isVisible,
lineCaps,
cornerRadius
Tracking abilities:
Bounding box—the smallest rectangle that completely contains this shape
This is used for “hit testing” to see if the mouse is inside this object (for selecting and dragging)
If you don't want to use a library, you may find my answer in this thread helpful. As markE says once the canvas is written to there is no way of tracking that data (unless you care to loop through each individual pixel and test its colour; though that is only really useful for pixel level collision detection).
I am implementing free drawing with HTML5 canvas. Currently every thing is working fine. I am using moveTo() and lineTo() for every mousemove. I have to fine tune the drawing;
when I draw some curve like lines with rapid movements, the drawing will be drawn like joints of straight lines. Is there any alternative way for drawing, to make the drawing smoother?
I dont think there is a better way for the drawing itself, however, if you put the draw functions directly onto the mouse move event handlers, then that would slow it down,
To speed that up you could just save the coordinates in an array in the event handlers and wait for the mouse to stop moving before walking trough the array and drawing.
The advantage would be that the events are called more reapidly, making smoother curves, the disadvantge would be that there is a 'lag' if you move the mouse alot.
An alternative would be to try and detect when the user curves and use the appropiate curve drawing method.
I actually did the same thing:
ctx.beginPath();
ctx.moveTo(lp.x-.5, lp.y-.5); // Last recorded position.
ctx.lineTo(cp.x-.5, cp.y-.5); // Current position at time of call.
ctx.stroke();
Bezier Curves are great for pen-like (paths) functionality, but I've ended up with unintended results with that as well, namely the curve between P0 and P2 being too distant from P1... This can be handled by adding extra points against which to evaluate the function (taking it to higher degrees, which seems to be how adobe does it).
I've spent two days answering this question, doing a lot of research of the best examples, tearing through code where available. There are essentially two responses:
1.) Apply a filter – a box- or gaussian- blur will smooth the rough edges a little, making it look less angular.
2.) Apply a Bezier Curve – Between the mousedown and mouseup events, log an array of the points and apply the curve. The longer the line, the slower the re-rendering.(Muro - deviantArt's canvas app appears to do this). [NB: If the idea is to create an artistic web app for people to draw on, show them the original line until the smooth rendering is complete.]
I like somewhere in between, personally. A slight blur tends to soften things, especially near corners, and makes slowly placed (thus frequent, shorter lines) much softer).
Something I'll add, which may be completely obvious so I apologize: Make sure you've set your cap style to 'round' –– ctx.lineCap = 'round'