Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Processamento Digital de Sinais com Javascript ...

Processamento Digital de Sinais com Javascript - RSJS 2015

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!

Rafael Specht da Silva

May 17, 2015
Tweet

More Decks by Rafael Specht da Silva

Other Decks in Technology

Transcript

  1. var numbers = [1, 2, 3, 4]; numbers.map(function (item) {

    return item + 3; }); // [4, 5, 6, 7]
  2. 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); }
  3. 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]; } }
  4. // 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’]
  5. 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); } }
  6. 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, ...
  7. 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]) }