Digital Signal Processing w/

Javascript@rafael_sps

Who?rafael

specht da silva

Telecommunication Technologist

Javascript enthusiast

“... mathematical manipulation of an

information signal to modify or improve it”

Sampling

Why this isimportant?

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

Quantization

COMPRESS

// Original (37)[1.1, 1.8, 2.3, 2.4, 1.9, 2.7, 3.2, 3.4, 3.1]

// Quantized (19)

[1, 2, 2, 2, 2, 3, 3, 3, 3]

// Compressed (15)

[1, ‘2 4’, ‘3 4’]

Images

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

Compressing

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

}

Image Diff

Video

Video Diff

“Always bet on JS”

Brendan Eich

Thank you

@rafael_spsgithub.com/rssilva

References

Images:

https://farm7.staticflickr.com/6075/6068692939_3fa9b50838_b.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

ReferencesProjects:http://trackingjs.com/https://github.com/felipenmoura/js-chroma-keyhttp://fellipe.com/demos/lena-js/http://dashersw.github.io/pedalboard.js/