Processamento Digital de Sinais com Javascript - RSJS 2015
-
Upload
rafael-specht-da-silva -
Category
Software
-
view
85 -
download
5
Transcript of Processamento Digital de Sinais com Javascript - RSJS 2015
![Page 1: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/1.jpg)
Processamento Digital de Sinais
c/ Javascript@rafael_sps
![Page 2: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/2.jpg)
QUEM?rafael
specht da silva
Tecnólogo emTelecomunicações
Entusiasta Javascript
![Page 3: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/3.jpg)
“... manipulação matemática de um sinal
para modificá-loou melhorá-lo”
![Page 4: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/4.jpg)
var numbers = [1, 2, 3, 4];
numbers.map(function (item) {
return item + 3;
});
// [4, 5, 6, 7]
![Page 5: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/5.jpg)
![Page 6: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/6.jpg)
Amostragem
![Page 7: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/7.jpg)
![Page 8: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/8.jpg)
![Page 9: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/9.jpg)
![Page 10: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/10.jpg)
Por que isso é importante?
![Page 11: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/11.jpg)
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);
}
![Page 12: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/12.jpg)
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];
}
}
![Page 13: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/13.jpg)
DEMO
![Page 14: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/14.jpg)
![Page 15: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/15.jpg)
![Page 16: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/16.jpg)
Quantização
![Page 17: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/17.jpg)
![Page 18: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/18.jpg)
COMPRESSÃO
![Page 19: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/19.jpg)
// 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’]
![Page 20: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/20.jpg)
Imagens
![Page 21: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/21.jpg)
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);
}
}
![Page 22: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/22.jpg)
var img = ctx.getImageData(
0,
0,
canvas.width,
canvas.height
);
![Page 23: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/23.jpg)
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, ...
![Page 24: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/24.jpg)
![Page 25: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/25.jpg)
Edição de Imagem
![Page 26: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/26.jpg)
Comprimindo
![Page 27: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/27.jpg)
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])
}
![Page 28: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/28.jpg)
Diff de Imagem
![Page 29: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/29.jpg)
Video
![Page 30: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/30.jpg)
Diff de Video
![Page 31: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/31.jpg)
Chroma key
![Page 32: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/32.jpg)
“Always bet on JS”
Brendan Eich
![Page 33: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/33.jpg)
Obrigado
@rafael_spsgithub.com/rssilva
![Page 34: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/34.jpg)
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
![Page 35: Processamento Digital de Sinais com Javascript - RSJS 2015](https://reader030.fdocument.pub/reader030/viewer/2022013122/55be86fcbb61eb245b8b4691/html5/thumbnails/35.jpg)
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/