Functions

In this guide, we will demonstrate how to recreate the famous bouncing DVD logo effect. This involves several variables such as composition width, height, and duration, as well as the image's width and height. Handling these variables with the Keyframe object can be complex, which is where functional properties become useful. Follow the steps below for implementation:

Import Required Modules

First, import the necessary modules and create a Composition:

import { 
  VideoSource,
  ImageSource, 
  VideoClip, 
  ImageClip, 
  Timestamp, 
  Composition 
} from '@diffusionstudio/core';
 
const composition = new Composition();

Fetch Resources

Fetch the required video and image resources in parallel:

const sources = await Promise.all([
  VideoSource.from('https://diffusion-studio-public.s3.eu-central-1.amazonaws.com/videos/big_buck_bunny_1080p_30fps.mp4'),
  ImageSource.from('https://diffusion-studio-public.s3.eu-central-1.amazonaws.com/html/dvd_logo.svg'),
]);

Add Background Video

We can now add our background video to the Composition:

await composition.add(new VideoClip(sources[0]));

Add the Bouncing DVD Logo

Add the image clip to the composition and use functional properties to animate its position:

await composition.add(
  new ImageClip(sources[1], {
    x(this: ImageClip, reltime: Timestamp) {
      const width = typeof this.width === 'number' ? this.width : 0;
      const range = composition.width - width;
      const x = (reltime.seconds * 500) % (range * 2);
 
      return x > range ? range * 2 - x : x;
    },
    y(this: ImageClip, reltime: Timestamp) {
      const height = typeof this.height === 'number' ? this.height : 0;
      const range = composition.height - height;
      const y = (reltime.seconds * 200) % (range * 2);
 
      return y > range ? range * 2 - y : y;
    },
    stop: composition.duration,
  })
);

Explanation

• ImageClip Properties: We use functional properties for x and y to animate the image's position.
  • x calculates the horizontal position based on the elapsed time.
  • y calculates the vertical position similarly.
• Position Calculation:
  • reltime.seconds provides time relative to the start of the clip in seconds, which is used to compute the position.
  • You can also use reltime.millis or reltime.frames depending on the required precision.
  • The position is adjusted to ensure the image bounces within the composition boundaries.

Note: When using arrow functions for properties, this is not accessible, and you will need to pass the Timestamp as the first argument. For example: x: (reltime: Timestamp) => reltime.frame.

This setup will recreate the iconic bouncing DVD logo effect by leveraging functional properties to animate the image clip's position dynamically.