This interactive tutorial demonstrates professional antenna array geometries and beamforming techniques through a real-time 3D visualization. A 2D antenna array is a collection of antenna elements arranged in a plane (X-Z plane), where each element can have different positions, amplitudes, and phases. By controlling these parameters, you can shape the 3D radiation pattern (array factor) to steer the main beam in any direction (azimuth and elevation), control sidelobes, and optimize antenna performance.

The visualization consists of four main components: (1) 2D Array Layout (Top View) - a top-down canvas showing the antenna array geometry with draggable elements, (2) Beam Steering Controls - inline sliders (label, slider, and value on the same line) for controlling azimuth and elevation steering angles (steering is always enabled), (3) Phase Trimming Control - a "Selected Element" panel that appears when an element is selected, containing an inline phase offset slider for manual phase adjustment (phase trimming/calibration), and (4) 3D Radiation Pattern (Three.js) - an interactive 3D view showing the antenna array on a ground grid with a deformed sphere representing the radiation pattern that shrinks to the center for zero gain, and (5) 2D Polar Plots (Plotly.js) - two polar charts showing azimuth cut (at horizon, θ = 90°) and elevation cut (at φ = 0°) of the radiation pattern. The visualization uses a dark theme (black background) with bright colors for optimal visibility. You can drag antenna elements in both 2D and 3D views, rotate/zoom the 3D view with mouse, adjust phase offsets for individual elements using the slider, and see the radiation pattern update in real-time.

The tutorial supports professional array geometries including: Rectangular (UPA) - uniform planar arrays, Hexagonal - standard for 5G base stations (19 and 37 elements), Circular (UCA) - uniform circular arrays for direction finding, Fermat Spiral - golden-angle spiral for grating lobe suppression, Sparse Random - irregular arrays for sidelobe reduction, Cross/Plus - radar configurations, and Density Tapered - Gaussian distribution arrays for low sidelobe levels (-20dB to -30dB). The Array Factor is calculated using Euler's identity to handle complex exponentials, summing real and imaginary components separately before computing the magnitude. The pattern is normalized by the sum of amplitudes to ensure the maximum value is always 1.0 (0 dB). The 3D radiation pattern is visualized as a deformed sphere where the radius scales directly with Array Factor magnitude (plus a tiny 0.1 offset to prevent rendering issues), with a color heatmap (blue = low gain, red = high gain).

NOTE : The tutorial uses the generalized 3D Array Factor formula for arbitrary 2D arrays: AF(θ, φ) = Σ_n=0^N-1 A_n × e^{j(k×(x_n×sin(θ)×cos(φ) + z_n×sin(θ)×sin(φ)) + φ_n)}, where A_n is the amplitude of the n-th element, (x_n, z_n) is its position in the X-Z plane, φ_n is its phase, k = 2π/λ is the wavenumber, θ is the elevation angle (0° to 90°), and φ is the azimuth angle (-180° to 180°). The formula uses Euler's identity (e^jθ = cos(θ) + j×sin(θ)) to compute the complex exponential, summing real and imaginary parts separately before calculating the magnitude. The wavelength λ is set to 1.0 meter for visualization purposes.

Mathematical Model

The Array Factor (AF) for a 2D antenna array with arbitrary spacing is given by:

3D Array Factor Formula:

AF(θ, φ) = Σ_n=0^N-1 A_n × e^{j(k×(x_n×sin(θ)×cos(φ) + z_n×sin(θ)×sin(φ)) + φ_n)}

where:

• A_n: Amplitude of the n-th element (0.0 to 1.0)
• (x_n, z_n): Position of the n-th element in the X-Z plane (meters, relative to center)
• φ_n: Phase shift of the n-th element in degrees (-180° to 180°)
• k: Wavenumber = 2π/λ (where λ is the wavelength in meters, set to 1.0)
• θ: Elevation angle from 0° (zenith) to 90° (horizon), with 0° being broadside
• φ: Azimuth angle from -180° to +180°, with 0° being along the positive X-axis
• N: Number of antenna elements

Calculation Method: Using Euler's identity, the complex exponential is decomposed into real and imaginary parts: e^jθ = cos(θ) + j×sin(θ). For each element, we compute the phase term k×(x_n×sin(θ)×cos(φ) + z_n×sin(θ)×sin(φ)) + φ_n, then calculate A_n×cos(phaseTerm) for the real part and A_n×sin(phaseTerm) for the imaginary part. We sum all real parts and all imaginary parts separately, then compute the magnitude as |AF| = √(realSum² + imagSum²). Finally, we normalize by dividing by the number of elements to ensure the maximum value is 1.0.

3D Visualization: The radiation pattern is visualized as a deformed sphere where the radius at each direction (θ, φ) scales directly with Array Factor magnitude (newR = 4 × magnitude + 0.1). The sphere is colored with a heatmap: blue represents low gain (near zero), cyan/green represents moderate gain, yellow represents high gain, and red represents maximum gain. The pattern shrinks to nearly the center (radius 0.1) for zero gain, eliminating the visible "zero floor" sphere that would otherwise appear. The antenna elements are displayed as blue spheres on the ground grid (X-Z plane at Y=0). Selected elements are highlighted in yellow. You can drag elements along the X-Z plane by clicking and dragging them in both the 2D top-view canvas and the 3D view.

