Neon Radar Pulse Rings - xelsed.ai

This sketch creates a hypnotic radar pulse effect with concentric neon rings expanding outward from the center of the canvas. Rings spawn continuously at regular intervals, grow to a maximum radius while fading out, and are removed when their lifetime expires. The combination of vibrant neon colors (pink, cyan, purple) against a black background creates a mesmerizing, glowing animation.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Animation loopObject-oriented programming (classes)Array managementTime-based animationHSB color modeLerp interpolationCanvas resizingStroke and fill properties

🔄 Code Flow

Code flow showing setup, draw, spawnring, ring, windowresized

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] setup --> canvas-creation[Canvas Setup] setup --> color-mode-setup[HSB Color Mode Configuration] setup --> max-radius-calc[Maximum Ring Radius] setup --> palette-creation[Neon Color Palette] setup --> draw[draw loop] click setup href "#fn-setup" click canvas-creation href "#sub-canvas-creation" click color-mode-setup href "#sub-color-mode-setup" click max-radius-calc href "#sub-max-radius-calc" click palette-creation href "#sub-palette-creation" draw --> background-trail[Semi-transparent Background] draw --> spawn-check[Ring Spawn Timing] draw --> ring-loop[Ring Update and Cleanup Loop] click draw href "#fn-draw" click background-trail href "#sub-background-trail" click spawn-check href "#sub-spawn-check" click ring-loop href "#sub-ring-loop" spawn-check -->|if enough time has passed| ring-creation[Ring Object Creation] spawn-check -->|if not| draw ring-loop -->|for each ring| center-calc[Center Position Calculation] ring-loop -->|for each ring| age-calculation[Ring Age and Progress] ring-loop -->|for each ring| lerp-animations[Lerp-based Animations] ring-loop -->|for each ring| drawing[Ring Rendering] ring-loop -->|if ring is dead| draw ring-creation --> color-selection[Random Color Selection] ring-creation --> constructor[Ring Constructor] click ring-creation href "#sub-ring-creation" click color-selection href "#sub-color-selection" click constructor href "#sub-constructor" constructor -->|initialize| radius-recalc[Recalculate Maximum Radius] click radius-recalc href "#sub-radius-recalc" windowresized[windowResized] --> canvas-resize[Canvas Resize] canvas-resize --> radius-recalc click windowresized href "#fn-windowresized" click canvas-resize href "#sub-canvas-resize"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It's where you initialize your canvas, set up colors, and prepare any data structures you'll use throughout the sketch. Using HSB color mode here makes it much easier to work with vibrant neon colors.

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Use HSB for easier neon color control
  colorMode(HSB, 360, 100, 100, 255);
  noFill();
  
  maxRadius = min(width, height) * 0.6;

  // Neon color palette: pink, cyan, purple
  palette = [
    color(320, 100, 100), // neon pink
    color(185, 100, 100), // cyan
    color(270, 100, 100)  // purple
  ];

  background(0, 0, 0); // pure black (HSB: any hue, 0 sat, 0 bright)
}

🔧 Subcomponents:

function-call Canvas Setup createCanvas(windowWidth, windowHeight)

Creates a canvas that fills the entire browser window

function-call HSB Color Mode Configuration colorMode(HSB, 360, 100, 100, 255)

Switches to HSB (Hue, Saturation, Brightness) color mode for easier neon color control, with hue 0-360, saturation 0-100, brightness 0-100, and alpha 0-255

calculation Maximum Ring Radius maxRadius = min(width, height) * 0.6

Sets the maximum radius to 60% of the smaller dimension, ensuring rings fit within the canvas

array-initialization Neon Color Palette palette = [color(320, 100, 100), color(185, 100, 100), color(270, 100, 100)]

Creates an array of three vibrant neon colors: pink, cyan, and purple for random selection

Line by Line:

createCanvas(windowWidth, windowHeight): Creates a canvas that fills the entire browser window. windowWidth and windowHeight are p5.js variables that automatically get the window dimensions
colorMode(HSB, 360, 100, 100, 255): Switches from RGB to HSB color mode. HSB makes it easier to create neon effects because you control hue (color), saturation (intensity), and brightness separately
noFill(): Disables fill for all shapes, so only the stroke (outline) will be drawn. This is essential for creating ring outlines
maxRadius = min(width, height) * 0.6: Calculates the maximum radius rings can grow to. It uses the smaller of width or height, then multiplies by 0.6 so rings don't exceed canvas boundaries
palette = [color(320, 100, 100), color(185, 100, 100), color(270, 100, 100)]: Creates an array of three neon colors: hue 320 (pink), hue 185 (cyan), and hue 270 (purple). All have maximum saturation and brightness for that neon glow
background(0, 0, 0): Sets the initial background to pure black. In HSB mode, this means hue 0, saturation 0, brightness 0

