Media Editing

Sup provides powerful media editing capabilities. You can modify images and audio files, and even convert between different media types.

Basic Editing Pattern

Media editing in Sup uses a cursor-based pattern:

1. Start editing with a SupImage, SupAudio, or SupVideo with .edit()
2. Apply modifications to the cursor
3. Render to get the result

function main() {
  // 1. Start editing
  const cursor = mediaFile.edit();

  // 2. Apply modifications
  cursor.someEdit();
  cursor.anotherEdit();

  // 3. Get result
  return cursor.render();
}

Image Editing

Here are common image editing operations:

function main() {
  const image = sup.input.image;
  if (!image) return "Please attach an image";

  const cursor = image.edit();

  // Resize
  cursor.resize(800, 600, { mode: "contain" }); // Other modes: cover, fill, inside, outside
  cursor.resize(64, 64, { pixelated: true }); // Nearest-neighbor scaling for pixel art

  // Basic transformations
  cursor.crop(0, 0, 400, 300);
  cursor.rotate(90);
  cursor.flip(true, false); // horizontal, vertical

  // Effects
  cursor.grayscale();
  cursor.blur(2.5);
  cursor.sharpen(1.5);
  cursor.invert();

  return cursor.render();
}

Image Compositing

Layer multiple images together:

function main() {
  const background = sup.input.image;
  const overlay = sup.image("overlay.png");     // overlay.png is uploaded as an asset

  const cursor = background.edit();
  cursor.composite(overlay);    // Overlays on top

  cursor.composite(overlay, { top: 100, left: 100 });   // Overlay with specified position

  return cursor.render();
}

Audio Editing

Here are common audio editing operations:

function main() {
  const audio = sup.input.audio;
  if (!audio) return "Please attach an audio file";

  const cursor = audio.edit();

  // Time modifications
  cursor.trimStart(1.5); // Remove first 1.5 seconds
  cursor.trimEnd(1.0); // Remove last second
  cursor.padStart(0.5); // Add 0.5 seconds silence at start
  cursor.fadeIn(1.0); // Fade in over 1 second
  cursor.fadeOut(1.0); // Fade out over 1 second

  // Audio adjustments
  cursor.changeSpeed(1.5); // Speed up by 50%
  cursor.changePitch(100); // Raise pitch
  cursor.changeVolume(2); // Double volume
  cursor.normalize(); // Normalize levels

  return cursor.render();
}

Audio Effects

Add audio effects:

function main() {
  const audio = sup.input.audio;
  if (!audio) return "Please attach an audio file";

  const cursor = audio.edit();

  // Add reverb
  cursor.reverb(50, {
    roomScale: 75, // 0-100
    stereoDepth: 50, // 0-100
    preDelay: 20, // 0-200ms
  });

  // Add echo
  cursor.echo(0.5, 0.3, {
    delay: 0.1, // seconds
    decay: 0.5, // 0-1
  });

  // Add chorus
  cursor.chorus(0.6, 0.4, {
    speed: 1.5, // 0.1-5 Hz
    depth: 2, // 0-10
  });

  return cursor.render();
}

Combining Audio

Mix or concatenate multiple audio files:

function main() {
  const audio1 = sup.input.audio;
  const audio2 = sup.audio("track2.mp3");   // track2.mp3 is uploaded as an asset

  const cursor = audio1.edit();

  // Mix tracks together (play simultaneously)
  cursor.mixWith(audio2);

  // Or concatenate tracks (play sequentially)
  cursor.combineWith(audio2);

  return cursor.render();
}

Video Editing

Videos can be edited and enhanced with various effects and modifications:

function main() {
  const video = sup.input.video;
  if (!video) return "Please attach a video";

  const cursor = video.edit();

  // Add audio (mix or replace)
  cursor.addAudio(sup.audio("background-music.mp3"), 'mix');

  // Add overlays
  cursor.addOverlay(sup.image("watermark.png"), 'bottomRight');
  cursor.addOverlay(sup.video("logo-animation.mp4"), 'topLeft');

  // Timing and effects
  cursor.duration(30);        // Set to 30 seconds
  cursor.fadeIn(2);          // 2 second fade in
  cursor.fadeOut(2);         // 2 second fade out
  cursor.trimStart(5);       // Remove first 5 seconds
  cursor.trimEnd(5);         // Remove last 5 seconds

  // Add captions
  cursor.addCaption("Welcome to our presentation", { position: 'bottom' });

  return cursor.render();
}

Converting Images to Videos

Create videos from images with customizable durations:

function main() {
  const image = sup.image("slide.jpg");

  // Default 3-second video from image
  const defaultVideo = sup.video(image);

  // Custom duration with effects
  const customVideo = sup.video(image)
    .edit()
    .duration(8)                    // 8-second duration instead of 3
    .fadeIn(1)
    .fadeOut(1)
    .addAudio(sup.audio("narration.mp3"), 'mix')
    .addCaption("Key Insights", { position: 'bottom' })
    .render();

  return customVideo;
}

This is perfect for creating slide presentations, static backgrounds with audio, or title cards.

Video Sequences

Combine multiple clips into a single video:

function main() {
  // Create sequence from clips
  const sequence = sup.sequence([
    sup.video("intro.mp4"),                  // Use sup.video() for asset names
    sup.video("main-content.mp4"),
    sup.image("end-slide.jpg")               // Images become 3-second clips
  ]);

  // Apply effects to entire sequence
  const final = sequence
    .addAudio(sup.audio("soundtrack.mp3"), 'mix')
    .addOverlay(sup.image("logo.png"), 'topRight')
    .fadeIn(1)
    .fadeOut(1)
    .render();

  return final;
}

Extracting Content from Videos

Access video metadata and extract content:

function main() {
  const video = sup.input.video;
  if (!video) return "Please attach a video";

  return [
    `Video dimensions: ${video.width}x${video.height}`,
    `Duration: ${video.duration} seconds`,
    `Thumbnail:`, video.thumbnailUrl,
    `First frame:`, video.firstFrameUrl,
    `Last frame:`, video.lastFrameUrl,
    `Audio track:`, video.audio
  ];
}