Some assistance with Processing - javascript

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.

Related

How to click on a Cell object?

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.

trying to rotate on x axis with CSS and keep children rotating only on 2d axis

So I have a ring that I am rotating a dot around and I am trying to keep the dot always facing forward, so it doesn't go flat like a flipping card... if that makes sense. I want to follow the rotation of the parent but not skew to 2d... not really sure how to better explain it.
I have an example of what I am working with in the Fid link, I want it to do exactly that, but keep the dot flat and visible all the way through the rotation... sorry if I sound like a tool. :)
a linkhttp://jsfiddle.net/cvQGn/

SVG - trigonometric function to get a Point in dependence on a different angle

i'm working with the vivagraph library and i try to get a point depend on the angle of two nodes.
But i don't know how i get this point.
I get the angle between the two nodes, but do not know how I calculate the point.
I work with the example from the programmer and I've uploaded my extensions here
http://jsbin.com/umepoq/3/
I tried to make clearer, in a sketch
http://imageshack.us/a/img844/3904/stackoverflowfrage.png
Maybe someone can give me a hint. :)
Thanks in advance
Lets say the black and white picture is point A, the blue background picture remains fixed and is point B and the black dot is point C. If I understand you correctly you want the angle ABC to remain constant while point A is moved.
If the three parts of your picture are all part of the same group when you rotate the group by an angle then all parts within that group will be rotated by the same angle. This should preserve the angle ABC.

how to use Kinetic AbsolutePosition property

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.

How to determine Z-order when drawing in a one-point perspective?

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.

Categories