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/