{"id":2255,"date":"2025-03-03T09:19:28","date_gmt":"2025-03-03T14:19:28","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/?p=2255"},"modified":"2025-03-03T09:19:28","modified_gmt":"2025-03-03T14:19:28","slug":"casting-shadows","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2025\/03\/03\/casting-shadows\/","title":{"rendered":"Casting Shadows"},"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><\/div>\r\n
\r\n
MATLAB Graphics supports 3D shapes and lighting properties, but the light objects don't cast shadows. Let's explore a way to cast a shadow on the Axes box. Maybe something like this:<\/div>\r\n
\"shadow-ring.jpg\"<\/div>\r\n
Today I'd like to explore a simple way to compute and draw shadows on the floor of your axes. Let's start by creating a shape that will cast a shadow. I'll go with a donut shaped ribbon similar to the photo above, but to make it more interesting, I'll oscillate the perimeter.<\/div>\r\n
\r\n
\r\n
sz=50;<\/div>\r\n<\/div>\r\n
\r\n
t=linspace(0,2,sz)';<\/div>\r\n<\/div>\r\n
\r\n
x=cospi(t);<\/div>\r\n<\/div>\r\n
\r\n
y=sinpi(t);<\/div>\r\n<\/div>\r\n
\r\n
z=cospi(t*4)\/3; % oscillate<\/span><\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
verts=[x y z+3 % inner ring<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0x*2 y*2 -z+3]; % outer ring<\/span><\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
faces = [ 1:sz<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a02:sz 1<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0[2:sz 1]+sz<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0(1:sz)+sz ]';<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
P=patch('Vertices'<\/span>,verts,'Faces'<\/span>,faces,...<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'FaceColor'<\/span>, 'cyan'<\/span>, 'EdgeColor'<\/span>,'black'<\/span>,'FaceLighting'<\/span>,'gouraud'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
% Axes styles<\/span><\/div>\r\n<\/div>\r\n
\r\n
view(3)<\/div>\r\n<\/div>\r\n
\r\n
daspect([1 1 1])<\/div>\r\n<\/div>\r\n
\r\n
grid on<\/span><\/div>\r\n<\/div>\r\n
\r\n
axis padded<\/span><\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
% Add a \"local\" light object into the scene<\/span><\/div>\r\n<\/div>\r\n
\r\n
Lpos = [1 -1 5]; % Save position of the light object for later<\/span><\/div>\r\n<\/div>\r\n
\r\n
L=light('Position'<\/span>,Lpos,'Style'<\/span>,'local'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
% Place a marker where the light will be<\/span><\/div>\r\n<\/div>\r\n
\r\n
Lm=line(Lpos(1),Lpos(2),Lpos(3),'Marker'<\/span>,'o'<\/span>,'LineWidth'<\/span>,2,'MarkerFaceColor'<\/span>,'auto'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
% Set ZLim to include zero to simplify the shadow computation<\/span><\/div>\r\n<\/div>\r\n
\r\n
zlim([0 5.5])<\/div>\r\n<\/div>\r\n
\r\n
zlabel('Z'<\/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
This provides a shape and a light. Now we can explore how to compute a shadow.<\/div>\r\n
To start, think of the light as a single point in space with a line extending from it to a vertex within the patch. We can use the slope-intercept formula to compute where on the Z=0 plane the line of light will intersect. That, of course is:<\/div>\r\n
$ y=mx+b $<\/span><\/div>\r\n
The point in space (x & y) we'll say is the point where the shadow sits on the floor of the Axes which is what we want to solve for. We'll call that Sx<\/span> and for y we'll use Sz<\/span>. The slope m is the change in y over change in x, but since we're substituting in z for y, we get:<\/div>\r\n
$ \\frac{V_z-L_z}{V_x-L_x} $<\/span><\/div>\r\n
where we compute the slope using the point V (vertex on our patch) and the light position L. Lastly, b is the y-intercept, We can use the Z value of the Light Lz<\/span> for now, but it doesn't account for the light's position at Lx<\/span>. To fix that, we need to offset the shadow's X<\/span> coordinate by Lx<\/span>. Making these substitutions gives us:<\/div>\r\n
$ S_z = \\left(\\frac{V_z-L_z}{V_x-L_x}\\right)(S_x-L_x)+L_z $<\/span><\/div>\r\n
We already know the value of Sz<\/span> which in our example is 0, or the floor of the Axes. With Sz<\/span> as 0<\/span> and solving for Sx<\/span>, we get:<\/div>\r\n
$ (S_x-L_x) = -L_z \\div \\left(\\frac{V_z-L_z}{V_x-L_x}\\right) $<\/span><\/div>\r\n
or<\/div>\r\n
$ S_x = \\left(\\frac{V_x-L_x}{L_z-V_z}\\right)L_z+L_x $<\/span><\/div>\r\n
Here's what it looks like with a couple concrete numbers if Sz=0<\/span> and Lx=0<\/span>:<\/div>\r\n
\"\"<\/div>\r\n
If we plug in the numbers, we get:<\/div>\r\n
\r\n
\r\n
disp(3 * ((2-0)\/(3-1)) + 0);<\/div>\r\n<\/div>\r\n<\/div>\r\n
\u00a0 \u00a0 \u00a03<\/div>\r\n
The following code is in three dimensions which means we do two independent computations, one for X,Z<\/span>, and the other for Y,Z<\/span>, where Z==0<\/span> is the plane we cast the shadow to. Both computations will use the same equation.<\/div>\r\n
When we pre-allocate the shadow vertices, we also assign all the Z values to zero which is the floor of our axes. We can then compute both the X and Y flavors of our formula for every vertex in our vertex array. We do this by vectorizing the computation of the shadowVerts<\/span> array.<\/div>\r\n
\r\n
\r\n
shadowVerts = zeros(size(verts));<\/div>\r\n<\/div>\r\n
\r\n
shadowVerts(:,1:2) = Lpos(3).*(verts(:,1:2)-Lpos(1:2)).\/(Lpos(3)-verts(:,3))+Lpos(1:2);<\/div>\r\n<\/div>\r\n<\/div>\r\n
Now that we have the shadow vertices, we can draw the shadow. Since the shadowVerts<\/span> array is in the same order as the original (verts<\/span>) array, we can recycle the faces array we computed earlier.<\/div>\r\n
\r\n
\r\n
Ps = patch('Vertices'<\/span>,shadowVerts,'Faces'<\/span>,faces,...<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'FaceColor'<\/span>, [.8 .8 .8], '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
Now that we have our shadow math worked out, let's create an animation. The way shadows warp as the light source moves is always fun. First, let's tidy up the patch edges and expand the limits so we have room to watch the shadow.<\/div>\r\n
\r\n
\r\n
set(P,'EdgeColor'<\/span>,'none'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
axis([-10 10 -10 10 0 10])<\/div>\r\n<\/div>\r\n<\/div>\r\n
Next, define a path for our light to follow. We'll just do a straight line diagonally above the shape, slowly going up, so the shadow will get smaller.<\/div>\r\n
\r\n
\r\n
path = [ linspace(-2.5,2.5,20)<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0linspace(2.5,-2.5,20)<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0linspace(4,6,20) ]';<\/div>\r\n<\/div>\r\n<\/div>\r\n
Lastly, let's loop across the path, first forwards and then backwards. We'll recompute our shadow along the way.<\/div>\r\n
\r\n
\r\n
shadowVerts = zeros(size(verts));<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
for <\/span>pidx=[1:size(path,1) size(path,1):-1:1]<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0Lpos = path(pidx,:);<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0offset = [Lpos(1:2) 0];<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0shadowVerts(:,1:2) = Lpos(3).*(verts(:,1:2)-Lpos(1:2)).\/(Lpos(3)-verts(:,3))+Lpos(1:2);<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0% Apply shadow to shadow patch<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0set(Ps,'Vertices'<\/span>, shadowVerts);<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0% Apply position to light<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0set(L,'Position'<\/span>,Lpos);<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0set(Lm,'XData'<\/span>,Lpos(1),'YData'<\/span>,Lpos(2),'ZData'<\/span>,Lpos(3));<\/div>\r\n<\/div>\r\n
\r\n
<\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0% Draw<\/span><\/div>\r\n<\/div>\r\n
\r\n
\u00a0\u00a0\u00a0\u00a0drawnow<\/div>\r\n<\/div>\r\n
\r\n
end<\/span><\/div>\r\n<\/div>\r\n<\/div>\r\n
<\/div>\r\n
\"moving-shadow.gif\"<\/div>\r\n
Stay tuned next week for some fun shapes and the shadows they cast.<\/div>\r\n \r\n\r\n<\/div>\r\n