`draw()`

draw() runs 60 times per second (by default) and is where all animation happens. The semi-transparent background creates the fading trail effect. The backwards loop is a common pattern when removing items from an array during iteration—it prevents you from skipping elements.

function draw() {
  // Slight transparency for a soft trailing effect
  // HSB: hue doesn't matter when saturation is 0; this is just "almost black"
  background(0, 0, 0, 40);

  const now = millis();

  // Spawn new rings at regular time intervals
  if (now - lastSpawnTime >= spawnInterval) {
    spawnRing();
    lastSpawnTime = now;
  }

  // Update and draw rings, remove dead ones
  for (let i = rings.length - 1; i >= 0; i--) {
    rings[i].draw();
    if (rings[i].isDead()) {
      rings.splice(i, 1);
    }
  }
}

🔧 Subcomponents:

function-call Semi-transparent Background background(0, 0, 0, 40)

Clears the canvas with semi-transparent black, creating a fading trail effect as rings expand

conditional Ring Spawn Timing if (now - lastSpawnTime >= spawnInterval) { spawnRing(); lastSpawnTime = now; }

Checks if enough time has passed since the last ring spawn, and creates a new ring if so

for-loop Ring Update and Cleanup Loop for (let i = rings.length - 1; i >= 0; i--) { rings[i].draw(); if (rings[i].isDead()) { rings.splice(i, 1); } }

Iterates through all rings backwards, draws each one, and removes dead rings from the array

Line by Line:

background(0, 0, 0, 40): Fills the canvas with semi-transparent black (alpha 40 out of 255). This doesn't completely clear the canvas, so previous frames fade gradually, creating a trailing effect
const now = millis(): Gets the current time in milliseconds since the sketch started. This is used to determine when to spawn new rings
if (now - lastSpawnTime >= spawnInterval): Checks if the time elapsed since the last spawn is greater than or equal to spawnInterval (250ms). If true, it's time for a new ring
spawnRing(): Calls the spawnRing function to create a new Ring object and add it to the rings array
lastSpawnTime = now: Updates lastSpawnTime to the current time, so the next ring won't spawn until another 250ms passes
for (let i = rings.length - 1; i >= 0; i--): Loops through the rings array backwards (from last to first). Going backwards is important because we're removing items, which prevents skipping elements
rings[i].draw(): Calls the draw method on each Ring object, which updates its size, opacity, and draws it to the canvas
if (rings[i].isDead()) { rings.splice(i, 1) }: Checks if the ring has exceeded its lifetime. If so, removes it from the array using splice, which prevents the array from growing infinitely

`spawnRing()`

spawnRing() is a helper function that creates new Ring objects at regular intervals. It always spawns rings from the center of the canvas and picks a random neon color from the palette. This function is called from draw() whenever enough time has passed.

function spawnRing() {
  const centerX = width / 2;
  const centerY = height / 2;
  const col = random(palette); // pick a random neon color

  rings.push(new Ring(centerX, centerY, maxRadius, ringDuration, col));
}

🔧 Subcomponents:

calculation Center Position Calculation const centerX = width / 2; const centerY = height / 2

Calculates the center coordinates of the canvas

function-call Random Color Selection const col = random(palette)

Picks a random color from the palette array

object-instantiation Ring Object Creation rings.push(new Ring(centerX, centerY, maxRadius, ringDuration, col))

Creates a new Ring object with the calculated center, max radius, lifetime, and color, then adds it to the rings array

Line by Line:

const centerX = width / 2: Calculates the horizontal center of the canvas by dividing the width by 2
const centerY = height / 2: Calculates the vertical center of the canvas by dividing the height by 2
const col = random(palette): Uses p5.js's random() function to pick one random color from the palette array. Each time this runs, it might pick a different color
rings.push(new Ring(centerX, centerY, maxRadius, ringDuration, col)): Creates a new Ring object (instantiates the Ring class) with the center position, maximum radius, duration, and color, then adds it to the rings array using push()

`class Ring`