Beam Steering: Electronic beam steering is always enabled in this simulator. It is achieved by applying progressive phase shifts across the array elements. The required phase shift for element n at position (x_n, z_n) to steer the beam to direction (θ₀, φ₀) is: φ_n = -k×(x_n×sin(θ₀)×cos(φ₀) + z_n×sin(θ₀)×sin(φ₀)). The simulation automatically calculates and applies these phase shifts to all elements based on the selected azimuth and elevation angles. No checkbox is needed - steering is always active.

Phase Trimming/Manual Phase Offset: In addition to automatic beam steering, the simulator supports manual phase offsets for individual elements, known as "Phase Trimming" or "Manual Phase Offset." This feature is used for calibration and fine-tuning. When an element is selected, a "Selected Element" panel appears with a phase offset slider. The total phase for each element is calculated as: Total Phase = Steering Phase + Manual Offset. Manual offsets persist when steering angles change (they rotate with the beam), simulating real-world phase calibration offsets. This allows you to introduce phase errors, simulate broken elements, or fine-tune individual element phases for calibration purposes.

 

Usage Example

Follow these steps to explore the 3D Phased Array Beamforming tutorial:

1. Initial State: When you first load the simulation, you'll see a professional hexagonal array (19 elements) arranged on a ground grid, which is the standard configuration for 5G base stations. The antenna elements are displayed as blue spheres positioned in the X-Z plane (Y=0). You'll see a 2D top-view canvas showing the array layout, and a 3D scene showing the antenna array with a deformed sphere representing the radiation pattern. The 3D radiation pattern is colored with a heatmap (blue = low gain, red = high gain) and shrinks to nearly the center for zero gain (no visible "zero floor" sphere). The default array has elements with uniform spacing of 0.5λ (half wavelength), all with amplitude 1.0. Beam steering is always enabled, and the radiation pattern shows a main beam at broadside (elevation 0°, azimuth 0°) with sidelobes around it. The 2D plots show azimuth cut at the horizon (θ = 90°) and elevation cut at φ = 0°.
2. 3D Scene Navigation: Use your mouse to interact with the 3D view: (1) Left-click and drag to rotate the view around the array, (2) Right-click and drag (or middle mouse button) to pan the view, (3) Scroll wheel to zoom in/out. The scene includes a ground grid (X-Z plane), coordinate axes, and lighting to help visualize the 3D structure. The deformed sphere represents the radiation pattern - areas that bulge outward indicate high gain in those directions.
3. Observe the 3D Radiation Pattern: The radiation pattern is visualized as a deformed sphere where the radius at each direction (θ, φ) represents the Array Factor magnitude. The sphere is colored with a heatmap: blue represents low gain, cyan/green represents moderate gain, yellow represents high gain, and red represents maximum gain. The main beam appears as a red/yellow bulge in the direction of maximum radiation. Rotate the view to see the pattern from different angles and observe how the main beam and sidelobes appear in 3D space.
4. Drag Elements in 3D Space: Click and drag any antenna element (blue sphere) to change its position. Elements are constrained to move along the X-Z plane (Y=0). As you drag an element, watch the radiation pattern update in real-time. The element turns yellow when selected. Notice how changing the spacing and arrangement affects the pattern - closer spacing creates a wider main beam, while wider spacing creates a narrower beam but may introduce grating lobes. Try dragging elements to create non-uniform arrays and observe how the pattern changes.
5. Use Beam Steering Controls: The UI panel (top-right overlay) provides controls for electronic beam steering. Beam steering is always enabled in this simulator. The sliders use an inline layout where the label, slider, and value are displayed on the same line for better readability. Use the Azimuth (φ) slider (label on left, slider in middle, value on right) to set the desired azimuth angle from -180° to +180°, and the Elevation (θ) slider to set the desired elevation angle from 0° to 90°. The simulation automatically calculates and applies the required phase shifts to all elements. Watch as the 3D radiation pattern deforms to point the main beam in the selected direction. The deformed sphere will bulge in the direction of the steered beam, showing red/yellow colors (high gain) in that direction. Nulls and low-gain regions shrink to nearly the center (radius 0.1) instead of forming a visible "zero floor" sphere.
6. Use Phase Trimming (Manual Phase Offset): Select any antenna element by clicking on it in either the 2D canvas or 3D view (it turns yellow). A "Selected Element" panel will appear automatically below the Beam Steering section. This panel contains a Phase Offset (φ_offset) slider with the same inline layout (label, slider, and value on the same line) that allows you to manually adjust the phase offset for the selected element from -180° to +180° in 1° increments. This feature is used for phase trimming/calibration. The total phase for the element is calculated as: Total Phase = Steering Phase + Manual Offset. As you adjust the slider, watch the 3D radiation pattern distort in real-time. Manual offsets persist when you change steering angles (they rotate with the beam), simulating real-world phase calibration offsets. Try adjusting outer elements to see how phase errors can tilt the main beam or create asymmetric sidelobes. This feature is useful for simulating phase errors, broken elements, or fine-tuning individual element phases for calibration purposes.
7. Observe 2D Polar Plots: Below the 3D view, two polar plots show 2D cuts of the radiation pattern: (1) Azimuth Cut (left, title: "Azimuth Cut (θ = 90°)") - shows the pattern at the horizon (fixed elevation θ = 90°), plotting magnitude vs. azimuth angle (φ) from 0° to 360°. This cut shows the pattern in the horizontal plane (X-Z plane) of the array. (2) Elevation Cut (right, title: "Elevation Cut (φ = 0°)") - shows the pattern at fixed azimuth (φ = 0°), plotting magnitude vs. elevation angle (θ) from 0° to 360° in polar format. These plots update in real-time as you adjust steering angles or modify the array. Use these plots to analyze beamwidth, sidelobe levels, and null positions in specific planes. The radial axis scales dynamically based on the maximum magnitude in each plot to ensure visibility.
8. Select Array Geometry Preset: Use the "Geometry Preset" dropdown to select from professional array configurations organized into groups: (1) Rectangular (UPA) - Linear 1×4, Grid 2×2, Grid 4×4, Grid 8×8, (2) Circular / Hexagonal - Circular Ring (8 and 16), Hexagonal (19 - default, standard for 5G), Hexagonal (37), (3) Advanced / Non-Uniform - Fermat Spiral (30, uses golden angle for grating lobe suppression), Sparse Random (20, demonstrates sidelobe reduction through irregularity), Cross/Plus (radar pattern), and (4) Low Sidelobe (Density Tapered) - Gaussian Taper (30 and 100, achieves -20dB to -30dB sidelobe levels through spacing density instead of amplitude tapering). Each preset demonstrates different tradeoffs between beamwidth, sidelobes, and grating lobes. The hexagonal arrays use proper axial coordinates (q, r) for authentic 5G base station geometry.
9. Adjust Element Spacing: Use the "Element Spacing (λ)" dropdown to change the spacing between elements: 0.25λ (Dense), 0.50λ (Standard, default, optimal for avoiding grating lobes), 0.75λ, 1.00λ (shows grating lobes), and 2.00λ (Sparse, demonstrates spatial aliasing). Changing spacing automatically regenerates the current array geometry with the new spacing. Try selecting "Grid 8×8" with spacing 1.0λ or 2.0λ to observe the formation of grating lobes (ghost beams) in the 3D pattern. Standard 0.5λ spacing is optimal for most applications.
10. Steer the Beam in 3D: Adjust the azimuth and elevation sliders (steering is always enabled). Watch as the main beam (red/yellow bulge) moves to point in the selected direction. Rotate the 3D view to see the beam from different angles. Notice how the phase shifts create a progressive phase gradient across the array that steers the beam electronically. The 2D polar plots show fixed cuts: azimuth at horizon (θ = 90°) and elevation at φ = 0°, which update as the pattern changes with steering.
11. Understand Grating Lobes: Select "Grid 8×8" from the Geometry Preset and change spacing to 1.0λ or 2.0λ. Observe how multiple main beams appear in the 3D pattern. These are grating lobes - unwanted radiation beams caused by spatial aliasing when spacing exceeds λ/2. The deformed sphere will show multiple bulges (red/yellow regions) indicating multiple directions of high gain. This demonstrates why standard spacing is 0.5λ. Compare this with the Fermat Spiral geometry, which uses the golden angle (≈137.5°) to suppress grating lobes even at wider spacing.
12. Compare Density Tapering vs Uniform Arrays: Select "Grid 8×8" (uniform array) and observe the sidelobe level (typically ~-13.2 dB, visible as yellow/green rings in the 2D plots). Then select "Gaussian Taper (100)" from the Low Sidelobe group. Notice how the main beam becomes slightly wider, but the bright sidelobe rings vanish (turn dark blue). This demonstrates density tapering - achieving low sidelobes (-20dB to -30dB) through spacing distribution instead of expensive amplitude control amplifiers. The Gaussian distribution places more elements in the center and fewer at edges, mimicking amplitude tapering.
13. Analyze Pattern Symmetry: For symmetric arrays (e.g., hexagonal, circular, or uniform rectangular grid), observe how the radiation pattern exhibits symmetry. Rotate the 3D view to see the pattern from different angles. The pattern should be symmetric about the array plane when all elements have uniform amplitude and zero steering. Breaking this symmetry (e.g., by applying steering) creates asymmetric patterns. Hexagonal arrays (default) are used in 5G because they provide excellent coverage symmetry for cellular base stations.
14. Add Elements: Click the "Add" button to add a new antenna element to the array. The new element is automatically positioned at the origin (0, 0) with amplitude 1.0 and phase 0°. You can then drag it to any desired location in the X-Z plane using either the 2D top-view canvas or the 3D view. Experiment with different numbers of elements and custom arrangements to see how array size and geometry affect the 3D radiation pattern. Adding elements is useful for creating custom array configurations beyond the preset geometries.
15. Select and Remove Elements: Click on any antenna element in either the 2D canvas or 3D view to select it (it turns yellow). Click the "Remove" button to remove the selected element from the array. If no element is selected, you will see an alert message: "Select Antenna Element to Remove". The array must have at least one element remaining - if you try to remove the last element, you will see an alert: "Cannot remove the last element. Array must have at least one element." After removal, the selection is cleared and the pattern updates immediately. Removing elements allows you to customize preset arrays or create thinned arrays with specific element positions.
16. Drag Elements in 2D Canvas or 3D View: Elements can be dragged in both the 2D top-view canvas and the 3D view. Click and drag any antenna element to change its position. Elements are constrained to move along the X-Z plane (Y=0). As you drag an element, watch the radiation pattern update in real-time. The element turns yellow when selected. The 2D canvas shows a grid and coordinate axes to help visualize the X-Z plane arrangement. Watch as both the 2D layout and 3D pattern update in real-time as you modify element positions.
17. Reset and Experiment: Click the "Reset" button (centered with Add and Remove buttons) to restore the default hexagonal 19-element array with 0.5λ spacing and zero steering angles. Try different array geometries: compare rectangular vs hexagonal vs circular, experiment with Fermat Spiral for grating lobe suppression, test density-tapered arrays for low sidelobes, and observe how spacing affects grating lobes. Use the 2D polar plots to analyze specific cuts (azimuth at horizon, elevation at φ = 0°), and use the 3D view to understand the full 3D structure of the radiation pattern. You can also combine preset geometries with manual element addition/removal to create hybrid configurations.

