This interactive tutorial demonstrates Phased Array Beamforming through real-time visualization of wave interference patterns. A phased array antenna consists of multiple antenna elements arranged in a line, 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 without physically moving.

The visualization consists of three main components: (1) 2D Wave Field Heatmap - showing the electromagnetic field intensity across space, where red represents positive amplitude (constructive interference), blue represents negative amplitude (destructive interference), and black represents zero. The heatmap demonstrates how waves from multiple antenna elements interfere to create directional radiation patterns. (2) Polar Radiation Pattern - a polar plot showing the Array Factor (normalized gain) as a function of angle, clearly displaying the main lobe, side lobes, and nulls. (3) Cartesian Radiation Pattern - a Cartesian plot (rotated 90°) showing gain on the X-axis and angle on the Y-axis, providing an alternative view of the radiation pattern. The visualization uses real-time animation to show the propagating waves and interference effects. 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 (vertically) 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.

Frequency Scanning: In frequency scanning mode, the beam is steered by changing the frequency rather than adjusting phase shifters. This works because fixed physical path delays between elements create frequency-dependent phase shifts. When frequency changes, the wavelength changes, causing the phase relationship to change, which steers the beam. The relationship is: θ ≈ arcsin((f/f₀ - 1) × d/λ). This technique was used in older radar systems before digital phase shifters became cost-effective.

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 an 8-element linear antenna array arranged vertically on the left side of the heatmap canvas. The antenna elements are displayed as cyan circles with numbers (0-7) indicating their index. The main visualization is a 2D heatmap showing the electromagnetic field intensity across space, where red represents positive amplitude (constructive interference), blue represents negative amplitude (destructive interference), and black represents zero. On the right side, a polar plot shows the Array Factor (normalized gain) as a function of angle. The default array uses 8 elements with uniform spacing of 0.5λ (half wavelength) and uniform window function (all elements at full power). The steering angle is 0° (broadside), and the frequency is 1.0x.
2. Observe the Wave Field Heatmap: The main visualization shows a 2D heatmap of the electromagnetic field intensity. Red regions represent positive amplitude (constructive interference - waves adding together), blue regions represent negative amplitude (destructive interference - waves canceling), and black represents zero amplitude. The heatmap is animated in real-time showing the propagating waves. Click "Run" to start the animation and watch how the waves propagate outward from the antenna elements. Notice how waves from different elements interfere to create patterns - bright red/blue regions show where waves reinforce or cancel each other. The main beam appears as a bright red lobe extending in the steered direction.
3. Use Beam Steering: Use the Steering Angle slider to change the beam direction from -90° to +90°. As you adjust the slider, watch the heatmap pattern shift. A red dashed arrow indicates the target steering direction. The main beam (bright red region) will rotate to point in the steered direction. Notice how the phase shifts create a progressive phase gradient across the array elements. In the polar plot, observe how the main lobe (green dot) moves to follow the steering angle. The heatmap clearly shows how constructive interference occurs in the steered direction while destructive interference (blue/black regions) occurs in other directions.
4. Adjust Number of Elements: Use the Elements slider to change the number of antenna elements from 2 to 16. 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 plot, notice how the main lobe becomes narrower and more directional as you increase the number of elements. With only 2 elements, the pattern is very broad; with 16 elements, you get a sharp, pencil-like beam.
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 vertically to move it out of its ideal position. This simulates manufacturing tolerances, calibration errors, or intentional non-uniform spacing. Watch how the heatmap interference pattern distorts immediately, and observe how the polar and Cartesian plots show increased side lobes. This demonstrates the sensitivity of phased arrays to element positioning - even small misalignments can significantly degrade performance. Drag multiple elements to create custom array configurations and see how irregular spacing affects the radiation pattern. The polar plot uses actual element positions, so it accurately reflects your changes.
9. Frequency Scan Mode: Enable the Frequency Scan Mode checkbox. This demonstrates frequency scanning - an older technique where the beam is steered by changing frequency rather than adjusting phase shifters. Watch as the frequency oscillates and the beam automatically steers. The steering angle slider and frequency slider are disabled in this mode. This shows how fixed physical path delays between elements create frequency-dependent phase shifts that steer the beam. This technique was used in older radar systems before digital phase shifters became cost-effective.
10. Polar and Cartesian Plot Analysis: The polar plot on the right shows the Array Factor (normalized gain) as a function of angle. 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. Below the polar plot, a Cartesian plot provides an alternative view with gain on the X-axis and angle on the Y-axis. 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.
11. Animation Controls: Use the animation controls to step through or continuously animate the wave propagation. Run/Stop toggles continuous animation. Step Fwd and Step Bwd allow you to step through the animation frame by frame to observe the wave interference in detail. The animation shows the time-varying wave field, making it easy to see how waves from different elements interfere to create the radiation pattern. Stepping through the animation helps understand the phase relationships between waves.
12. 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