The Ring class encapsulates all the data and behavior for a single expanding ring. The constructor stores initial values, draw() handles animation by calculating the ring's progress and using lerp to smoothly interpolate size, opacity, and stroke weight. The isDead() method provides a simple way to check if a ring should be removed. This object-oriented approach makes the code clean and reusable.

class Ring {
  constructor(x, y, maxRadius, lifetime, col) {
    this.x = x;
    this.y = y;
    this.maxRadius = maxRadius;
    this.lifetime = lifetime; // in ms
    this.birth = millis();
    this.col = col;
  }

  draw() {
    const age = millis() - this.birth;
    const t = constrain(age / this.lifetime, 0, 1); // 0 → 1 over lifetime

    const radius = lerp(0, this.maxRadius, t);
    const alpha = lerp(255, 0, t);        // fade out
    const weight = lerp(4, 1, t);        // thinner as it grows

    const base = this.col;
    const c = color(
      hue(base),
      saturation(base),
      brightness(base),
      alpha
    );

    stroke(c);
    strokeWeight(weight);
    // p5 circle reference: https://p5js.org/reference/#/p5/circle
    circle(this.x, this.y, radius * 2);
  }

  isDead() {
    return millis() - this.birth > this.lifetime;
  }
}

🔧 Subcomponents:

function Ring Constructor

constructor(x, y, maxRadius, lifetime, col) { this.x = x; this.y = y; this.maxRadius = maxRadius; this.lifetime = lifetime; this.birth = millis(); this.col = col; }

Initializes a new Ring object with position, size limits, lifetime, and color. Records the birth time for age calculations

calculation Ring Age and Progress const age = millis() - this.birth; const t = constrain(age / this.lifetime, 0, 1)

Calculates how old the ring is and converts it to a normalized progress value (0 to 1) over its lifetime

calculation Lerp-based Animations const radius = lerp(0, this.maxRadius, t); const alpha = lerp(255, 0, t); const weight = lerp(4, 1, t)

Uses lerp to smoothly interpolate radius growth, opacity fade, and stroke weight thinning based on progress

calculation Dynamic Color with Alpha const c = color(hue(base), saturation(base), brightness(base), alpha)

function-call Ring Rendering stroke(c); strokeWeight(weight); circle(this.x, this.y, radius * 2)

Sets the stroke color and weight, then draws the ring circle at the current radius

Line by Line:

constructor(x, y, maxRadius, lifetime, col): The constructor method runs when a new Ring is created. It receives the center position, maximum radius, lifetime in milliseconds, and color
this.x = x; this.y = y; this.maxRadius = maxRadius; this.lifetime = lifetime; this.col = col: Stores all the parameters as properties of this Ring object so they can be accessed later in other methods
this.birth = millis(): Records the current time when the ring is born. This is used later to calculate the ring's age
const age = millis() - this.birth: Calculates how many milliseconds have passed since this ring was created
const t = constrain(age / this.lifetime, 0, 1): Converts age to a normalized progress value between 0 and 1. At birth, t=0. At lifetime, t=1. constrain() ensures it never goes below 0 or above 1
const radius = lerp(0, this.maxRadius, t): Uses lerp (linear interpolation) to smoothly grow the radius from 0 to maxRadius as t goes from 0 to 1
const alpha = lerp(255, 0, t): Uses lerp to fade the opacity from fully opaque (255) to fully transparent (0) as the ring ages
const weight = lerp(4, 1, t): Uses lerp to make the stroke thinner as the ring grows, starting at weight 4 and ending at weight 1
const c = color(hue(base), saturation(base), brightness(base), alpha): Creates a new color by extracting the hue and saturation from the original base color, keeping the brightness, but applying the fading alpha value
stroke(c); strokeWeight(weight): Sets the stroke color to the calculated color and the stroke weight to the calculated weight
circle(this.x, this.y, radius * 2): Draws a circle at the ring's center position with a diameter of radius * 2 (p5.js circle() takes diameter, not radius)
return millis() - this.birth > this.lifetime: The isDead() method returns true if the ring's age exceeds its lifetime, false otherwise. This is used to remove dead rings

`windowResized()`

windowResized() is a special p5.js function that automatically gets called whenever the browser window is resized. By including it in your sketch, you make your animation responsive to window size changes. This is important for creating sketches that work well on different screen sizes.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  maxRadius = min(width, height) * 0.6;
}

🔧 Subcomponents:

function-call Canvas Resize resizeCanvas(windowWidth, windowHeight)

