Processamento Digital de Sinais
c/ Javascript@rafael_sps
QUEM?rafael
specht da silva
Tecnólogo emTelecomunicações
Entusiasta Javascript
“... manipulação matemática de um sinal
para modificá-loou melhorá-lo”
var numbers = [1, 2, 3, 4];
numbers.map(function (item) {
return item + 3;
});
// [4, 5, 6, 7]
Amostragem
Por que isso é importante?
var playBuffer = function (buffer) {
source = context.createBufferSource();
source.buffer = buffer;
var processor = context.createScriptProcessor(512, 2, 2);
processor.onaudioprocess = onAudioProcess;
source.connect(processor);
processor.connect(context.destination);
source.start(0, startOffset % buffer.duration);
}
var onAudioProcess = function (ev) {
inputBuffer = ev.inputBuffer;
outputBuffer = ev.outputBuffer;
inputData = inputBuffer.getChannelData(0);
outputData0 = outputBuffer.getChannelData(0);
outputData1 = outputBuffer.getChannelData(1);
for (var sample = 0, len = inputData.length; sample < len; sample++) {
outputData0[sample] = (1 - panelX) * inputData[sample];
outputData1[sample] = panelX * inputData[sample];
}
}
DEMO
Quantização
COMPRESSÃO
// Original (37)[1.1, 1.8, 2.3, 2.4, 1.9, 2.7, 3.2, 3.4, 3.1]
// Quantizado (19)
[1, 2, 2, 2, 2, 3, 3, 3, 3]
// Comprimido (15)
[1, ‘2 4’, ‘3 4’]
Imagens
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function make_base(src) {
base_image = new Image();
base_image.src = src;
base_image.onload = function(){
ctx.drawImage(base_image, 0, 0);
imageLoaded(base_image);
}
}
var img = ctx.getImageData(
0,
0,
canvas.width,
canvas.height
);
img.height // number
img.width // number
img.data // Uint8ClampedArray
r g b a r g b a
[65, 113, 130, 255, 65, 113, 130, 255, ...
Edição de Imagem
Comprimindo
var red = [];
var green = [];
var blue = [];
var alpha = [];
for (var i = 4; i < imgData.data.length; i+=4) {
red.push(imgData.data[i])
green.push(imgData.data[i+1])
blue.push(imgData.data[i+2])
alpha.push(imgData.data[i+3])
}
Diff de Imagem
Video
Diff de Video
Chroma key
“Always bet on JS”
Brendan Eich
Obrigado
@rafael_spsgithub.com/rssilva
Referências
Imagens:
http://3.bp.blogspot.com/-cjGDYx6JGw8/UY07MGGVfoI/AAAAAAAACuk/kQrzGhK9oFM/s1600/noticia44770.jpg
http://www.curtopoa.com.br/images/albuns/fotos-aereas-porto-alegre/cais_porto_alegre.jpghttp://wvwri.org/wp-content/uploads/2014/01/1391018991.jpghttps://www.flickr.com/photos/murilocardoso/6020194265https://www.flickr.com/photos/josephkennelty/9554300993https://www.flickr.com/photos/takeabreakwithme/3234099003https://www.flickr.com/photos/busiguy6/457381735/in/photolist-nQthL-oN8PmF-f29NoU-dCtU8y-pvt5S-9KoqQh-23cgG-35D6wU-ccbYUC-GqcDZ-azBSCm-p5sZXB-6ib9Wb-56Srho-hH5RD-fc6RYp-gfcqpQ-vmaEe-56NhmD-azUZWy-5Y95gU-bUu2s-eDhQLn-6YW9JX-8YQVX1-8M8pUQ-bCnrz-8AsQiz-imtb9d-7N9J1y-ogg8U-5NtoYg-4cELXj-bUoJRy-vmaEc-wGktP-fpNZBa-bGQycT-bGQaTk-5KSTpm-dqtWeP-ruZnP4-9cM7SK-qrm1Lr-7rDrFc-7QRNWn-9KEpL9-oVwQbZ-9PxYEY-pDkEs3https://www.flickr.com/photos/wdig/7176747886https://www.flickr.com/photos/poulomee/16140153959https://www.flickr.com/photos/voulez-vous/12076930664
ReferênciasProjetos:http://trackingjs.com/https://github.com/felipenmoura/js-chroma-keyhttp://fellipe.com/demos/lena-js/http://codepen.io/SitePoint/full/LVpNjp/http://dashersw.github.io/pedalboard.js/