As novas APIs da web tem possibilitado grandes feitos para o Javascript. Essa palestra aborda tratamento de sinais que vão desde a criação de filtros de imagem, passando por distorções de áudio (e pedais de guitarra!), até compressão de streams! Vamos falar sobre as barreiras que a linguagem quebra diariamente!

1. Processamento
Digital de Sinais
c/ Javascript
@rafael_sps

2. QUEM?
rafael
specht da silva
Tecnólogo em
Telecomunicações
Entusiasta Javascript

3. “... manipulação
matemática de um sinal
para modificá-lo
ou melhorá-lo”

4. var numbers = [1, 2, 3, 4];
numbers.map(function (item) {
return item + 3;
});
// [4, 5, 6, 7]

6. Amostragem

10. Por que
isso é
importante?

11. 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);
}

12. 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];
}
}

13. DEMO

16. Quantização

18. COMPRESSÃO

19. // 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’]

20. Imagens

21. 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);
}
}

22. var img = ctx.getImageData(
0,
0,
canvas.width,
canvas.height
);

23. 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, ...

25. Edição de Imagem

26. Comprimindo

27. 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])
}

28. Diff de Imagem

29. Video

30. Diff de Video

31. Chroma key

32. “Always
bet on JS”
Brendan Eich

33. Obrigado
@rafael_sps
github.com/rssilva

34. 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.jpg
http://wvwri.org/wp-content/uploads/2014/01/1391018991.jpg
https://www.flickr.com/photos/murilocardoso/6020194265
https://www.flickr.com/photos/josephkennelty/9554300993
https://www.flickr.com/photos/takeabreakwithme/3234099003
https://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-pDkEs3
https://www.flickr.com/photos/wdig/7176747886
https://www.flickr.com/photos/poulomee/16140153959
https://www.flickr.com/photos/voulez-vous/12076930664

35. Referências
Projetos:
http://trackingjs.com/
https://github.com/felipenmoura/js-chroma-key
http://fellipe.com/demos/lena-js/
http://codepen.io/SitePoint/full/LVpNjp/
http://dashersw.github.io/pedalboard.js/