“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:
Slide 6
Slide 6 text
Nem sempre é fácil entender o significado prático do
que estamos fazendo
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Porém lidamos com várias APIs e usamos
conceitos sem perceber
Slide 9
Slide 9 text
M = P * (1 + i)t
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Canvas
Slide 12
Slide 12 text
Reproduzindo o gráfico do juro composto feito no
google sheets...
for (let i = 0; i < xAxis.length; i++) {
const value = AMOUNT * Math.pow((1 + TAX/100), xAxis[i])
ctx.lineTo(i, value)
}
Slide 19
Slide 19 text
for (let i = 0; i < xAxis.length; i++) {
const value = AMOUNT * Math.pow((1 + TAX/100), xAxis[i])
ctx.lineTo(i, value)
}
Slide 20
Slide 20 text
ctx.stroke()
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Problema: o ponto (0, 0) do canvas é em cima à
esquerda
Solução: diminuímos os valores da altura
Slide 23
Slide 23 text
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)
}
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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)
}
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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})
}
E se usarmos a informação de uma imagem para gerar o
seu contorno em SVG?
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
O passo de plotar os pontos no SVG como círculo foi feito
mais para debug
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
Porque como pode-se ver no resultado, haviam alguns
bugs (e ainda existem)
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
Próximo passo inclui eliminar pontos redundantes na
mesma reta através de determinantes
Slide 85
Slide 85 text
If you are more fortunate
than others, build a longer
table not a taller fence