Slide 1

Slide 1 text

Processamento Digital de Sinais c/ Javascript @rafael_sps

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Amostragem

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Por que isso é importante?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

DEMO

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Quantização

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

COMPRESSÃO

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Imagens

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Edição de Imagem

Slide 26

Slide 26 text

Comprimindo

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Diff de Imagem

Slide 29

Slide 29 text

Video

Slide 30

Slide 30 text

Diff de Video

Slide 31

Slide 31 text

Chroma key

Slide 32

Slide 32 text

“Always bet on JS” Brendan Eich

Slide 33

Slide 33 text

Obrigado @rafael_sps github.com/rssilva

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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/