Tweet
Tweet

Slide 1

Slide 1 text

Signal Processing w/ JavaScript @rafael_sps

Slide 2

Slide 2 text

Who? rafael specht da silva Telecommunication Technologist Javascript Enthusiast

Slide 3

Slide 3 text

BrazilJS Conf

Slide 4

Slide 4 text

Nodebots Day Porto Alegre

Slide 5

Slide 5 text

“... mathematical manipulation of a signal to modify it or improve it”

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Sampling

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Why this is important?

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

Stereo

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Images

Slide 17

Slide 17 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 18

Slide 18 text

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

Slide 19

Slide 19 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 20

Slide 20 text

COMPRESSION

Slide 21

Slide 21 text

// Run Length Encoding (RLE) // Original (19) [1, 2, 2, 2, 2, 3, 3, 3, 3] // Compressed (15) [1, ‘2 4’, ‘3 4’]

Slide 22

Slide 22 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 23

Slide 23 text

Video Compress

Slide 24

Slide 24 text

Video Diff

Slide 25

Slide 25 text

Chroma key

Slide 26

Slide 26 text

Boundaries

Slide 27

Slide 27 text

Turret

Slide 28

Slide 28 text

Theremin

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Javascript is awesome

Slide 31

Slide 31 text

Thanks @rafael_sps github.com/rssilva

Slide 32

Slide 32 text

References Images: 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 33

Slide 33 text

References Projects: 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/ http://femurdesign.com/theremin/