Pixel Joint Forum: Isometric wheels?

Author

Message

HHXplorer
Seaman
Seaman

Joined: 15 February 2008
Location: Sweden
Online Status: Offline
Posts: 5

Topic: Isometric wheels?
Posted: 15 February 2008 at 12:55pm

It feels like I've tried a million different ways, but they all pretty much suck, how am I supposed to do an isometric wheel and make it look good?
Thanks
//Magnus

EDIT: I'll might as well show you a house I'm working on in Paint!

Edited by HHXplorer - 15 February 2008 at 1:05pm

Imma firin' ma pixels!

IP Logged

Pixel_Outlaw
Commander

Joined: 01 September 2005
Online Status: Offline
Posts: 3829

Posted: 15 February 2008 at 1:09pm

Well the best way to make top facing ones is to use a circle with length to width a ratio of 2:1. Now, the sides do not share the same 2:1 ratio even rotated. I forgot the ratio for side facing ellipses. Sorry I can't help much more than that. People will try to show you how to rotate them using photoshop but the circles will still be wrong because the are just rotating top facing circles. I'll work it out and get back to you later. I should just finish my little program that produces them for the pixel artist on the go. Be sure that you really want the answer to this question because I'm going to get it for you.

Edited by Pixel_Outlaw - 15 February 2008 at 1:44pm

IP Logged

Tillimann
Seaman
Seaman

Joined: 17 February 2007
Location: Germany
Online Status: Offline
Posts: 23

Posted: 15 February 2008 at 2:01pm

Hi, I just want to say that you should use a different program to draw your images, "Graphics Gale" (the version without GIF support is for free) for instance. You will save much time I guarantee.

IP Logged

Pixel_Outlaw
Commander

Joined: 01 September 2005
Online Status: Offline
Posts: 3829

Posted: 15 February 2008 at 2:45pm

Ah here you are.

Now remember this. IF you are drawing ellipses from the top the width will always be 2 TIMES the height. If you are working from the sides as you would for say a car, the width will always be 1.61 times the height.

Don't be too worried think of it like this. If you are drawing a top ellipse you simply make sure that the width is twice the height with your circle tool. If you are making side ellipses you draw an ellipse with a width that is 1.61 times the height then rotate it at a 63.4 degree angle, then clean up your lines.

Took some heavy thinking on this.

If you need any more help or just don't understand feel free to ask. Programs like photoshop and graphics gale should allow you to rotate those ellipses into the proper angle. I'm a bit excited myself for solving this. I've wondered how to draw them in the proper proportions myself.

Edited by Pixel_Outlaw - 15 February 2008 at 3:47pm

IP Logged

Inventrix
Midshipman

Joined: 01 January 2008
Online Status: Offline
Posts: 77

Posted: 15 February 2008 at 3:04pm

Originally posted by Tillimann

Hi, I just want to say that you should use a different program to draw your images, "Graphics Gale" (the version without GIF support is for free) for instance. You will save much time I guarantee.

Lots of people here swear by MS Paint. Careful not to get their hackles up.

IP Logged

Tillimann
Seaman
Seaman

Joined: 17 February 2007
Location: Germany
Online Status: Offline
Posts: 23

Posted: 15 February 2008 at 3:22pm

But how can he swear by Paint when he never tried other programs?

Edited by Tillimann - 15 February 2008 at 3:23pm

IP Logged

Pixel_Outlaw
Commander

Joined: 01 September 2005
Online Status: Offline
Posts: 3829

Posted: 15 February 2008 at 3:46pm

This should explain the difference between your top and bottom circles and the side circles. This shows them in the most used directions or the cardinal directions.

The side circles are different than the top and bottom because pixel art isometric is not standard isometric. If it was, all of the circles would be the same proportion. We see less of the top and bottom in pixel art isometric so the top and bottom ellipses are more foreshortened.

Edited by Pixel_Outlaw - 15 February 2008 at 3:53pm

IP Logged

surt
Commander

