Using the Cesium library, I want to find shadows that objects fall onto each other. With Cesium, I can create shadows of objects, but I have no idea how to get the shadows that fall on objects. How can I calculate the amount of shadows or amount of light falling on objects?
You should try to find each pixel's color or brightness. Maybe you can find something on this link. I don't know how to do it on Cesium.
Related
Theres 2 parts to my problem and they are related. I have a weird shape on my interface illustrated below, I am trying to randomly spawn MovieClips within its' boundaries but I am having some trouble finding a good way to do it.
Question 1: I can run an If condition to check with bitMapData.hitTest to see if the MovieClip has randomly spawn within this shape, if it doesn't simply retry with a new set of random coordinates. However, is there a better way? Like a way to only take into account coordinates within the shape? There will be plenty of MC spawned at one go so I am hoping to lessen the load, or at least find an efficient way to do this calculation.
Question 2: The MovieClips spawned within this shape will eventually have collision detection mechanics that will repel itself when interacted with. Is there a way to contain them within this shape via some kind of boundary detection?
If it was a square, we could easily have contained them with a quick check on all 4 edges, but not with this shape. Currently I am thinking of using bitMapData.hitTest again to detect for out-of-bounds after being repelled, but how do I know which Point() is the nearest 'edge' of this shape to return the MC to?
For question 1: I'm going to go on an assumption that you have some geometry data about the shape.
One method you can use to check if a point is within a shape is to take that point, then draw a line from that point to infinity (the edge of the screen) in one direction. Then count how many times that line intersects an edge of the shape. If it's odd, the point is within the shape (or on the edge) and if it's even, than that point is outside of the shape.
First link in google: https://www.geeksforgeeks.org/how-to-check-if-a-given-point-lies-inside-a-polygon/
Or can also try a more simple method (at the cost of doing more work): if the above shape is generated with all squares and rectangles and you know the point and size of all of those: can just do a check for the point vs all the squares and rectangles that make up the shape.
For question 2: As Organis mentioned, I'd go with a library like Box2D to do this. You'll most likely spend tons of time (that you may not want to) if you try to implement this alone.
The big issue is how much cpu or gpu the code uses. You're trying to avoid using any collision detection. Collision detection is having code do calculations to determine the edges of an object. It should be the last option.
Most of the time you know there's no need for collision detection. You know where everything is and how big it is. Everything has a centerpoint and comparing simple number coordinates is the lightweight way to check if there's a need to check further.
When things get near each other, you only need to do a collision detection on the immediate area around an object. See how your shape fits in a box that is easy to check for collisions? That box should get a collision check before the actual jagged shape inside it.
Yes that collision detection box has to be drawn or mapped but it's done when the object is defined, not when the game is playing. If you are using sprite sheets, keep an xml of the boxes or circles around the shapes.
I wanted to use the top-view of a building as a menu(navigation) for the users. When they hover over one of the rooms in the building, it should state what room it is and show some sort of effect. The thing is, however, the rooms of this building(only ground floor ofc) are not just squares or rectangles but have different shapes.
I have found the method css sprites already, but this method also uses the bounding boxes(so when your cursor approaches the edge of the room it already triggers the effect) of the shapes, and is thus not usable in my situation.
The top-view of the building can be very simplistic, as in a cross-section of the building with just coloured walls and the rest is background colour. When the cursor is exactly hovering over one of the rooms it should trigger the effect.
Does anyone know a way to tackle this? Thanks alot, Niels.
I need a library which, fed with a bitmap, returns me an array of rectangles with coordinates and dimensions of the different areas found in the image.
I'll give a graphic example:
From this:
I want this:
Or from this:
I want this:
Is there such a library?
If I want to write one on my own where can I start to inform myself about it?
To my knowledge, the best you'll find are image filters, and color conversion methods, but not the kind of complicated edge detection you're looking for.
Of course, your query supersedes the canny edge detection, and is focused on image boundaries, but I've found no material on that even beyond AS3.
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).
We're developing a game with impactjs that allows 'chaining' of entities as they are clicked. Basically this just draws a line between the two points, with a neon glow effect. So far, so good. Now, we have a request to make the 'chain' connections animated - fire, sparkles, etc. Essentially things that seem like they'd need actual graphic animations to look right. As the entities can be any distance/angle from each other, we're stuck at how to best implement a solution for this - that is, how to draw a diagonal image, for example, between two random points that we can animate. Any thoughts our suggestions on how to pull this off would be much appreciated.
Maybe create a particle entity with an Animation Sheet containing the necessary animations/particle effects. And then draw these particles along the line that from point A to point B.
When you want to animate it to fire/sparkles etc. run the animation for all those entities. in that line.
I'd be inclined to agree with Prat. Particle effects would most likely be what you need.
Here is a tutorial on generating particle effects in impact.js that might help you out.
http://www.pointofimpactjs.com/snippets/view/24/particle-effects-generation