Resizes the canvas to match the new window dimensions

calculation Recalculate Maximum Radius maxRadius = min(width, height) * 0.6

Recalculates maxRadius based on the new canvas dimensions to ensure rings still fit properly

Line by Line:

resizeCanvas(windowWidth, windowHeight): p5.js automatically calls windowResized() whenever the browser window is resized. This line resizes the canvas to match the new window size
maxRadius = min(width, height) * 0.6: Recalculates the maximum ring radius based on the new canvas dimensions. This ensures rings scale appropriately if the window is made larger or smaller

📦 Key Variables

rings array

Stores all active Ring objects currently being animated. New rings are added and old ones are removed each frame

let rings = [];

spawnInterval number

The time in milliseconds between spawning new rings. Set to 250ms, so a new ring is created 4 times per second

let spawnInterval = 250;

lastSpawnTime number

Stores the timestamp (in milliseconds) when the last ring was spawned. Used to determine when the next ring should spawn

let lastSpawnTime = 0;

ringDuration number

The lifetime of each ring in milliseconds. Set to 2000ms, so each ring lives for 2 seconds before fading out completely

let ringDuration = 2000;

maxRadius number

The maximum radius that rings can grow to. Calculated as 60% of the smaller canvas dimension to ensure rings don't exceed boundaries

let maxRadius;

palette array

An array of three neon color objects (pink, cyan, purple) that are randomly selected when spawning new rings

let palette = [color(320, 100, 100), color(185, 100, 100), color(270, 100, 100)];

🧪 Try This!

Experiment with the code by making these changes:

Change spawnInterval from 250 to 100 to spawn rings much faster (every 100ms instead of 250ms). Watch how the effect becomes denser and more intense.
Modify ringDuration from 2000 to 4000. This makes each ring live twice as long, so you'll see more rings on screen at once creating a more complex pattern.
Add a fourth color to the palette array, like color(45, 100, 100) for neon yellow. Change the random selection to include this new color.
Change the background alpha from 40 to 100 in the background(0, 0, 0, 40) line. Higher values mean less trailing, creating a cleaner look with fewer ghost rings.
Modify the lerp for stroke weight: change lerp(4, 1, t) to lerp(8, 0.5, t) to create thicker starting rings that fade to nearly invisible.
Change maxRadius calculation from min(width, height) * 0.6 to min(width, height) * 0.8 to make rings expand further across the canvas.
In the Ring class draw() method, change circle(this.x, this.y, radius * 2) to ellipse(this.x, this.y, radius * 2, radius) to create expanding ovals instead of circles.

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

BUG index.html at the end of the script

There are two duplicate lines at the end: 'background(0, 0, 0, 40)' and 'background(0, 0, 0)' marked as 'AI Addition'. These serve no purpose and should be removed as they're already called in the draw() function.

💡 Delete the last four lines of the script (the two AI Addition comments and the two background calls). They don't affect functionality but create confusion and clutter.

PERFORMANCE Ring.draw() method

The color object is recreated every frame for every ring using color(hue(base), saturation(base), brightness(base), alpha). While the alpha changes, the hue and saturation extraction is redundant.

💡 Store hue and saturation as properties in the Ring constructor: this.hue = hue(col); this.sat = saturation(col). Then in draw(), use: const c = color(this.hue, this.sat, brightness(base), alpha) to avoid repeated hue/saturation extraction.

STYLE spawnRing() function

The function calculates centerX and centerY every time it's called, even though they're always the same (center of canvas). This is a minor inefficiency.

💡 Since rings always spawn from the center, consider passing width/2 and height/2 directly to the Ring constructor, or store center coordinates as global variables if they're used elsewhere.

FEATURE Global variables

The sketch has no user interaction. The animation is purely automatic with no way to pause, change colors, or adjust speed without editing code.

💡 Add keyboard controls: press 'P' to pause/resume, use arrow keys to adjust spawnInterval, or click to change palette. This would make the sketch more engaging and interactive.

FEATURE Ring class

All rings spawn from the exact center and expand uniformly. There's no variation in ring behavior or visual interest beyond color.

💡 Consider adding optional parameters to vary ring behavior: random starting positions, different expansion speeds, or rings that pulse instead of fade. This would create more dynamic visual complexity.

Preview

Code flow diagram showing the structure of Neon Radar Pulse Rings - xelsed.ai - Code flow showing setup, draw, spawnring, ring, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview