Currently I am using canvas to draw the gold circle, then snip off the areas half way to adjacent stars with globalCompositeOperation : destination-out, then paste the result into the main canvas.
I am contemplating changing to svg for this.
The closest method I have found is clip masks. I would have to create a set of clip-masks for each circle (star), this seems excessive if there were 2000 stars.
Another way would be to create polygons, but the math required to calculate the path may be beyond my capabilities.
So before I go down either of these routes, I would like to know if there is a better way or which of the above methods are recommended.
Related
I want to detect that the sprite has encountered a color in pygame, which function should I use to achieve this function.
Though it is possible to get the color at any point in the surface that you want to check against using get_at() (docs here). You would need to find the new area that your sprite covered that it did not cover last time and check every pixel in that, and if other things were moving around you would have to check if your sprite now overlapped with any of those area and check that. Or you could decide that was too complicated and just run through every pixel under your sprites location (without you sprite drawn yet) and check for that color.
It is possible, but would likely not be very fast.
An alternative is if you know where those colors are you can mark those areas using rects, circles, sprites or masks (see here and here) that you can check against. That is usually much faster. These do not have to be drawn and so would be invisible. They would just be used to mark areas for the collision check.
If you do not know exactly where the colors are in the background or the other images, you can create masks based on the colors in them using pygame.mask.from_surface() or pygame.mask.from_threshold() (docs here and here).
I need to draw a soft wide outline for my GDI+ GraphicsPath.
Something like this:
A path edge is shown in red. I'd like to use a wide pen which is smooth. I also need an ability to control smoothness of the pen.
I tried to use a gradient brush with the pen but couldn't find a solution that works.
I can achieve the desired result by drawing an outline with a black solid pen and applying a Gaussian smoothing filter on top of the result image, but I want to avoid this because it's slow when I have to process the whole image which could be quite large.
Is there a way to draw a smooth path outline?
There is no standard way in GDI+ that provides this functionality so you will have to create it.
You could track the line segments and draw a fuzzy, filled circle along the segments. By drawling the fuzzy circle once to a bitmap it should be fairly easy and fast to blit it continuously. By blending it slowly over time to the canvas you can also create a very nice effect and it would allow the user to control the intensity and maybe the size of the circle.
I created my own little 2D-Engine with DirectX (okey, should be more like a GUI in the end) and tried to create rounded edges for a simple Rectangle. Since I never done this with a graphics framework before I had no idea how to supply this.
For now, I just overlapped 5 Rectangles and 4 circles (the circles are used for the rounded edges). It does work with opaque colors but if I add alpha into the rectangles the circles are making problems. (Shown in the image below - i should have choose another colors...)
<# Open Image #>
I can't find a solution myself (I googled and whondered I found nothing about rounded edges in DirectX) and I do believe there is a much powerful and faster method doing this. So my final question is, what are the common algorythm to create a rectangle with rounded edges in Direct3D9 ?
The common way to draw rounded quads is the use of textures with an alphachannel. It's very easy and the most of the gui's uses images to achieve a specific look. If you draw only single-colored boxes it may look very generic after a while (even if they have fancy rounded corners ;) ).
But if you want to draw rounded quads directly, I would suppose to generate a custom geometry, which fits the desired area directly without overlapping (need for alphablending). In you case it would be something like this:
The more triangles you're using for the corner the smoother it will look.
I would like to identify the center of an SVG, so that I can manipulate multiple SVGs with ease.
I am trying to make multiple examples of the basic polygons (3 to 8 sides), and quickly realized that I either hade to make my own, which involves a lot of math, or I could pull from wikipedia the current ones. The problem with the former is that it takes a lot of time to translate the coordinates from Sketchup. The problem with the latter is that they are oriented differently and of different size.
I know that you can transform, scale, and rotate the SVG, but I need to know the coordinates of the center of the SVG. How do I find this out, so I can set universal manipulations?
Take the transform="rotate(degrees x y)", I need to know the center to accomplish this.
JS Fiddle
Here, I would like to set all the centers to the same, and then scale them to the same height and width, and potentially rotate them individually so that they all have a flat bottom, not a vertex.
The generic answer to your question isn't obvious...
It might be simpler for polygons, particularly convex polygons: you can iterate on the path and find its bounding box by computing the max and min of the x and y coordinates of each point of the path.
Then you can decide that the center of the shape is the center of the of the bounding box.
An alternative is to put an invisible element at what you estimate to be the center (for complex shapes, the concept of "center" can be variable), and get its coordinates to find out where the center is. Particularly for rotating purpose: you might want to do this rotation around a specific point which might not be the geometrical center.
I need to write some code (for a web.py webapp with a straight-HTML/JS client) that will generate a visual representation of a set of point-values. Each point has an X and Y coordinate, and the value is an integer. If I can use SVG to do this, then I can scale the image client-side with no extra code. Can I actually do this? I am concerned about a couple of things:
The points don't necessarily have any relation to each other. They aren't necessarily in a grid, nor can we say how many points are nearby, etc.
Gradients are primarily one-direction, and multiple gradients on the same shape seems to be a foreign concept.
Fills require an existing image, at which point, I'd be better off generating the entire image server-side anyway.
Objects always have a layering, even if it isn't specified, which can change how the image is rendered.
If it helps, consider a situation where we have a point surrounded by 5 others, where one of them is a bit closer than the others (exact distances and sizes can be adjusted). All six of the points have different colors (Red, Green, Blue, Cyan, Magenta, Yellow, with red in the center and Yellow being slightly closer), and the outer five points are arranged roughly in a pentagon. Note that this situation is not the only option, just a theoretically possible situation.
Can I do this with SVG, or should I render an image server-side?
EDIT: The main difficulty isn't in drawing the points, it is in filling the space between the points so that there is no whitespace, and color transitions aren't harsh/unpredictable if you know the data.
I don't entirely understand the different issues you are having with wanting to use svg. I am currently using the set up you are describing to render X-Y scatter plots and gaussian curves and found that it works great.
Regarding the last point about object layering, you have to be particularly careful when layering objects with less than 100% opacity which are different colors. The way the colors "add" depends on the order in which you add the objects to your svg drawing.
Thankfully you can use different filters to overlay the colors without blending them. Specifically I am using the FeComposite filter element. There is a good example of its usage here:
http://www.w3.org/TR/SVG/filters.html#feCompositeElement