Real-time Graphic Composition

实时图形组合

Internal research and development projects.

At an intersection between graphic design and engineering, our creative process involves a comprehensive approach without commercial restriction : content sourcing, software development, visual composition.

Depending on the location where visuals are displayed, we take into account the light intensity coming from the screen as key parameter to create subtle and structural reflection effect on the surrounding space’s materials.

为了汲取额外经验,在无商业限制的条件下,我们从未停止过自主研发,从而来扩充自身的技艺和知识。 处于视觉传达和软件工程的交叉点上, 我们采用综合材料的创作方法:采集内容、软件开发再到最终合成。

根据视频装置所处的位置,我们将屏幕的亮度作为关键的参数,去设计与周围空间材料所产生微妙和结构性的反射效果。

Sourcing and processing original content is the foundation of our workflow, we like to compose with elements that characterize the world we live in. Urban landscape and its architecture are deep sources of inspiration for us as buildings’ facades, ornamentations and materials say a lot on human behaviors, beliefs and traditions. Related to purpose, time and climate, architectural visuals give spatial and historical dimensions to our graphic composition.

处于视觉传达和软件工程的交叉点上, 我们采用综合材料的创作方法:采集内容、软件开发再到最终合成。

根据视频装置所处的位置,我们将屏幕的亮度作为关键的参数,去设计与周围空间材料所产生微妙和结构性的反射效果。

Metalwork ornamentations found on buildings doors, a typical aspect of old Shanghai’s architecture. Here used as graphic elements for a real-time mural compositions.

房门上的金属装饰,是老上海建筑的典型。这些被采集到的,被用作为实时视频材料的图形元素。

Our work contains extensive use of typography as to represent our involvement towards local culture. The urban environment is surrounded by signs, advertisements and graffitis that informs us about design choices and spoken languages. Typography is also an important part of the identity of a place as it’s used to determine how the content is meant to be understood.

我们的作品中,广泛使用了最能体现当地文化的元素——文字。是由于在城市生活中,布满了具有设计导向和信息传达的标识、广告和标牌等。用于内容的理解,文字信息必然成为表现地方特征的重要部分。

Before affordable and powerful computers, visual effects and motion graphics used to be made with hardware equipment. Even if digital technology has improved significantly it is still interesting to process video through old analog machines. With VCRs, cathodic TVs and old mixers from the pre-digital era, we filter and alter digital images to create unique color tones and textures. Imperfections caused by bad signal quality generate abstract patterns and unexpected glitches impossible to produce digitally.

在电脑未被普及的时期,视频效果和动态图形都是由硬件设备来实现的。在如今,即使已全面进入了数字时代,然而通过旧的模拟处理器来实现动态图形仍然非常有趣。使用VCR、阴极电视和前数字时代的旧合成器,来增加滤镜和图像编辑,创作出了独特的色调和纹理。有趣的是,这完全归功于由于缺乏信号而导致的故障,发生了主流的数字技术无法实现的意外效果。

As a playful approach to content creation we also use “practical visual effects”. Filming with macro lenses, embossing powder, soap bubbles and plastic bags under water creates surprising material; reflection effects and natural looking movements. Many everyday life objects are potential material for visual effect production, the accidental variations by real world physics generate eye catching complexity and endless levels of details.

“实验性视觉”创作,也成为我们一个有趣的探索。微距拍摄,彩粉、肥皂泡或浸在水中的塑料袋等作为材料,其自然多重的光反射和超物理的动态都展现出惊人的效果。日常生活品成了动态视觉制作的潜在材料,由于自然真实的属性以及变化的偶发性,而产生了复杂且无限的细节。

We started the development of a real-time 2D and 3D software called “CMiX” to build our graphic compositions. Comprised of two standalone applications : a user-interface and a rendering engine, it is built with the VVVV toolkit and coded in C# language. CMiX runs on Windows operating system and is published open-source under the MIT licence.

为了实现图像和影像的合成,促使我们开发了名为“CMiX”的实时视觉软件。它由两个独立的应用程序所组成 :用户界面和渲染引擎。由VVVV工具包构建,C#语言编写。CMiX在Windows系统环境下运行,在MIT发布许可。

– Work with any number of layers at a time
– Per layer blend mode and opacity controls
– Mask system for each layer
– Tap and record BPM
– Adjust tempo to the beat
– Randomized animations
– Geometry object loader
– Animated geometry translation, rotation, scale
– Geometry shader effects
– Image texture file loader
– GPU video player for fast playback
– Color adjustment
– Luminosity keying
– Colorpicker
– Animated color hue, saturation and brightness
– Post effects (blur, feedback, etc.)
– Camera control with animation for 3D scenes
– Import and Export composition files
– DirectX11 rendering engine

– 多图层编辑
– 层级别混合模式和不透明度的可编辑
– 图层遮罩
– 点击记录节拍
– 节奏匹配到节拍
– 随机动画
– 加载几何对象
– 编辑物体动画:平移、旋转和缩放
– 几何着色器
– 图像纹理文件加载器
– 高速GPU视频播放器
– 色彩调控
– 亮度调节
– 颜色选择器
– 控件修改色调、饱和度、亮度
– 特效(模糊,拖影等)
– 三维动画摄像机
– 导入和导出合成文件
– DirectX11渲染引擎

CMiX allow us to blend photos, videos and 3D shapes in a very open and spontaneous manner, without thinking too precisely about the final outcome. Based on immediate feeling, we improvise with colors and animation until we reach satisfying aesthetics, a “beautiful accident”.

CMiX的开发是鼓励,开放和自发的方式对图像、视频和三维物体进行合成。而不是基于前期精准的设定,这同于表演艺术的即兴创作,不断通过调整画面的色彩​​和动画,直至出现一个满意的效果,一个“美丽的意外”。

© CloneProduction