Tip: The key to understanding antenna arrays is recognizing that the radiation pattern is determined by the interference of waves from all elements. When elements are in phase and properly spaced, they constructively interfere in the desired direction (main beam) and destructively interfere in other directions (sidelobes). Phase shifts create path length differences that steer the beam, density tapering (or amplitude tapering) controls sidelobe levels, and spacing affects both beamwidth and the potential for grating lobes. Start with the default hexagonal array, then experiment with different geometries and spacing presets. Compare uniform arrays (e.g., Grid 8×8) with density-tapered arrays (Gaussian Taper 100) to see how spacing distribution can achieve -20dB to -30dB sidelobes without expensive amplitude control. Try Fermat Spiral geometry to see how golden-angle distribution suppresses grating lobes. The real-time visualization makes it easy to see cause-and-effect relationships. Use the 2D polar plots to analyze specific cuts (azimuth at horizon, elevation at φ = 0°), and use the 3D view to understand the full 3D structure of the radiation pattern.

Parameters

Followings are short descriptions on each parameter

• Antenna Element Position (x_n, z_n): The position of each antenna element in the X-Z plane (in meters), measured relative to the center of the array (0, 0). X-axis points to the right, Z-axis points forward (out of screen), and Y-axis points up. Elements can be positioned at any location in the X-Z plane (Y=0), allowing for both uniform and non-uniform spacing. The position directly affects the phase relationship between elements and thus the radiation pattern shape and beam direction. Elements can be dragged in 3D space (constrained to X-Z plane) by clicking and dragging them.
• Amplitude (A_n): The excitation amplitude of each antenna element, ranging from 0.0 to 1.0. An amplitude of 1.0 means the element radiates at full power, while 0.0 means it doesn't radiate. Different amplitude distributions (e.g., uniform, tapered) affect the radiation pattern - uniform amplitudes maximize gain but may have higher sidelobes, while amplitude tapering reduces sidelobes at the cost of slightly wider main beam and lower gain.
• Phase (φ_n): The total phase shift of each antenna element in degrees, ranging from -180° to +180°. Phase controls the relative timing of radiation from each element, which determines the beam direction. Progressive phase shifts across elements create beam steering - positive phase shifts steer the beam toward positive angles (right), negative phase shifts steer toward negative angles (left). Uniform phase (all 0°) creates a broadside beam (perpendicular to the array axis). The total phase is calculated as: Total Phase = Steering Phase + Manual Offset, where Steering Phase is automatically calculated from the steering angles, and Manual Offset is set using the Phase Trimming slider for selected elements.
• Phase Offset (φ_offset): The manual phase offset for each antenna element in degrees, ranging from -180° to +180°. This parameter is used for phase trimming/calibration and is separate from the automatic steering phase. When an element is selected, you can adjust its phase offset using the "Selected Element" panel slider. The phase offset allows you to introduce intentional phase errors, simulate broken elements, or fine-tune individual element phases for calibration. The total phase is calculated as: Total Phase = Steering Phase + Manual Offset. Manual offsets persist when steering angles change (they rotate with the beam), simulating real-world phase calibration offsets. All elements start with zero phase offset by default. Phase offsets are reset to zero when creating preset arrays.
• Wavelength (λ): The wavelength of the electromagnetic wave, set to 1.0 meter for visualization purposes. The wavelength determines the wavenumber k = 2π/λ, which is used in the Array Factor calculation. The ratio of element spacing to wavelength (d/λ) is critical - spacing greater than λ/2 can cause grating lobes (unwanted radiation beams). The default spacing is 0.5λ (half wavelength), which is optimal for avoiding grating lobes.
• Element Spacing (d): The spacing between antenna elements, measured in wavelengths (λ). Standard spacing is 0.5λ (half wavelength), which prevents grating lobes. Dense spacing (0.25λ) creates wider beams, while sparse spacing (1.0λ or 2.0λ) can cause grating lobes. The spacing affects both beamwidth and the potential for unwanted radiation beams. Different array geometries use spacing differently - for example, hexagonal arrays use spacing to create the hexagonal lattice structure, while density-tapered arrays use spacing variations to achieve low sidelobes.
• Array Geometry: The physical arrangement of antenna elements. Professional geometries include: (1) Rectangular (UPA) - uniform planar arrays with elements in a grid, (2) Hexagonal - standard for 5G base stations (19 and 37 elements) using axial coordinates for proper hexagonal lattice, (3) Circular (UCA) - uniform circular arrays for direction finding with elements on a ring, (4) Fermat Spiral - uses golden angle (≈137.5°) for grating lobe suppression, (5) Sparse Random - irregular arrays for sidelobe reduction, (6) Cross/Plus - radar configurations with arms extending in four directions, and (7) Density Tapered - Gaussian distribution that places more elements in the center and fewer at edges, achieving -20dB to -30dB sidelobe levels without amplitude control amplifiers.
• Wavenumber (k): The spatial frequency of the wave, calculated as k = 2π/λ. The wavenumber relates the physical spacing of elements to the phase differences in the radiated waves. It appears in the Array Factor formula as k×x_n×sin(θ), representing the phase contribution from element position and scan angle.
• Elevation Angle (θ): The elevation angle from the array plane, ranging from 0° (zenith/broadside, perpendicular to array) to 90° (horizon, in-plane). The Array Factor is calculated for all elevation angles to generate the complete 3D radiation pattern.
• Azimuth Angle (φ): The azimuth angle in the array plane, ranging from -180° to +180°. 0° points along the positive X-axis, 90° points along the positive Z-axis, -90° points along the negative Z-axis, and ±180° points along the negative X-axis. The Array Factor is calculated for all azimuth angles to generate the complete 3D radiation pattern.
• Array Factor (AF): The normalized 3D radiation pattern of the array, calculated using the generalized summation formula: AF(θ, φ) = Σ_n=0^N-1 A_n × e^{j(k×(x_n×sin(θ)×cos(φ) + z_n×sin(θ)×sin(φ)) + φ_n)}. The Array Factor represents how the array radiates power as a function of direction (elevation and azimuth). It is normalized by the number of elements so the maximum value is always 1.0 (0 dB), making it easy to compare different array configurations. The pattern is visualized as a deformed sphere where the radius at each direction (θ, φ) represents the Array Factor magnitude.
• Grating Lobe Warning: A visual indicator (red connection lines) that appears when the spacing between adjacent elements is ≥ λ/2 (half wavelength). Grating lobes are unwanted radiation beams that appear when element spacing is too large. They can cause interference and reduce antenna performance. For optimal performance, element spacing should be kept below λ/2, which is indicated by green connection lines.
• Steering Azimuth (φ₀): The desired azimuth angle for beam steering, ranging from -180° to +180°. When steering is enabled, this angle is used to calculate the required phase shifts to point the main beam in the selected azimuth direction.
• Steering Elevation (θ₀): The desired elevation angle for beam steering, ranging from 0° (broadside) to 90° (horizon). When steering is enabled, this angle is used to calculate the required phase shifts to point the main beam in the selected elevation direction.
• Beam Steering: Electronic beam steering is achieved by applying progressive phase shifts across the array elements. The required phase shift for element n at position (x_n, z_n) to steer the beam to direction (θ₀, φ₀) is: φ_n = -k×(x_n×sin(θ₀)×cos(φ₀) + z_n×sin(θ₀)×sin(φ₀)), where k is the wavenumber. This creates a progressive phase shift across the array that steers the main beam to the specified direction. Beam steering is always enabled in this simulator - all element phases are automatically updated when the steering angles change.
• Density Tapering: A technique that mimics amplitude tapering by placing more elements in the center and fewer at the edges, using a Gaussian probability distribution (rejection sampling). Instead of lowering the power of outer elements (amplitude tapering), density tapering simply removes or spaces outer elements farther apart. This makes the array "denser" in the center and "sparser" at the edges, achieving -20dB to -30dB sidelobe levels (compared to the -13.2 dB limit of uniform arrays) without requiring expensive amplitude control amplifiers. The tradeoff is slightly wider main beam and lower gain, but much lower sidelobe levels. This is particularly useful in applications where sidelobe suppression is critical but amplitude control is cost-prohibitive.
• Grating Lobes: Unwanted radiation beams that appear when element spacing exceeds λ/2 (half wavelength). They occur because the array pattern repeats periodically, and when spacing is too large, additional main beams appear at angles where the phase relationships match. Grating lobes can cause interference and reduce antenna performance. Standard 0.5λ spacing prevents grating lobes, but non-uniform geometries like Fermat Spiral (using golden angle ≈137.5°) can suppress grating lobes even at wider spacing by breaking the periodic structure.

