0
$\begingroup$

The question explains it all, I'm looking for an equation that allows me to draw a paraboloid in 3D space with a rounded rectangle cross section across each value of Z.

The full explanation is as follows: I'm trying to make an app with a UI similar to that of the apple watch UI. The way that is done in this guide is by using an upside down paraboloid as the falloff for the size of the icons. Which leads to a size distribution across the screen that looks like this: Circle cross section

With the brightness value (0-->1) indicating how much icon would be scaled by if it were in that location. As you can see, because screens are rectangular, there is a lot of empty space in the corners I wish to get rid of.

I want something more like this:

enter image description here

Where the corners are more filled out (the straighter the rectangle the better of course)!

I've looked up equations, but all I could find was something that looked like a pyramid. That has a linear falloff. I want a shape that is curved like a paraboloid but with the cross section of a rounded rectangle. Any help would be greatly appreciated. Thanks!


Update: I tried Aretino's answer, and Aretino's answer with Rahul's suggestions and had some beautiful results. In the end though, I used Nominal Animal's response as the shape was just so clean and the falloff stretched to the corners of the rectangle, which I thought was very cool.

Here is what it looks like in a 3D Graph ($C_c = 0.9$):

3D Plotting of the graph

and here is what it looks like in practice in the app ($C_c = 1$):

App Screenshot

$\endgroup$
  • 1
    $\begingroup$ Try with $z = -c((x/a)^4 + (y/a)^4) + 1.0$. If that's not flat enough, you can raise the exponent to $6$ or $8$. $\endgroup$ – Aretino Jul 2 '17 at 14:07
  • $\begingroup$ For a parabolic falloff with the same rounded rectangle cross-section use something involving $\bigl((x/a)^4+(y/a)^4\bigr)^{1/2}$. $\endgroup$ – Rahul Jul 2 '17 at 15:03
  • $\begingroup$ @Aretino, I shamelessly stole your suggestion, and added it into my answer. Feel ffree to post your own answer (use the images if you wish). I personally found the differences in corner behaviour between our suggestion very interesting. I have no idea which one works best, as I think it is something for UI/UX testing to find out. :) $\endgroup$ – Nominal Animal Jul 2 '17 at 15:08
  • $\begingroup$ @NominalAnimal Your answer is fine for me. +1. $\endgroup$ – Aretino Jul 2 '17 at 15:44
2
$\begingroup$

Let $W$ be the width and $H$ be the height of your screen, $C_C$ a curvature exponent, $C_{MIN}$ being the minimum scaling factor ($0$), and $C_{MAX}$ the maximum ($1$). Then, the scaling factor at $(x, y)$ is $$C(x,y) = C_{MIN} + ( C_{MAX} - C_{MIN} ) \left ( \frac{ 16 x y ( W - x ) ( H - y ) }{ W^2 \, H^2 } \right )^{C_c}$$

With $C_c = 1/2$, the factor is overall high, and only drops near the edges. With $C_c = 2$, the factor changes $C^2$-smoothly to the edges (that is, even the rate of change changes smoothly).

Contours for C_c = 0.25, 0.5, 1.0, 2.0


@Aretino's suggestion as a comment to the question produces more "rectangular" shape, with corners having larger minimum scaling areas. Using the above definitions, (but with $C_c = 4$ or $C_c = 6$ per Aretino's suggestion), it is $$C(x,y) = C_{MAX} - (C_{MAX} - C_{MIN}) \left ( \left ( \frac{2 x - W}{W} \right )^{C_c} + \left ( \frac{2 y - H}{H} \right )^{C_c} \right )$$

Aretino's scaling function with exponent 4 and 6


@Rahul suggests further in a comment that taking the square root of the right parenthesized part in Aretino's suggestion yields parabolic falloff.

$\endgroup$
  • $\begingroup$ Thanks a lot! Do you mind sharing how did you learn/get this equation? $\endgroup$ – QuantumHoneybees Jul 3 '17 at 21:21
  • 1
    $\begingroup$ @QuantumHoneybees: I remembered playing with something similar at one point. I started up Gnuplot, with set xrange [-1:1]; set yrange [-1:1]. I recalled that to get close to the corners, I multiplied the coordinate terms, and since it should be symmetric wrt. origin, I tried $x^2 - 1$ and $y^2 - 1$ as the coordinate terms. That gives splot (x*x-1)*(y*y-1). To adjust the falloff, I tried various values of n: n = 0.25 ; splot ((x*x-1)*(y*y-1))**n notitle. For the graphs, I used unset surface ; set contour base ; set view 0,0 ; unset xtics ; unset ytics, and merged them in Gimp. [...] $\endgroup$ – Nominal Animal Jul 3 '17 at 22:03
  • 1
    $\begingroup$ [...] That gave the function in the $(-1,-1)-(+1,+1)$ range. So, I fired up Maple, told it c := (x, y) -> C_MIN + (C_MAX - C_MIN)*((x^2-1)*(y^2-1))^C_c; and asked simplify(c(2*x/w - 1, 2*y/w - 1), size); which Maple said is (C_MAX-C_MIN)*(16*x*(w-x)*y*(h-y)/w^2/h^2)^C_c+C_MIN, which I just wrote in my answer. It was fast, visual, and easy, and scratched that mental itch ("hey, I think I've seen this before; now, what was it exactly?") that I get with interesting questions. (I like Gnuplot, because it is free/open, and lets me rotate the 3D plots visually.) $\endgroup$ – Nominal Animal Jul 3 '17 at 22:11
  • $\begingroup$ (And to clarify, by "playing with something similar", I do believe it was early experiments with putpixel(x, y, color(2*x/w-1, 2*y/h-1)) with color(u, v) being a function that returns an RGB color for $-1 \le u, v \le +1$, using VESA graphics under DOS (I even had a printed copy of Ralf Brown's Interrupt List...) This was sometime in the early nineties, when I got my first true-color graphics card.) $\endgroup$ – Nominal Animal Jul 3 '17 at 22:22
  • $\begingroup$ Oh wow haha.. I just thought you were messing around with something similar a few weeks ago. Thanks so much again! $\endgroup$ – QuantumHoneybees Jul 3 '17 at 22:47

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.