Create a complete, highly interactive p5.js simulation demonstrating: pendulum

CRITICAL REQUIREMENTS:
1. ACCURACY: The simulation must be scientifically/mathematically accurate for pendulum
2. FUNCTIONAL INTERACTIVITY: All sliders and buttons MUST actually control and modify the simulation behavior in real-time
3. EDUCATIONAL: Users should learn about pendulum through experimentation and parameter manipulation
4. VISUAL PRECISION: Animations should be smooth, realistic, and visually accurate to real-world physics

MANDATORY INTERACTIVE ELEMENTS THAT MUST WORK:
- At least 4-6 sliders controlling key parameters with realistic ranges - these MUST change simulation behavior
- At least 3-4 buttons for actions (reset, pause/play, presets, etc.) - these MUST perform actual functions
- Real-time parameter display showing current values that update as sliders move
- Visual feedback that responds immediately and visibly to control changes
- Mouse interactions where physically meaningful

CRITICAL: CONTROLS MUST BE FUNCTIONAL, NOT DECORATIVE
- Every slider must control a variable that actively affects the simulation
- Every button must perform a meaningful action that changes the simulation state
- Parameter changes must be immediately visible in the simulation output
- Use the actual slider values in mathematical calculations and physics equations

ANIMATION AND TIMING REQUIREMENTS:
- Use realistic time scaling - avoid animations that are too fast or unrealistic
- Implement proper frame rate control using deltaTime or fixed timesteps
- Use realistic physical constants and scaling factors
- Ensure smooth, stable animations at 60fps
- Avoid conflicting visual elements or overlapping controls
- Make animations visually appealing and scientifically accurate

CONTROL IMPLEMENTATION REQUIREMENTS:
- Sliders: Use createSlider(min, max, default, step) with appropriate ranges that make physical sense
- Buttons: Use createButton('Label') with meaningful functions that actually execute
- Position controls below canvas using .parent(controlsDiv) and CSS for layout. ABSOLUTELY DO NOT use .position(x, y) for any p5.js elements (sliders, buttons, canvas) as this will break layout.
- Show parameter values with text() in the main canvas that update in real-time
- Use function declarations for event handlers: function resetSim() {} 
- ALWAYS use slider.value() in your calculations - never ignore slider inputs

CODE FORMAT REQUIREMENTS:
- Use GLOBAL MODE p5.js (NOT instance mode)
- Define setup() and draw() as regular functions
- All variables should be global (use let/var at top level)
- Use standard p5.js function names: createCanvas, background, fill, etc.
- NO sketch wrapper function - write direct p5.js code

SIMULATION ACCURACY FOR PENDULUM:
- Use correct physics equations, mathematical relationships, or algorithmic principles
- Realistic parameter ranges and default values that make physical sense
- Smooth, continuous animations with proper time scaling
- Proper scaling and units where applicable
- Include scientific constants or realistic coefficients
- ENSURE every parameter controlled by sliders affects the simulation visibly
- Use appropriate time steps and scaling factors to avoid too-fast animations

TEXT AND DISPLAY REQUIREMENTS:
- Show ONLY the simulation title at the top
- Display ONLY key physics parameters (velocity, acceleration, force, etc.) - no instructions or explanations
- Keep text minimal and clean - maximum 4-5 parameter displays
- NO instruction text like "Click to...", "Drag to...", etc.
- Use concise parameter labels like "Velocity: 5.2 m/s" not "Current velocity value is 5.2"
- Position parameter text neatly in corners or edges, not cluttering the center

VISUAL REQUIREMENTS:
- Clear, educational visualization of the concept with a MODERN, SLEEK aesthetic.
- Use a vibrant, harmonious color palette. Consider gradients or subtle shadows for depth.
- Multiple visual elements (trails, vectors, measurements, etc.) that don't conflict.
- Color coding to distinguish different aspects.
- Grid lines, axes, or reference markers where helpful, styled subtly.
- Immediate and obvious visual response to parameter changes.
- Smooth, realistic motion that matches real-world physics.
- Proper visual hierarchy - important elements should stand out.
- Clean, uncluttered display with minimal text.
- All text (labels, values, titles) within the canvas should be clearly readable, using a modern font (if possible within p5.js limitations) and contrasting colors.