Controls and Visualizations

Followings are short descriptions on each control

• 2D Array Layout (Top View Canvas): A top-down 2D canvas showing the antenna array geometry on the X-Z plane. Elements are displayed as circles with numbers, and you can drag them to modify the array layout. The canvas shows a grid and coordinate axes to help visualize the arrangement. Both the 2D canvas and 3D view update in real-time as you modify element positions. The canvas uses a 1:1 aspect ratio (300×300 pixels) and provides a convenient way to edit the array geometry from a top-down perspective.
• Geometry Preset Dropdown: Selects from professional array geometries organized into groups: (1) Rectangular (UPA) - Linear 1×4, Grid 2×2, Grid 4×4, Grid 8×8, (2) Circular / Hexagonal - Circular Ring (8, 16), Hexagonal (19 - default, standard for 5G), Hexagonal (37), (3) Advanced / Non-Uniform - Fermat Spiral (30, golden angle for grating lobe suppression), Sparse Random (20, sidelobe reduction through irregularity), Cross/Plus (radar pattern), and (4) Low Sidelobe (Density Tapered) - Gaussian Taper (30, 100, -20dB to -30dB sidelobes through spacing distribution). Each preset automatically generates the corresponding array geometry with the current spacing setting.
• Element Spacing (λ) Dropdown: Controls the spacing between elements in wavelengths: 0.25λ (Dense), 0.50λ (Standard, default, optimal), 0.75λ, 1.00λ (shows grating lobes), and 2.00λ (Sparse, demonstrates spatial aliasing). Changing spacing automatically regenerates the current array geometry with the new spacing. This allows you to observe how spacing affects beamwidth, sidelobes, and grating lobes. Try selecting "Grid 8×8" with 1.0λ or 2.0λ spacing to see grating lobes appear in the 3D pattern.
• Add Element Button: Adds a new antenna element to the array. The new element is automatically positioned at the origin (0, 0) with amplitude 1.0 and phase 0°. You can then drag it to any desired location in the X-Z plane using either the 2D canvas or 3D view. The mesh is created immediately, and the radiation pattern updates in real-time. This button allows you to expand arrays beyond preset geometries or create custom configurations by combining preset arrays with manually added elements. The buttons are centered horizontally for better visual alignment.
• Remove Element Button: Removes the currently selected antenna element from the array. You must first click on an element in either the 2D canvas or 3D view to select it (it turns yellow). If no element is selected, clicking this button shows an alert message: "Select Antenna Element to Remove". The array must have at least one element remaining - attempting to remove the last element shows an alert: "Cannot remove the last element. Array must have at least one element." After removal, the selection is cleared (since array indices shift), meshes are recreated with updated indices, and the radiation pattern updates immediately. This button allows you to customize preset arrays or create thinned arrays by selectively removing elements. The buttons are centered horizontally for better visual alignment.
• Reset Button: Resets the simulator to the default configuration: Hexagonal (19-element) array with 0.5λ spacing, zero steering angles (azimuth = 0°, elevation = 0°), and all elements with amplitude 1.0. Beam steering remains enabled (always on). The selection is cleared. This provides a clean starting point for new experiments. The radiation pattern is recalculated immediately after reset. The buttons (Add, Remove, Reset) are centered horizontally for better visual alignment.
• Azimuth (φ) Slider: Controls the desired azimuth angle for beam steering, ranging from -180° to +180°. The slider uses an inline layout where the label ("Azimuth (φ):"), slider, and value (e.g., "0°") are displayed on the same line for better readability. The label appears on the left, the slider in the middle (fills available space), and the value on the right in cyan color. Beam steering is always enabled, so changing this slider automatically calculates and applies the required phase shifts to all elements to steer the beam in the selected azimuth direction. The 3D radiation pattern and 2D plots update in real-time as you adjust the slider.
• Elevation (θ) Slider: Controls the desired elevation angle for beam steering, ranging from 0° (broadside/zenith) to 90° (horizon). The slider uses an inline layout where the label ("Elevation (θ):"), slider, and value (e.g., "0°") are displayed on the same line for better readability. The label appears on the left, the slider in the middle (fills available space), and the value on the right in cyan color. Beam steering is always enabled, so changing this slider automatically calculates and applies the required phase shifts to all elements to steer the beam in the selected elevation direction. The 3D radiation pattern and 2D plots update in real-time as you adjust the slider.
• Selected Element Panel: A panel that appears automatically when an antenna element is selected (by clicking on it in either the 2D canvas or 3D view). The panel is titled "Selected Element" and is displayed below the Beam Steering section. It appears when an element is selected and hides when no element is selected. The panel contains controls for adjusting the selected element's phase offset for phase trimming/calibration purposes.
• Phase Offset (φ_offset) Slider: A slider control within the "Selected Element" panel that allows you to manually adjust the phase offset for the currently selected antenna element. The slider ranges from -180° to +180° in 1° increments. The slider uses an inline layout where the label ("Phase Offset (φ_offset):"), slider, and value (e.g., "0.0°") are displayed on the same line for better readability. The label appears on the left, the slider in the middle (fills available space), and the value on the right in cyan color with one decimal place precision. This feature is used for phase trimming/calibration. The total phase for the element is calculated as: Total Phase = Steering Phase + Manual Offset. As you adjust the slider, the 3D radiation pattern updates in real-time. Manual offsets persist when steering angles change (they rotate with the beam), simulating real-world phase calibration offsets. All elements start with zero phase offset by default. Phase offsets are reset to zero when creating preset arrays. A help text below the slider explains: "Manual phase offset for phase trimming/calibration". This feature is useful for simulating phase errors, broken elements, or fine-tuning individual element phases for calibration purposes.
• 3D Scene (Three.js Canvas): Displays the antenna array and 3D radiation pattern in an interactive 3D view. The scene includes: (1) Ground Grid - a gray grid on the X-Z plane (Y=0) showing the array plane, (2) Coordinate Axes - colored axes (X=red, Y=green, Z=blue) indicating directions, (3) Antenna Elements - blue spheres representing array elements (yellow when selected), positioned on the X-Z plane, (4) 3D Radiation Pattern - a deformed sphere centered at the origin, colored with a heatmap (blue=low gain, cyan/green=moderate gain, yellow=high gain, red=maximum gain) where the radius scales directly with Array Factor magnitude (newR = 4 × magnitude + 0.1). The pattern shrinks to nearly the center (radius 0.1) for zero gain, eliminating the visible "zero floor" sphere. You can rotate the view (left-click drag), pan (right-click drag), and zoom (scroll wheel). Elements can be clicked to select them (they turn yellow) and dragged to change their position (constrained to X-Z plane).
• Azimuth Cut Plot (Left, "Azimuth Cut (θ = 90°)"): Displays a polar plot of the Array Factor at the horizon (fixed elevation θ = 90°), plotting magnitude vs. azimuth angle (φ) from 0° to 360°. This cut shows the radiation pattern in the horizontal plane (X-Z plane) of the array. The green curve shows the pattern, with distance from center representing magnitude. The radial axis scales dynamically based on the maximum magnitude (with a 10% margin, minimum range 0.1) to ensure visibility. Grid arcs show magnitude levels, and radial lines show azimuth angles (0°, 45°, 90°, ... 315°). The plot updates in real-time as you modify the array or adjust steering angles. This fixed cut at the horizon is standard for analyzing array patterns in the array plane.
• Elevation Cut Plot (Right, "Elevation Cut (φ = 0°)"): Displays a polar plot of the Array Factor at fixed azimuth (φ = 0°), plotting magnitude vs. elevation angle (θ) from 0° to 360° in polar format. This cut shows the radiation pattern in a vertical plane through the array. The magenta/purple curve shows the pattern, with distance from center representing magnitude. The radial axis scales dynamically based on the maximum magnitude (with a 10% margin, minimum range 0.1) to ensure visibility. Grid arcs show magnitude levels, and radial lines show elevation angles. The plot updates in real-time as you modify the array or adjust steering angles. This fixed cut at φ = 0° is standard for analyzing array patterns in the elevation plane.
• Beam Steering Panel: The top section of the UI panel (titled "Beam Steering") contains controls for electronic beam steering. Beam steering is always enabled in this simulator. The panel includes the Azimuth (φ) and Elevation (θ) sliders that control the desired beam direction. Both sliders use an inline layout where the label, slider, and value are displayed on the same line (label on left, slider in middle, value on right in cyan). As you adjust these sliders, the simulation automatically calculates and applies progressive phase shifts to all elements to steer the main beam in the selected direction. The phase shifts follow the formula: φ_n = -k×(x_n×sin(θ₀)×cos(φ₀) + z_n×sin(θ₀)×sin(φ₀)). The 3D radiation pattern and 2D plots update in real-time to show the steered beam pattern.
• Selected Element Panel: A conditional panel that appears automatically below the Beam Steering section when an antenna element is selected. The panel is titled "Selected Element" and is hidden by default. It appears when you click on an element in either the 2D canvas or 3D view (the element turns yellow), and hides when no element is selected or when a new array is created. The panel contains a Phase Offset (φ_offset) slider for phase trimming/calibration, with an inline layout (label, slider, value on the same line) matching the Beam Steering sliders. A help text below the slider explains the feature: "Manual phase offset for phase trimming/calibration". This panel allows you to fine-tune individual element phases, simulate phase errors, or introduce calibration offsets.
• Array Configuration Panel: The bottom section of the UI panel (titled "Array Configuration") contains controls for selecting array geometry and spacing, as well as element management buttons. The Geometry Preset dropdown allows you to select from professional array geometries (Rectangular, Hexagonal, Circular, Fermat Spiral, Sparse Random, Cross/Plus, and Density Tapered). The Element Spacing (λ) dropdown controls the spacing between elements in wavelengths (0.25λ to 2.0λ). Three centered buttons are provided: (1) Add - adds a new element at the origin, (2) Remove - removes the selected element (shows alert if no element is selected), and (3) Reset - restores the default hexagonal 19-element array with 0.5λ spacing and zero steering angles. All controls update the array and radiation pattern immediately when changed. Note: Creating preset arrays resets all manual phase offsets to zero.

