This interactive tutorial demonstrates 2D Planar Phased Array Beamforming through real-time visualization of far-field radiation patterns. A phased array antenna consists of multiple antenna elements arranged in a 2D grid (rows × columns), where each element can have different phases. By adjusting the phase delay between elements, the electromagnetic waves constructively interfere in one direction (creating the main beam) and destructively interfere in other directions (creating nulls and side lobes). This allows the antenna to electronically "steer" its beam in both azimuth and elevation without physically moving.

The visualization consists of four main components: (1) Angular Radiation Pattern Heatmap - showing the far-field radiation pattern in angular space (Azimuth vs Elevation), where red/yellow represents high gain (main beam and side lobes), blue/black represents low gain (nulls). The heatmap displays the radiation pattern as "islands" of intensity, clearly showing the main beam and side lobes. (2) Physical Array Layout - a dedicated canvas showing the physical positions of antenna elements in a 2D grid, where elements can be dragged to explore non-uniform configurations. (3) Elevation Polar Plot - a semi-circular polar plot showing the Array Factor (normalized gain) as a function of elevation angle, clearly displaying the main lobe, side lobes, and nulls. (4) Azimuth Polar Plot - a semi-circular polar plot showing the Array Factor as a function of azimuth angle. The simulation features auto-scaling that automatically adjusts the zoom level to ensure all antenna elements remain visible regardless of frequency or element count, while maintaining physics-accurate calculations. Antenna elements are draggable on the Physical Array Layout canvas to explore non-uniform array configurations and observe how physical misalignment affects the radiation pattern.

The tutorial supports Amplitude Tapering (Windowing) functions including: Uniform - all elements transmit at full power (maximum range but higher side lobes), Hamming - center elements are strong, edges are weaker (reduces side lobes but slightly widens main beam), and Blackman - aggressive tapering for maximum side lobe suppression (cleanest beam but widest main beam). Window functions demonstrate the fundamental trade-off in RF engineering: reducing side lobes improves interference rejection but at the cost of wider main beam and lower gain.

NOTE: The tutorial uses the Superposition Principle to calculate the total field: each antenna element emits a sinusoidal wave, and the total field at any point is the sum of all individual waves. The wave equation for each element is: E_n(r, t) = A_n × sin(k×r_n - ωt + φ_n) / √r_n, where A_n is the amplitude weight (from window function), k = 2π/λ is the wavenumber, r_n is the distance from element n to the observation point, ω is the angular frequency, t is time, and φ_n is the phase shift for beam steering. The 1/√r_n term represents distance attenuation for 2D wave propagation.

Mathematical Foundation

The electromagnetic field at any point (x, y) is calculated using the Superposition Principle:

Total Field Equation:

E(x, y, t) = Σ_n=0^N-1 w_n × sin(k×r_n - ωt + φ_n) / √r_n

where:

• w_n: Amplitude weight of the n-th element (from window function, 0.0 to 1.0)
• r_n: Distance from element n to point (x, y): r_n = √((x - x_n)² + (y - y_n)²)
• k: Wavenumber = 2π/λ (where λ is the wavelength)
• ω: Angular frequency = 2πf
• φ_n: Phase shift for element n to achieve beam steering
• N: Number of antenna elements

Beam Steering Formula: To steer the beam to angle θ₀, the phase shift between adjacent elements must be:

Δφ = -k×d×sin(θ₀)

where d is the spacing between elements. The phase for element n is: φ_n = n × Δφ. This creates a progressive phase gradient that steers the main beam in the desired direction.

Array Factor (Far-Field Pattern): The Array Factor represents the radiation pattern in the far field (where waves are approximately plane waves). It is calculated using complex phasor summation based on actual element positions:

AF(θ) = |Σ_n=0^N-1 w_n × e^{j×(spatialPhase + electronicPhase)}| / Σw_n

where spatialPhase = k × y_offset × sin(θ) accounts for the actual physical position of each element, and electronicPhase = n × Δφ is the phase shift applied by the beamformer. This ensures the polar and Cartesian plots accurately reflect dragged or irregular antenna positions, demonstrating how physical misalignment affects the radiation pattern. Using Euler's identity (e^jθ = cos(θ) + j×sin(θ)), the complex exponential is computed by summing real and imaginary parts separately, then taking the magnitude: |AF| = √(realSum² + imagSum²). The Array Factor is normalized by dividing by the sum of weights so the maximum value is always 1.0 (0 dB).

Auto-Scaling (Dynamic Zoom): The simulation uses an auto-scaling system that dynamically adjusts the zoom level (pixels per wavelength) to ensure all antenna elements remain visible on the canvas regardless of frequency or element count. The system calculates a pixelsPerLambda value that fits the array within 80% of the canvas height, capped between 20 and 120 pixels per wavelength. This acts like a camera zoom: it changes the visual scale but maintains physics accuracy because both the element spacing (in pixels) and the wavenumber k (in pixels) scale by the same factor. The relationship "spacing is 0.5 wavelengths" remains mathematically true, ensuring beam angles are always accurate. This eliminates the previous issue where arrays would disappear off-screen at low frequencies or with many elements.

