I want to understand how I would draw a line between two shapes that are nested in other groups/layers. Here is a jsfiddle example which illustrates what I mean. As you can tell, when the coordinates in use are in the same layer, it is trivial to draw line. When the coordinates are nested inside other groups/layers, then the outcome is not as expected. Try moving the right box around to see the less than desirable results.
Could someone please show me how I translate coordinates from one layer into that of another.
You had some Xs where Ys should be, here's a fixed fiddle: http://jsfiddle.net/6UhNp/8/.
This works as far as you have specified, so you were using it right, but it does not work when you zoom in and out.
I have seen that zoom function you're using floating around recently, and I don't feel it's a correct solution. I haven't sat down to work it out yet, though.
Related
I'm using Javascript, p5.js, and Daniel Shiffman's tutorial to create a visual representation of an A* search algorithm.
An image of an example grid looks like this:
example grid
Is it possible to click on any cell of the grid, in order to print out it's attributes? Based on Daniel Shiffman's other tutorial on how to click on objects, I understand I have to create 2 functions that activate and execute respectively. I understand how to do this with a circle because a circle has a radius.
But, I don't understand how to do this with a cell because I only have it's coordinates. I can't see how to use coordinates as a metric to calculate length.
I'd appreciate any guidance to my thinking. Thank you so much in advance.
I wrote a tutorial on collision detection available here. That's for regular Processing, but everything is the same in P5.js. You're looking for rectangle-point collision.
Basically, you need to check whether the point is between the left and right edges of the rectangle and between the top and bottom edges of the rectangle. If both are true, then the point is inside the rectangle.
I recommend breaking your problem down into smaller steps and taking those steps on one at a time. For example, try getting it working with a single hard-coded rectangle and point before you try it with multiple cells or with user input.
I'm trying to display a large number of images on a d3 display using T-SNE. The x and y coordinates are pre-calculated, the location on the svg area is adjusted using using translate/zoom.
At the moment they all display using the precalculated coordinates.
and they remain in place as zooming/panning.
I'm looking to use collision detection (like this example) to adjust the images locations slightly so that they don't overlap, but as much as possible maintain the rough global structure.
Here's my attempt so far
https://gist.github.com/GerHarte/329af8ee5ffd8a1f87c5
With this it loads as in the image above, but as soon as I pan or zoom, all the points expand out hugely to a completely different location on the canvas and look like this, they don't seem to overlap, but they're extremely far apart.
Is there something wrong in my code or is there a better way to approach this?
Update:
I followed Lar's answer here, with the slight addition of setting the raw data points to where Lar's code settles since the points are translated when zooming or panning. The results look great (see below), but for a larger number of points (5000+) it seems to crash before converging on a final result.
Are there any suggestions to improve the efficiency with this approach? Going to try the Multi-Foci Forced Directed approach.
hey everyone i have a processing.js project where i am suppose to make my initials that have been drawn with code display in the window.... i created the document and built all the commands that i want it to do, however what i did was just use some ellipses to execute the commands that i was programming....now how ever i cannot get my letters to animate and behave in the same way the ellipses did, can anyone show me what the problem is. im sorry im new to processing and im trying to teach myself
You are doing fine with the animation of the ball (I would tweak some values to make the bounce more realistic but that's up to you to figure out) but for some reason you are stumped when it comes to moving the shape you created.
I am assuming you were able to create the shape because you're familiar with the documentation of beziers in Processing. If not then please go read the documentation first and see if you can figure it out.
Compare ellipses with beziers in Processing. ellipses have an x and a y. You understood that correctly. To move an ellipse you have to change the value of x and y. I hope you can understand that same logic applies elsewhere. To move a rect you have to change its x and y, etc. To move a line is the same way. Change all x and y values (lines have two x values and two y values). Now if you understand that logic then moving beziers should be a walk in the park seeing that all you have to do is change all the x and y values.
I am trying to create a pie chart and am customizing the example here: http://raphaeljs.com/pie.html
I need to draw lines from the labels to the slices but IE is giving me trouble and I'm not sure what to do about overlapping lines and labels.
Has anyone done this before?
this maybe useful to you:
Overlapping issues can usually be solved by using:
a) ".toFront()" on the raphael element, that should appear in foreground
b) ".getBBox()" at your label and use its parameters to figure out the starting point.
those functions can be looked up in the raphaeljs reference.
.getBBox() should be a good way to start, when you try to connect elements. you can easily figure out its meassurements and use those values (x,y,width,height) to calculate the entry point of your path
that makes it easier to avoid any overlapping at all. but keep in mind the end SVG elements are directly placed within the dom and therefor are meant to work in layers.
overlapping / partially hiding elements often offer you a great animation potential and are not really a bad thing to work with.
I'm trying to make a simple javascript that draws rectangles on a canvas, then draws the side faces based on a one-point perspective. The problem is, the amount of rectangles and their positioning is arbitrary, so faces tend to overlap in a way that wouldn't happen in true 3D perspective. How can I determine the correct drawing order so that this won't happen?
Here are some screenshots to illustrate what I mean:
Screenshot 1 - The wrong way. In this one, the grouping of red, green, and blue blocks is being drawn in the reverse order of how they should be drawn.
Screenshot 2 - The right way. This is the way that it should be drawn.
What you are looking for is called the Painter's Algorithm that is as long as you don't have any intersecting polygons
Since your screenshots don't work, I'm going to take a wild guess and assume that the problem your having is that drawing rectangles from back to front yields weird overlaps.
One approach to fixing this would be to use simple binary space partitioning. Essentially, expand every front facing rectangle to an infinite plane. Then, split all of the side rectangles where those planes intersect. Then, drawing from front to back should not product overlaps anymore, since the side rectangles will be split wherever any overlap problems would have occurred.
Edit: Ah, now that your screenshots work I don't think that's your problem. Ah well, I'll leave the answer anyways.