FBI TAKEDOWN sceen

This sketch creates a full-screen FBI warning prank interface with flashing red text, a pulsing alarm sound, and a fake countdown timer. It mimics an official security alert by hiding the cursor, filling the screen, and using bold typography and audio effects to create an intensely dramatic fake warning message.

🧪 Try This!

Experiment with the code by making these changes:

  1. Make the alarm sound even more obnoxious — Raise the frequency from 1800 Hz to 3000 Hz for a more piercing, unbearable shriek that will definitely wake someone up
  2. Speed up the blinking — Change the blink cycle from 60 frames to 20 frames so the WARNING text flashes much faster and the alarm wobbles more frantically
  3. Extend the countdown to one full minute — Give the prank victim 60 seconds instead of 15 before the 'encryption' supposedly completes—more time to panic
  4. Demand a four-digit code to escape — Make the prank harder to dismiss by requiring the user to press a specific sequence (like Q, Q, Q, Q) instead of just pressing Q once
  5. Turn the WARNING text yellow instead of red — Add a fill(255, 255, 0) before the WARNING text to make it blend in differently with the other bright text and change the visual hierarchy
  6. Change the fake IP address — Replace the tracking IP with a different one to make it look more personalized and realistic (but still fake)
Prefer the full editor? Open it there →

📖 About This Sketch

This sketch creates a convincing full-screen FBI warning prank that combines several p5.js and Web Audio API techniques to create an intensely dramatic fake security alert. It features a blinking red "WARNING" banner synchronized with a pulsing high-pitched alarm sound, fake technical details like IP addresses and a countdown timer, and responsive text sizing that adapts to any screen. The sketch teaches window resizing, dynamic text layout, audio synthesis, and frame-based timing all in service of a visually and aurally overwhelming prank.

The code is organized into a preload() function that loads a bold font, a setup() function that initializes the canvas and audio oscillator, a draw() function that renders text and controls the alarm sound, and a keyPressed() function that lets users dismiss the prank. By reading it you will learn how to synchronize visuals with audio, use the modulo operator (%) to create blinking effects, apply sine waves to create pulsing animations, and build responsive full-screen layouts that scale to any device.

⚙️ How It Works

  1. When the sketch loads, preload() downloads a bold Roboto font from a CDN, and setup() creates a full-screen canvas, hides the cursor, and initializes a square-wave oscillator at 1800 Hz with zero volume (ready to play but silent until told otherwise).
  2. Every frame, draw() renders the text layout: a red FBI header, a blinking red WARNING text that appears and disappears every 30 frames, white warning messages in the center, green fake IP and location info, and a yellow countdown timer that decreases from 15 seconds.
  3. The blinking WARNING text is controlled by frameCount % 60, which cycles from 0 to 59 and repeats—when the remainder is less than 30, the text appears and the alarm sounds; when it's 30 or higher, the text disappears and the alarm silences, creating a synchronized flash-and-beep effect.
  4. The alarm volume pulses smoothly between 0.2 and 0.7 using sin(frameCount * 0.2), which oscillates continuously, creating a wobbling siren effect that matches the blinking rhythm.
  5. The countdown timer uses millis() (elapsed milliseconds since the sketch started) divided by 1000 and subtracted from 15, so it counts down in real time and clamps to zero when time is up.
  6. If the user presses Q or Escape, keyPressed() stops the oscillator, restores the cursor, pauses the draw loop with noLoop(), and displays a "PRANK DISMISSED!" message—allowing the victim to escape.

🎓 Concepts You'll Learn

Full-screen responsive canvasText animation and blinkingWeb Audio API and oscillatorsFrame-based timing with frameCountTime-based countdown with millis()Sine wave for pulsing effectsFont loading and typographyEvent handling with keyPressed()

📝 Code Breakdown

preload()

preload() is called automatically by p5.js before setup(). Use it to load fonts, images, and sounds that take time to download. If you skip preload() and try to loadFont() in setup(), the font might not be ready in time, and the text will fall back to a default font.

