Main content
Computer programming
Describing 3D shapes
A simple shape to start working with is a cube. Although a tetrahedron has fewer sides, its sides aren't orthogonal, which makes things trickier. Let's start by creating a 200×200×200 pixel cube, centred at the origin (0, 0, 0).
We will start not with actually drawing anything, but with coming up with arrays of numbers that describe our shapes in 3D shape - specifically, arrays that describe our nodes and our edges.
Nodes
We start by defining an array of nodes, where each node is an array of three numbers, the x, y and z coordinates of that node:
var node0 = [-100, -100, -100];
var node1 = [-100, -100, 100];
var node2 = [-100, 100, -100];
var node3 = [-100, 100, 100];
var node4 = [ 100, -100, -100];
var node5 = [ 100, -100, 100];
var node6 = [ 100, 100, -100];
var node7 = [ 100, 100, 100];
var nodes = [node0, node1, node2, node3, node4, node5, node6, node7];As you may have noticed, the nodes are all 8 ways of arranging three lots of positive or negative 100.
You can see the nodes of a 2x2x2 cube centered at the origin in the visualization below. Rotate using the mouse:
Edges
Next we define an array of edges, where each edge is an array of two numbers. For example,
edge0 defines an edge between node0 and node1. We start counting at 0 because arrays are indexed starting at zero (To get the value of the first node we type nodes[0]).var edge0 = [0, 1];
var edge1 = [1, 3];
var edge2 = [3, 2];
var edge3 = [2, 0];
var edge4 = [4, 5];
var edge5 = [5, 7];
var edge6 = [7, 6];
var edge7 = [6, 4];
var edge8 = [0, 4];
var edge9 = [1, 5];
var edge10 = [2, 6];
var edge11 = [3, 7];
var edges = [edge0, edge1, edge2, edge3, edge4, edge5, edge6, edge7, edge8, edge9, edge10, edge11];The tricky part is making sure you join the right edges together. Here's a visualization of the edges we're connecting for a cube:
Want to join the conversation?
How would you go about making a 3-D ellipse?(82 votes)
From the author:As Dalendrion said, the best way is to approximate an ellipse with an series of straight lines. I will at some point add a tutorial for how to add circles, but it's quite complicated. I have an example here: https://www.khanacademy.org/cs/path-of-the-sun/5075733592408064
If you want to shade it, then you have to do each pixel individual as here: https://www.khanacademy.org/computer-programming/shaded-sphere/5559514153222144(99 votes)
How come there are so many functions just to build 1 cube in a code? Is it because of the volume, width, and height, or they are trying to see what we can do? Otherwise, this is great!(18 votes)
We have to draw the cube manually which is why there's so much code - if you drew a rectangle manually for example, you would have to list all 4 x, y coordinates (like when drawing a quad) & also label all the lines connecting them, then finally fill in the space between the lines, but all that stuff is done automatically when using the "rect" function. Plus with 3-D you add that 3rd dimension which just amounts to even more points to keep track of - once you get the basic "engine" down though, you can create your own function to draw 3D shapes more easily using your own "automatic" function...(30 votes)
how do you make a sphere?(6 votes)
It shall be reaveled a few lessons after this
:DD(2 votes)
Instead of using an array to store the location of each node, could we use an object with properties x y and z?(6 votes)- Yes.
PVectors are such objects.
https://www.khanacademy.org/computer-programming/3d-faces/6125609384542208(5 votes)
- I have seen people use "isoBlock" ,but I'm not quite sure how to use it.
If anyone could help me, it would be great.
:)(5 votes)
If you saw someone usingisoBlockit was possibly a variable or function they created for rendering isometric graphics.
You could ask the creator of the program if you have questions about how to wrote the function.(4 votes)
How might one make the nodes for a tetrahedron?(5 votes)
maybe bye changeing thenumbers in the middle or the end.(0 votes)
x is the horizontal axis and y is the vertical axis. Similarly, how would we describe the z axis?
If I use "depth axis", it won't really be the same, it would be similar to "height" and "width". But height and width are different than horizontal and vertical, hence depth shall be different than the answer to this question too.
Another way to think about this is x is between left and right, making it the horizontal axis; y is between up and down, making it the horizontal axis; and z is between front and back. So how do I describe z in a single word?(3 votes)
Maybe you can call it "distance" if you dislike "depth".
You'll see "depth" more often, though. There are no standardized names for the axes. The choice is yours.(4 votes)
I'm a little confused. Where in the edge code does it indicate that is referencing the nodes above?(5 votes)
how cau you make a 3-D elipse and how can you make a 3-D moon(4 votes)
Instead of using nodes why can't we just use lines?(3 votes)