Isometric Coordinates

Question

I recently got a game design book that shows the formula for isometric coordinates. It states this:

isometricX = x - y;
isometricY = (x + y) / 2;

I have attempted this here but it won't work
https://code.sololearn.com/WfV0yz5UA3BI/?ref=app

How do you successfully convert 2d points to isometric points?

https://www.dropbox.com/s/9nfa8cnqzdrkldu/IMG_20190809_132844.jpg?dl=0

Answer 1

Instead of recalculating only the upper left point,

calculate new coordinates for all the four corners,

and use lineTo and fill to connect the four points at their new coordinates.

https://code.sololearn.com/W5j9K3ydT02L/?ref=app

Answer 2

114-120
I did it yesterday haha - what a coincidence
https://code.sololearn.com/WwfbeaEW0UCJ/?ref=app

Answer 3

You are welcome.

It is a good first step anyway.

If you want some motivation, you can search for "Mitali's Tiny Park" by Martin in Code Playground with filter option as "Most Popular". Its 3D-imitation rotating view is the best isometric engine in SoloLearn.

Answer 4

Gordon Thanks!

Answer 5

Could you tell me title of the book? I am curious. Thanks in advance <3

Answer 6

Zuzanna Joanna The Advanced Game Developer's Toolkit: Create Amazing Web-based Games with JavaScript and HTML5 https://www.amazon.co.uk/dp/1484210980/ref=cm_sw_r_cp_apa_i_r.NtDbPJN14XG

Answer 7

https://code.sololearn.com/WA1uefwkdrrg/?ref=app
https://code.sololearn.com/WIs895qR95vc/?ref=app

Answer 8

Gordon I'm trying to layer up the isometric coordinates to make a cube, it's probably nothing but I've got a bug. For the last 15 minutes I've got rid of some broken parts of the code but something still remains that I can't work out. Do you have any ideas? It won't output any shapes.
https://code.sololearn.com/WajRK1SMUFXg/?ref=app