Key Concepts

• Array Factor: The Array Factor (AF) is the radiation pattern of an antenna array, representing how the array radiates power as a function of angle. It is calculated by summing the contributions from all elements, taking into account their positions, amplitudes, and phases. The Array Factor is normalized so the maximum value is always 1.0 (0 dB), making it easy to compare different array configurations. The Array Factor does not include the individual element pattern - it assumes all elements are isotropic radiators.
• Constructive and Destructive Interference: The radiation pattern is created by the interference of waves from all array elements. When waves from different elements are in phase (constructive interference), they add together to create a main beam. When waves are out of phase (destructive interference), they cancel each other out, creating nulls in the pattern. The Array Factor formula calculates this interference mathematically by summing complex exponentials representing the phase relationships.
• Beam Steering: Beam steering is the ability to change the direction of the main radiation beam without physically moving the antenna. This is achieved by applying progressive phase shifts across the array elements. A linear phase progression creates a path length difference that steers the beam in the direction of increasing phase. Electronic beam steering is a key advantage of phased arrays, allowing rapid beam pointing without mechanical movement. The required phase shift for element n at position xₙ to steer the beam to angle θ₀ is: φₙ = -k × xₙ × sin(θ₀). The tutorial includes a steering angle control that automatically calculates and applies these phase shifts when enabled.
• Grating Lobes: Grating lobes are unwanted radiation beams that appear when element spacing is too large (≥ λ/2). They occur because the array pattern repeats periodically, and when spacing exceeds half a wavelength, additional main beams appear at angles where the phase relationships match. Grating lobes can cause interference and reduce antenna performance. The visualization warns about potential grating lobes by showing red connection lines when spacing ≥ λ/2.
• Density Tapering: A cost-effective technique that achieves low sidelobe levels (-20dB to -30dB) without requiring expensive amplitude control amplifiers. Instead of lowering the power of outer elements (amplitude tapering), density tapering places more elements in the center and fewer at the edges using a Gaussian probability distribution (rejection sampling). This makes the array "denser" in the center and "sparser" at edges, achieving the same effect as amplitude tapering but through spacing alone. The tradeoff is slightly wider main beam and lower gain, but much lower sidelobe levels than uniform arrays (which have a -13.2 dB sidelobe floor). This technique is particularly useful in professional antenna systems where sidelobe suppression is critical but amplitude control is cost-prohibitive. The tutorial includes "Gaussian Taper" presets (30 and 100 elements) that demonstrate density tapering.
• Professional Array Geometries: The simulator includes professional antenna array geometries used in real-world applications: (1) Rectangular (UPA) - Uniform Planar Arrays used in MIMO systems, (2) Hexagonal - Standard for 5G base stations (19 and 37 elements) using proper axial coordinates (q, r) for hexagonal lattice structure, (3) Circular (UCA) - Uniform Circular Arrays for direction finding and DOA estimation, (4) Fermat Spiral - Uses golden angle (≈137.5°, the most irrational distribution) to suppress grating lobes even at wider spacing, (5) Sparse Random - Irregular arrays that break constructive interference patterns to reduce sidelobes, (6) Cross/Plus - Radar configurations with arms extending in four directions, and (7) Density Tapered - Gaussian distribution arrays for low sidelobe applications. Each geometry demonstrates different tradeoffs between beamwidth, sidelobes, grating lobes, and array performance.
• Element Spacing: The spacing between antenna elements, measured in wavelengths (λ). Standard spacing is 0.5λ (half wavelength), which prevents grating lobes and is optimal for most applications. Dense spacing (0.25λ) creates wider main beams, while sparse spacing (1.0λ or 2.0λ) can cause grating lobes (unwanted radiation beams). The spacing preset dropdown allows you to change spacing from 0.25λ (Dense) to 2.0λ (Sparse), and changing spacing automatically regenerates the current array geometry. Try selecting "Grid 8×8" with 1.0λ or 2.0λ spacing to observe grating lobes appear in the 3D pattern. Non-uniform geometries like Fermat Spiral can suppress grating lobes even at wider spacing by breaking periodic structure.
• Uniform vs. Non-Uniform Spacing: Uniform spacing (equal distances between all adjacent elements) is the simplest configuration and is commonly used. However, non-uniform spacing can provide advantages such as reduced sidelobes (density tapering), wider bandwidth (log-periodic), or grating lobe suppression (Fermat Spiral). The generalized Array Factor formula supports arbitrary spacing, allowing you to experiment with non-uniform arrays. The professional geometries in this simulator demonstrate different non-uniform spacing strategies used in real-world applications.
• 2D Polar Plots: The simulator provides two polar plots showing fixed cuts of the 3D radiation pattern: (1) Azimuth Cut - Fixed at horizon (θ = 90°), plots magnitude vs. azimuth angle (φ) from 0° to 360°, showing the pattern in the horizontal plane (X-Z plane) of the array, and (2) Elevation Cut - Fixed at φ = 0°, plots magnitude vs. elevation angle (θ) from 0° to 360° in polar format, showing the pattern in a vertical plane through the array. The radial axis scales dynamically based on the maximum magnitude in each plot (with a 10% margin, minimum range 0.1) to ensure visibility of patterns with small magnitudes. These fixed cuts are standard for analyzing array patterns in specific planes and provide detailed insight into beamwidth, sidelobe levels, and null positions.
• Broadside vs. End-Fire: Broadside radiation (θ = 0°) occurs when the main beam is perpendicular to the array axis. This is achieved when all elements have the same phase. End-fire radiation (θ = ±90°) occurs when the main beam is along the array axis. This requires specific phase relationships and is typically used for different applications than broadside arrays.
• Euler's Identity in Array Calculations: The Array Factor formula uses complex exponentials e^jθ, which are computed using Euler's identity: e^jθ = cos(θ) + j×sin(θ). The tutorial implements this by calculating real and imaginary parts separately for each element, then summing them before computing the magnitude. This approach is necessary because standard programming languages don't have native complex exponential functions.
• Normalization: The Array Factor is normalized by dividing by the sum of all amplitudes. This ensures the maximum value is always 1.0 (0 dB), regardless of how many elements are in the array or what their amplitudes are. Without normalization, adding more elements or increasing amplitudes would make the pattern grow continuously, making it difficult to compare different configurations.
• Real-Time Visualization: The radiation pattern updates in real-time as you modify the array configuration. This immediate feedback makes it easy to understand cause-and-effect relationships - you can see how dragging an element, changing its amplitude, or adjusting its phase affects the pattern instantly. This interactive approach helps build intuition about antenna array behavior.
• Applications: Linear antenna arrays are fundamental to many applications:
  • Radar Systems: Phased array radars use electronic beam steering for rapid target tracking
  • Wireless Communications: Base station antennas use arrays for beamforming and spatial multiplexing
  • Satellite Communications: Ground station antennas use arrays for tracking and high gain
  • Radio Astronomy: Large arrays combine signals from many elements for high resolution
  • 5G/6G Networks: Massive MIMO systems use large arrays for capacity and coverage