Window Functions (Amplitude Tapering): Window functions control the amplitude distribution across array elements to suppress side lobes:

• Uniform: w(n) = 1.0 (all elements at full power)
• Hamming: w(n) = 0.54 - 0.46×cos(2πn/(N-1))
• Blackman: w(n) = 0.42 - 0.5×cos(2πn/(N-1)) + 0.08×cos(4πn/(N-1))

Uniform windows maximize gain and minimize main beam width but produce the highest side lobes (~-13.2 dB). Hamming windows reduce side lobes to ~-43 dB but widen the main beam slightly. Blackman windows achieve ~-58 dB side lobe suppression but produce the widest main beam.

Physical Implementation of Window Functions: In real antenna arrays, window functions are implemented physically through several methods:

• Variable Gain Amplifiers (VGAs): Each antenna element has a gain control circuit that adjusts its transmit/receive amplitude. Digital control signals set the gain for each element according to the window function weights.
• Attenuators: Fixed or variable attenuators are placed in the signal path of each element to reduce power. Edge elements receive more attenuation than center elements, creating the tapering effect.
• Power Dividers: A network of power dividers splits the input power unequally among elements, with center elements receiving more power than edge elements. This creates the amplitude distribution without active control.
• Digital Beamformers: In modern digital phased arrays, each element's signal is multiplied by a weight coefficient in the digital domain. The weights are stored in memory and applied during signal processing, allowing dynamic window function selection.

In this simulation, the window function weights are applied directly to the wave amplitude calculation: E_total = Σ w_n × E_n, where w_n is the window weight (0.0 to 1.0) for element n. The visual representation shows this through element size and opacity - elements with higher weights appear larger and brighter, while edge elements with lower weights appear smaller and more transparent when using Hamming or Blackman windows.

Interactive Features: The simulation includes several interactive capabilities:

• Draggable Antenna Elements: Antenna elements can be dragged vertically to create non-uniform array configurations. When elements are moved out of their ideal positions, the heatmap immediately shows the distorted interference pattern, and the polar/Cartesian plots display increased side lobes - demonstrating the effect of calibration errors or manufacturing tolerances. This provides an excellent educational tool for understanding array sensitivity to element positioning.
• Auto-Scaling: The visualization automatically adjusts its zoom level to keep all elements visible. When you change frequency (which changes wavelength) or add more elements, the array automatically scales to fit the canvas while maintaining accurate physics relationships.
• Real-Time Synchronization: The heatmap, polar plot, and Cartesian plot are all calculated from the same physics engine using actual element positions, ensuring perfect consistency between visualizations.

Key Concepts: The visualization demonstrates several fundamental concepts:

• Constructive Interference: When waves from multiple elements are in phase, they add together to create a strong signal (main lobe).
• Destructive Interference: When waves are out of phase, they cancel each other out, creating nulls in the pattern.
• Beam Steering: Progressive phase shifts create a wavefront that propagates in the desired direction, steering the beam electronically.
• Side Lobes: Unwanted radiation in directions other than the main beam, caused by partial constructive interference.
• Grating Lobes: When element spacing exceeds λ/2, additional main beams appear at angles where the phase relationships match (spatial aliasing).
• Array Sensitivity: Dragging elements demonstrates how sensitive phased arrays are to element positioning errors. Even small misalignments can significantly degrade side lobe performance, highlighting the importance of precise manufacturing and calibration in real antenna systems.

 

Usage Instructions

Follow these steps to explore the Phased Array Beamforming - Wave Interference Visualization:

1. Initial State: When you first load the simulation, you'll see a 4×4 (16-element) planar antenna array. The antenna elements are displayed as cyan circles with row,column indices (e.g., "0,0", "0,1") in the Physical Array Layout canvas on the right. The main visualization is an Angular Radiation Pattern Heatmap showing the far-field radiation pattern in angular space (Azimuth vs Elevation), where red/yellow represents high gain (main beam and side lobes), and blue/black represents low gain (nulls). On the right side, two polar plots show the Array Factor (normalized gain) as a function of elevation and azimuth angles. The default array uses 4×4 elements with uniform spacing of 0.5λ (half wavelength) and uniform window function (all elements at full power). Both steering angles are 0° (broadside), and the frequency is 1.0x.
2. Observe the Angular Radiation Pattern Heatmap: The main visualization shows the far-field radiation pattern in angular space. The X-axis represents Azimuth angle (-90° to +90°), and the Y-axis represents Elevation angle (-90° to +90°). Red/yellow regions represent high gain (main beam and side lobes), appearing as "islands" of intensity. Blue/black regions represent low gain (nulls). The main beam appears as a bright red/yellow island at the center (0°, 0°) when not steered, or at the steered direction. Side lobes appear as smaller islands surrounding the main beam. A red circle indicates the steering target direction.
3. Use Beam Steering: Use the Azimuth Angle and Elevation Angle sliders to change the beam direction independently. As you adjust the sliders, watch the heatmap pattern shift. The main beam island moves to the steered direction. In the polar plots, observe how the main lobe (green dot) moves to follow the steering angles. The heatmap clearly shows how the radiation pattern changes with steering - the main beam moves while side lobes shift accordingly.
4. Adjust Array Configuration: Use the Elements dropdown to change the array configuration (2×1, 2×2, 4×1, 4×2, 4×4, 8×1, 8×2, 8×4, 8×8). More elements create a narrower main beam but also generate more side lobes. Watch how the heatmap pattern becomes more focused with more elements. In the polar plots, notice how the main lobe becomes narrower and more directional as you increase the number of elements. Click the "Set" button to apply the new configuration and reset element positions to a grid.
5. Change Element Spacing: Use the Spacing dropdown to change the spacing between elements. Standard spacing is 0.5λ (half wavelength), which prevents grating lobes. Try 1.0λ or 2.0λ spacing to observe grating lobes - unwanted radiation beams that appear when spacing is too large. In the heatmap, you'll see multiple bright red regions (multiple main beams) appearing at different angles. In the polar plot, multiple peaks will appear. This demonstrates why 0.5λ spacing is optimal - it prevents spatial aliasing that creates grating lobes.
6. Experiment with Window Functions: Select different Window Functions (Uniform, Hamming, Blackman) from the dropdown. Uniform windows (all elements at full power) produce the highest side lobes (~-13.2 dB) but the narrowest main beam. Hamming and Blackman windows taper the power at the edges, reducing side lobes significantly (to ~-43 dB and ~-58 dB respectively) but slightly widening the main beam. In the heatmap, observe how the side lobes (bright regions away from the main beam) become dimmer. In the polar plot, notice how the side lobe peaks shrink. The antenna elements' opacity and size reflect the window weights - edge elements are dimmer/smaller when using Hamming or Blackman windows.
7. Adjust Frequency: Use the Frequency slider to change the frequency multiplier from 0.5x to 2.0x. Higher frequencies create shorter wavelengths, which make the beam narrower. Observe how the wavelength affects the interference pattern in the heatmap. The waves become more tightly spaced, and the main beam becomes narrower. In the polar plot, the main lobe width decreases as frequency increases. Notice how the array automatically scales to remain visible - at lower frequencies (longer wavelengths), the array zooms out; at higher frequencies, it zooms in. This auto-scaling ensures you can always see the full array while maintaining accurate physics relationships.
8. Drag Antenna Elements: Click and drag any antenna element on the Physical Array Layout canvas to move it out of its ideal position. This simulates manufacturing tolerances, calibration errors, or intentional non-uniform spacing. Watch how the angular radiation pattern heatmap updates immediately, showing distorted patterns with increased side lobes. Observe how the polar plots show increased side lobes. This demonstrates the sensitivity of phased arrays to element positioning - even small misalignments can significantly degrade performance. The physics uses a "Perturbed Array" model: steering phase is calculated from ideal grid positions (simulating fixed phase shifter calibration), while spatial phase uses actual positions (capturing physical displacement). This shows how moving elements breaks the pattern because phase shifters remain calibrated for the ideal grid. Drag multiple elements to create custom array configurations and see how irregular spacing affects the radiation pattern.
9. Polar Plot Analysis: The two polar plots on the right show the Array Factor (normalized gain) as a function of angle. The top plot shows the Elevation cut, and the bottom plot shows the Azimuth cut. The radial distance from the center represents gain magnitude. The green dot marks the main lobe peak. The red dashed line indicates the steering angle. Both plots are calculated using actual element positions, so they accurately reflect any dragged elements. Toggle Log Scale (dB) to view the patterns in logarithmic (decibel) scale, which is standard for engineering analysis. In dB scale, side lobes become more visible, making it easier to see the side lobe suppression achieved with window functions. The plots clearly show the main lobe, side lobes, and nulls (zero-gain directions). When you drag elements, watch how the side lobes immediately increase in both plots, demonstrating the effect of array misalignment.
10. Reset and Experiment: Click Reset to restore default settings (8 elements, 0.5λ spacing, 0° steering, uniform window). Try different combinations: Increase elements for a sharper beam, use Hamming/Blackman windows for lower side lobes, increase spacing to see grating lobes, and experiment with different steering angles. Compare the heatmap (near-field wave interference) with the polar plot (far-field pattern) to understand how the interference creates the radiation pattern. The heatmap shows the "what" (waves mixing in space), while the polar plot shows the "result" (where energy goes).

Tip: The key to understanding phased arrays is recognizing that the radiation pattern is determined by wave interference. The heatmap shows this interference visually - red where waves add (constructive), blue where they cancel (destructive). The main beam forms where waves from all elements are in phase, creating maximum constructive interference. Side lobes appear where partial constructive interference occurs. Window functions reduce side lobes by lowering the power of edge elements, but this widens the main beam slightly. Start with the default settings and gradually change parameters to see cause-and-effect relationships. Use the polar plot to quantitatively analyze the pattern while the heatmap provides intuitive understanding of the wave physics.

Parameters

Followings are short descriptions on each parameter

• Azimuth Angle: The desired beam direction in azimuth (horizontal plane) in degrees, ranging from -90° to +90°. 0° represents broadside, positive angles steer the beam to the right, and negative angles steer to the left. The simulation automatically calculates the required phase shifts across the array. A red circle on the angular heatmap indicates the target steering direction.
• Elevation Angle: The desired beam direction in elevation (vertical plane) in degrees, ranging from -90° to +90°. 0° represents broadside, positive angles steer the beam upward, and negative angles steer downward. The simulation automatically calculates the required phase shifts across the array. A red circle on the angular heatmap indicates the target steering direction.
• Frequency (f/f₀): The frequency multiplier, ranging from 0.5x to 2.0x (where f₀ is the base frequency). Higher frequencies create shorter wavelengths, making the beam narrower and the interference pattern more tightly spaced. When frequency changes, the auto-scaling system recalculates the zoom level (pixelsPerLambda) to keep the array visible - at lower frequencies (longer wavelengths), the view zooms out; at higher frequencies, it zooms in. Changing frequency affects both the wave propagation in the heatmap and the Array Factor calculation. The physics calculations use the dynamic pixelsPerLambda value, ensuring beam angles remain accurate regardless of zoom level.
• Array Configuration (Rows × Columns): The array configuration, selectable from 2×1, 2×2, 4×1, 4×2, 4×4 (default), 8×1, 8×2, 8×4, or 8×8. More elements create a narrower main beam and lower side lobes but require more complex hardware. The elements are arranged in a 2D grid, centered on the Physical Array Layout canvas. The beamwidth is approximately inversely proportional to the array size - larger arrays produce narrower beams.
• Element Spacing (d/λ): The spacing between adjacent antenna elements, measured in wavelengths. Options are 0.25λ (Dense), 0.50λ (Standard - optimal for avoiding grating lobes), 0.75λ, 1.00λ (Grating Lobes appear), and 2.00λ (Sparse - shows spatial aliasing). Standard 0.5λ spacing prevents grating lobes while maintaining reasonable beamwidth. When spacing exceeds λ/2, multiple main beams (grating lobes) appear at different angles, causing unwanted radiation.
• Window Function: The amplitude weighting function applied across array elements to control side lobe levels. Options are: Uniform - all elements at full power (w_n = 1.0), produces highest side lobes (~-13.2 dB) but narrowest main beam; Hamming - w(n) = 0.54 - 0.46×cos(2πn/(N-1)), reduces side lobes to ~-43 dB with slight main beam widening; Blackman - w(n) = 0.42 - 0.5×cos(2πn/(N-1)) + 0.08×cos(4πn/(N-1)), achieves ~-58 dB side lobe suppression with widest main beam. Window functions demonstrate the trade-off between side lobe suppression and main beam width.
• Wavelength (λ): The electromagnetic wavelength in pixels, determined by the dynamic pixelsPerLambda value. The simulation uses auto-scaling to ensure arrays always fit on screen: pixelsPerLambda is calculated to fit the array within 80% of canvas height, capped between 20 and 120 pixels per wavelength. The wavelength determines the wavenumber k = 2π/pixelsPerLambda, which controls the phase relationships in the wave interference. Shorter wavelengths (higher frequency) create tighter interference patterns and narrower beams. The auto-scaling ensures physics accuracy: both spacing (in pixels) and wavenumber (in pixels) scale by the same factor, so the relationship "spacing is 0.5 wavelengths" remains mathematically true.
• Wavenumber (k): The spatial frequency of the wave, calculated as k = 2π/pixelsPerLambda, where pixelsPerLambda is the dynamic zoom level. The wavenumber appears in both the wave equation (for heatmap calculation) and the phase steering formula. It relates the physical spacing between elements to the phase differences that create beam steering and interference patterns. The use of dynamic pixelsPerLambda ensures that wave calculations match the visual scale, maintaining physics accuracy regardless of zoom level.
• Pixels Per Lambda (pixelsPerLambda): The dynamic zoom level representing how many pixels equal one wavelength. This value is automatically calculated to ensure the array fits within the canvas while maintaining physics accuracy. It ranges from 20 to 120 pixels per wavelength. When frequency decreases (longer wavelength) or elements increase, pixelsPerLambda decreases (zoom out). When frequency increases or elements decrease, pixelsPerLambda increases (zoom in). Both visual rendering and physics calculations use this same value, ensuring the beam angles are always accurate and the interference patterns match the visible array geometry.
• Phase Shift (Δφ): The phase difference between adjacent elements required for beam steering, calculated as: Δφ = -k×d×sin(θ₀). This creates a progressive phase gradient across the array that steers the main beam to angle θ₀. The phase for element n is: φ_n = n × Δφ. The simulation automatically calculates and applies these phase shifts when you adjust the steering angle.
• Array Factor (AF): The normalized radiation pattern in the far field, calculated using complex phasor summation: AF(θ) = |Σ_n=0^N-1 w_n × e^j×n×ψ| / Σw_n, where ψ = k×d×(sin(θ) - sin(θ₀)). The Array Factor represents how the array radiates power as a function of angle, normalized so the maximum value is 1.0 (0 dB). It is displayed in the polar plot, showing the main lobe, side lobes, and nulls.
• Array Factor Calculation: The Array Factor for a 2D planar array is calculated using the Perturbed Array model. For each element, the steering phase is calculated from ideal grid positions (simulating fixed phase shifter calibration), while the spatial phase is calculated from actual positions (capturing physical displacement). This shows how element misalignment affects the pattern: AF = |Σ w_n × e^{j×(k×(dx_actual×sin(az) + dy_actual×sin(el)) - k×(dx_ideal×sin(scanAz) + dy_ideal×sin(scanEl)))}| / Σw_n, where dx_actual/dy_actual are from actual positions and dx_ideal/dy_ideal are from ideal grid positions. This is visualized in the angular heatmap as a color field: red/yellow for high gain (main beam and side lobes), blue/black for low gain (nulls).
• Main Lobe: The primary radiation beam in the steered direction, where waves from all elements are in phase and constructively interfere. The main lobe appears as a bright red region in the heatmap extending in the steered direction. In the polar plot, it is marked by a green dot at the peak gain location. The main lobe width (beamwidth) decreases with more elements and increases with window functions that suppress side lobes.
• Side Lobes: Secondary radiation beams in directions other than the main lobe, caused by partial constructive interference. Side lobes are visible as dimmer red regions in the heatmap and as secondary peaks in the polar plot. Uniform windows produce the highest side lobes (~-13.2 dB), while Hamming and Blackman windows significantly reduce them. Side lobes can cause interference and reduce antenna performance in applications requiring directional radiation.
• Nulls: Directions where destructive interference creates zero (or near-zero) radiation. Nulls appear as black regions in the heatmap and as points where the polar plot curve touches the center. Nulls are useful for rejecting unwanted signals from specific directions. The number and positions of nulls depend on the number of elements and their spacing.
• Grating Lobes: Unwanted radiation beams that appear when element spacing exceeds λ/2 (half wavelength). Grating lobes occur due to spatial aliasing - the array pattern repeats periodically, and at large spacing, additional main beams appear at angles where the phase relationships match. Grating lobes are visible in the heatmap as multiple bright red regions and in the polar plot as multiple peaks. Standard 0.5λ spacing prevents grating lobes.

Controls and Visualizations

Followings are short descriptions on each control

• Angular Radiation Pattern Heatmap Canvas: The main visualization showing the far-field radiation pattern in angular space (Azimuth vs Elevation). The heatmap uses a "Turbo/Jet" style color gradient: red/yellow represents high gain (main beam and side lobes), blue/black represents low gain (nulls). The X-axis represents Azimuth angle (-90° to +90°), and the Y-axis represents Elevation angle (-90° to +90°). The visualization is rendered at a downscaled resolution for performance, then scaled up to the display size. The heatmap clearly shows the radiation pattern as "islands" of intensity - the main beam appears as a large red/yellow island, with smaller side lobe islands surrounding it. A red circle indicates the steering target direction. The heatmap automatically scales to visualize steered beams - the field of view is extended 4× to better show beam steering effects. The Array Factor calculation uses a "Perturbed Array" model: steering phase is based on ideal grid positions (fixed calibration), while spatial phase uses actual positions (capturing physical displacement), demonstrating how element misalignment affects the pattern.
• Physical Array Layout Canvas: A dedicated canvas showing the physical positions of antenna elements in a 2D grid. Elements are displayed as cyan circles with row,column indices (e.g., "0,0", "0,1"). Elements can be dragged to explore non-uniform array configurations. When elements are moved, the angular heatmap and polar plots immediately update to show the effect of misalignment. This canvas is separate from the angular heatmap to avoid coordinate system conflicts - the heatmap shows angles (degrees), while this canvas shows physical positions (pixels).
• Elevation Polar Plot Canvas: A semi-circular polar plot showing the Array Factor (normalized gain) as a function of elevation angle from -90° to +90°. The radial distance from the center represents gain magnitude (normalized to 0-1). The plot includes a semi-circular grid with radial lines at 30° intervals and concentric arcs at 25%, 50%, 75%, and 100% gain levels. The main lobe is highlighted with a green dot at the peak location. A red dashed line indicates the steering angle. The plot can be toggled between linear scale (intuitive) and logarithmic (dB) scale (standard for engineering analysis). The pattern clearly shows the main lobe, side lobes, and nulls. The Array Factor calculation uses actual element positions, so dragging elements immediately affects the plot - this demonstrates how physical misalignment degrades array performance by increasing side lobes.
• Azimuth Polar Plot Canvas: A semi-circular polar plot showing the Array Factor (normalized gain) as a function of azimuth angle from -90° to +90°. Similar to the elevation plot but for the horizontal plane. The plot clearly shows how the radiation pattern varies with azimuth angle.
• Azimuth Angle Slider: Controls the desired beam direction in azimuth from -90° to +90° in 0.5° increments. The slider uses an inline layout with the label on the left, slider in the middle, and value on the right (displayed in cyan). Changing the slider automatically calculates and applies progressive phase shifts to all elements. The heatmap and polar plots update in real-time. A red circle on the heatmap indicates the steering target direction.
• Elevation Angle Slider: Controls the desired beam direction in elevation from -90° to +90° in 0.5° increments. The slider uses an inline layout with the label on the left, slider in the middle, and value on the right (displayed in cyan). Changing the slider automatically calculates and applies progressive phase shifts to all elements. The heatmap and polar plots update in real-time.
• Frequency Slider: Controls the frequency multiplier from 0.5x to 2.0x in 0.05 increments. The slider uses an inline layout. Higher frequencies create shorter wavelengths, making the main beam narrower. The wavelength affects the Array Factor calculation (angular heatmap and polar plots). When frequency changes, the auto-scaling system recalculates the zoom level to keep the array visible - at lower frequencies (longer wavelengths), the view zooms out; at higher frequencies, it zooms in. This ensures you can always see the full array while maintaining physics accuracy.
• Elements Dropdown: Selects the array configuration from 2×1, 2×2, 4×1, 4×2, 4×4 (default), 8×1, 8×2, 8×4, or 8×8. The dropdown uses an inline layout. More elements create a narrower main beam but also generate more side lobes. The elements are automatically arranged in a 2D grid, centered on the Physical Array Layout canvas. Each element is displayed as a cyan circle with its row,column index (e.g., "0,0", "0,1"). When you change the configuration, the array automatically updates. Click the "Set" button to apply the new configuration and reset element positions to a grid. Elements can be dragged on the Physical Array Layout canvas to explore non-uniform configurations.
• Spacing Dropdown: Selects the element spacing from 0.25λ (Dense), 0.50λ (Standard - default), 0.75λ, 1.00λ (Grating Lobes), or 2.00λ (Sparse). The dropdown uses an inline layout with the label on the left. Changing spacing automatically recalculates the array geometry, updates the auto-scaling zoom level, and updates the visualization. Standard 0.5λ spacing is optimal for avoiding grating lobes while maintaining reasonable beamwidth. Larger spacing demonstrates spatial aliasing and grating lobe formation. When spacing changes, elements are repositioned to the new uniform grid, but any manually dragged elements will be reset to their ideal positions.
• Window Function Dropdown: Selects the amplitude weighting function: Uniform (all elements at full power), Hamming (reduces side lobes to ~-43 dB), or Blackman (reduces side lobes to ~-58 dB). The dropdown uses an inline layout. Window functions trade main beam width for side lobe suppression. The antenna elements' visual appearance (size and opacity) reflects the window weights - edge elements appear dimmer/smaller when using Hamming or Blackman windows.
• Log Scale (dB) Checkbox: When enabled, displays the angular heatmap and polar plots in logarithmic (decibel) scale instead of linear scale. In dB scale, the gain is converted using: Gain_dB = 20×log₁₀(Gain), then normalized to a 0 to -40 dB range. Logarithmic scale is standard in engineering analysis because it makes side lobes more visible and allows comparison of patterns with different dynamic ranges. In linear scale, small side lobes may be difficult to see.
• Normalize Checkbox: When enabled, uses absolute normalization based on the theoretical maximum amplitude (sum of all antenna weights). This provides stable colors and prevents saturation, making it better for comparing different configurations. When disabled, uses relative normalization based on the brightest pixel on screen, which stretches the dynamic range and may be better for seeing weak patterns.
• Set Button: Applies the selected array configuration from the Elements dropdown and resets all element positions to a uniform grid. This is useful after dragging elements when you want to return to the ideal grid configuration.
• Reset Button: Resets the simulation to default settings: 4×4 elements, 0.5λ spacing, 0° azimuth and elevation angles, 1.0x frequency, uniform window function, log scale disabled, normalize disabled. All controls are updated to reflect the default values. This provides a clean starting point for new experiments.
• Color Map Legend: A legend below the control panel showing the color mapping used in the heatmap. Three gradient bars indicate: Blue → Black (Negative Amplitude), Black (Zero), and Black → Red (Positive Amplitude). This helps users interpret the heatmap colors and understand what different colors represent in terms of wave interference.
• Antenna Elements Display: Antenna elements are drawn as cyan circles on the Physical Array Layout canvas. Each element is labeled with its row,column index (e.g., "0,0", "0,1") to indicate its position in the 2D grid. Elements are draggable - click and drag any element to move it out of its ideal position. When dragging, the element is highlighted. This allows exploration of non-uniform arrays and demonstrates how physical misalignment affects the radiation pattern. The cursor changes to a move icon when hovering over draggable elements. The physics uses a "Perturbed Array" model: steering phase is calculated from ideal grid positions (simulating fixed phase shifter calibration), while spatial phase uses actual positions (capturing physical displacement). This shows how moving elements breaks the pattern because phase shifters remain calibrated for the ideal grid.
• Steering Angle Indicator: A red dashed arrow overlaid on the heatmap that indicates the target steering direction. The arrow originates from the center of the antenna array and extends in the steered direction. This provides immediate visual feedback of the intended beam direction. The arrow only appears when the steering angle is non-zero (|θ| > 0.1°).

