JS && Matemática - RSJS 2017

A matemática se faz presente no nosso dia-a-dia e a usamos empiricamente muitas vezes. Essa palestra aborda exemplos usando as APIs do browser! Desde Canvas até Web Audio passando por animações de CSS entenda como conhecer senos e cossenos é importante!

Transcript

1. JS && MATEMÁTICA Rafael Silva - @rafael_sps
2. JS <3 Tele comu nicações
3. Full-Stack Engineer na Fooji
4. Mas eu PRECISO disso?
5. “O que a escola deveria ensinar: - Declarar IR - Escriturar apê - Educação financeira - Costura - Culinária - Elétrica O que a escola ensina: - Bháskara” Alguém no twitter:
6. Nem sempre é fácil entender o significado prático do que estamos fazendo
8. Porém lidamos com várias APIs e usamos conceitos sem perceber
9. M = P * (1 + i)t
11. Canvas
12. Reproduzindo o gráfico do juro composto feito no google sheets...
13. const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d')
14. const xAxis = [] for (let i = 0; i <= 24; i++) { xAxis.push(i) }
15. const xAxis = [] for (let i = 0; i <= 24; i++) { xAxis.push(i) } // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, ...]
16. ctx.beginPath() ctx.strokeStyle = '#1aa6b7' ctx.lineWidth = 5
17. const AMOUNT = 100 const TAX = 10
18. for (let i = 0; i < xAxis.length; i++) { const value = AMOUNT * Math.pow((1 + TAX/100), xAxis[i]) ctx.lineTo(i, value) }
19. for (let i = 0; i < xAxis.length; i++) { const value = AMOUNT * Math.pow((1 + TAX/100), xAxis[i]) ctx.lineTo(i, value) }
20. ctx.stroke()
22. Problema: o ponto (0, 0) do canvas é em cima à esquerda Solução: diminuímos os valores da altura
23. const { height, width } = ctx.canvas for (let i = 0; i < xAxis.length; i++) { const value = height - AMOUNT * Math.pow((1 + TAX/100), xAxis[i]) ctx.lineTo(i, value) }
25. Problema: o eixo X está usando valores em pixels e não considerando a largura do canvas Solução: criamos uma escala onde cada valor de X é uma fatia da largura
26. const sliceSize = width / (xAxis.length - 1) for (let i = 0; i < xAxis.length; i++) { const value = AMOUNT * Math.pow((1 + TAX/100), xAxis[i]) const y = height - value const x = sliceSize * i ctx.lineTo(x, y) }
28. Problema: o eixo Y usa valores em pixels e nosso máximo ultrapassa isso Solução: criamos uma escala de Y levando em conta que o valor máximo como a altura do canvas
29. const sliceSize = width / (xAxis.length - 1) const points = [] let max = null for (let i = 0; i < xAxis.length; i++) { const value = AMOUNT * Math.pow((1 + TAX/100), xAxis[i]) const x = sliceSize * i max = value > max ? value : max points.push({x, value}) }
30. points.forEach(({x, value}) => { const scaledY = (value / max) * height ctx.lineTo(x, scaledY) })
31. points.forEach(({x, value}) => { const scaledY = (value / max) * height ctx.lineTo(x, height - scaledY) })
33. Ótimo! 30 slides e temos uma linha verde (ou azul?) :P
34. SVG
35. Com uma rápida adaptação, podemos fazer o mesmo com SVG
36. let d = '' points.forEach(({x, values}, pointIndex) => { })
37. points.forEach(({x, values}, pointIndex) => { let scaledY = (values[index] / rangeSize) * height scaledY += Math.abs(min) / rangeSize * height if (pointIndex === 0) { d += `M${x} ${height - scaledY} ` } d += `L${x} ${height - scaledY} ` })
38. let path = `<path fill="none" stroke="${colors[index]}" stroke-width="5" d="${d}"/>` el.innerHTML += path
39. a n = a 1 * qn - 1
40. M = P * (1 + i)t a n = a 1 * qn - 1
41. Juros compostos podem ser escritos na forma de Progressões Geométricas
43. Uma PG com razão √2 e quadrados com o mesmo centro e ângulos alternados em 45º
44. const initial = 10 for (let i = 0; i < 20; i += 1) { const side = initial * Math.pow(Math.sqrt(2), i) const angle =(counter % 2) * 45 plotSquare(width/2, height/2, side, angle) counter++ }
45. Animações
46. Se compreendemos gráficos fica mais fácil de visualizar dados. Ou mesmo animações de CSS!
48. AUDIO
53. Uma onda de seno multiplicada por uma exponencial decrescente parece muito uma batida de bateria!
54. const a = 1 * Math.exp(-tAxis[i]/5) const b = 1 * Math.sin(tAxis[i])
56. Quando aumentamos a frequência mantendo o resto, parece uma pistola laser!
57. const audioContext = new AudioContext()
58. const osc = audioContext.createOscillator() const gainOsc = audioContext.createGain() osc.type = type const endTime = audioContext.currentTime + 0.5 gainOsc.gain.setValueAtTime(1, audioContext.currentTime) gainOsc.gain.exponentialRampToValueAtTime(0.0001, endTime) osc.frequency.setValueAtTime(freq, audioContext.currentTime) osc.frequency.exponentialRampToValueAtTime(0.0001, endTime)
59. osc.connect(gainOsc) gainOsc.connect(analyser) analyser.connect(audioContext.destination) osc.start(audioContext.currentTime) osc.stop(audioContext.currentTime + 0.5)
60. Quando fazemos o mesmo processo com ruído soa como um cymbal
62. const node = audioContext.createBufferSource() const { sampleRate } = audioContext const buffer = audioContext.createBuffer(1, 4096, sampleRate) const data = buffer.getChannelData(0) const gainOsc = audioContext.createGain() for (var i = 0; i < 4096; i++) { data[i] = Math.random() / 2 }
63. const endTime = audioContext.currentTime + 0.5 gainOsc.gain.exponentialRampToValueAtTime(0.0001, endTime) node.buffer = buffer
65. A transformada de rápida de Fourier (FFT) nos permite visualizar áudio no domínio frequência
69. FILTROS
70. Considerando que podemos adquirir dados de uma imagem usando canvas...
71. E os dados de cada cor são arrays como os arrays de áudio, podemos usar web audio api para filtrar imagens!
72. const canvasOrigin = document.getElementById('canvas') const context = canvasOrigin.getContext('2d')
73. const baseImage = new Image() baseImage.src = 'lena.jpg' baseImage.onload = () => { context.drawImage(baseImage, 0, 0, width, height) }
74. http://fellipe.com/demos/lena-js/
76. CANVAS -> SVG
77. E se usarmos a informação de uma imagem para gerar o seu contorno em SVG?
79. 1. Aumentamos o contraste 2. Filtramos os pontos onde há uma mudança brusca (de 255 para 0, no caso) 3. Plotamos os pontos como círculos no SVG 4. Criamos retas entre esses pontos
80. O passo de plotar os pontos no SVG como círculo foi feito mais para debug
82. Porque como pode-se ver no resultado, haviam alguns bugs (e ainda existem)
84. Próximo passo inclui eliminar pontos redundantes na mesma reta através de determinantes
85. If you are more fortunate than others, build a longer table not a taller fence
86. Obrigado! @rafael_sps