# How to make smooth 2-d zooming in Processing

I am making a 2d game with camera zooming using Processing. Currently, my program reduces the size of each block by one. This works very well when there are only a few blocks on-screen, but not when there are hundreds. The camera zooms out on an exponential scale, and looks very jittery.

I know that some game engines have systems to overcome this, by distorting some of the blocks, but I am making this game from scratch. I want to know if there is a different trick or system that will achieve a smoother zooming.

• Generally, you'll want to change the parameters of the ortho camera not the parameters of the world. – Alexandre Vaillancourt Aug 1 '15 at 14:12
• Is this in XNA or monogame? – jgallant Aug 1 '15 at 16:24
• Like I said in the original question, I am not using a game engine like Unity, so I don't have ortho cameras. Also, I am using a Coding language based on Java (processing.org) I currently have a 2-d array filled with different objects. The way I display them on screen is I have a "zoom" variable that I use to determine the size of each block. – Alex Wolski Aug 2 '15 at 2:06
• Do I misunderstand the question? It seems like using a float for the zooming factor rather than integer would solve the problem. – danijar Aug 2 '15 at 14:20

Many 2D games are actually 3D with most objects fixed in certain planes (Unity 2D for example). If this were the case, you could quite literally just move the camera backwards as a quick fix. However, you mentioned processing!

Processing utilizes affine transformations, and has a built in transformation stack. It's hard for me to remember exactly what the function calls were to add or remove matrices from this stack.. I believe it was pushMatrix().

You're probably already using this transformation stack for things like camera movement (And if you aren't you absolutely should, read about affine transformations and translation matrices!!).

However, this pushMatrix() function will add a given matrix to the transformation stack, and apply it to every object you draw as it is being drawn (Similar to the idea of OpenGL Shaders).

If you push a matrix to the stack that has scaling information on the diagonal with the rest of the entries as 0 for example:

0.1 0.0
0.0 0.1


Then it will effectively scale each block down to a tenth of the size. The generic matrix:

scaleX    0
0         scaleY


Now, if you are using the matrix stack already- you are going to want to make sure this matrix is pushed after to your translation matrices. Order of multiplication matters with matrices, and if you apply the scale then the translation, depending on how exactly the processing pipeline works under the hood you could potentially scale your translation too!

If you're curious- if memory serves I believe the transformations are done on the coordinate system of the objects being draw. So by scaling, I am scaling the axes which the object is being drawn on. And by translating, I am translating the origin of the axes. Same with rotation.

So in a nutshell using the processing API:

float scaleValue = 0.1f;
pushMatrix();
translate(-cameraX, -cameraY);
//Rotate(radians(90)); If you wanted rotation apply it after translation
scale(scaleValue);
rect(objectX, objectY, 100.0f, 100.0f); //ObjectX and objectY are
//object's position in worldspace
//Draw everything else you want effected by these transformations
popMatrix(); //Stop applying these transformations


• Glad I can help! Something here is kind of misleading upon re-reading it, having to do with the rotation. To clear it up, when applying a rotation to a specific object you will want to translate(-cameraX, -cameraY) followed by another pushMatrix();, then translate(objectX, objectY), finally scale(scaleValue) and Rotate(objectAngleInRadians). If you rotate before translating the object (Or try to draw the object in a given position that is not (0, 0) after rotating, it will not show up where you expect. Matrix transforms are essential in game development, glad you found this helpful! – Mr. Nex Aug 3 '15 at 15:41