Key Concepts

• Superposition Principle: The fundamental principle that the total electromagnetic field at any point is the sum of the fields from all individual antenna elements. This is the basis for all array calculations. The heatmap visualization shows this directly - each pixel's color represents the sum of sinusoidal waves from all elements. When waves are in phase, they add constructively (red regions), and when out of phase, they cancel destructively (blue/black regions). The superposition principle makes it possible to calculate complex interference patterns by simply summing individual wave contributions.
• Constructive and Destructive Interference: The heatmap clearly visualizes these two types of interference. Constructive interference occurs when waves from multiple elements are in phase (peak aligns with peak, trough with trough), causing them to add together to create strong signals (bright red regions in the heatmap, main lobe in the polar plot). Destructive interference occurs when waves are out of phase (peak aligns with trough), causing them to cancel each other out (black regions in the heatmap, nulls in the polar plot). The radiation pattern is entirely determined by where constructive and destructive interference occurs in space.
• Wave Equation and Propagation: Each antenna element emits a sinusoidal wave described by: E(r, t) = A × sin(k×r - ωt + φ) / √r, where A is amplitude, k is wavenumber, r is distance, ω is angular frequency, t is time, and φ is phase. The 1/√r term represents distance attenuation for 2D wave propagation. The heatmap calculates the total field by summing these waves from all elements, creating the interference pattern. The time-varying animation (controlled by the "Run" button) shows how waves propagate outward and interfere to form the steady-state radiation pattern.
• Beam Steering (Phase Shifting): Electronic beam steering is achieved by applying progressive phase shifts across array elements. The required phase shift per element is: Δφ = -k×d×sin(θ₀), where d is spacing and θ₀ is the steering angle. This creates a phase gradient that makes waves from all elements be in phase in the desired direction, steering the main beam. The heatmap shows this directly - adjusting the steering angle rotates the bright red main lobe. The red dashed arrow indicates the target direction, and the main beam visibly rotates to follow it.
• Array Factor (Far-Field Pattern): The Array Factor represents the radiation pattern in the far field, where waves are approximately plane waves. It is calculated using complex phasor summation based on actual element positions: AF(θ) = |Σ w_n × e^{j×(spatialPhase + electronicPhase)}| / Σw_n, where spatialPhase accounts for each element's actual Y position and electronicPhase is the beamformer phase shift. The polar and Cartesian plots display this Array Factor, showing gain as a function of angle. The Array Factor is normalized so the maximum is always 1.0 (0 dB), making it easy to compare different configurations. The heatmap shows the near-field wave interference, while the plots show the far-field result. When elements are dragged, the Array Factor immediately reflects the misalignment by showing increased side lobes.
• Window Functions (Amplitude Tapering): Window functions control the amplitude distribution across elements to suppress side lobes. Uniform windows (all elements at full power) produce the highest side lobes (~-13.2 dB) but the narrowest main beam. Hamming and Blackman windows taper power at the edges, reducing side lobes significantly (~-43 dB and ~-58 dB respectively) but slightly widening the main beam. The trade-off is clear in both visualizations: window functions reduce bright side lobe regions in the heatmap and shrink side lobe peaks in the polar plot, but they also make the main beam slightly wider. This demonstrates a fundamental trade-off in RF engineering.
• Side Lobe Suppression: Side lobes are unwanted radiation in directions other than the main beam, caused by partial constructive interference. They appear as dimmer red regions in the heatmap and as secondary peaks in the polar plot. Uniform arrays have relatively high side lobes (~-13.2 dB), which can cause interference and reduce antenna performance. Window functions (Hamming, Blackman) significantly suppress side lobes by reducing the power of edge elements. In the polar plot, switching from Uniform to Blackman dramatically reduces side lobe peaks, demonstrating effective side lobe suppression.
• Grating Lobes (Spatial Aliasing): When element spacing exceeds λ/2 (half wavelength), unwanted radiation beams called "grating lobes" appear. Grating lobes occur because the array pattern repeats periodically, and at large spacing, additional main beams appear at angles where the phase relationships match. In the heatmap, grating lobes appear as multiple bright red regions (multiple main beams). In the polar plot, multiple peaks appear. This demonstrates why 0.5λ spacing is standard - it prevents spatial aliasing. Try setting spacing to 1.0λ or 2.0λ to see grating lobes clearly.
• Angular vs. Physical Space: The angular heatmap visualizes the far-field radiation pattern in angular space (Azimuth vs Elevation) - showing where energy goes as a function of direction. The Physical Array Layout canvas shows the physical positions of antenna elements in the 2D grid. The angular heatmap shows "the result" (radiation pattern), while the physical layout shows "the cause" (element positions). Both visualizations complement each other - the angular heatmap provides quantitative analysis of the radiation pattern, while the physical layout allows interactive exploration of array geometry.
• Beamwidth and Directivity: The main beam width (beamwidth) is inversely related to the number of elements and array size. More elements create narrower beams (higher directivity). In the heatmap, narrower beams appear as tighter red lobes. In the polar plot, narrower beams appear as sharper peaks. Window functions slightly widen the main beam while suppressing side lobes - this is visible in both visualizations. The beamwidth is a critical parameter for antenna design, as it determines the angular resolution and gain.
• Euler's Identity in Calculations: The Array Factor uses complex exponentials e^jθ, computed using Euler's identity: e^jθ = cos(θ) + j×sin(θ). The code calculates real and imaginary parts separately for each element, sums them, then computes the magnitude. This approach is necessary because JavaScript doesn't have native complex number support. The heatmap uses real-valued sinusoidal waves (the real part of the complex exponential) for visualization, which accurately represents the interference pattern.
• Physics-Accurate Auto-Scaling: The simulation maintains physics accuracy through dynamic scaling. Instead of using a fixed "pixels per wavelength" value, the system calculates a dynamic pixelsPerLambda that ensures the array fits on screen. Both visual rendering and physics calculations use this same value: element spacing = pixelsPerLambda × spacingLambda, and wavenumber k = 2π/pixelsPerLambda. Since both scale by the same factor, the relationship "spacing is 0.5 wavelengths" remains mathematically true, ensuring beam angles are always accurate. This eliminates the previous issue where scaling the visual positions without scaling the physics would cause incorrect beam angles. The auto-scaling acts like a camera zoom - it changes what you see but preserves all physical relationships.
• Draggable Elements and Array Sensitivity: Antenna elements can be dragged on the Physical Array Layout canvas to explore non-uniform array configurations. This feature demonstrates the sensitivity of phased arrays to element positioning errors. When you drag an element out of its ideal position, the angular heatmap immediately shows distorted patterns with increased side lobes, and the polar plots display increased side lobes. This provides an excellent educational tool for understanding how manufacturing tolerances, calibration errors, or environmental factors (like wind bending a physical array) affect antenna performance. The physics uses a "Perturbed Array" model: steering phase is calculated from ideal grid positions (simulating fixed phase shifter calibration), while spatial phase uses actual positions (capturing physical displacement). This shows how moving elements breaks the pattern because phase shifters remain calibrated for the ideal grid. Try dragging multiple elements to create custom array shapes and observe how irregular spacing affects the radiation pattern.
• Applications: Phased array beamforming is fundamental to modern RF systems:
  • Radar Systems: Phased array radars use electronic beam steering for rapid target tracking without mechanical movement
  • 5G/6G Base Stations: Massive MIMO systems use large arrays for beamforming and spatial multiplexing
  • Satellite Communications: Ground station antennas use arrays for tracking satellites and high gain
  • Radio Astronomy: Large arrays like ALMA combine signals from many elements for high resolution imaging
  • Wireless Communication: Beamforming improves signal quality and reduces interference in cellular networks
  • Military Systems: Phased arrays provide rapid beam scanning for surveillance and jamming