2c:null 2d:["$","title",null,{"children":"How to Visualize the 3D p-Norm Unit Ball | ƒ | Observable"}] 32:T653,md ` # How to Visualize the 3D *p*-Norm Unit Ball How to graph a sphere, a cube, an octahedron, and every continuous shape in between with one function. --- ## Introduction --- ### What's the *p*-norm? If ${tex`\vec x`} is in ${tex`\mathbb R^n`}, that is, ${tex`\vec x = (x_1, x_2, \ldots, x_n)`}, then the *p*-norm of ${tex`\vec x`}, denoted ${tex`\|\vec x\|_p`}, is defined for ${tex`p \geq 1`} by ${tex.block`\|\vec x\|_p = \left(\sum_{k = 1}^n |x_k|^p\right)^{1/p}`} Perhaps a more intiuitive way of thinking of this is, if ${tex`\vec x`} is in ${tex`\mathbb R^4`} for example, then ${tex.block`\begin{aligned} \|\vec x\|_1 &= |x_1|^{\phantom{1}} + |x_2|^{\phantom{1}} + |x_3|^{\phantom{1}} + |x_4|^{\phantom{1}} \qquad (p = 1) \\ \|\vec x\|_2^2 &= |x_1|^2 + |x_2|^2 + |x_3|^2 + |x_4|^2 \qquad (p = 2) \\ \|\vec x\|_3^3 &= |x_1|^3 + |x_2|^3 + |x_3|^3 + |x_4|^3 \qquad (p = 3) \\ &\ \; \vdots \\ \|\vec x\|_p^p &= |x_1|^p + |x_2|^p + |x_3|^p + |x_4|^ p\qquad (\textrm{arbitrary } p) \end{aligned}`} ### What's the unit ball? The unit ball describes the set of all points whose distance from the origin is 1. It's often denoted ${tex`\mathcal B`}: ${tex.block`\mathcal B = \left\{\vec x : \|\vec x\| = 1\right\}.`} If our distance is induced by the *p*-norm, then the *p*-norm unit ball is the collection of all ${tex`\vec x`} such that ${tex`\|\vec x\|_p = 1`}. A common exercise in introductory analysis is drawing the *p*-norm unit ball in 2 dimensions for various values of *p* (usually ${tex`p = 1,\ p = 2, \textrm{ and } p = \infty`}).`33:T9f4,md `### Visualizations of the *p*-norm unit ball in 3D are significantly less common. Why? Well, a mathematician would say that once we understand the unit ball in 1 dimension and in 2 dimensions, then we understand it in all dimensions, and so examining ${tex `\mathbb R^3`} is redundant. However, perhaps a truer reason the 3D unit ball isn't visualized often is that it's a real pain to graph. Sure, graphing a sphere isn't hard, graphing a cube isn't hard, and graphing an octahedron isn't hard. But apparently graphing all three and every continuous visual representation between them with one function is the opposite of not hard. I'm going to walk through my problem solving process below—I'll talk about each method I tried, why I thought it would work, why it didn't work, and how I eventually arrived at a solution that worked. --- ## Method 1: Compute *z* from an (*x*, *y*) Mesh Grid --- With a lot of 3D graphing problems, what makes the most sense is to generate a mesh grid of evenly-spaced *x* and *y* values, then to calculate *z* for every (*x*, *y*) pair. In this way, you end up with a set of (*x*, *y*, *z*) points which, once connected to their nearest neighbors, form a surface. ${await FileAttachment("image@2.png").image()} Approaching this problem this way turns out to be a terrible idea. Here's why. First, we need to figure out a formula for *z* that depends on *x* and *y*. Since we're graphing the unit ball for variable *p*, our points (*x*, *y*, *z*) are going to have to satisfy ${tex`\|(x, y, z)\|_p = 1`}. So, we pull out the definition of the *p*-norm and do some minor rearrangements. ${tex.block`\begin{aligned} \|(x, y, z)\|_p^p &= |x|^p + |y|^p + |z|^p \\ 1^p &= |x|^p + |y|^p + |z|^p \\ 1 &= |x|^p + |y|^p + |z|^p \\ |z|^p &= 1 - |x|^p - |y|^p \\ z &= \pm \big(1 - |x|^p - |y|^p\big)^{1/p} \end{aligned} `} Great — the plan is to generate a grid of *x* and *y* values ranging from -1 to 1, then calculate the positive *z*-value for any (*x*, *y*) pair. If some pair is outside of our boundary (i.e., *x* and *y* are large enough that there's no *z* such that ${tex`|x|^p + |y|^p + |z|^p = 1`}), then we'll just let the value for that point be NaN, and our graphing utility will ignore it. We expect our points will look something like this (in the ${tex`p = 2`} case): ${await FileAttachment("image@3.png").image()} Then when we're done, we'll just duplicate our valid points with negative *z*-values to fill out the bottom hemisphere.` 34:T147e,md `That's not how it worked. Look at this. Look at ${tex`p = 1`}. Look at ${tex`p = 100`}. It's ugly, it's choppy, it's glitchy—it's disgusting. The edges of the patchworked surfaces cause a jittery image for low *p*, and for large *p*, open gaps still appear around the edges. ### Why isn't it working? There's two main problems occuring here. One is due to the way our graphing utility draws surfaces, and the other has to do with the points we're ignoring (the NaN *z*-values). To understand the first problem, we need to understand how 3D surfaces are drawn. Most 3D plotting functions take (*x*, *y*, *z*) data points in the format of three 2-dimensional arrays: ${await FileAttachment("image@4.png").image()} In the above image, our graphing utility would read these three arrays as a collection of six total points: ${await FileAttachment("image@5.png").image()} Lines are drawn between points that lie adjacent to each other in these arrays, *not* based on which (*x*, *y*, *z*) values are closest to each other in space. ${await FileAttachment("image@6.png").image()} Because of the bordering NaNs in our *z* array, and because of the way that we appended the negative points to our original arrays, the graphing utility is unable to connect all of our points and (mostly) settles for making two disjoint surfaces instead. Sometimes it can draw some borders, but it's unable to draw lines between every border point. However, even if we were able to solve the point connection issues with the arrays, there would still be other problems. This method doesn't capture the curvature of edges and corners well for high values of *p*. Since we're working with a finite-sized mesh, our step size can only be so small. Consider an *x-z* cross-section of ${tex`p = 10`} as an example, for *y* very close to but not equal to 0: ${await FileAttachment("image@7.png").image()} In this image, since *y* is just a little larger than 0, we don't pick up the point ${tex`x=1`}, since ${tex`1^p + \varepsilon^p > 1`}, and so no *z*-value exists such that ${tex`(1, \varepsilon, z)`} is on the surface of our unit ball. So, we jump from NaN to a very large *z* value when we increment *x*, completely skipping past the exact curvature we want to visualize. So, no matter our step size, after a certain *p*-value, we're not picking up any of the fine detail of our edges. We're always chopping off essential visual information, making entire sides of our object flat when they shouldn't be. Take the case ${tex`p = 1.5`}, for example: the corners of our object around ${tex `z = 0`} should be pretty pointy. But even if we've solved our connectivity issue, we would still end up with some object that looks like it's been filed flat around its equator. This method loses detail exactly where we need it most. ### Next step? So, apparently plotting surfaces is like laying shingles: it has to be done in a systematic fashion. We can't just toss down points in any order we want—we need to move methodically through space, connecting points of our surface as we progress. Moreover, we want the same granularity in the *z* direction as in the *x* and *y* directions. This calls for something parametric. --- ## Method 2: Spherical Coordinates --- As a brief refresher, if ${tex`\varphi`} is the vertical angle of a point from the posive *z*-axis, ${tex`\theta`} is the horizontal angle from the positive *x*-axis, and *r* describes the distance from our point to the origin, then any point (*x*, *y*, *z*) can be equivalently described in spherical coordinates ${tex`(\varphi, \theta, r)`}: ![](https://mimmackk.github.io/unitball/img/spherical.png) ${tex.block ` \begin{aligned} x &= r\sin\varphi\cos\theta \\ y &= r\sin\varphi\sin\theta \\ z &= r\cos\varphi \end{aligned} `} Parametrically generating a surface plot isn't that different from non-parametrically generating one. Instead of creating a mesh grid of (*x*, *y*) values, we create a mesh grid of ${tex `(\theta, \varphi)`} values. We find an expression for *r* based on ${tex `\theta`} and ${tex `\varphi`} and then transform our ${tex `\theta`} and ${tex `\varphi`} arrays into *x*, *y*, and *z* arrays by the above equations. In this way, we'll move down our surface in ${tex `\varphi`}-bands, where for each fixed value of ${tex `\varphi`}, we lay down points in a counterclockwise loop around our surface by varying ${tex `\theta`}. So, now all we need is an expression for *r*. ${tex.block ` \begin{aligned} 1 &= |x|^p + |y|^p + |z|^p\\ 1 &= |r\sin\varphi\cos\theta|^p + |r\sin\varphi\sin\theta|^p + |r\cos\varphi|^p\\ 1 &= r^p\left(\sin^p\varphi\cdot|\cos\theta|^p + \sin^p\varphi\cdot|\sin\theta|^p + |\cos\varphi|^p\right)\\ r^p &= \frac{1}{\sin^p\varphi\cdot|\cos\theta|^p + \sin^p\varphi\cdot|\sin\theta|^p + |\cos\varphi|^p} \\ r^p &= \frac{1}{|\cos\varphi|^p + \sin^p\varphi\cdot\big(|\cos\theta|^p + |\sin\theta|^p\big)} \\ r &= \frac{1}{\big(|\cos\varphi|^p + \sin^p\varphi\cdot\big(|\cos\theta|^p + |\sin\theta|^p\big)\big)^{1/p}} \end{aligned} `} Now that we have an *r* for every ${tex `\varphi`} and ${tex `\theta`}, we can easily convert to Cartesian and get our (*x*, *y*, *z*) points. `35:Ta28,md `Who would have thought? Spherical coordinates are perfect for graphing spheres. However, we start running into major issues with large *p*. Check out ${tex `p = 100`}: the edges look strangely curly and serrated, when it should really resemble a soft-edged cube. ### What's going on? My first thought was that maybe we were encountering numerical rounding errors with sine and cosine. I tried bumping up the number of steps in the mesh grid and switching to a symbolic library, but even this doesn't fix the problem: it actually makes it more pronounced. Instead, the issue becomes clear when we look at the ${tex `\varphi`}-bands for ${tex `p = 100`}, which essentially form the skeleton of our surface—that is, the lines along which the program "connects the dots" when drawing the surface. ${await FileAttachment("image@9.png").image()} Oh. Bands of fixed ${tex `\varphi`} do not form visually level *z*-bands. If we could achieve infinite smoothness, then we would have an accurate picture, since it's all the same object mathematically. But visually, choosing our bands in this way makes for weird, wobbly edges when we lay down our surface. So spherical *approximations* to the unit ball fail pretty badly, not in a mathematical sense, but in a visual sense, for large *p*. If we want an accurate visual estimation, we need straight edges to look like straight edges and corners to look like corners. We did a fine job in the ${tex `\theta`} direction, (equivalently the *x-y* direction)—we don't need to change what's happening there. It's the *z* direction that's causing issues. --- ## Method 3: Cylindrical Coordinates --- Since we want visually level *z* bands, let's try ranging *z* from -1 to 1 and working with cylindrical coordinates, eliminating our ${tex `\varphi`} problem while keeping everything good we've gained by using ${tex `\theta`}. ![](https://mimmackk.github.io/unitball/img/cylindrical.png) ${tex.block ` \begin{aligned} x &= r\cos\theta \\ y &= r\sin\theta \\ z &= z \end{aligned} `} We'll generate *z* values from -1 to 1, generate ${tex `\theta`} values from ${tex `0`} to ${tex `2\pi`}, and then calculate *r* based on ${tex `\theta`} and *z*: ${tex.block ` \begin{aligned} 1 &= |r\cos\theta|^p + |r\sin\theta|^p + |z|^p \\ 1 &= r^p\big(|\cos\theta|^p + |\sin\theta|^p\big) + |z|^p \\ r^p &= \frac{1 - |z|^p}{|\cos\theta|^p + |\sin\theta|^p} \\ r &= \left(\frac{1 - |z|^p}{|\cos\theta|^p + |\sin\theta|^p}\right)^{1/p} \\ \end{aligned} `} To finish, we just convert back to Cartesian coordinates. `36:T13ec,md ` Oh my God. Look at a large *p* value—why is there a weird knob on the bottom of it? That worked better than spherical coordinates did—it's legitimately *almost* good. Let's see what's going on with the skeletons. ${await FileAttachment("image@11.png").image()} It looks like we're running into one of the same issues we had with the first method, just in a slightly different format. While before we had trouble picking up *z* values close to 0, now we're struggling to capture them close to 1 and -1. This results in these sort of cap-less objects for large *p*, where our surface leaps and stretches from a faraway band defined by ${tex `z = 1 - \varepsilon`} to cluster and pile up at the point ${tex `(x, y, z) = (0, 0, 1)`} thanks to rounding error. But, our previous problem of the wobbly edges *has* been fixed. We just need a way to make our skeleton look more uniform. Ideally, the horizontal bands of our skeleton will look equally spaced along the surface of the unit ball, rather than simply being equally spaced in the *z*-direction. --- ## Method 4: Cylindrical-ish with a Sneaky Spherical Trick --- Since the problem is that our *z* values are evenly-spaced, let's make them not evenly-spaced. Let's begin with a bit of a false start in spherical coordinates. We'll pop in, steal some useful information, and drag it back to the cylindrical camp to continue our operations there. Let's generate equispaced ${tex `\varphi`} values from ${tex `0`} to ${tex `\pi`}, as before. But for each ${tex `\varphi`} value, instead of computing points based on varying ${tex `\theta`} to construct a full ${tex `\varphi`} band, we'll only look at a single point. If we set ${tex `\theta = 0`} (equivalently, ${tex `y = 0`}), then we can generate a set of *z* values based on ${tex `\varphi`}. ![](https://mimmackk.github.io/unitball/img/trick1.png) Some of these *z*-values are going to be very close together (or the same, due to rounding), and some will be very far apart, but the overall effect should be that they appear (basically) uniformly spaced along the surface of our object when paired with their ${tex `\varphi`} value. The ${tex `r_*`} we refer to below is a function of ${tex `\varphi`} and is refering to the distance from a point ${tex `(x, 0, z)`} on our surface to the origin. (Unfortunately for the traditionalists out there—and fortunately for the dyslexics—I don't hate myself enough to use ${tex `\rho,\ \varphi,`} and *p* in the same room.) We compute ${tex `r_*`} in order to find our *z*-values. ${tex.block ` \begin{aligned} 1 &= |x|^p + |y|^p + |z|^p\\ 1 &= |r_*\sin\varphi\cos(0)|^p + |r_*\sin\varphi\sin(0)|^p + |r_*\cos\varphi|^p\\ 1 &= r_*^p\sin^p\varphi + r_*^p|\cos\varphi|^p \\ r_*^p &= \frac{1}{\sin^p\varphi + |\cos\varphi|^p} \\ r_* &= \frac{1}{\big(\sin^p\varphi + |\cos\varphi|^p\big)^{1/p}} \\ \end{aligned} `} So, *z* is given for each ${tex `\varphi`} by ${tex.block ` z = r_*\cos\varphi = \frac{\cos\varphi}{\big(\sin^p\varphi + |\cos\varphi|^p\big)^{1/p}} `} Now that we have our *z*-values, we return to cylindrical coordinates. We plug in our formula for *z* and solve for *x* and *y* as before to get bands at equal *z*-values. ![](https://mimmackk.github.io/unitball/img/trick2.png) We're going to leave *z* in terms of ${tex `\varphi`} for now, so that rounding errors with *z*'s of essentially the same size won't give us *x* and *y* values that are the same too. By keeping things in terms of ${tex `\varphi`}, we should be able to retain that distinction. Note that the *r* below is different from ${tex `r_*`}: this *r* refers to the distance from any point (*x*, *y*, *z*) to the *z*-axis. ${tex.block ` \begin{aligned} 1 &= |x|^p + |y|^p + |z|^p \\ 1 &= |r\cos\theta|^p + |r\sin\theta|^p + \left|\frac{\cos\varphi}{\big(\sin^p\varphi + |\cos\varphi|^p\big)^{1/p}}\right|^p\\ 1 &= r^p|\cos\theta|^p + r^p|\sin\theta|^p + \frac{|\cos\varphi|^p}{\sin^p\varphi + |\cos\varphi|^p}\\ r^p\big(|\cos\theta|^p + |\sin\theta|^p\big) &= 1 - \frac{|\cos\varphi|^p}{\sin^p\varphi + |\cos\varphi|^p}\\ r^p\big(|\cos\theta|^p + |\sin\theta|^p\big) &= \frac{\sin^p\varphi}{\sin^p\varphi + |\cos\varphi|^p}\\ r^p &= \frac{\sin^p\varphi}{\big(\sin^p\varphi + |\cos\varphi|^p\big)\big(|\sin\theta|^p + |\cos\theta|^p\big)}\\ r &= \frac{\sin\varphi}{\big(\sin^p\varphi + |\cos\varphi|^p\big)^{1/p}\big(|\sin\theta|^p + |\cos\theta|^p\big)^{1/p}} \end{aligned} `} So now, we can plug in this *r* to our *x* and *y* equations, keeping *z* from our earlier computation, and get the points that define our surface: ${tex.block ` \begin{aligned} x &= \frac{\sin\varphi}{\big(\sin^p\varphi + |\cos\varphi|^p\big)^{1/p}}\cdot\frac{\cos\theta}{\big(|\sin\theta|^p + |\cos\theta|^p\big)^{1/p}} \\ y &= \frac{\sin\varphi}{\big(\sin^p\varphi + |\cos\varphi|^p\big)^{1/p}}\cdot\frac{\sin\theta}{\big(|\sin\theta|^p + |\cos\theta|^p\big)^{1/p}} \\ z &= \frac{\cos\varphi}{\big(\sin^p\varphi + |\cos\varphi|^p\big)^{1/p}} \\ \end{aligned} `} `37:[{"id":"7ae6c34046c93e5041464469569b892f8e969e92903cfcf8d358a03107d875064fbe3a1678782a016634185c3e7a882e55fc40acb3574b42558f7cfa20c1edd0","href":"https://static.observableusercontent.com/files/7ae6c34046c93e5041464469569b892f8e969e92903cfcf8d358a03107d875064fbe3a1678782a016634185c3e7a882e55fc40acb3574b42558f7cfa20c1edd0","name":"image@14.png","type":"image/png","lastModified":1672112555908.88,"size":88925},{"id":"3d5305ba2b8493bf9e0126c870407afa3dad0fecb5d336a28834daf1db4b9c21b255df85d64fa8059fe140b2f48befdb71e820507515b2a20bc069e376ab83ec","href":"https://static.observableusercontent.com/files/3d5305ba2b8493bf9e0126c870407afa3dad0fecb5d336a28834daf1db4b9c21b255df85d64fa8059fe140b2f48befdb71e820507515b2a20bc069e376ab83ec","name":"image@11.png","type":"image/png","lastModified":1672112555908.88,"size":62994},{"id":"ad6280fb03347f1e8f4f50c7b1f0c1ebf8b9954b003e9eb22a13e613c5294fee87d485963fa8b6dfd556588e20dcaf57bb711bbbf346062e18a6c1ef557602ec","href":"https://static.observableusercontent.com/files/ad6280fb03347f1e8f4f50c7b1f0c1ebf8b9954b003e9eb22a13e613c5294fee87d485963fa8b6dfd556588e20dcaf57bb711bbbf346062e18a6c1ef557602ec","name":"image@9.png","type":"image/png","lastModified":1672112555908.88,"size":35945},{"id":"f61a3400893d4ded9e43f23af1617e41d8495d90e230d4de4982662998e252e415ff321a10c735085e0896c77b77a7c0dbd01a1fe0c319c5a20d1fdabbb82ece","href":"https://static.observableusercontent.com/files/f61a3400893d4ded9e43f23af1617e41d8495d90e230d4de4982662998e252e415ff321a10c735085e0896c77b77a7c0dbd01a1fe0c319c5a20d1fdabbb82ece","name":"image@7.png","type":"image/png","lastModified":1672112555908.88,"size":21122},{"id":"08b8dc9e751f3c8fbaf7c2eec8d3ba4623e52eb314878da693cd808921accd0e5a4f71caf35cfba5c32355a7ea15cf8032cfaa9afe50ed864be6ee70e07c1b23","href":"https://static.observableusercontent.com/files/08b8dc9e751f3c8fbaf7c2eec8d3ba4623e52eb314878da693cd808921accd0e5a4f71caf35cfba5c32355a7ea15cf8032cfaa9afe50ed864be6ee70e07c1b23","name":"image@6.png","type":"image/png","lastModified":1672112555908.88,"size":47780},{"id":"3d00a419724c6f74d461aabdee6b1a66dc0cf42a3cc48287f9634b83af3dc57c939a73f03a70904418e640ee219b528bfe88b5e0382c4a9ed1b62728964b88fa","href":"https://static.observableusercontent.com/files/3d00a419724c6f74d461aabdee6b1a66dc0cf42a3cc48287f9634b83af3dc57c939a73f03a70904418e640ee219b528bfe88b5e0382c4a9ed1b62728964b88fa","name":"image@5.png","type":"image/png","lastModified":1672112555908.88,"size":46917},{"id":"0b0262c5861bf9414850743f399e91da26c90c25b07712e30df218f514cc84f9ba02b1986bc9c1c28768b4add30c63cd12ad337c50a63714d998276faf9218b2","href":"https://static.observableusercontent.com/files/0b0262c5861bf9414850743f399e91da26c90c25b07712e30df218f514cc84f9ba02b1986bc9c1c28768b4add30c63cd12ad337c50a63714d998276faf9218b2","name":"image@4.png","type":"image/png","lastModified":1672112555908.88,"size":31868},{"id":"caed1be5b44630ddc1d343f7488c7b7965b610bb666a3c53c070632cda8bb1340895b20f3a49310437b04e00774e4952898ad769bcf866dc732362581c2d9ffd","href":"https://static.observableusercontent.com/files/caed1be5b44630ddc1d343f7488c7b7965b610bb666a3c53c070632cda8bb1340895b20f3a49310437b04e00774e4952898ad769bcf866dc732362581c2d9ffd","name":"image@3.png","type":"image/png","lastModified":1672112555908.88,"size":38088},{"id":"615608a4b6b06903c0423a8c10b9dcc1a5d89ee24db22279f08620d842a8f4c15118a6ff45b8031c0e9e77ba1874cd7c76917fa8197deb2b56857e0f9048eeb4","href":"https://static.observableusercontent.com/files/615608a4b6b06903c0423a8c10b9dcc1a5d89ee24db22279f08620d842a8f4c15118a6ff45b8031c0e9e77ba1874cd7c76917fa8197deb2b56857e0f9048eeb4","name":"image@2.png","type":"image/png","lastModified":1672112555908.88,"size":163489}] 30:{"id":"27d6bdfbd83f78ae","slug":null,"title":"How to Visualize the 3D p-Norm Unit Ball","thumbnail":"9ee991de57867521f577f9b9b60b45ba6f6511e436ff68fb259034fcb663149c","access_level":"public","create_time":"$D2022-12-27T03:42:35.908Z","update_time":"$D2022-12-27T03:42:35.908Z","view_time":null,"first_public_time":"$D2022-12-27T03:42:35.908Z","has_unpublished_edits":null,"fork":{"id":"399579b3b34a4ae6","slug":"how-to-visualize-the-3d-p-norm-unit-ball","title":"How to Visualize the 3D p-Norm Unit Ball","owner":{"id":"f2c21786e0c9f50c","login":"cadasa","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"01c5b3348f0ad41e","login":"follymath","name":"ƒ","avatar_url":"https://avatars-next.observableusercontent.com/6ab71fe2b6ec1b0072af6ff766fbf76def55b1e24d5463f2deb67e7274337e67","tier":"starter_2024"},"version":1601,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e83e96b3489ba704","login":"follymath","name":"ƒ","avatar_url":"https://avatars-next.observableusercontent.com/6ab71fe2b6ec1b0072af6ff766fbf76def55b1e24d5463f2deb67e7274337e67","tier":null}],"members":[{"type":"individual","id":"e83e96b3489ba704","login":"follymath","name":"ƒ","avatar_url":"https://avatars-next.observableusercontent.com/6ab71fe2b6ec1b0072af6ff766fbf76def55b1e24d5463f2deb67e7274337e67","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"How to Visualize the 3D p-Norm Unit Ball","cells":[{"id":881,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"viewof p2d = Range([0.1, 999], {label: tex`p`, step: .1, value: 1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"{\n let steps = 2**8 + 1;\n\n // Compute data points in polar coordinates\n let theta = [...Array(steps).keys()].map(i => (i * Math.PI * 2) / (steps - 1) );\n let r = theta.map(t => (Math.abs(Math.sin(t))**p2d + Math.abs(Math.cos(t))**p2d)**(-1/p2d));\n\n // Convert to Cartesian\n let x = Array(steps);\n let y = Array(steps);\n for (let i = 0; i < steps; i++) {\n x[i] = Math.cos(theta[i]) * r[i];\n y[i] = Math.sin(theta[i]) * r[i];\n }\n\n // Format and display in Plotly\n let data = [{x: x, y: y, mode: 'lines', type: 'scatter'}]; \n let layout = {\n width: 500, \n height: 500, \n xaxis: {\n showgrid: false, \n zerolinecolor:'Grey', \n zerolinewidth: 1, \n }, \n yaxis: {\n scaleanchor: \"x\", \n scaleratio: 1, \n showgrid: false, \n zerolinecolor:'Grey', \n zerolinewidth: 1, \n },\n hovermode: 'closest'\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"function unitball3d_m1(p) {\n\n // Generate a set of equispaced values from -1 to 1\n let range = [...Array(num_steps).keys()].map( i => (i * 2) / (num_steps - 1) - 1 );\n\n // Initialize z with NaNs\n let z = [...Array(num_steps * 2)].map( () => Array(num_steps));\n\n // Precompute as much as possible outside of the loop\n let abs_pow = range.map(val => Math.abs(val)**p);\n\n // Compute z based on x and y\n for (let i = 0; i < num_steps; i++) {\n let x_val = abs_pow[i];\n for (let j = 0; j < num_steps; j++) {\n let y_val = abs_pow[j];\n let z_val = 1 - x_val - y_val;\n if (z_val >= 0) {\n z[i][j] = z_val**(1/p);\n z[num_steps * 2 - 1 - i][j] = -z[i][j];\n }\n }\n }\n\n // Generate the (x, y) mesh grid\n let x = [...Array(num_steps)].map( () => range );\n let y = [...Array(num_steps)].map( () => Array(num_steps) );\n range.forEach( (val, i) => y[i].fill(val) );\n x = x.concat(Array.from(x).reverse());\n y = y.concat(Array.from(y).reverse());\n\n return {x, y, z}\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1011,"value":"viewof p_m1 = Range([0.1, 999], {label: tex`p`, step: .1, value: 1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"plot_m1 = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"md `That . . . almost worked. The graph seems accurate wherever it exists—the problem is the places where it doesn't. Looking at ${tex`p = 100`} is almost comical.\n\n### Method 1.1: A Bad addendum to a Bad Idea\n\nFor a bit, I was pretty obstinate about the fact it half-worked.\n\nThe unit ball is perfectly symmetrical with regards to each of the axes, so I figured if I layered a bunch of half-working things over each other in the right way, I could probably get something that full-worked!\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"function coords_patchwork(p) {\n\n let {x, y, z} = unitball3d_m1(p);\n\n let X = [];\n let Y = [];\n let Z = [];\n \n // Patch together our X, Y, Z symmetrically to cover the gaps\n x.forEach(function(val, i) {\n X.push([].concat(x[i], z[i], y[i]));\n Y.push([].concat(y[i], x[i], z[i]));\n Z.push([].concat(z[i], y[i], x[i]));\n });\n\n return {x: X, y: Y, z: Z}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"viewof p_m11 = Range([0.1, 999], {label: tex`p`, step: .1, value: 1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"plot_m11 = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"theta = [...Array(num_steps).keys()].map(x => (x * Math.PI * 2) / (num_steps - 1) )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1470,"value":"phi = [...Array(num_steps).keys()].map(x => (x * Math.PI) / (num_steps - 1) )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1475,"value":"sin = ({theta: theta.map(x => Math.sin(x)), phi: phi.map(x => Math.sin(x))});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"cos = ({theta: theta.map(x => Math.cos(x)), phi: phi.map(x => Math.cos(x))});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"function unitball3d_m2(p) {\n\n let x = [...Array(num_steps)].map( () => Array(num_steps));\n let y = [...Array(num_steps)].map( () => Array(num_steps));\n let z = [...Array(num_steps)].map( () => Array(num_steps));\n \n // Pull as much math outside of the inner loops as possible\n let r3 = cos.theta.map( (val, i) => Math.abs(val)**p + Math.abs(sin.theta[i])**p );\n\n // Create a mesh grid of Cartesian points\n for (let i = 0; i < num_steps; i++) {\n \n let r1 = Math.abs(cos.phi[i])**p;\n let r2 = sin.phi[i]**p;\n \n for (let j = 0; j < num_steps; j++) {\n \n let r = (r1 + r2 * r3[j])**(-1/p);\n \n x[i][j] = sin.phi[i] * r * cos.theta[j];\n y[i][j] = sin.phi[i] * r * sin.theta[j];\n z[i][j] = cos.phi[i] * r;\n }\n }\n\n return {x, y, z};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"viewof p_m2 = Range([0.1, 999], {label: tex`p`, step: .1, value: 1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"plot_m2 = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"function unitball3d_m3(p) {\n\n // Generate equispaced values from -1 to 1\n let range = [...Array(num_steps).keys()].map( i => (i * 2) / (num_steps - 1) - 1 );\n\n let x = [...Array(num_steps)].map( () => Array(num_steps));\n let y = [...Array(num_steps)].map( () => Array(num_steps));\n let z = [...Array(num_steps)].map( () => Array(num_steps));\n\n // Fill in z-values in a mesh grid pattern\n range.forEach( (val, i) => z[i].fill(val) );\n \n // Pull as much math outside of the loop as possible\n let r2 = cos.theta.map( (val, i) => Math.abs(val)**p + Math.abs(sin.theta[i])**p );\n\n // Create a mesh grid of Cartesian points\n for (let i = 0; i < num_steps; i++) {\n \n let r1 = (1 - Math.abs(range[i])**p);\n \n for (let j = 0; j < num_steps; j++) {\n\n let r = (r1 / r2[j])**(1/p)\n \n x[i][j] = r * cos.theta[j];\n y[i][j] = r * sin.theta[j];\n }\n }\n\n return {x, y, z};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1534,"value":"viewof p_m3 = Range([0.1, 999], {label: tex`p`, step: .1, value: 1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"plot_m3 = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"function unitball3d(p) {\n\n let x = [...Array(num_steps)].map( () => Array(num_steps));\n let y = [...Array(num_steps)].map( () => Array(num_steps));\n let z = [...Array(num_steps)].map( () => Array(num_steps));\n \n let r = {phi: Array(num_steps), theta: Array(num_steps)};\n\n // Calculate our rho values\n for (let i = 0; i < num_steps; i++) {\n r.phi[i] = (Math.abs(sin.phi[i])**p + Math.abs(cos.phi[i])**p)**(-1/p);\n r.theta[i] = (Math.abs(sin.theta[i])**p + Math.abs(cos.theta[i])**p)**(-1/p);\n }\n\n // Create a mesh grid of Cartesian points\n for (let i = 0; i < num_steps; i++) {\n for (let j = 0; j < num_steps; j++) {\n x[i][j] = sin.phi[i] * r.phi[i] * cos.theta[j] * r.theta[j];\n y[i][j] = sin.phi[i] * r.phi[i] * sin.theta[j] * r.theta[j];\n z[i][j] = cos.phi[i] * r.phi[i];\n }\n }\n\n return {x, y, z};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"viewof p = Range([0.1, 100], {label: 'Change this number to view different 3D shapes:', step: .1, value: 2});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"plot = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"md `\nBeautiful! Absolutely stunning! Check out our skeletons:\n\n${await FileAttachment(\"image@14.png\").image()}\n\nPerfect!\n\nWe've finally found a way to graph the 3D unit ball in a way that's visually accurate for all valid values of *p*.\n\nCheck out a Python version of the function on [GitHub](https://github.com/mimmackk/unitball/blob/master/unitball.py).\n\n---\n\n## Appendix\n\n---\n\n### Dependencies\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {Range} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"md `### Step Size \n\nStart by defining our number of steps. It must be an odd value in order for our edges to be sharp, and it must be sufficiently large for our plots to show enough detail without being so large that everything becomes slow. If we work in factors of ${tex`2^n + 1`} for some positive integer *n*, then we find that ${tex`n = 6`} is a decent balance.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"num_steps = 2 ** 6 + 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"md`### Plotly Helpers\n\nUpdate the plots dynamically in a more efficent way -- throw down an initial plot into the div using newPlot, then update it with the react function. Keep the newPlot and react cells independent for speed & efficiency.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"layout = ({autosize: false, height: 430, margin: {l: 10, r: 10, b: 10, t: 10, pad: 4}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"data_options = ({type: 'surface', colorscale: 'Spectral', showscale: false}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"{\n // Method 1: Initialize with p = 1\n let data = [{...unitball3d_m1(1), ...data_options}];\n Plotly.newPlot(plot_m1, data, layout, {responsive: true});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"{\n // Method 1: Update dynamically\n let data = [{...unitball3d_m1(p_m1), ...data_options}];\n Plotly.react(plot_m1, data, layout, {responsive: true});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1139,"value":"{\n // Method 1.1: Initialize with p = 1\n let data = [{...coords_patchwork(1), ...data_options}];\n Plotly.newPlot(plot_m11, data, layout, {responsive: true});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"{\n // Method 1.1: Update dynamically\n let data = [{...coords_patchwork(p_m11), ...data_options}];\n Plotly.react(plot_m11, data, layout, {responsive: true});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1503,"value":"{\n // Method 2: Initialize with p = 1\n let data = [{...unitball3d_m2(1), ...data_options}];\n Plotly.newPlot(plot_m2, data, layout, {responsive: true});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"{\n // Method 2: Update dynamically\n let data = [{...unitball3d_m2(p_m2), ...data_options}];\n Plotly.react(plot_m2, data, layout, {responsive: true});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"{\n // Method 3: Initialize with p = 1\n let data = [{...unitball3d_m3(1), ...data_options}];\n Plotly.newPlot(plot_m3, data, layout, {responsive: true});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1539,"value":"{\n // Method 3: Update dynamically\n let data = [{...unitball3d_m3(p_m3), ...data_options}];\n Plotly.react(plot_m3, data, layout, {responsive: true});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"{\n // Final: Initialize with p = 1\n let data = [{...unitball3d(1), ...data_options}];\n Plotly.newPlot(plot, data, layout, {responsive: true});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"{\n // Final: Update dynamically\n let data = [{...unitball3d(p), ...data_options}];\n Plotly.react(plot, data, layout, {responsive: true});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 31:"$30:body"