New to programming (translate())

tim50

Since I'm a noob, I know nothing but I am reading "Learning Processing" by Dan Shiffman and I'm confused about the translation stuff on page 230. On page 229, he translates a grid to (50, 50) and the top corner which is usually (0, 0) becomes (-50, -50), so okay translate() bends towards the left. Now for (0, 0) we need to move 50 pixels right on the x-axis and 50 pixels down the y-axis..... but on page 230, he does another example and translate rotates (100, 0). That would mean the usual (0, 0) is now (-100, 0) so the little circle (which is at (0, 0, 8, 8) should be 100 pixels to the right along the x-axis and not move down... but that's not where it is? He has 4 examples and I'm not sure which one is which... Out of the 4 examples, I think he has the little circle at (100, 20, 8, 8).

Also he has translate(-100, 0) (OMG a negative) with an ellipse(0, 0, 8, 8) with a comment saying move 100 pixels left... let's just say I have no idea what that means. I would imagine translate(-100, 0) would make the top right usual (0, 0) area be (100, 0).

In another book I have "Getting Started with P5.js," the translation makes sense. Is the translation function different from Processing to P5.js?

GoToLoop

AFAIK, canvas matrix transformations are pretty much the same across Processing spinoffs.

Maybe the way you're picturing the subject is more complex than it should be: :-/

translate(50, 30);
rect(0, 0, 20, 15);

Those 2 statements above are equivalent to just: rect(50, 30, 20, 15); O:-)

kfrajer

Here you can see a contrast between P5.js and Processing: https://github.com/processing/p5.js/wiki/Processing-transition

@tim50

All your comments about translation sounds all right. You got the point. >:D< =D> For these cases, it is easier if you run the code yourself to see the results. It is totally ok to be or feel confuse and the only way to clarify (for translation and rotations) is to do a little bit yourself. Type the code in the Processing IDE and run the code to see the output. If something does not make sense, post the code below and people will provide you a brief answer. However, you need to understand that it is important to do a bit of experimentation, to get your hands dirty, to be able to fully understand the concept. Unfortunately reading without running some code on the side could be the same as shooting in the dark.

In regards to translating in Processing and P5.js, they are the same as both codes use exactly the smae concept in most instances. As a simple explanation, you can almost replace every line of processing for a version of javascript as described by the P5.js reference and you have the code working (some restrictions apply). This is the concept behind Processing.js by the way... and a topic of discussion for another time.

Kf

tim50