I found this interesting animation and wonder if it's possible to repeat it in the PaperJS? It seems like it could be made of a group of circles, rotated around another circle.
But the problem is - when these objects are in a group I can't use sendToBack() per each, it's not going to work. Here is the Sketch example, that doesn't work.
P.S. Here is a simplified version of how it could be achieved, but it works only for 1 element, and only for animation along one axis.
If you still want to have your object grouped, a basic solution could be to have 2 groups: one below and one above the circle and toggle items visibility.
Just to demonstrate the idea, this sketch extends your code in this way.
I think that the way you currently decide if the item should be below or above can be improved though for a better result (you could try to detect intersection between the item and the circle rather than only checking the position).
Related
I'm currently working on a glsl shader (EDIT : I'm starting to think that a shader isn't necessarily the best solution and as I'm doing this in processing, I can consider a vectorial solution too) supposed to render something like this but filling the entire 2D space (or at least a larger surface):
To do so, I want to map the repeating patterns on the general leaves shapes that you can see on the top of the sketch below.
My problem is this mapping part : is it possible to find a function that project XY coordinates on the screen to another position in such a way that I can map my patterns the way I want? The leaves must have some kind of UV coordinates inside them (to be able to apply the repeating pattern) and the transformation must be a conformal map because otherwise, there would be some distortions in the pattern.
I've tried several lines of thought but I haven't managed to get the final result :
recursion :
the idea is to first cut the plane in stripes, then cut the stripes in leaves shapes that touch the top and the bottom of the stripes (because that's easier) and finally recursively cut the leaves in halves until the result looks more random. as long as the borders of the stripe aren't on the screen, it shouldn't be too noticeable. The biggest difficulty here is to avoid the distortion.
voronoi :
it may be possible to find a distance function guided by a vector field such that the Voronoi diagram looks more like what I'm looking for. However I don't think it will be possible to have the UV mapping I want. If it's the case, a good approximation woult do the trick, the result doesn't need to be exact as long as it isn't too noticable.
distortion :
it could also be possible to find a more direct way to do this projection. While desperately looking for a solution, I came across the fact that a continuous complex function is a conform map but I haven't managed to go any further.
Finaly, there may be another solution I haven't thought about and I would be glad if someone gave me a complete solution or just a new idea I haven't tried yet.
I am not sure how to put this problem in a single sentence, sorry if the title is misleading.
I am currently developing a simple terrain editor with a circle-shaped brush size. The image below shows a few cases that represent my problem.
additional info: the square size is fixed and uniform and in the current version, my concern is only to find which one is hit and which one is not (the amount of region covered is important for weighting the hit, but probably not right now)
My current solution (which is not even correct for a certain condition) is: given a hit in a position (x, y) with radius r, loop through all square from (x-radius, y-radius) to (x+radius, y+radius) and apply 2-D box to circle collision detection. But I don't think this is optimal (or even correct IMO).
Can anyone help me with this one? Thank you
Since i can't add a simple comment due to bureaucracy on this website i have to type it out here.
Anyway you're in luck since i was trying to do this recently as well! The way i did it is i iterated through the vertex array and check if the current vertex falls inside the radius of the circle. But perhaps what you want is to check it against each quad center and if that center falls inside the radius then add the whole quad as it's being collided.
Of course depending on the size of your grid the performance will vary so it's good to try to iterate through as few quads as needed. Though accessing these quads from the array is something you have to figure out yourself.
This seems to be a rather asked question - (hear me out first! :)
I've created a polygon with perlin noise, and it looks like this:
I need to generate a texture from this array of points. (I'm using Monogame/XNA, but I assume this question is somewhat agnostic).
Anyway, researching this problem tells me that many people use raycasting to determine how many times a line crosses over the polygon shape (If once, it's inside. twice or zero times, it's outside). This makes sense, but I wonder if there is a better way, given that I have all of the points.
Doing a small raycast for every pixel I want to fill in seems excessive - is this the only/best way?
If I have a small 500px square image I need to fill in, I'll need to do a raycast for 250,000 individual pixels, which seems like an awful lot.
If you want to do this for every pixel, you can use a sweeping line:
Start from the topmost coordinate and examine a horizontal ray from left to right. Calculate all intersections with the polygon and sort them by their x-coordinate. Then iterate all pixels on the line and remember if you are in or out. Whenever you encounter an intersection, switch to the other side. If some pixel is in, set the texture. If not, ignore it. Do this from top to bottom for every possible horizontal line.
The intersection calculation could be enhanced in several ways. E.g. by using an acceleration data structure like a grid, quadtree, etc. or by examining the intersecting or touching edges of the polygon before. Then, when you sweep the line, you will already know, which edges will cause an intersection.
Heyho. I just came up with a tricky question.
I did something like this: http://jsfiddle.net/LspdF/1/
As you cann see there are more than 4 sites. Thats why I did the following:
Whenevery the pic-numer is greater than the last pic-number I turn the cube left, otherwise rigt. Thats why it can happen, that the css is somewhat like this:
transform: rotateY(450deg)
Since a circle only has 360 deg it turns and turns but always in the right direction.
Now I wanted to add a nice effect. Something like this: http://jsfiddle.net/p8a2t/
For this effect I need the 14th value of the 3d matrix created by the browser (z-value of translation). Since this value is poorly not the same as translateZ(), I have to use the matrix3d()-attribute.
Thats why I calculate the rotateY myself. But as you know the sin and cos are periodic and wont work with my 450deg. They reset the cube to 90deg which makes the cube spin back very fast.
My Question: How to denie that? Is there any possibility to change the matrix for spinning more than 360deg?
PS: The effect is realized using transition. There may be code in the fiddles which isnt used since I had to create both examples at once.
PPS: Sometimes the calculation has fatal numeric errors (near zero but not rly zero). I tried to avoid that using toFixed but for some reason that wont work sometimes. Same with Math.round. Note that you can break the second example clicking many links while the animation is still not done. But thats no point here :)
Any help is appreciated!
I want to generate a cube where each face is divided into bits, like the following image:
http://img59.imageshack.us/img59/2504/gridcube165c3.jpg
Now, I can do this pretty simply if I'm just rendering quads, by just spacing vertices along each face plane at regular intervals, but my problem comes in when I want to turn the whole thing into a triangle strip. I've just got no idea how to unwrap it programmatically- is there some pattern to unwrapping that I'd follow?
I'm thinking of starting with the vertex at the top left corner as Row 0 Column 0 (R0C0), I'd want (first triangle) R0C0, ROC1, R1C1, (second triangle) R0C0, R1C0, R1C1 and so forth, and then when I reach the end of a row I guess I'd use a degenerate triangle to move to the next row, and then when I reach the end of the face I'd do the same to start a new face.
My main problem is that I can't visualize the program loop that would do this. I can reason out which vertex comes next visually, which is how I worked out the order above, but when I try to think programmatically I just stare blankly.
Even worse, with the end product I want the generated cube to be UV-mapped with a simple cube-map unwrap (the kind that looks like a T or t).
I guess, really, the best solution would be to find a library that already does this for me.
You could take a look at Ignacio Castaño's 'Optimal Grid Rendering' even though it's not triangle strips, it may inspire you.
Otherwise, you could use NVTriStrip library and be done with it.