EXAMPLE OF FUNCTIONAL CONTROLS WITH PROPER TIMING:
```javascript
// Global variables that ACTUALLY affect simulation
let gravitySlider, dampingSlider;
let gravity = 0.5;  // This gets updated by slider
let damping = 0.99; // This gets updated by slider
let resetBtn, pauseBtn;
let isPaused = false;
let timeScale = 0.02; // Control animation speed

function setup() {
  createCanvas(400, 400);
  
  // Create a div to hold all controls
  let controlsDiv = createDiv('');
  controlsDiv.id('p5-controls'); // Assign an ID for easier styling/selection
  controlsDiv.style('display', 'flex');
  controlsDiv.style('flex-wrap', 'wrap');
  controlsDiv.style('gap', '10px'); // Spacing between controls
  controlsDiv.style('margin-top', '10px'); // Space below canvas
  controlsDiv.style('justify-content', 'center'); // Center controls
  
  // Create sliders that CONTROL the simulation with realistic ranges
  gravitySlider = createSlider(0.1, 1.0, 0.4, 0.05);
  gravitySlider.parent(controlsDiv); // Attach to the div
  gravitySlider.style('width', '150px'); // Example width
  
  dampingSlider = createSlider(0.9, 1.0, 0.995, 0.001);
  dampingSlider.parent(controlsDiv); // Attach to the div
  dampingSlider.style('width', '150px'); // Example width
  
  // Create buttons that DO something
  resetBtn = createButton('Reset Simulation');
  resetBtn.parent(controlsDiv); // Attach to the div
  resetBtn.style('background-color', '#4CAF50'); // Green background
  resetBtn.style('color', 'white'); // White text
  resetBtn.style('border', 'none');
  resetBtn.style('padding', '8px 16px');
  resetBtn.style('border-radius', '5px');
  resetBtn.style('cursor', 'pointer');
  resetBtn.style('font-size', '14px');
  resetBtn.style('transition', 'background-color 0.3s ease');
  resetBtn.mouseOver(() => resetBtn.style('background-color', '#45a049'));
  resetBtn.mouseOut(() => resetBtn.style('background-color', '#4CAF50'));
  
  pauseBtn = createButton('Pause/Play');
  pauseBtn.parent(controlsDiv); // Attach to the div
  pauseBtn.style('background-color', '#008CBA'); // Blue background
  pauseBtn.style('color', 'white'); // White text
  pauseBtn.style('border', 'none');
  pauseBtn.style('padding', '8px 16px');
  pauseBtn.style('border-radius', '5px');
  pauseBtn.style('cursor', 'pointer');
  pauseBtn.style('font-size', '14px');
  pauseBtn.style('transition', 'background-color 0.3s ease');
  pauseBtn.mouseOver(() => pauseBtn.style('background-color', '#007B9A'));
  pauseBtn.mouseOut(() => pauseBtn.style('background-color', '#008CBA'));

  // IMPORTANT: Ensure the canvas is also parented correctly if needed, or its container is styled.
  // p5.js canvas is usually appended to the element where new p5.js(sketch, node) is called.
  // The controlsDiv will be a sibling to the canvas within that parent node.
}

function draw() {
  background(20, 20, 30); // Dark background for modern look
  
  // ACTUALLY USE the slider values - this is critical!
  gravity = gravitySlider.value();
  damping = dampingSlider.value();
  
  if (!isPaused) {
    // Use gravity and damping in actual physics calculations with proper time scaling
    velocity += gravity * timeScale;
    velocity *= damping;
    position += velocity;
  }
  
  // Show ONLY title and key parameters - keep it minimal
  fill(255); // White text for contrast
  textAlign(CENTER);
  textSize(24); // Larger title
  textStyle(BOLD);
  text('Pendulum Simulation', width/2, 40);
  
  fill(200, 200, 255); // Light blue text for parameters
  textAlign(LEFT);
  textSize(16);
  textStyle(NORMAL);
  text('Gravity: ' + gravity.toFixed(2), 20, 80);
  text('Damping: ' + damping.toFixed(3), 20, 100);
  text('Velocity: ' + velocity.toFixed(2), 20, 120);
  text('Position: ' + position.toFixed(2), 20, 140);
  
  // Draw simulation that responds to parameters with realistic motion
  fill(255, 100, 100); // Vibrant red for the ellipse
  noStroke();
  ellipse(position, height/2, 30, 30);
}

// Functions that actually work
function resetSimulation() {
  position = width/2;
  velocity = 0;
}

function togglePause() {
  isPaused = !isPaused;
}
```

IMPORTANT: 
- Focus on the specific physics, mathematics, or principles of pendulum
- Make controls that ACTUALLY matter for understanding the concept
- Every slider must control a variable used in the simulation
- Every button must perform a visible action
- Ensure the simulation behaves realistically and responds to all controls
- Use proper time scaling to avoid unrealistically fast animations
- Position controls carefully to avoid visual conflicts
- Make animations smooth and scientifically accurate
- Keep text displays MINIMAL - only title and key parameters
- NO instruction text or explanations in the simulation
- Only output JavaScript code, no explanations
- Use global mode p5.js format (no sketch wrapper)
- Position controls below the 400x400 canvas with proper spacing
- Ensure all interactive elements (sliders, buttons) have clear labels and contrasting colors for visibility and a modern look.

Generate an accurate, interactive simulation of: pendulum with WORKING controls, REALISTIC timing, and MINIMAL text displays