Create a complete, interactive p5.js sketch based on these detailed specifications:

```json
{
  "SIMULATION": "Pendulum: Interactive Simulation Demonstrating Simple Harmonic Motion",
  "CONTROLS": [
    {
      "TYPE": "Slider",
      "NAME": "gravity",
      "LABEL": "Gravity",
      "MIN": 0.1,
      "MAX": 2.0,
      "DEFAULT": 1.0,
      "STEP": 0.01,
      "VARIABLE": "gravity",
      "DESCRIPTION": "Adjust the gravitational acceleration."
    },
    {
      "TYPE": "Slider",
      "NAME": "damping",
      "LABEL": "Damping",
      "MIN": 0.99,
      "MAX": 1.0,
      "DEFAULT": 0.999,
      "STEP": 0.0001,
      "VARIABLE": "damping",
      "DESCRIPTION": "Controls the energy loss per swing, simulating air resistance and friction. Higher values mean less damping."
    },
    {
      "TYPE": "Slider",
      "NAME": "length",
      "LABEL": "Length",
      "MIN": 50,
      "MAX": 300,
      "DEFAULT": 200,
      "STEP": 1,
      "VARIABLE": "length",
      "DESCRIPTION": "Sets the length of the pendulum arm in pixels."
    },
    {
      "TYPE": "Slider",
      "NAME": "mass",
      "LABEL": "Mass",
      "MIN": 1,
      "MAX": 100,
      "DEFAULT": 20,
      "STEP": 1,
      "VARIABLE": "mass",
      "DESCRIPTION": "Changes the mass of the pendulum bob (affects momentum)."
    },
    {
      "TYPE": "Button",
      "NAME": "resetButton",
      "LABEL": "Reset",
      "FUNCTION": "resetPendulum",
      "DESCRIPTION": "Resets the pendulum to its initial position (30 degrees)."
    },
    {
      "TYPE": "Button",
      "NAME": "pauseButton",
      "LABEL": "Pause/Play",
      "FUNCTION": "togglePause",
      "DESCRIPTION": "Toggles between pausing and playing the simulation.",
      "STATE_VARIABLE": "paused",
      "STATE_LABELS": ["Pause", "Play"]
    },
    {
      "TYPE": "Checkbox",
      "NAME": "showTrail",
      "LABEL": "Show Trail",
      "DEFAULT": true,
      "VARIABLE": "showTrail",
      "DESCRIPTION": "Toggles the display of the pendulum's motion trail."
    }
  ],
  "VISUALS": {
    "BACKGROUND_COLOR": "white",
    "PENDULUM_ROD_COLOR": "black",
    "PENDULUM_BOB_COLOR": "red",
    "PENDULUM_BOB_DIAMETER": 30,
    "PIVOT_COLOR": "black",
    "PIVOT_DIAMETER": 6,
    "TRAIL_COLOR": "rgba(0, 0, 255, 0.1)",
    "TRAIL_LENGTH": 200,
    "DESCRIPTION": "Draw the pendulum rod as a line from the pivot point to the center of the pendulum bob. Draw the pendulum bob as a circle. The pivot is a small circle. Use trail array to keep track of the pendulum's location for the last TRAIL_LENGTH frames. Use transparent blue-ish color for the trail. Display a trail only when showTrail is true. Clear the canvas on reset."
  },
  "PHYSICS": {
    "DESCRIPTION": "Implement the physics of a simple pendulum. Use angular acceleration, angular velocity, and angle. Calculate the angular acceleration using the formula: angularAcceleration = (-gravity / length) * sin(angle). Update the angular velocity: angularVelocity += angularAcceleration. Apply damping to the angular velocity: angularVelocity *= damping. Update the angle: angle += angularVelocity. Calculate the x and y coordinates of the pendulum bob using polar coordinates: x = length * sin(angle), y = length * cos(angle).",
    "VARIABLES": [
      "angle (initial: PI/6, radians)",
      "angularVelocity (initial: 0)",
      "angularAcceleration (initial: 0)"
    ],
    "FORMULAS": [
      "angularAcceleration = (-gravity / length) * sin(angle)",
      "angularVelocity += angularAcceleration",
      "angularVelocity *= damping",
      "angle += angularVelocity",
      "x = length * sin(angle)",
      "y = length * cos(angle)"
    ]
  },
  "INTERACTIONS": {
    "MOUSE_DRAG": {
      "DESCRIPTION": "Allow the user to drag the pendulum bob with the mouse when the simulation is paused. When the mouse is pressed near the bob, set a boolean variable 'dragging' to true. While 'dragging' is true and the mouse is moving, calculate the new angle based on the mouse's x and y coordinates relative to the pivot point. Update the angle directly. When the mouse is released, set 'dragging' to false and reset angularVelocity to 0.",
      "DRAG_RADIUS": 20
    },
    "KEYBOARD": {
      "DESCRIPTION": "Allow the user to reset by pressing 'r' key, pause/play by pressing 'spacebar' key",
      "KEY_BINDINGS": [
          {"key": "r", "function": "resetPendulum"},
          {"key": " ", "function": "togglePause"}
      ]
    },
    "RESET_FUNCTION": {
        "NAME": "resetPendulum",
        "DESCRIPTION": "Resets the angle to PI/6, angularVelocity to 0, angularAcceleration to 0, and clears the trail array."
    },
    "PAUSE_TOGGLE_FUNCTION":{
      "NAME": "togglePause",
      "DESCRIPTION": "Toggles the 'paused' variable between true and false."
    }
  }
}
```

Requirements:
- Include both setup() and draw() functions
- Use createCanvas(400, 400) to set canvas size
- Implement ALL specified controls (sliders, buttons) using p5.js GUI libraries or simple implementations
- Add all visual elements as described
- Implement the physics/logic accurately
- Include all specified user interactions
- Add clear comments explaining the code
- Make it educational and visually appealing
- Ensure smooth animations and responsive controls

IMPORTANT: Only output the JavaScript code, no explanations or markdown formatting. The code should be self-contained and runnable in the p5.js editor with all interactive controls working.