function preload() {
  // Load a bold font from Fontsource CDN for a more official look.
  // Using Roboto Bold (700 weight)
  fbiFont = loadFont('https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-700-normal.woff');
}
Line-by-line explanation (1 lines)

🔧 Subcomponents:

function-call Font loading fbiFont = loadFont('https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-700-normal.woff');

Downloads and stores a bold Roboto font from the internet for use in all text rendering

fbiFont = loadFont('https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-700-normal.woff');
loadFont() downloads a font file from a CDN (content delivery network) and stores it in the fbiFont variable. The 700 weight means it's very bold. preload() is special in p5.js—it runs before setup() to give slow files time to download before the sketch starts drawing.

setup()

setup() runs once when the sketch starts. Use it to create the canvas, set initial colors and fonts, hide the cursor, and initialize any objects (like audio oscillators) that will be used in draw().

function setup() {
  createCanvas(windowWidth, windowHeight);
  textFont(fbiFont); // Set the loaded font for all text
  textAlign(CENTER, CENTER); // Center all text horizontally and vertically
  noCursor(); // Hide the cursor for a more convincing full-screen effect

  // --- Initialize p5.sound components for the alarm ---
  alarmOsc = new p5.Oscillator('square'); // Use a square wave for a harsh alarm sound
  alarmOsc.freq(1800); // Set a high-pitched frequency (e.g., 1800 Hz)
  alarmOsc.amp(0); // Start with volume 0
  alarmOsc.start(); // Start the oscillator, but it won't be heard until we set its amplitude

  // Call userStartAudio() to start the Web Audio context.
  // This is required for audio to play in most modern browsers due to autoplay policies.
  // It should be called on a user gesture (like clicking play in the editor).
  userStartAudio();
}
Line-by-line explanation (9 lines)

🔧 Subcomponents:

function-call Canvas initialization createCanvas(windowWidth, windowHeight);

Creates a canvas that fills the entire browser window

function-call Font application textFont(fbiFont);

Tells p5.js to use the bold font downloaded in preload() for all future text() calls

function-call Text alignment textAlign(CENTER, CENTER);

Centers text at its x,y position both horizontally and vertically, making text positioning easier

function-call Cursor hiding noCursor();

Hides the mouse cursor to create an immersive full-screen effect

function-call Audio oscillator setup alarmOsc = new p5.Oscillator('square');

Creates a new oscillator object that will produce a square wave (harsh, buzzy sound)

function-call Audio context initialization userStartAudio();

Initializes the Web Audio API context, required by modern browsers before audio can play

createCanvas(windowWidth, windowHeight);
Creates a canvas that is exactly as wide and tall as the browser window, so the warning fills the entire screen.
textFont(fbiFont);
Applies the bold Roboto font (loaded in preload) to all text() calls that follow. Without this line, text would use p5's default serif font.
textAlign(CENTER, CENTER);
The first CENTER aligns text horizontally at its x position; the second CENTER aligns it vertically at its y position. This makes positioning easier because text is centered at the coordinate you specify.
noCursor();
Hides the mouse pointer—this is part of the prank illusion, making the screen feel locked down and official.
alarmOsc = new p5.Oscillator('square');
Creates a new oscillator object that will generate a square wave sound (a harsh, buzzing tone). Square waves sound less natural than sine waves, which is perfect for an alarm.
alarmOsc.freq(1800);
Sets the oscillator's frequency to 1800 Hz (Hertz, or cycles per second). Higher frequencies sound higher-pitched. 1800 Hz is quite high and annoying, perfect for an alarm.
alarmOsc.amp(0);
Sets the oscillator's amplitude (volume) to 0, so it won't be heard yet. The oscillator is running, but silent—we turn it up and down in draw().
alarmOsc.start();
Starts the oscillator running continuously. From this point forward, the oscillator is always generating sound at its set frequency, but it's only audible when amp() is greater than 0.
userStartAudio();
Initializes the Web Audio API context. Modern browsers require a user gesture (like a click) before allowing audio to play. In the p5.js editor, this gesture happens automatically; in your own website, you might need to add this inside a mousePressed() function instead.