Joined: 30 December 2015
Online Status: Offline
Posts: 413

Posted: 16 February 2008 at 12:29am

P_O: That's not what I'd call pixel iso. Pixel iso should just be a 2D transform (Y scale) away from true iso, yours requires a 3D rotation and also loses the nice grid fitting.

IP Logged

HHXplorer
Seaman
Seaman

Joined: 15 February 2008
Location: Sweden
Online Status: Offline
Posts: 5

Posted: 16 February 2008 at 12:57am

Thanks a bundle for the help guys! So I guess it's basically the golden ratio.
And I ain't going to stop using Paint!

Imma firin' ma pixels!

IP Logged

Tillimann
Seaman
Seaman

Joined: 17 February 2007
Location: Germany
Online Status: Offline
Posts: 23

Posted: 16 February 2008 at 1:41am

@surt: How did you rotate the rectangles/circles? Did you draw it by hand?

IP Logged

Metaru
Commander

Joined: 03 February 2020
Online Status: Offline
Posts: 3305

Posted: 16 February 2008 at 4:12am

and if everything else fails, you can do it Zoogles's way.

I ate leel's babies

IP Logged

Pixel_Outlaw
Commander

Joined: 01 September 2005
Online Status: Offline
Posts: 3829

Posted: 16 February 2008 at 1:02pm

That drawing was done in 2D space surt. I used a rotation. It isn't 3d. Also, I can tell by the height that your side faces are not square they are rectangles. This means that your side ellipses are off and out of perportion. If you draw a cube in pixel art iso you will never have the "inside" points appear to touch. Yours do touch meaning that the "sides" are longet than they are tall. Your side ellipses would be slightly bigger too because of this. In a nutchsell your sides are not tall enough on your cube and it throws ovv the side ellipses. Yes I have adjusted mine for the Whole pixel art iso and not traditional iso. Surt I can see where you were going but please realize that your side faces would be longer than tall meaning you have just drawn a cuboid. You can see from my first image that I drew the cube from the top to get the side lengths then used those in a projection to get the proper shape. To finish the iso cube I had to draw the profile at the required angle then project that back over.

You need to base the side ellipses on a true cube or you will be drawing them incorrectly. The visual intersection in your drawing should never happen. Since it is not a cube your side ellipses are wrong. HOWEVER if we were using TRUE isometric and not pixel art isometric your visual intersection would happen. Bu "visual intersection" I mean intersection of the center faces visually.

The following is a true proof. THIS cube was done in true 3D to show how the visual intersection DOES not happen. You can hopefully see that it is out of porportion with your cube meaning that the side ellipses in your drawing are incorrect. In pixel art iso we see less of the top face and more of the side faces meaning that the top ellipse is thinner. Your cube like shape has smaller side ellipses than the top face (which we see less of).

Edited by Pixel_Outlaw - 16 February 2008 at 1:38pm

IP Logged

theoxygenthief
Seaman
Seaman

Joined: 16 February 2008
Online Status: Offline
Posts: 2

Posted: 16 February 2008 at 6:13pm

Pixel Outlaw you are a lifesaver!!!!! I have been suffering for days now trying to figure out a pixelart side elipse.

I did a pitch to a client and we decided to use a style similar to pixelart but vector-based for the job. Everything was going well until i tried drawing a side elipse and no matter WHAT i did it looked wonky. I've been stressing my arse off about it! I still don't understand all the math and the lingo (what do you mean by projection?) but it works and i can finally get on with it!!!

thankyouthankyouthankyouTHANKYOU!

IP Logged

Pixel_Outlaw
Commander

Joined: 01 September 2005
Online Status: Offline
Posts: 3829

Posted: 16 February 2008 at 6:20pm

Originally posted by theoxygenthief

Pixel Outlaw you are a lifesaver!!!!! I have been suffering for days now trying to figure out a pixelart side elipse.

I did a pitch to a client and we decided to use a style similar to pixelart but vector-based for the job. Everything was going well until i tried drawing a side elipse and no matter WHAT i did it looked wonky. I've been stressing my arse off about it! I still don't understand all the math and the lingo (what do you mean by projection?) but it works and i can finally get on with it!!!

thankyouthankyouthankyouTHANKYOU!

Thanks. Glad my math tecniques helped. Writting a .pdf guide as we speak.

EDIT Finished!

here: http://www.pixeljoint.com/forum/forum_posts.asp?TID=6037

Edited by Pixel_Outlaw - 16 February 2008 at 9:16pm

IP Logged

theoxygenthief
Seaman
Seaman

Joined: 16 February 2008
Online Status: Offline
Posts: 2

Posted: 17 February 2008 at 5:33am

Can you tell me more about the 1:1.61 aspect ratio? How did you work that out? i think there's something wrong with my grid....using you're method of drawing things they look right placed on the grid i made, yet when i draw a cube 10x10x10 squares manually the aspect ratio is not the same as your 1:1.61 cube, which looks like a 10x10x12 cube (roughly) on my grid.... :-( i'd send soem pics if i could but my home computer crashed and burned this morning :-(

I drew my grid by drawing evenly spaced horizontal lines, rotating them 25.565 degrees, creating a mirrored copy and then drawing vertical lines wherever these lines intersect. Is that the right way?

Edited by theoxygenthief - 17 February 2008 at 5:36am

IP Logged

Pixel_Outlaw
Commander

Joined: 01 September 2005
Online Status: Offline
Posts: 3829

Posted: 17 February 2008 at 12:56pm

Everything can be done with some very simply multiplication. You only need one value to find everything. That value is A the horizontal distance frome one edge of a grid square to the center of the square. It is easly found. Now, you will only care about B if you are making cubes. If you just want the side-facing circles simply construct the ellipses then rotate them.

I've killed about an hour doing the math in hopes that it will help. All you need is A.

I've made a vector diagram however I have tried the math in a pixel art form.

This should help:

Edited by Pixel_Outlaw - 17 February 2008 at 2:34pm

IP Logged

WIP (Work In Progress)
Pixel Joint Forum : Pixel Art : WIP (Work In Progress)

Author	Message
HHXplorer Seaman Joined: 15 February 2008 Location: Sweden Online Status: Offline Posts: 5	Topic: Isometric wheels? Posted: 15 February 2008 at 12:55pm
	It feels like I've tried a million different ways, but they all pretty much suck, how am I supposed to do an isometric wheel and make it look good? Thanks //Magnus EDIT: I'll might as well show you a house I'm working on in Paint! Edited by HHXplorer - 15 February 2008 at 1:05pm
	Imma firin' ma pixels!
	IP Logged

Pixel_Outlaw Commander Joined: 01 September 2005 Online Status: Offline Posts: 3829	Posted: 15 February 2008 at 1:09pm
	Well the best way to make top facing ones is to use a circle with length to width a ratio of 2:1. Now, the sides do not share the same 2:1 ratio even rotated. I forgot the ratio for side facing ellipses. Sorry I can't help much more than that. People will try to show you how to rotate them using photoshop but the circles will still be wrong because the are just rotating top facing circles. I'll work it out and get back to you later. I should just finish my little program that produces them for the pixel artist on the go. Be sure that you really want the answer to this question because I'm going to get it for you. Edited by Pixel_Outlaw - 15 February 2008 at 1:44pm

	IP Logged

Tillimann Seaman Joined: 17 February 2007 Location: Germany Online Status: Offline Posts: 23	Posted: 15 February 2008 at 2:01pm
	Hi, I just want to say that you should use a different program to draw your images, "Graphics Gale" (the version without GIF support is for free) for instance. You will save much time I guarantee.
	IP Logged

Pixel_Outlaw Commander Joined: 01 September 2005 Online Status: Offline Posts: 3829	Posted: 15 February 2008 at 2:45pm
	Ah here you are. Now remember this. IF you are drawing ellipses from the top the width will always be 2 TIMES the height. If you are working from the sides as you would for say a car, the width will always be 1.61 times the height. Don't be too worried think of it like this. If you are drawing a top ellipse you simply make sure that the width is twice the height with your circle tool. If you are making side ellipses you draw an ellipse with a width that is 1.61 times the height then rotate it at a 63.4 degree angle, then clean up your lines. Took some heavy thinking on this. If you need any more help or just don't understand feel free to ask. Programs like photoshop and graphics gale should allow you to rotate those ellipses into the proper angle. I'm a bit excited myself for solving this. I've wondered how to draw them in the proper proportions myself. Edited by Pixel_Outlaw - 15 February 2008 at 3:47pm

	IP Logged

Inventrix Midshipman Joined: 01 January 2008 Online Status: Offline Posts: 77	Posted: 15 February 2008 at 3:04pm
	*Originally posted by Tillimann* Hi, I just want to say that you should use a different program to draw your images, "Graphics Gale" (the version without GIF support is for free) for instance. You will save much time I guarantee. Lots of people here swear by MS Paint. Careful not to get their hackles up.
	IP Logged

Tillimann Seaman Joined: 17 February 2007 Location: Germany Online Status: Offline Posts: 23	Posted: 15 February 2008 at 3:22pm
	But how can he swear by Paint when he never tried other programs? Edited by Tillimann - 15 February 2008 at 3:23pm
	IP Logged

Pixel_Outlaw Commander Joined: 01 September 2005 Online Status: Offline Posts: 3829	Posted: 15 February 2008 at 3:46pm
	This should explain the difference between your top and bottom circles and the side circles. This shows them in the most used directions or the cardinal directions. The side circles are different than the top and bottom because pixel art isometric is not standard isometric. If it was, all of the circles would be the same proportion. We see less of the top and bottom in pixel art isometric so the top and bottom ellipses are more foreshortened. Edited by Pixel_Outlaw - 15 February 2008 at 3:53pm

	IP Logged

surt Commander Joined: 30 December 2015 Online Status: Offline Posts: 413	Posted: 16 February 2008 at 12:29am
	P_O: That's not what I'd call pixel iso. Pixel iso should just be a 2D transform (Y scale) away from true iso, yours requires a 3D rotation and also loses the nice grid fitting.

	IP Logged

HHXplorer Seaman Joined: 15 February 2008 Location: Sweden Online Status: Offline Posts: 5	Posted: 16 February 2008 at 12:57am
	Thanks a bundle for the help guys! So I guess it's basically the golden ratio. And I ain't going to stop using Paint!
	Imma firin' ma pixels!
	IP Logged

Tillimann Seaman Joined: 17 February 2007 Location: Germany Online Status: Offline Posts: 23	Posted: 16 February 2008 at 1:41am
	@surt: How did you rotate the rectangles/circles? Did you draw it by hand?
	IP Logged

Metaru Commander Joined: 03 February 2020 Online Status: Offline Posts: 3305	Posted: 16 February 2008 at 4:12am
	and if everything else fails, you can do it Zoogles's way.
	I ate leel's babies
	IP Logged

Pixel_Outlaw Commander Joined: 01 September 2005 Online Status: Offline Posts: 3829	Posted: 16 February 2008 at 1:02pm
	That drawing was done in 2D space surt. I used a rotation. It isn't 3d. Also, I can tell by the height that your side faces are not square they are rectangles. This means that your side ellipses are off and out of perportion. If you draw a cube in pixel art iso you will never have the "inside" points appear to touch. Yours do touch meaning that the "sides" are longet than they are tall. Your side ellipses would be slightly bigger too because of this. In a nutchsell your sides are not tall enough on your cube and it throws ovv the side ellipses. Yes I have adjusted mine for the Whole pixel art iso and not traditional iso. Surt I can see where you were going but please realize that your side faces would be longer than tall meaning you have just drawn a cuboid. You can see from my first image that I drew the cube from the top to get the side lengths then used those in a projection to get the proper shape. To finish the iso cube I had to draw the profile at the required angle then project that back over. You need to base the side ellipses on a true cube or you will be drawing them incorrectly. The visual intersection in your drawing should never happen. Since it is not a cube your side ellipses are wrong. HOWEVER if we were using TRUE isometric and not pixel art isometric your visual intersection would happen. Bu "visual intersection" I mean intersection of the center faces visually. The following is a true proof. THIS cube was done in true 3D to show how the visual intersection DOES not happen. You can hopefully see that it is out of porportion with your cube meaning that the side ellipses in your drawing are incorrect. In pixel art iso we see less of the top face and more of the side faces meaning that the top ellipse is thinner. Your cube like shape has smaller side ellipses than the top face (which we see less of). Edited by Pixel_Outlaw - 16 February 2008 at 1:38pm

	IP Logged

theoxygenthief Seaman Joined: 16 February 2008 Online Status: Offline Posts: 2	Posted: 16 February 2008 at 6:13pm
	Pixel Outlaw you are a lifesaver!!!!! I have been suffering for days now trying to figure out a pixelart side elipse. I did a pitch to a client and we decided to use a style similar to pixelart but vector-based for the job. Everything was going well until i tried drawing a side elipse and no matter WHAT i did it looked wonky. I've been stressing my arse off about it! I still don't understand all the math and the lingo (what do you mean by projection?) but it works and i can finally get on with it!!! thankyouthankyouthankyouTHANKYOU!
	IP Logged

Pixel_Outlaw Commander Joined: 01 September 2005 Online Status: Offline Posts: 3829	Posted: 16 February 2008 at 6:20pm
	*Originally posted by theoxygenthief* Pixel Outlaw you are a lifesaver!!!!! I have been suffering for days now trying to figure out a pixelart side elipse. I did a pitch to a client and we decided to use a style similar to pixelart but vector-based for the job. Everything was going well until i tried drawing a side elipse and no matter WHAT i did it looked wonky. I've been stressing my arse off about it! I still don't understand all the math and the lingo (what do you mean by projection?) but it works and i can finally get on with it!!! thankyouthankyouthankyouTHANKYOU! Thanks. Glad my math tecniques helped. Writting a .pdf guide as we speak. EDIT Finished! here: http://www.pixeljoint.com/forum/forum_posts.asp?TID=6037 Edited by Pixel_Outlaw - 16 February 2008 at 9:16pm

	IP Logged

theoxygenthief Seaman Joined: 16 February 2008 Online Status: Offline Posts: 2	Posted: 17 February 2008 at 5:33am
	Can you tell me more about the 1:1.61 aspect ratio? How did you work that out? i think there's something wrong with my grid....using you're method of drawing things they look right placed on the grid i made, yet when i draw a cube 10x10x10 squares manually the aspect ratio is not the same as your 1:1.61 cube, which looks like a 10x10x12 cube (roughly) on my grid.... :-( i'd send soem pics if i could but my home computer crashed and burned this morning :-( I drew my grid by drawing evenly spaced horizontal lines, rotating them 25.565 degrees, creating a mirrored copy and then drawing vertical lines wherever these lines intersect. Is that the right way? Edited by theoxygenthief - 17 February 2008 at 5:36am
	IP Logged

Pixel_Outlaw Commander Joined: 01 September 2005 Online Status: Offline Posts: 3829	Posted: 17 February 2008 at 12:56pm
	Everything can be done with some very simply multiplication. You only need one value to find everything. That value is A the horizontal distance frome one edge of a grid square to the center of the square. It is easly found. Now, you will only care about B if you are making cubes. If you just want the side-facing circles simply construct the ellipses then rotate them. I've killed about an hour doing the math in hopes that it will help. All you need is A. I've made a vector diagram however I have tried the math in a pixel art form. This should help: Edited by Pixel_Outlaw - 17 February 2008 at 2:34pm

	IP Logged