Skip to content

Instantly share code, notes, and snippets.

@rectalogic

rectalogic/transition-PushRight-4x3-middle.mlt

Last active April 19, 2016 15:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rectalogic/9d1b83f7acce22b02cac72ad43c4d46f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rectalogic/9d1b83f7acce22b02cac72ad43c4d46f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
transition-push.html
<html>
<head>
<style type="text/css">
body, html {
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="qrc:/webvfx/scripts/easing.js"></script>
<script type="text/javascript">
Number.prototype.mod = function(n) {
return ((this % n) + n) % n;
}
function MotionBlurImage() {
this.x = 0;
this.y = 0;
this.image = new Image();
}
MotionBlurImage.prototype.draw = function (context) {
context.drawImage(this.image,
this.x * context.canvas.width,
this.y * context.canvas.height);
}
function Push() {
this.context = document.getElementById("canvas").getContext("2d");
this.motionBlur = webvfx.getNumberParameter("MotionBlur");
if (this.motionBlur < 1)
this.motionBlur = 1;
this.historyIndex = 0;
this.sourceMotionBlurImages = new Array(this.motionBlur);
this.targetMotionBlurImages = new Array(this.motionBlur);
for (var i = 0; i < this.motionBlur; i++) {
this.sourceMotionBlurImages[i] = new MotionBlurImage();
this.targetMotionBlurImages[i] = new MotionBlurImage();
}
this.positionEasing = new WebVfx.Easing.Exponential(0, 1, 1);
this.alphaEasing = new WebVfx.Easing.Exponential(0.6, -0.55, 1);
switch (webvfx.getStringParameter("Direction")) {
case "Up":
this.positionImages = function (time, sourceImage, targetImage) {
sourceImage.x = 0;
sourceImage.y = -time;
targetImage.x = 0;
targetImage.y = 1 - time;
}
break;
case "Down":
this.positionImages = function (time, sourceImage, targetImage) {
sourceImage.x = 0;
sourceImage.y = time;
targetImage.x = 0;
targetImage.y = -(1 - time);
}
break;
case "Right":
this.positionImages = function (time, sourceImage, targetImage) {
sourceImage.x = time;
sourceImage.y = 0;
targetImage.x = -(1 - time);
targetImage.y = 0;
}
break;
case "Left":
default:
this.positionImages = function (time, sourceImage, targetImage) {
sourceImage.x = -time;
sourceImage.y = 0;
targetImage.x = 1 - time;
targetImage.y = 0;
}
break;
}
}
Push.prototype.render = function (time) {
time = this.positionEasing.easeOut(time);
var sourceImage = this.sourceMotionBlurImages[this.historyIndex];
webvfx.getImage("sourceImage").assignToHTMLImageElement(sourceImage.image);
var targetImage = this.targetMotionBlurImages[this.historyIndex];
webvfx.getImage("targetImage").assignToHTMLImageElement(targetImage.image);
this.positionImages(time, sourceImage, targetImage);
// Draw current images with alpha 1, before we start easing alpha
this.context.globalAlpha = 1;
targetImage.draw(this.context);
sourceImage.draw(this.context);
for (var i = 1; i < this.motionBlur; i++) {
var index = (this.historyIndex - i).mod(this.motionBlur);
this.context.globalAlpha = this.alphaEasing.easeOut(i / this.motionBlur);
this.targetMotionBlurImages[index].draw(this.context);
this.sourceMotionBlurImages[index].draw(this.context);
}
this.historyIndex = (this.historyIndex + 1).mod(this.motionBlur);
}
function init() {
resize();
var push = new Push();
webvfx.renderRequested.connect(push, Push.prototype.render);
webvfx.imageTypeMap = { "sourceImage" : webvfx.SourceImageType,
"targetImage": webvfx.TargetImageType };
webvfx.readyRender(true);
}
function resize() {
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener("resize", resize, false);
window.addEventListener("load", init, false);
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
Raw
transition-PushRight-4x3-middle.mlt
<?xml version='1.0' encoding='UTF-8'?>
<mlt>
<producer id='background'>
<property name='mlt_type'>producer</property>
<property name='mlt_service'>colour</property>
<property name='colour'>0x000000ff</property>
</producer>
<producer id='producer-red-4x3.mov-0'>
<property name='mlt_type'>producer</property>
<property name='resource'>media/red-4x3.mov.r0.lossless.mov</property>
</producer>
<producer id='producer-blue-4x3.mov-2'>
<property name='mlt_type'>producer</property>
<property name='resource'>media/blue-4x3.mov.r0.lossless.mov</property>
</producer>
<playlist id='playlist-background'>
<entry in='0' out='419' producer='background'/>
</playlist>
<playlist id='playlist-clip-producer-red-4x3.mov-0'>
<entry in='0' out='299' producer='producer-red-4x3.mov-0'/>
</playlist>
<playlist id='playlist-clip-producer-blue-4x3.mov-2'>
<entry in='0' out='209' producer='producer-blue-4x3.mov-2'/>
</playlist>
<playlist autoclose='1' id='playlist-A'>
<entry producer='playlist-clip-producer-red-4x3.mov-0'/>
</playlist>
<playlist autoclose='1' id='playlist-B'>
<blank length='210'/>
<entry producer='playlist-clip-producer-blue-4x3.mov-2'/>
</playlist>
<tractor global_feed='1'>
<track producer='playlist-background'/>
<track producer='playlist-A'/>
<track producer='playlist-B'/>
<transition in='210' out='299'>
<property name='a_track'>1</property>
<property name='b_track'>2</property>
<property name='mlt_type'>transition</property>
<property name='mlt_service'>webvfx</property>
<property name='resource'>/test/webvfx/transition-push.html</property>
<property name='Direction'>Right</property>
<property name='MotionBlur'>5</property>
</transition>
<transition>
<property name='a_track'>1</property>
<property name='b_track'>2</property>
<property name='mlt_type'>transition</property>
<property name='always_active'>1</property>
<property name='mlt_service'>mix</property>
<property name='combine'>1</property>
</transition>
</tractor>
<profileinfo display_aspect_den='240' display_aspect_num='320' frame_rate_den='1' frame_rate_num='30' height='240' progressive='1' sample_aspect_den='1' sample_aspect_num='1' width='320'/>
</mlt>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment