{"id":2300,"date":"2025-03-11T09:40:34","date_gmt":"2025-03-11T13:40:34","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/?p=2300"},"modified":"2025-03-11T09:40:34","modified_gmt":"2025-03-11T13:40:34","slug":"casting-shadows-and-inverse-stereographic-projections","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2025\/03\/11\/casting-shadows-and-inverse-stereographic-projections\/","title":{"rendered":"Casting Shadows and Inverse Stereographic Projections"},"content":{"rendered":"\r\n\r\n\r\n
\"\"<\/td>\r\nGuest Writer: Eric Ludlam<\/a><\/span><\/strong>\r\n\r\nJoining us again is Eric Ludlam, development manager of the MATLAB charting team. Discover more about Eric on our\u00a0contributors page<\/a>.<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\"\"<\/a>\r\n
\r\n
In the previous blog article, we talked about how to simulate simple shadows in MATLAB. Given a light source and a shape, we were able to draw some convincing shadows on the floor of the axes. But what if you have a shadow, and you want to compute a shape that can cast it?<\/div>\r\n
One way to do that is to use a stereographic projection<\/span> which lets you project vertices between a sphere and a flat surface. Map makers have been transforming features on the earth into flat maps for a long time. Mapping toolbox's new mapaxes<\/span><\/a> (R2023a) lets you explore several kinds of projections. Here's an example of a stereographic projection using mapaxes<\/span>.<\/div>\r\n
\r\n
\r\n
% If you don't have Mapping Toolbox, you can skip this example<\/span><\/div>\r\n<\/div>\r\n
\r\n
prj=projcrs(53026,'Authority'<\/span>,'ESRI'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
prj.ProjectionParameters.LatitudeOfNaturalOrigin=90;<\/div>\r\n<\/div>\r\n
\r\n
newmap(prj)<\/div>\r\n<\/div>\r\n
\r\n
land=readgeotable(\"landareas.shp\"<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
land(land.Name == \"Antarctica\"<\/span>,:) = [];<\/div>\r\n<\/div>\r\n
\r\n
geoplot(land)<\/div>\r\n<\/div>\r\n
\r\n
geolimits([30 90],[-180 180])<\/div>\r\n<\/div>\r\n
\r\n
title('Stereographic Projection'<\/span>)<\/div>\r\n<\/div>\r\n
\r\n
\r\n
\r\n\r\n\r\n
<\/div>\r\n
<\/div>\r\n
<\/div>\r\n
<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n
In this projection, the north pole of the earth (the top part of the sphere) is being projected onto a plane (your screen). Mapping toolbox projections cover a wide range of interesting options. We can use similar techniques as Mapping toolbox to project our 2D pattern in the opposite direction, back onto a sphere.<\/div>\r\n
So with that background, let's pick out a shape we want as our eventual shadow. A hex-grid will be a good shape to use, because it looks neat when projected onto a sphere. I have a helper function I'll call here which returns a Polyshape<\/a> object.<\/div>\r\n
\r\n
\r\n
ps = hexgrid; % see end of this live script<\/span><\/div>\r\n<\/div>\r\n
\r\n
plot(ps)<\/div>\r\n<\/div>\r\n
\r\n
axis equal<\/span><\/div>\r\n<\/div>\r\n
\r\n
\r\n
\r\n\r\n\r\n
<\/div>\r\n
<\/div>\r\n
<\/div>\r\n
<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n
As shadows go, this will be pretty interesting. Next, we need to get our vertices out of the Polyshape object. We'll convert it into a triangulation<\/a>, as the triangulation tools have handy features, we can take advantage of.<\/div>\r\n
\r\n
\r\n
psTri = ps.triangulation();<\/div>\r\n<\/div>\r\n
\r\n
pts = psTri.Points;<\/div>\r\n<\/div>\r\n
\r\n
faces = psTri.ConnectivityList();<\/div>\r\n<\/div>\r\n<\/div>\r\n
We now need to do a reverse projection onto a sphere using a north pole stereographic projection similar to what we saw in the Mapping toolbox example. This projection will use a large portion of the sphere based on size of the polyshape we made. We only need to project the points, as the connectivity will remain the same between the desired shadow, and our new shape. This optimization works because the shadow fits wholly on the sphere.<\/div>\r\n
Starting with the shadow points in pts<\/span>, we can project onto a unit sphere (radius==1) which we assign to SpherePts<\/span>. In the following code, X<\/span> and Y<\/span> are column vectors. The result is a Nx3<\/span> matrix whose columns are X<\/span>, Y<\/span>, and Z<\/span> respectively that specify the projection of the shadow onto the 3D sphere.<\/div>\r\n
\r\n
\r\n
X=pts(:,1)\/2;<\/div>\r\n<\/div>\r\n
\r\n
Y=pts(:,2)\/2;<\/div>\r\n<\/div>\r\n
\r\n
H=X.^2+Y.^2;<\/div>\r\n<\/div>\r\n
\r\n
SpherePts = [ 2*X.\/(H+1), 2*Y.\/(H+1), (H-1).\/(H+1)+1 ];<\/div>\r\n<\/div>\r\n<\/div>\r\n
Now that we have the points on the sphere, we'll use the new vertices and the original faces array to create a triangulation. The triangulation is nice because it will give us access to the freeBoundary<\/span><\/a> function, which enables us to draw the outer boundary of the shape without the internal triangulation.<\/div>\r\n
The code below creates 2 patches, one to draw the blue part (the full stereographic projection of the shadow onto the sphere), and the second draws the \"edge\" of the shape. That edge adds some artistic definition where parts of the shape overlap each other in the below view.<\/div>\r\n
\r\n
\r\n
Tri = triangulation(faces, SpherePts);<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
newplot<\/div>\r\n<\/div>\r\n
\r\n
patch('Vertices'<\/span>,Tri.Points,'Faces'<\/span>,Tri.ConnectivityList(),...<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'FaceColor'<\/span>,lines(1),'EdgeColor'<\/span>,'none'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
patch('Vertices'<\/span>,Tri.Points,'Faces'<\/span>,Tri.freeBoundary(),...<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'FaceColor'<\/span>,'none'<\/span>,'EdgeColor'<\/span>,'black'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
view(3)<\/div>\r\n<\/div>\r\n
\r\n
axis equal padded<\/span><\/div>\r\n<\/div>\r\n
\r\n
grid on<\/span><\/div>\r\n<\/div>\r\n
\r\n
\r\n
\r\n\r\n\r\n
<\/div>\r\n
<\/div>\r\n
<\/div>\r\n
<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n
Since we're talking about shadows, let's add a light just over the \"north pole\" of our sphere and we'll drop a marker where the light is to make it easier to reason on what you see. Setting the light object's 'Style' property to 'local'<\/a> makes the light emit in all directions. In the image below, this means it looks like the light is shining from inside the sphere, and not on the outside.<\/div>\r\n
\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
Lpos=[0 0 2];<\/div>\r\n<\/div>\r\n
\r\n
light('Position'<\/span>,Lpos,'Style'<\/span>,'local'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
Lm=line(Lpos(1),Lpos(2),Lpos(3),'Color'<\/span>,'red'<\/span>,...<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'Marker'<\/span>,'o'<\/span>,'MarkerFaceColor'<\/span>,'auto'<\/span>,...<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'MarkerSize'<\/span>,10,'LineWidth'<\/span>,1);<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
lighting gouraud<\/span><\/div>\r\n<\/div>\r\n
\r\n
material([ .6 .9 .3 2 .5 ])<\/div>\r\n<\/div>\r\n
\r\n
\r\n
\r\n\r\n\r\n
<\/div>\r\n
<\/div>\r\n
<\/div>\r\n
<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n
Lastly, we'll pull our code-snippet for drawing shadows from the previous article<\/a> and use it on our newly created shape.<\/div>\r\n
\r\n
\r\n
pts = Tri.Points;<\/div>\r\n<\/div>\r\n
\r\n
shadowPts = zeros(size(pts));<\/div>\r\n<\/div>\r\n
\r\n
shadowPts(:,1:2) = Lpos(3).*(pts(:,1:2)-Lpos(1:2)).\/(Lpos(3)-pts(:,3))+Lpos(1:2);<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
Ps = patch('Vertices'<\/span>,shadowPts,'Faces'<\/span>, Tri.ConnectivityList,...<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'FaceColor'<\/span>, [.6 .6 .6], 'FaceAlpha'<\/span>, .5, 'FaceLighting'<\/span>,'none'<\/span>,...<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'EdgeColor'<\/span>, 'none'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
\r\n
\r\n\r\n\r\n
<\/div>\r\n
<\/div>\r\n
<\/div>\r\n
<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n
In the above image, we have the stereographic projection of our original polyshape, a light object to illuminate it, and we then re-cast the shadow back onto the floor of the axes, showing that our projection worked!<\/div>\r\n
I took this shape and wrote some additional code to turn it into an STL file that you can 3D print. Thanks to MathWorker Eric Felton for 3D printing the shape pictured below for this blog article!<\/div>\r\n
\"PrintForPost1.jpg\"<\/div>\r\n
In the above image, a small flashlight was used to cast a shadow of the 3D printed shape into a countertop.<\/div>\r\n
You can download the Shadows for MATLAB<\/span><\/a> project from github or File Exchange<\/a> to get all the code for this blog in handy utility functions, plus a repository of STL<\/span> files you can print for different stereographically projected shapes. This File Exchange project includes additional shadow casting features, such as a function that will let you create shadows on all the axes walls:\"HexgridShadowAnimation.gif\"<\/div>\r\n
\r\n
\r\n
function <\/span>ps=hexgrid<\/div>\r\n<\/div>\r\n
\r\n
% Compute a hexgrid polyshape with evenly wide edge lines.<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0R=.5; row = 9; col = 8;<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0theta=linspace(0,2,7);<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0xhex=sinpi(theta)*R;<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0yhex=cospi(theta)*R;<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0D=cosd(30)*R;<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0ps=polyshape.empty();<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0WIDTH=col*D*2;<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0HEIGHT=(row-1)*R*1.5;<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0for <\/span>i=1:(col+1)<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0j=i-1;<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for <\/span>k=1:row<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if <\/span>i<=col || ~mod(k,2)<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0m=k-1;<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xbuff = ((xhex+mod(k,2)*D)+D*2*j)'-WIDTH\/2;<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ybuff = (yhex+1.5*R*m)'-HEIGHT\/2;<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ps(end+1) = polybuffer([xbuff ybuff], 'lines'<\/span>, R\/4); %#ok<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0end<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0end<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0end<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0ps=union(ps);<\/div>\r\n<\/div>\r\n
\r\n
end<\/span><\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n<\/div>\r\n \r\n\r\n<\/div>\r\n