• Steering Angle (θ₀): The desired beam direction in degrees, ranging from -90° to +90°. 0° represents broadside (perpendicular to the array), positive angles steer the beam upward, and negative angles steer downward. The simulation automatically calculates the required phase shift between adjacent elements using: Δφ = -k×d×sin(θ₀), where k is the wavenumber and d is the element spacing. A red dashed arrow on the 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.
• Number of Elements (N): The number of antenna elements in the linear array, ranging from 2 to 16. More elements create a narrower main beam and lower side lobes but require more complex hardware. The elements are arranged vertically in a line, centered on the heatmap. The beamwidth is approximately inversely proportional to the number of elements - doubling the elements roughly halves the beamwidth.
• 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.
• Field Intensity E(x, y, t): The electromagnetic field amplitude at point (x, y) at time t, calculated using the superposition principle: E(x, y, t) = Σ_n=0^N-1 w_n × sin(k×r_n - ωt + φ_n) / √r_n, where r_n is the distance from element n to point (x, y). This is visualized in the heatmap as a color field: red for positive amplitude (constructive interference), blue for negative amplitude (destructive interference), and black for zero.
• 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

• 2D Wave Field Heatmap Canvas: The main visualization showing the electromagnetic field intensity across space. The heatmap uses a diverging color map: red represents positive amplitude (constructive interference), blue represents negative amplitude (destructive interference), and black represents zero. The visualization is rendered at a downscaled resolution (2x divisor) for performance, then scaled up to the display size using smooth interpolation. The heatmap clearly shows how waves from multiple antenna elements interfere to create the radiation pattern. The main beam appears as a bright red lobe extending in the steered direction, while nulls appear as black regions. The animation shows time-varying wave propagation, making the interference patterns visible. The heatmap automatically scales to keep all elements visible - when you change frequency or element count, the zoom level adjusts automatically while maintaining physics accuracy. Wave calculations use the same dynamic scale as the visual representation, ensuring beam angles are always correct.
• Polar Radiation Pattern Canvas: A polar plot showing the Array Factor (normalized gain) as a function of 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 from the heatmap, so dragging elements immediately affects the polar plot - this demonstrates how physical misalignment degrades array performance by increasing side lobes.
• Steering Angle Slider: Controls the desired beam direction 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 using the formula: Δφ = -k×d×sin(θ₀). The heatmap and polar plot update in real-time. A red dashed arrow on the heatmap indicates the target steering direction.
• 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 interference pattern more tightly spaced and the main beam narrower. The wavelength affects both the wave propagation (heatmap) and the Array Factor calculation (polar/Cartesian 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. In frequency scan mode, this slider is disabled and the frequency is controlled automatically.
• Elements Slider: Controls the number of antenna elements from 2 to 16 in integer steps. The slider uses an inline layout. More elements create a narrower main beam but also generate more side lobes. The elements are automatically arranged vertically in a line, centered on the heatmap. Each element is displayed as a cyan circle with its index number (0 to N-1). The size and opacity of elements reflect the window function weights (edge elements are dimmer/smaller for Hamming/Blackman windows). When you change the number of elements, the array automatically rescales to fit on screen while maintaining accurate physics. Elements can be dragged vertically after positioning 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.
• Frequency Scan Mode Checkbox: When enabled, automatically oscillates the frequency to demonstrate frequency scanning beam steering. In this mode, the steering angle and frequency sliders are disabled (they become read-only). The frequency oscillates sinusoidally, and the resulting beam direction is calculated and displayed. This demonstrates how older radar systems steered beams by changing frequency rather than using phase shifters. The frequency scanning creates a sweeping beam pattern that updates continuously.
• Log Scale (dB) Checkbox: When enabled, displays the polar plot 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-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.
• Run/Stop Button: Toggles continuous animation of the wave field. When running, the simulation advances time continuously, showing the propagating waves and interference patterns. The button text changes from "Run" to "Stop" when animation is active. Clicking again stops the animation at the current frame. Animation is essential for visualizing wave propagation and understanding the time-varying nature of electromagnetic interference.
• Step Fwd Button: Advances the animation by one time step (0.1 time units) and updates the visualization. If animation is running, it stops the animation first before stepping. This allows you to carefully examine the wave interference frame by frame. Stepping through the animation helps understand phase relationships and how waves from different elements combine to create the interference pattern.
• Step Bwd Button: Steps the animation backward by one time step (decreases time by 0.1 units) and updates the visualization. If animation is running, it stops the animation first. This allows you to review previous frames of the wave animation. Time cannot go below 0, so stepping backward at t=0 has no effect.
• Reset Button: Resets the simulation to default settings: 8 elements, 0.5λ spacing, 0° steering angle, 1.0x frequency, uniform window function, frequency scan mode disabled, log scale disabled, and time = 0. 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 left edge of the heatmap canvas. Each element is numbered (0 to N-1) to indicate its position in the array. The size and opacity of elements reflect the window function weights - elements at full power (uniform window) are larger and fully opaque, while edge elements with reduced power (Hamming/Blackman windows) are smaller and more transparent. Elements are draggable vertically - click and drag any element to move it out of its ideal position. When dragging, the element turns yellow to indicate it's being moved. This allows exploration of non-uniform arrays and demonstrates how physical misalignment affects the radiation pattern. The cursor changes to a vertical resize icon when hovering over draggable elements.
• Cartesian Radiation Pattern Canvas: A Cartesian plot positioned below the polar plot, showing the Array Factor with gain on the X-axis and angle on the Y-axis (rotated 90° from traditional orientation). This provides an alternative view of the radiation pattern that some users find easier to read. The plot includes grid lines, axis labels, and clearly marks the main lobe peak with a green dot. A red dashed horizontal line indicates the steering angle. The Cartesian plot uses the same Array Factor calculation as the polar plot, ensuring perfect consistency. Both plots update in real-time when elements are dragged, frequency changes, or other parameters are adjusted.
• 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.
• Frequency Scanning: An older technique where beam steering is achieved by changing frequency rather than adjusting phase shifters. This works because fixed physical path delays between elements create frequency-dependent phase shifts. When frequency changes, wavelength changes, causing the phase relationship to change, which steers the beam. The relationship is approximately: θ ≈ arcsin((f/f₀ - 1) × d/λ). The frequency scan mode demonstrates this by automatically oscillating frequency and showing the resulting beam sweep. This technique was used in older radar systems before digital phase shifters became cost-effective.
• Near-Field vs. Far-Field: The heatmap visualizes the near-field - the region close to the antenna where waves are still propagating and interfering. The polar plot visualizes the far-field - the region far from the antenna where waves are approximately plane waves and the Array Factor applies. The heatmap shows "what is happening" (waves mixing in space), while the polar plot shows "the result" (where energy goes). Both visualizations complement each other - the heatmap provides intuitive understanding of wave physics, while the polar plot provides quantitative analysis.
• 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 vertically 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 heatmap immediately shows distorted interference patterns, and the polar/Cartesian 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 Array Factor calculation uses actual element positions, so the plots accurately reflect your changes. Try dragging multiple elements to create custom array shapes and observe how irregular spacing affects the radiation pattern.
• Real-Time Animation: The time-varying animation shows wave propagation and makes the interference patterns visible. Without animation, the interference pattern would be static and harder to understand. The animation demonstrates that the radiation pattern is created by continuously propagating and interfering waves, not static fields. Stepping through the animation frame by frame helps understand phase relationships and how waves combine.
• 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