Real-time Graphic Composition


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.


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”.


© CloneProduction