Graphic concepts: aspect ratio, resolution, layers, codecs

Aspect ratio and resolution

Rapport d'aspect, also known as the image format, is a term used in cinema and video to describe the proportion between the width and height of an image. It is typically expressed by two numbers separated by a colon or a slash, such as 4:3 or 16:9. For example, an aspect ratio of 16:9 means that for every 16 units of width, the image has 9 units of height.

This aspect ratio is closely related to the resolution of a screen or video. Resolution represents the total number of pixels that make up an image, usually expressed by the combination of width and height in pixels. For example, a resolution of 1920×1080 means that the image contains 1920 pixels in width and 1080 pixels in height.

The link between aspect ratio and resolution is that the aspect ratio determines the shape of the image, while the resolution determines the level of detail in the image. For instance, two videos may have the same resolution, but if one has an aspect ratio of 16:9 and the other has an aspect ratio of 4:3, they will have different shapes. The 16:9 video will be wider and shorter than the 4:3 video, despite having the same total number of pixels. Additionally, the choice of aspect ratio and resolution can significantly impact the appearance and quality of the video when displayed on different types of screens.

The higher the resolution, the more detailed the projected image will be.

Common resolutions used for video mapping include HD 720p (1280×720), Full HD 1080p (1920×1080), and 4K UHD (4096×2160). The choice of resolution will depend on the desired level of detail for the project, the size of the projection surface, as well as the capabilities of the projector and video mapping software being used.

HD resolution offers good image quality and is generally sufficient for small to medium-scale projects. However, for larger or more complex projects requiring a higher level of detail, 4K resolution can be used.

It’s important to note that the higher the resolution, the greater the processing load on the computer, video mapping software, and projector. Additionally, higher resolution also requires more storage for video files.

Layers, opacity, blending modes

Graphic design software uses a system of layers, also called ‘layers’ in English, which function similarly to tracing paper used in traditional drawing. Each layer can contain different graphic elements such as text, images, shapes, etc. These layers are stacked on top of each other, with the first layer at the bottom and the others piling up above it.

Opacity, on the other hand, refers to the transparency of a layer. A layer with 100% opacity is fully opaque and hides all the layers beneath it, while a layer with lower opacity allows the underlying layers to show through to varying degrees. By adjusting a layer’s opacity, users can create overlapping and blending effects to achieve more complex and nuanced visual results.

By manipulating layers and opacity, graphic designers can organize, edit, and combine different graphic elements flexibly without altering the original data. This allows for greater creativity and easier revision of designs, as each element can be modified individually without affecting others.

The hierarchy in the layers panel follows a simple rule: for example, in the HeavyM Canvas, what is above in the list of layers is displayed in front of what is below. When you add a shape, it covers the shapes behind it, so by default you’ll only see through if the object on top has some transparency.

Blends modes

You may have heard of Modes de fusion because they are quite commonly found in drawing or digital editing software. The Blend Mode of a layer determines how it is merged with the layers below it.

Blend Modes are essentially a set of formulas that take each pixel of the layer where the mode is applied and each pixel directly underneath, apply mathematical operations, and produce a result. Each mode uses a different formula, which is why you get a different blend with each one. We won’t go into the details of the formulas, as that would probably take a whole year, but there are many resources available online if you’re interested.

In HeavyM, blend modes are applied to groups. Le “Normal” mode is the default, as described and illustrated in the introduction above: each group obscures the groups behind it.

How to use blend modes in HeavyM

In HeavyM, there are 26 blending modes. To change the mode applied to a group, use its dropdown menu in the Layers panel, accessible via this button

and simply choose the one you want from the list. By hovering over the items in the list, you can preview the effect of each mode on the final output.

Once you click on a mode, it is applied, and you can see the blending result instantly. Remember that a blend mode must be applied to an upper layer. And of course, each group can have its own mode, so you can combine them to create very complex compositions.

Note:

The blend modes button has two states:

• if the ‘Normal‘ mode is applied

• if any other mode is applied.

The different types of blend modes

As mentioned earlier, there is a list of 26 blend modes, each with a different formula. Depending on the content you are mixing, they will produce very different results, and their names may not always be helpful, so it can be challenging to predict the outcome at first. The best way to discover them is to try them out yourself!

One thing that might be useful, however, is how the modes are organized. You may have noticed that they are categorized in the list. Indeed, some modes share similarities in their behavior:

• Neutral modes (Normal): We’ve already talked about this one; it stands alone and is the default mode.
• Darkening modes (Darken, Multiply, Color Burn, Linear Burn): As you might guess, these involve darkening the output. They remove white in the groups where they are applied.
• Lightening modes (Lighten, Screen, Color Dodge, Linear Dodge (add)): As you might guess, these involve lightening the output. They remove black in the groups where they are applied.
• Contrast modes (Overlay, Soft Light, Hard Light, Vivid Light, Linear Light, Pin Light, Hard Mix): These both darken and lighten, resulting in high contrast.
• Inversion or comparison modes (Difference, Exclusion, Subtract, Divide, Invert, InvertRGB): These play with the similarities or differences between the blending and base groups. Just try them and see what happens.
• Coloring modes (Hue, Saturation, Color, Luminosity): These affect different color properties, as suggested by their names.

Examples of Blend Modes

Multiply

Note: Multiply is quite commonly used. As seen above, an interesting use case in HeavyM is to place a texture in a group with the Multiply mode and, in a base group underneath, add white effects on shapes. The result will give the impression that the texture is printed onto the effects!

Screen

Overlay

Exclusion

Compression

Video compression is a process that reduces the amount of data needed to store or transmit digital images, which is particularly useful for videos that contain a large amount of data. This is typically done by eliminating redundant or less important information in the images. For example, in a scene where the sky is blue, instead of storing the information that each pixel in the sky is blue, the compressor can simply store the information that a large area is the same shade of blue.

Decompression is the reverse process, where compressed data is transformed into a readable video. This happens when you stream a video or open a video file on your computer.

A codec, which is a portmanteau formed from ‘coder’ and ‘decoder,’ is the software or hardware that performs these compression and decompression tasks. There are many codecs available, each with its own strengths and weaknesses. For example, the H.264 codec is widely used for streaming and HD video due to its ability to deliver high-quality images with relatively small file sizes. Another example is Apple’s ProRes codec, which is often used in video post-production for its high quality and ease of use with Apple’s video editing software. The trade-off is that the more a file is reduced in size, the more work it requires from the computer and therefore more resources to decode.

If you’re using videos in your HeavyM projects and looking to optimize playback, try reducing their resolution and bitrate and increasing compression until you reach an acceptable quality/performance compromise. We also recommend using .mov/H264 files (or HAP Alpha or ProRes 4444 if you need transparency). You can also enable hardware acceleration for video decoding. This improves performance and reduces latency but can cause rendering errors with certain videos or configurations. You can enable the option on each individual video in its media settings, or change the default option for all added videos in Preferences → Rendering → Video decoding.

If you notice a slowdown at the end of videos just before they loop, you can use the PhotoJPEG / MotionJPEG codec to work around the issue. The downside is that the files are larger and do not support transparency in this case. A simple conversion tool on macOS is AVF Batch Exporter by the VIDVOX team. On Windows, you can use MPEG Streamclip.

To continue

What content to project?

This guide was written by HeavyM, a company specializing in video mapping since 2013.

For any questions, comments, advice, etc., please use this contact form: **https://help.heavym.net/hc/requests/new**. Response guaranteed within 24 hours.