draw()

draw() runs 60 times per second by default, creating smooth animation and responsive interactivity. In this sketch, draw() is responsible for rendering the layout, blinking the WARNING text, controlling the alarm volume, and updating the countdown timer every frame. The key technique here is using frameCount % 60 to create a repeating 60-frame cycle for blinking, and sin() with map() to create smooth pulsing animations.

🔬 The FBI text is red, and the WARNING text is also red, but what color would you see if you added fill(255, 255, 0) (yellow) right before the WARNING text() call? Try it and see—the fill color only affects text drawn AFTER it.

  fill(255, 0, 0); // Bright Red
  textSize(min(width, height) * 0.1); // Responsive text size for the main title
  text("FEDERAL BUREAU OF INVESTIGATION", width / 2, height * 0.2);

  // Blinking WARNING text
  // The text appears for the first half of every second (30 frames out of 60)
  if (frameCount % 60 < 30) {
    textSize(min(width, height) * 0.08); // Slightly smaller, still bold
    text("WARNING", width / 2, height * 0.3);

🔬 The alarm pulses while WARNING is visible, then silences while it's hidden. What happens if you flip the condition—move the amp(alarmVolume) line to the else block and the amp(0) line to the if block? The alarm would sound when WARNING is hidden instead!

    let alarmVolume = map(sin(frameCount * 0.2), -1, 1, 0.2, 0.7); // Volume pulses between 0.2 and 0.7
    alarmOsc.amp(alarmVolume, 0.1); // Ramp to the new volume over 0.1 seconds
  } else {
    // --- Stop alarm when WARNING is not visible (during the "off" blink cycle) ---
    alarmOsc.amp(0, 0.1); // Ramp volume down to 0 over 0.1 seconds
function draw() {
  background(0); // Black background

  // --- FBI WARNING Text ---
  fill(255, 0, 0); // Bright Red
  textSize(min(width, height) * 0.1); // Responsive text size for the main title
  text("FEDERAL BUREAU OF INVESTIGATION", width / 2, height * 0.2);

  // Blinking WARNING text
  // The text appears for the first half of every second (30 frames out of 60)
  if (frameCount % 60 < 30) {
    textSize(min(width, height) * 0.08); // Slightly smaller, still bold
    text("WARNING", width / 2, height * 0.3);

    // --- Play alarm when WARNING is visible ---
    // Create a pulsing volume for the alarm using sine wave
    let alarmVolume = map(sin(frameCount * 0.2), -1, 1, 0.2, 0.7); // Volume pulses between 0.2 and 0.7
    alarmOsc.amp(alarmVolume, 0.1); // Ramp to the new volume over 0.1 seconds
  } else {
    // --- Stop alarm when WARNING is not visible (during the "off" blink cycle) ---
    alarmOsc.amp(0, 0.1); // Ramp volume down to 0 over 0.1 seconds
  }

  // --- Prank Message ---
  fill(255); // White text
  textSize(min(width, height) * 0.04); // Responsive text size for the message
  text("Your device has been detected accessing unauthorized content.", width / 2, height * 0.45);
  text("All data is being scanned and encrypted for forensic analysis.", width / 2, height * 0.52);
  text("Do not close this window or disconnect from the internet.", width / 2, height * 0.59);
  text("Failure to comply will result in further legal action.", width / 2, height * 0.66);

  // --- Fake IP address and Tracking ---
  fill(100, 255, 100); // Green text
  textSize(min(width, height) * 0.03); // Smaller text for details
  text("Tracking IP: 192.168.1.137 | Location: Unknown", width / 2, height * 0.8);

  // --- Countdown Timer ---
  // Calculates remaining seconds from 15, ensuring it doesn't go below 0
  let countdownSeconds = 15 - floor(millis() / 1000);
  countdownSeconds = max(0, countdownSeconds);

  fill(255, 255, 0); // Yellow text
  textSize(min(width, height) * 0.05); // Larger text for the countdown
  text(`Time remaining until full encryption: ${countdownSeconds} seconds`, width / 2, height * 0.9);

  // --- Escape Instruction ---
  fill(200); // Light gray text
  textSize(min(width, height) * 0.02); // Smallest text for instructions
  text("Press 'Q' or 'Escape' to dismiss this prank.", width / 2, height * 0.96);
}
Line-by-line explanation (22 lines)

🔧 Subcomponents:

calculation Pulsing alarm volume let alarmVolume = map(sin(frameCount * 0.2), -1, 1, 0.2, 0.7);

Uses sin() to create a smooth oscillating value that pulses the alarm volume up and down continuously, making the siren wobble

calculation Countdown timer calculation let countdownSeconds = 15 - floor(millis() / 1000);

Subtracts elapsed real-world seconds from 15 to create a countdown timer that ticks down in real time

background(0);
Fills the entire canvas with black (RGB 0, 0, 0). This is called every frame to erase the previous frame, preventing trails and ghosting.
fill(255, 0, 0);
Sets the text color to bright red (max red, no green, no blue). All text() calls after this will be red until a different fill() is called.
textSize(min(width, height) * 0.1);
Sets the text size to 10% of the smaller dimension of the canvas. If the canvas is 1920×1080, this would be min(1920, 1080) * 0.1 = 108 pixels. This makes text scale responsively to different screen sizes.
text("FEDERAL BUREAU OF INVESTIGATION", width / 2, height * 0.2);
Draws the FBI header text centered horizontally at the middle of the canvas (width / 2) and 20% down from the top (height * 0.2). Because textAlign(CENTER, CENTER) was called in setup(), the text is centered at these coordinates.
if (frameCount % 60 < 30) {
Checks if the remainder of frameCount divided by 60 is less than 30. frameCount starts at 0 and increments every frame. At 60 FPS, this condition is true for 30 frames (0 to 29), then false for 30 frames (30 to 59), then repeats—creating a blinking cycle.
text("WARNING", width / 2, height * 0.3);
Draws the red WARNING text at 30% down the screen, but only when the blink condition is true (the first 30 frames of each 60-frame cycle). When the condition is false, this line doesn't run and the text disappears.
let alarmVolume = map(sin(frameCount * 0.2), -1, 1, 0.2, 0.7);
sin(frameCount * 0.2) creates a smooth oscillation between -1 and 1 as frameCount increases. map() re-scales this oscillation to a range between 0.2 and 0.7, so the alarm volume pulses smoothly within that volume range. The 0.2 factor slows down the oscillation so it pulses a few times per second rather than every frame.
alarmOsc.amp(alarmVolume, 0.1);
Sets the oscillator's amplitude (volume) to alarmVolume over 0.1 seconds (100 milliseconds). The second argument (0.1) is a ramp time—the volume smoothly transitions to the new value over that duration rather than jumping instantly, creating a smooth wobble.
} else {
When the blink condition is false (frameCount % 60 is 30 or higher), execution jumps to this else block.
alarmOsc.amp(0, 0.1);
Sets the oscillator's volume to 0 over 0.1 seconds, silencing the alarm while the WARNING text is not visible. This creates the synchronized beeping effect: text blinks and alarm pulses together.
fill(255);
Sets the text color to white (full brightness in all channels) for the prank message text.
textSize(min(width, height) * 0.04);
Sets text size to 4% of the smaller canvas dimension—smaller than the FBI header but still readable.
text("Your device has been detected accessing unauthorized content.", width / 2, height * 0.45);
Draws the first line of the prank message at 45% down the screen, centered horizontally.
fill(100, 255, 100);
Sets text color to bright green (low red, max green, low blue), reminiscent of old terminal or hacker aesthetic. This color is used for technical details like the fake IP address.
text("Tracking IP: 192.168.1.137 | Location: Unknown", width / 2, height * 0.8);
Displays a fake IP address and location in green at 80% down the screen, adding realism to the prank by mimicking actual system monitoring displays.
let countdownSeconds = 15 - floor(millis() / 1000);
millis() returns the number of milliseconds since the sketch started. Dividing by 1000 converts this to seconds. Subtracting from 15 creates a countdown from 15 down to 0. floor() rounds down to the nearest integer so the timer shows whole seconds.
countdownSeconds = max(0, countdownSeconds);
max() ensures countdownSeconds never goes below 0. Without this line, the countdown would go negative (-1, -2, etc.), which looks broken. This keeps it pinned at 0 once time expires.
fill(255, 255, 0);
Sets text color to bright yellow, drawing attention to the countdown timer—the most threatening element of the prank.
text(`Time remaining until full encryption: ${countdownSeconds} seconds`, width / 2, height * 0.9);
Displays the countdown using a template string (backticks with ${}) to insert the current countdownSeconds value. This updates every frame as the timer decreases.
fill(200);
Sets text color to light gray for the escape instructions—less prominent than the warning itself but still visible.
textSize(min(width, height) * 0.02);
Sets text size to 2% of the smaller canvas dimension—the smallest text on screen, for the fine print at the bottom.
text("Press 'Q' or 'Escape' to dismiss this prank.", width / 2, height * 0.96);
Displays the escape instruction at 96% down the screen (near the bottom), letting the victim know how to get out of the prank.

keyPressed()

keyPressed() is a special p5.js function that runs whenever the user presses a key. It's perfect for creating escape hatches and interactive controls. In this sketch, keyPressed() gives the victim a way out of the prank, making it ethical and fun. You can detect any key using the key variable (for characters like 'a', 'A') or keyCode (for special keys like Escape, Enter, arrows).

🔬 This code stops the alarm, hides the cursor, and freezes the draw loop when Q or Escape is pressed. What would happen if you deleted the noLoop() line? Try it—the draw() function would keep running in the background, even though you can't see it changing the screen.

  // Check if 'Q' (case-insensitive) or 'Escape' key is pressed
  if (key === 'q' || key === 'Q' || keyCode === ESCAPE) {
    alarmOsc.stop(); // Stop the alarm sound immediately
    alarmOsc.amp(0); // Ensure volume is 0
    cursor(); // Restore the cursor
    noLoop(); // Stop the draw loop to freeze the screen
function keyPressed() {
  // Check if 'Q' (case-insensitive) or 'Escape' key is pressed
  if (key === 'q' || key === 'Q' || keyCode === ESCAPE) {
    alarmOsc.stop(); // Stop the alarm sound immediately
    alarmOsc.amp(0); // Ensure volume is 0
    cursor(); // Restore the cursor
    noLoop(); // Stop the draw loop to freeze the screen
    background(0); // Clear the screen
    fill(255);
    textSize(min(width, height) * 0.05);
    text("PRANK DISMISSED!", width / 2, height / 2);
    // You could add a "You've been pranked!" message here, or redirect
  }
}
Line-by-line explanation (9 lines)

🔧 Subcomponents:

conditional Escape key detection if (key === 'q' || key === 'Q' || keyCode === ESCAPE) {

Checks if the user pressed Q (lowercase or uppercase) or the Escape key, allowing them to dismiss the prank

function-call Cleanup sequence alarmOsc.stop();

Stops the alarm oscillator, silences audio, restores the cursor, and halts the draw loop

if (key === 'q' || key === 'Q' || keyCode === ESCAPE) {
key is a p5.js variable that holds the character of the key that was just pressed. keyCode is the numeric key code. ESCAPE is a p5.js constant (value 27). This condition is true if the user presses Q (lowercase), Q (uppercase), or the Escape key. The || (or operator) means any one of these conditions triggers the block.
alarmOsc.stop();
Calls the stop() method on the oscillator object, immediately ceasing audio generation. After this, the oscillator is no longer active.
alarmOsc.amp(0);
Sets the oscillator's amplitude to 0 as a backup—this ensures the audio is truly silent even if stop() didn't work as expected.
cursor();
Restores the mouse cursor, reversing the noCursor() call from setup(). The victim can see their mouse again, confirming the prank is over.
noLoop();
Stops the draw() function from running. The draw loop freezes, and the canvas stops updating. This is critical for freezing the "PRANK DISMISSED!" message on screen so it doesn't get overwritten.
background(0);
Clears the screen with black before displaying the final message, removing all the warning text.
fill(255);
Sets text color to white for the final message.
textSize(min(width, height) * 0.05);
Sets the text size to 5% of the smaller canvas dimension for the final message.
text("PRANK DISMISSED!", width / 2, height / 2);
Displays a centered message at the middle of the screen confirming the prank is over.

windowResized()

windowResized() is a special p5.js function that automatically runs whenever the browser window is resized. If you don't define it, the canvas stays at its original size and doesn't adapt to window changes. Since this sketch uses responsive text sizing (textSize(min(width, height) * 0.1)), the text will scale smoothly when windowResized() updates the canvas dimensions.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Called when the preview panel is resized, ensuring the canvas scales correctly
}
Line-by-line explanation (1 lines)

🔧 Subcomponents:

function-call Canvas resizing resizeCanvas(windowWidth, windowHeight);

Resizes the p5.js canvas to match the new browser window dimensions whenever the window is resized

resizeCanvas(windowWidth, windowHeight);
resizeCanvas() changes the canvas dimensions to match the current window size. windowWidth and windowHeight are p5.js variables that always contain the current browser window dimensions. This is called automatically by p5.js whenever the browser window is resized (or the editor preview pane is dragged), keeping the canvas responsive.

📦 Key Variables

fbiFont object (p5.Font)

Stores the loaded Roboto Bold font object, used by textFont() to render all text in the sketch with a bold, official appearance

let fbiFont; // Initialized in preload()
alarmOsc object (p5.Oscillator)

Stores the audio oscillator object that generates the alarm sound. Its frequency, amplitude, and wave type can be controlled throughout the sketch

let alarmOsc; // Initialized in setup()
frameCount number (built-in p5.js variable)

A special p5.js variable that increments by 1 every frame (60 times per second by default). Used here to create blinking and pulsing effects with the modulo operator and sin() function

// frameCount automatically increases; you read it but don't initialize it
alarmVolume number

A temporary variable calculated each frame (when WARNING is visible) that holds the current pulsing volume level between 0.2 and 0.7, created using sin() and map()

let alarmVolume = map(sin(frameCount * 0.2), -1, 1, 0.2, 0.7);
countdownSeconds number

Holds the number of seconds remaining on the countdown timer, calculated by subtracting elapsed time from 15 and clamped to never go below 0

let countdownSeconds = 15 - floor(millis() / 1000);
millis() number (built-in p5.js function)

A special p5.js function that returns the number of milliseconds elapsed since the sketch started. Used here to create a real-world countdown timer

// Called inside draw() to calculate countdownSeconds

🔧 Potential Improvements (5)

Here are some ways this code could be enhanced:

BUG draw() — blinking WARNING text

The fill(255, 0, 0) set before the FBI header persists to the WARNING text, but if you change the WARNING color inside the if block (like fill(255, 255, 0)), you need to reset it for the next frame or the colors will bleed together unpredictably

💡 Always call fill() before every text() call, even if you think the color hasn't changed. Or reset fill(255, 0, 0) at the beginning of draw() every frame to establish a baseline color state.

PERFORMANCE setup() — userStartAudio()

userStartAudio() is called in setup(), but some browsers require it to be called inside a user interaction (like mousePressed() or keyPressed()) due to stricter autoplay policies. In some environments, the audio might not start.

💡 Move userStartAudio() to keyPressed() or mousePressed() so it's triggered by a real user gesture, guaranteeing audio will work across all browsers: if (!getAudioContext().state === 'running') { userStartAudio(); }

STYLE keyPressed() — escape logic

The escape condition checks for both 'q', 'Q', and ESCAPE separately, but the uppercase check is redundant—key already returns the character the user typed, and comparing to 'q' and 'Q' is error-prone

💡 Use key.toLowerCase() to make the comparison case-insensitive: if (key.toLowerCase() === 'q' || keyCode === ESCAPE)

FEATURE draw() — countdown and alarm synchronization

The countdown timer reaches zero, but the prank continues to run indefinitely. The alarm and WARNING text keep blinking, making it unclear to the victim when the prank is 'complete'

💡 Add a conditional that checks if countdownSeconds === 0 and automatically stops the alarm and halts the draw loop, or displays a final 'ENCRYPTION COMPLETE' message to complete the prank narrative.

FEATURE setup() and draw() — audio volume

The alarm oscillator has a fixed frequency and wave type. For maximum prank effect, the frequency should vary to sound more like a realistic siren (which changes pitch)

💡 Make the oscillator's frequency change over time using map() and sin(), just like the amplitude does: alarmOsc.freq(map(sin(frameCount * 0.1), -1, 1, 1200, 2000)) when WARNING is visible, creating a wailing siren effect.

🔄 Code Flow

Code flow showing preload, setup, draw, keypressed, windowresized

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

graph TD start[Start] --> setup[setup] click setup href "#fn-setup" setup --> font-load[font-load] click font-load href "#sub-font-load" setup --> canvas-setup[canvas-setup] click canvas-setup href "#sub-canvas-setup" setup --> font-setup[font-setup] click font-setup href "#sub-font-setup" setup --> text-align[text-align] click text-align href "#sub-text-align" setup --> cursor-hide[cursor-hide] click cursor-hide href "#sub-cursor-hide" setup --> oscillator-init[oscillator-init] click oscillator-init href "#sub-oscillator-init" setup --> audio-context[audio-context] click audio-context href "#sub-audio-context" setup --> draw[draw loop] draw --> blink-conditional[blink-conditional] click blink-conditional href "#sub-blink-conditional" draw --> alarm-volume-calc[alarm-volume-calc] click alarm-volume-calc href "#sub-alarm-volume-calc" draw --> countdown-calc[countdown-calc] click countdown-calc href "#sub-countdown-calc" draw --> key-check[key-check] click key-check href "#sub-key-check" draw --> cleanup[cleanup] click cleanup href "#sub-cleanup" draw --> draw key-check -->|Q or Escape pressed| cleanup blink-conditional -->|60 frames cycle| draw alarm-volume-calc -->|sin() value| draw countdown-calc -->|15 - elapsed time| draw windowresized --> canvas-resize[canvas-resize] click canvas-resize href "#sub-canvas-resize" canvas-resize --> setup

❓ Frequently Asked Questions

What visual elements are featured in the FBI TAKEDOWN sketch?

The sketch displays bold red text stating 'FEDERAL BUREAU OF INVESTIGATION' and a blinking 'WARNING' banner on a black background, creating an intense and dramatic effect.

How can users interact with the FBI TAKEDOWN sketch?

Users can interact by clicking to start the audio context, which triggers the high-pitched alarm sound alongside the visual elements.

What creative coding techniques are showcased in this p5.js sketch?

The sketch demonstrates techniques such as text rendering, audio synthesis with oscillators, and responsive design for visual elements.

Preview

FBI TAKEDOWN sceen - p5.js creative coding sketch preview
Sketch Preview
Code flow diagram showing the structure of FBI TAKEDOWN sceen - Code flow showing preload, setup, draw, keypressed, windowresized
Code Flow Diagram