From 42bf3407acd783d714da0426a63b8a029c28cabd Mon Sep 17 00:00:00 2001 From: Vlad Date: Wed, 21 Aug 2024 15:55:30 +0300 Subject: [PATCH 1/2] feat(demos): blend --- demo/blend.js | 27 +++++++++++++++++ demo/demo.js | 10 ++++++- demo/index.html | 16 +++++++++- demo/index.js | 77 ++++++++++++++++++++++++++++--------------------- 4 files changed, 95 insertions(+), 35 deletions(-) create mode 100644 demo/blend.js diff --git a/demo/blend.js b/demo/blend.js new file mode 100644 index 0000000..cc7d5e4 --- /dev/null +++ b/demo/blend.js @@ -0,0 +1,27 @@ +import { Kampos, effects } from '../index.js'; + +const media1 = document.querySelector('#video3'); +const media2 = document.querySelector('#video4'); +const target = document.querySelector('#target'); + +// create the effects/transitions we need +const alphaMask = effects.alphaMask(); + +// make sure videos are loaded and playing +prepareVideos([media1, media2]).then(() => { + const width = media1.videoWidth; + const height = media1.videoHeight; + + alphaMask.isLuminance = true; + alphaMask.mask = media2; + // it's a video so update on every frame + alphaMask.textures[0].update = true; + + // init kampos + const instance = new Kampos({ target, effects: [alphaMask] }); + + // set media source + instance.setSource({ media: media1, width, height }); + // start kampos + instance.play(); +}); diff --git a/demo/demo.js b/demo/demo.js index 9f916c3..0f4cf85 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -65,7 +65,7 @@ function startDemo(script, ids) { updatePreview( preview, doc.getValue(), - video ? video.innerHTML : '', + video ? video.innerHTML : '' ); refresh.addEventListener('click', update); @@ -154,6 +154,14 @@ const sectionScripts = { refresh: 'refresh9', }); }, + section10() { + startDemo('./blend.js', { + code: 'code10', + preview: 'preview', + video: 'videos2', + refresh: 'refresh10', + }); + }, }; insertSection('section7'); diff --git a/demo/index.html b/demo/index.html index 9be3cd3..94413cb 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,4 +1,4 @@ - + @@ -313,6 +313,17 @@ + +
diff --git a/demo/index.js b/demo/index.js index 4dc4ac4..f6a0a21 100644 --- a/demo/index.js +++ b/demo/index.js @@ -1,11 +1,11 @@ (function () { 'use strict'; - function updatePreview (iframe, example, videos) { - iframe.setAttribute('srcdoc', getIFrameHTML({example, videos})); + function updatePreview(iframe, example, videos) { + iframe.setAttribute('srcdoc', getIFrameHTML({ example, videos })); } - function getIFrameHTML ({example, videos}) { + function getIFrameHTML({ example, videos }) { return ` @@ -30,7 +30,7 @@ window.updatePreview = updatePreview; - function insertSection (id) { + function insertSection(id) { const section = document.querySelector(`#${id}`); const main = document.querySelector('main'); @@ -39,34 +39,37 @@ sectionScripts[id](); } - document.querySelector('nav') - .addEventListener('click', e => { - const id = e.target.dataset.sectionId; - insertSection(id); - }); + document.querySelector('nav').addEventListener('click', (e) => { + const id = e.target.dataset.sectionId; + insertSection(id); + }); - document.querySelector('#open-code') - .addEventListener('click', () => { - document.querySelector('#section-wrapper').classList.toggle('open'); - }); + document.querySelector('#open-code').addEventListener('click', () => { + document.querySelector('#section-wrapper').classList.toggle('open'); + }); - function startDemo (script, ids) { + function startDemo(script, ids) { const code = document.querySelector(`#${ids.code}`); const preview = document.querySelector(`#${ids.preview}`); const video = document.querySelector(`#${ids.video}`); const refresh = document.querySelector(`#${ids.refresh}`); fetch(script) - .then(resp => resp.text()) - .then(text => { + .then((resp) => resp.text()) + .then((text) => { code.value = text; const doc = CodeMirror.fromTextArea(code, { value: text, lineNumbers: true, - theme: 'dracula' + theme: 'dracula', }); - const update = () => updatePreview(preview, doc.getValue(), video ? video.innerHTML : ''); + const update = () => + updatePreview( + preview, + doc.getValue(), + video ? video.innerHTML : '' + ); refresh.addEventListener('click', update); @@ -75,47 +78,47 @@ } const sectionScripts = { - section1 () { + section1() { startDemo('./turbulence.js', { code: 'code1', preview: 'preview', video: 'videos1', - refresh: 'refresh1' + refresh: 'refresh1', }); }, - section2 () { + section2() { startDemo('./hue-fade.js', { code: 'code2', preview: 'preview', video: 'videos2', - refresh: 'refresh2' + refresh: 'refresh2', }); }, - section3 () { + section3() { startDemo('./disp.js', { code: 'code3', preview: 'preview', video: 'videos3', - refresh: 'refresh3' + refresh: 'refresh3', }); }, - section4 () { + section4() { startDemo('./duotone.js', { code: 'code4', preview: 'preview', video: 'videos4', - refresh: 'refresh4' + refresh: 'refresh4', }); }, - section5 () { + section5() { startDemo('./cellular-noise.js', { code: 'code5', preview: 'preview', - refresh: 'refresh5' + refresh: 'refresh5', }); }, @@ -124,7 +127,7 @@ code: 'code6', preview: 'preview', video: 'videos2', - refresh: 'refresh6' + refresh: 'refresh6', }); }, @@ -133,7 +136,7 @@ code: 'code7', preview: 'preview', video: 'none', - refresh: 'refresh7' + refresh: 'refresh7', }); }, @@ -142,7 +145,7 @@ code: 'code8', preview: 'preview', video: 'videos5', - refresh: 'refresh8' + refresh: 'refresh8', }); }, @@ -151,9 +154,17 @@ code: 'code9', preview: 'preview', video: 'videos2', - refresh: 'refresh9' + refresh: 'refresh9', }); - } + }, + section10() { + startDemo('./blend.js', { + code: 'code10', + preview: 'preview', + video: 'videos2', + refresh: 'refresh10', + }); + }, }; insertSection('section7'); From c6b373e2e473bb4b3ff6683f5a06385087eb0874 Mon Sep 17 00:00:00 2001 From: Vlad Date: Wed, 21 Aug 2024 16:00:37 +0300 Subject: [PATCH 2/2] x --- demo/blend.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/demo/blend.js b/demo/blend.js index cc7d5e4..847b01f 100644 --- a/demo/blend.js +++ b/demo/blend.js @@ -5,20 +5,21 @@ const media2 = document.querySelector('#video4'); const target = document.querySelector('#target'); // create the effects/transitions we need -const alphaMask = effects.alphaMask(); +const blend = effects.blend({ + mode: 'screen', +}); // make sure videos are loaded and playing prepareVideos([media1, media2]).then(() => { const width = media1.videoWidth; const height = media1.videoHeight; - alphaMask.isLuminance = true; - alphaMask.mask = media2; + blend.image = media2; // it's a video so update on every frame - alphaMask.textures[0].update = true; + blend.textures[0].update = true; // init kampos - const instance = new Kampos({ target, effects: [alphaMask] }); + const instance = new Kampos({ target, effects: [blend] }); // set media source instance.setSource({ media: media1, width, height });