2

i started learning how to create isometric illustrations. The first step is the isometric grid to work better.

Is there a standard/right/true way? I found different tutorials and was a bit confused because i thought there's mathematically just one true way.

Source 1: https://www.youtube.com/watch?v=fZ14PgMkFRQ

Top

  • Scale: Horizontal: 82% Vertical: 70,5%
  • Shear: 30°
  • Rotate: -30°

Left

  • Scale: Horizontal: 82% Vertical: 70,5%
  • Shear: -30°
  • Rotate: -30°

Right

  • Scale: Horizontal: 82% Vertical: 70,5%
  • Shear: 30°
  • Rotate: 30°

Source 2: https://medium.muz.li/creating-isometric-illustrations-made-simple-with-the-geometric-technique-1a58bb2bb41e

Top

  • Rotate: 45°
  • Scale: Horizontal: 100% Vertical: 57,7350%

Left

  • Rotate: 45°
  • Scale: Horizontal: 100% Vertical: 57,7350%
  • Rotate: 60°

Right

  • Rotate: 45°
  • Scale: Horizontal: 100% Vertical: 57,7350%
  • Rotate: -60°
7
  • I assume bend is skew. Anyway, you can decompose a matrix in many ways. Personally i use scale, skew, rotate as my decomposition (although if you look at the first hit on SSR method google theres a typo in the scale) . Anyway just rotate a line by 120 degrees for a reference isometric basis to test against. Anyway i recommend that you do NOT use a isometric grid, but learn to do this by numbers and by finding intersection. See graphicdesign.stackexchange.com/questions/105148/…
    – joojaa
    Mar 8 at 20:44
  • There is just one correct way: the angle between the 3 axes must be 120 degrees. But several ways to achieve that. Read Wikipedia article on 3D projection. Pay special attention to this image.
    – Wolff
    Mar 8 at 20:55
  • @Wolff well you could use a rotated isometric axis aswell.
    – joojaa
    Mar 8 at 21:21
  • @joojaa, but must the angle between the 3 axes not always be 120 degrees in order to be called isometric?
    – Wolff
    Mar 8 at 21:22
  • @Wolff well sort of. But you dont have to use thoe 3 axes you could rotate the ground plane for instance. It would still technically be isometric. You would lose out of the primary benefit but still. See the boxcrate image in my isometric shadow post.
    – joojaa
    Mar 8 at 21:43
6

A "strict" isometric grid would be

360°/3 = 120°

So we start with an axis at 0°, another at 120°, and another at 240°.

But we do need a vertical axis, not a purely horizontal one, so let's rotate all our grid 90° so we have now

  • 120°+90°=210°
  • 240°+90°=330°
  • 0°+90°=90°

A common color coding of the axis is Red for X, Green for Y, and blue for Z Making Z the height. You can invert X and Y. That is why I left the Z or 90° to the last.

So a cube will look like this. The outer lines of the cube would be a perfect hexagon.

You could explore different angles for stylistic reasons. This could be some kind of pseudo isometric. The camera or point of view would look as if it is lower with respect to the ground for example.

Pixel Isometric

A specific case is an adaptation for pixel art.

I am superimposing a square grid simulating pixels. You can see that it can be optimized.

The first one is the red and green axis, (X and Y) where we can move it up a bit so a diagonal can cross every two squares on a vertex. (the old axis are dim color)

The second adaptation is height. We can modify a bit the heights so it fits on the grid. (The old top of the cube is on magenta)

Here is the result with the vertices aligned with the "pixels"


The new angles

To find the exact angle we need to do some math. We have a triangle and the trigonometric relation we have is tan because we have the values of the sides of the triangle u and v (I am not using x and y here so I am not confusing about the name of the axis)

Using an online triangle calculator https://www.calculator.net/triangle-calculator.html?vc=&vx=&vy=1&va=&vz=2&vb=90&angleunits=d&x=59&y=13 we can see that the angle a is 26.56505118°.

enter image description here

Adding that angle to 180° to get the red axis is 206.5°, and subtracting from 360° to get the green axis is 333.5° sort of...

It is easier just using the squares.


I am sure there are other methods to get some other nice isometric looks for pixel art. I like the results of the method I described here.

The only "true" angles are the first on the explanation. The adaptation I made for pixel art or the ones described on your links are different methods to facilitate the drawing of pixel art. It is more subjective to say which one is "correct". Probably the answer is "the one that you like the most".


Some other pixel art options

The previous grid of 2x1 pixels can be changed, giving different camera angles. Here are some examples using 3x1 and 4x1 grids.

Here are the resulting angles (rounded numbers):

2x1 grid

180+26= 206°

360-26= 334° enter image description here

3x1 grid

180+18= 198°

360-18= 342° enter image description here

4x1 gid

180+14= 194°

360-14= 346° enter image description here


The closest one to true isometric is the 2x1 grid, but probably other proportions are more pleasing.

One last thing is that you need to adjust the "height" so it looks proportional to this axis.

17
  • 1
    Pseudo isometric = axonometric. But there is a special case and that is the pixel isometric that us tweaked so it fits the pixel grid better.
    – joojaa
    Mar 9 at 4:54
  • i.stack.imgur.com/KCovA.png
    – joojaa
    Mar 9 at 9:11
  • I will add that info on the main answer :)
    – Rafael
    Mar 9 at 17:07
  • 1
    @Wolff its technically OK. Like if i has a 15 degree around up rotated isometric is still technically isometric nobody just calls it that. Everybody assumes i use axis aligned objects. Thats why generally.
    – joojaa
    Mar 10 at 11:28
  • 1
    Looks like you are brilliant in Maths too :P
    – Vikas
    Mar 25 at 17:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.