18 de jan. de 2017

Física Dinâmica básica em uma aplicação JavaFX

Sabe o que é bacana? Programar para se divertir. Algumas das melhores formas de se fazer isso é criando jogos, como o Pong, ou brincando com a natureza, como mostra o livro Nature Of Code.
Nessa postagem iremos mostrar os primeiros capítulos desse livro aplicados em um mundo JavaFX. O que iremos mostar:

  • Gravidade
  • Aplicando outras forças

Claro que o mundo da física e da matemática são muito maiores do que isso, mas espero que a atual aplicação inspire o leitor a criar as suas próprias coisas.


Sobre a app de teste


o modelo de nossa aplicação é o já tão conhecido Canvas com uma engine: O Canvas é uma tela de desenho, para desenharmos nele continuamente usamos uma Timeline, o famoso loop.

As coisas desenhadas em um canvas precisam de um X e Y e dentro do loop atualizamos o x e o y de acordo com os acontecimentos e com a entrada do usuário. Para mantermos referëncias aos valores de X e Y, usamos uma classe do JavaFX chamada javafx.geometry.Point2D.

Tendo isso em mente, vamos entender alguns conceitos usados na nossa aplicação.

Conceitos


Vetor: Um vetor na nossa aplicação é uma posicação X e Y, sendo que a direção do vetor dependerá dos sinais X e Y. Na matemática o vetor é um pouco diferente, mas as ideias são semelhantes 
Velocidade: É a variação da posição de um corpo no espaço em um dado período. No nosso código a velocidade se aplica continuamente a posição do corpo na execução do loop da aplicação;
Aceleração: É a variação da velocidade com o passar do tempo, que, no nosso caso, é determinado também pelo loop;
Massa: É a quantidade de matéria que tem um corpo.

Pois bem, na nossa aplicação o corpo é definido por uma bolinha. Aplicando os conceitos acima, o que temos é uma bolinha parada no meio da tela. Veja:


Muito sem graça, né? Nada acontece, feijoada, com essa aplicação. O motivo é só um, não há forças aplicadas sobre o corpo. Mas o que é uma força. De acordo com Isaac Newton, força é qualquer agente externo que modifica o movimento de um corpo livre ou causa deformação num corpo fixo.  Não, não estamos falando da força dos Jedi...
Na verdade, uma força está sendo aplicada sobre o seu corpo nesse exato momento: a Gravidade. A gravidade te puxa para o centro da terra e é por isso que estamos sempre no chão. A nossa bolinha ali em cima está parada, não tem gravidade no mundo dos pixels. E com essa aplicação sem graça, nós já podemos entender a primeira lei de Newton: um corpo em repouso permanece em repouso e um corpo em movimento permanece em movimento a menos que sofra efeito de alguma força. Ou seja, essa bolinha está parada aí e é aí que ela vai ficar, exceto se tiver alguma força que faça ela se mover!
Podemos agora modificar nosso programa para mudar isso, podemos aplicar um vetor de gravidade na bolinha.  Importante dizer que limitamos a bolinha as bordas da aplicação, assim, toda vez que a bolinha chega nas bordas da tela, simplesmente invertemos a direção do vetor de velocidade.

O vetor de gravidade "puxa pra baixo", logo, ele precisa ter um X=0 e um Y positivo, vamos colocar 0.1. O resultado é uma bolinha feliz pulando:



Que bacana, né? Agora vamos colocar outra força: o vento. O vento é uma força simples de se colocar e  vamos dizer que o vento bata da esquerda para a direita, precisamos de um vetor que tenha essa direção(X=algum número positivo, Y=0). O resultado é como se segue:


Note que a bolinha agora fica indo para o canto, bate na "parede" e quando vai voltar, o vento não a deixa!

Notem que até agora não falamos da massa. Pois bem, a bolinha tem uma massa e de acordo com essa massa, a força é modificada, afinal, se bate um vento no seu quarto algumas coisas leves (um copo de plástico, por exemplo) pode voar, mas não o seu computador e nem você e isso acontece por que as coisas têm massa diferente. Para visualizar isso, colocamos mais 5 bolinhas na tela com massas diferentes. Veja o resultado:



A aplicação de forças deve respeitar a segunda lei de Newton que definiu a fórmula que diz que força é igual massa vezes aceleração. Ao aplicarmos a força no código, dividimos ela pela massa e adicionamos à aceleração.

No vídeo abaixo você vai notar que a velocidade das bolinhas é diferente e isso acontece por causa da massa delas. Como o vento é constante, tudo acaba se movendo, mas isso muda quando adicionamos a força de fricção (atrito, ótima explicação pode ser encontrada nesse vídeo). A fricção faz com que haja a perda de movimento de acordo com o tempo, logo, o que acontece uns segundos após rodar a aplicação com o adicional da fricção é o seguinte:



Vou parar por aqui pois o livro mencionado no início do post tem quase 500 páginas e daria pra continuar aplicando os conceitos em JavaFX até o livro terminar. Veja um pequeno vídeo da aplicação mostrada acima


Conclusão


Falamos um pouco sobre física e também programamos. Quem sabe um dia as aulas nas escolas brasileiras não serão assim? Minha missão foi concluída se você está lendo essa linha empolgado e até considerando fazer seus testes localmente. Claro que o que esboçamos é um exemplo muito simples e trata os conceitos de forma muito superficial, mas, mesmo assim, é muito interessante ver isso em ação.

O código total da aplicação pode ser encontrado nosso github.


16 de jan. de 2017

O jogo "Pong" em JavaFX usando 90 linhas de código



Nesse post eu vou compartilhar uma versão do jogo Pong com vocês que usa somente 90 linhas de código.

Para executar o jogo, baixe o código abaixo e salve em um arquivo Pong.java e, considerando que você tenha Java 8, rode:

 javac Pong.java

Compila o código Java

java Pong

Roda o jogo.

O código funciona com o play 1 (o retângulo do lado esquerdo) seguindo o mouse e o outro tentando se posicionar de acordo com a bolinha. Desenhamos o jogo em um canvas e usamos uma timeline como "engine". Quando a bolinha ultrassa os limites laterais da tela, resetamos o jogo e damos o ponto para quem está do outro lado. Quando a bolinha ultrapassa os limites, mas extamente na posição de um dos players, trocamos a sua direção - mesma coisa quando a bolinha ultrapassa o topo ou a parte de baixo.

Veja o código!


Usando JavaFX para mostrar dados de repasse do governo federal

JavaFX é uma ótima plataforma para criar aplicações visuais. Recentemente criamos uma aplicação em JavaFX que permitiu visualizar os repasses do governo federal com facilidade e até uma postagem sobre isso foi escrita em um blog sobre dados abertos. Com essa aplicação fica muito fácil visualizar os dados de repasse sem ter que vascular o portal da transparência. Veja:


É possível também ver uma pequena animação da evolução dos repasses:



O código da aplicação está no meu github e para executa-la primeiro você precisa instalar o DrawingFX e em seguida você pode importar essa aplicação na sua IDE para executar a mesma (em breve mais melhorias na forma de execução serão feitas).



13 de jan. de 2017

Algoritmo Genético e um exemplo com JavaFX

Saindo do labirinto usando algoritmo genético




Um dos tópicos mais fascinantes no mundo da ciência da computação é Inteligência Artificial (IA). Uma sub-divisão no mundo da inteligência artificial são aqueles algoritmos que são baseados na natureza e nesse grupo temos os Algoritmos Genéticos.


Algoritmos Genéticos



Eu não irei me aprofundar nesse tópico, mas há ótimos materiais na internet.  A ideia geral é um algoritmo que leve em conta, dado um indíviduo, ele:

  • Tenha variação genética em diversos indivíduos (organismos também se aplica aqui);
  • Possa se reprodução e levar o código genético para suas gerações;
  • A cada reprodução haja ligeiras variações genéticas;
  • Uma "nota" para saber quão aquele indíviduo está adaptado ao ambiente atual.

Isso tudo é parte da teoria mais que comprovada de Darwin. O nome "teoria" confunde algumas pessoas e isso é incrível, acham que por ser uma teoria, é algo não confiável, mas interessantemente todas as evidências validam essa teoria desde que ela foi publicada! Sobre IA e Evolução, Pirulla fala um pouco disso no vídeo abaixo.



Para saber mais sugiro a página da Wikipédia sobre o assunto e o vídeo de uma aula do MIT e, de novo, um vídeo do Shiffman.







Algoritmos genéticos usando Java


Para colocar isso em prática usando em Java você pode desenvolver o seu próprio mini framework com DNA, Genes, cromossomos, algoritmos de mutação ou cruzamento e algoritmos de seleção natural, mas pra que reinventar a roda? No mundo Java temos algumas bibliotecas já conhecidas nesse meio, destaco a JGAP, um pouco antiga, e a moderna Jenetics, que usa Java 8 e os novos conceitos como Lambda, Method Reference, Stream, etc. O guia do usuário da API Jenetics é muito bom, cobre quase todas as classes que são usadas durante a programação. Mas ainda senti falta de exemplos mais claros, por isso, antes de tentar algo visual com JavaFX, eu criei 3 pequenas aplicações.


Seleciona o conjunto de double que tem a maior soma de algarismos; Esse é um exemplo besta, mas que mostra algumas classes importantes da API. A ideia é: dado um conjunto de double, qual tem a maior soma dos algarismos? Veja o código.
CODE

A saída é algo assim:

[[[85],[23],[62]]], sum 26
[[[42],[5],[53]]], sum 19
[[[4],[82],[14]]], sum 19
[[[17],[99],[41]]], sum 31
[[[32],[16],[23]]], sum 17
[[[15],[85],[38]]], sum 30
[[[54],[30],[51]]], sum 18
[[[31],[20],[76]]], sum 19
[[[88],[63],[69]]], sum 40
[[[52],[11],[6]]], sum 15
 (Um monte de passo intermediário)
[[[88],[97],[97]]], sum 48
[[[88],[97],[97]]], sum 48
[[[88],[29],[25]]], sum 34
[[[88],[97],[95]]], sum 46
[[[88],[97],[97]]], sum 48
Selected: [[[88],[97],[97]]]. Sum: 48


Veja que podemos resolver ele ser usar algoritmo genético, mas no código acima você pode começar a entender a pegada da API: Cromossomos tem um conjunto de genes, os genes são os objetos reais da sua aplicação (um número, uma String, um objeto do tipo pessoa...), genotype é o conjunto de cromossomos e criamos dois métodos importantes: um gera valores para serem trabalhados pela API (no exemplo acima usamos um cromossomo da própria API e ele tem o método pra gerar: Genotype.of(LongChromosome.of(1, 100, 3));) e o método que recebe o Genotype para que você possa trabalhar nele e retornar um ranking ou um número que indica quanto aquele genotype está adaptado ao ambiente (ver o método fitness).


Escrevendo uma frase: Se você conseguir 1 milhão de macacos e falar pra eles darem tapas no teclado de 1 milhão de computadores, qual seria a chance desse texto sair uma música da banda Queen? Raras, muito raras. Um programa com algoritmo genético pode chegar a esse resultado muito mais rápido e é claro que esse é somente outro exemplo. Veja abaixo um programa com Jenetics que consegue escrever uma frase que você escrever usando evolução:




Escape do Labirinto: Esse é um exemplo um pouco mais elaborado. Nele temos um pequeno labirinto gerado e a função do algoritmo genético é evoluir o conjunto inicial de direções do labirinto para encontrar uma saída. Bem, esse código é um pouco extenso, assim peço para vocês verem no meu github. A ideia é ter genes que são customizados, do tipo Direction  e esses genes são uma possível saída para o labirinto, representado pela classe Maze. Incrivelmente, com algoritmo genético, as direções iniciais são mutadas de forma que conseguem encontrar uma saída do labirinto! Vejam uma tela:



Como esse é um blog sobre JavaFX, foi criada uma aplicação que desenha o labirinto e permite que você teste parâmetros para rodar o algoritmo! O código dele também é extenso e ninguém vai ler um blog com dezenas de linhas de código! Então, caso queiram estudar mais, aqui vão os passos para executar a aplicação (precisa de Maven e Java 8):


$ mvn clean package exec:java -Dexec.mainClass=org.fxapps.genetics.mazefx.MazeFXApp

O resultado pode ser visto no vídeo abaixo:

10 de jan. de 2017

Simples Relógio com JavaFX

O participante Welington Pietronero, do grupo JavaFX-BR, pediu um exemplo de um label que mostra as horas com JavaFX. Criamos um simples relógio:


A criação foi bem simples, segue aqui uma explicação rápida do código e em seguida o próprio código:


  • O texto vai ficar em um Label, no programa chamamos ele de lblRelogio;
  • Para transformar o objeto data em texto, precisamos de um SimpleDateFormat. Essa é uma classe bem bacana e ao criarmos uma instância da mesma, passamos uma String que representará a forma que a hora/data será representada. Há uma tabela na documentação dessa classe que mostra como podemos formatar a nossa data, no nosso caso usamos: hh:mm:ss a - que resulta no formato mostrado acima. Claro que há uma nova API de datas no Java 8, mas a API antiga ainda é muito usada!
  • No método start (se não entende o que faz esse método, por favor, veja esse post) criamos uma Font para o lblRelogio. Essa fonte aceita parâmetros que definem se a fonte ficará em negrito ou alguma variação de negrito ou se a fonte vai ficar em itálico ou normal. Lembrando que é possível usar CSS também;
  • Por fim, a chave do nosso código é a Timeline, que executa os KeyFrames no tempo passado como parâmetro. Um KeyFrame terá uma ação associada a ele e no nosso caso simplesmente chamamos o método atualizaHoras. A timeline executará "eternamente" o KeyFrame a cada 1 segundo.
Veja o codigo!

8 de jan. de 2017

Super Formas com JavaFX


Mais uma postagem sobre efeitos visuais com JavaFX e hoje vamos falar sobre a aplicação da Superformula, derivada da fórmula Superellipse para gerar supershapes! Pode parecer confuso, mas vamos aplicar uma fórmula no JavaFX e gerar formas geométricas bacanas somente trocando os parâmetros da fórmula!
Claro a inspiração novamente veio do Shiffman! Veja abaixo o vídeo dele:


O código principal foi tirado do artigo do Paulo Bourke aplicando o algoritmo em um ângulo 0 até 2*PI temos diversas formas geradas.

O código é bem simples! Novamente usamos aquela classe utilitária para desenhar em JavaFX e a cada ciclo nós vamos aplicar a fórmula com novos parâmetros e então transformamos os resultados em pontos X e Y e desenhamos na tela pontinhos. O número de pontos define a resolução e para gerar todos os pontos fazemos um loop e pegamos um ângulo baseado no ponto atual do loop, aplicamos a fórmula e pegamos os pontos.

Em outras palavras, se quisermos 10 pontos, aplicamos a fórmula usando (0 * 10 / PI *2), (1 * 10 / PI *2), , (2 * 10 / PI *2), (1 * 10 / PI *2) e assim vai...

Mas o ponto principal são as constantes. Ao executar a fórmula, podemos mudar algumas constantes e como resultado temos formas geométricas completamente diferentes! As constantes são m, n1, n2 e n3!

A nossa aplicação muda os valores das  "constantes" e aplica a fórmula a cada frame executado. O resultado é o seguinte:


Os tipos de azul utilizados foram escolhidos pela minha amada Luana e o código da aplicação ficou bem compacto, pode ver abaixo:



Projeto completo no github

7 de jan. de 2017

Desenvolvimento rápido de aplicações de efeitos visuais com JavaFX

Quem acompanha o blog notou que ultimamente temos postado somente aplicações mais visuais sempre se baseando nos vídeos do mestre Daniel Shiffman. Pois bem, ele usa Processing, uma outra linguagem de programação e esse é um blog sobre JavaFX e o nosso objetivo é também sempre se manter em contato com Java - em outras palavras, quero "levar a palavra" do Shiffman para o mundo e ainda exercitar Java. A palavra de Shiffman é a seguinte:

"Processing, for me, has always been just the most wonderful thing ever. It’s given me a mission and a passion, to bring computation to everyone: artists, designers, musicians, biologists, doctors, dancers, animators, bankers, photographers, librarians, fashion designers, architects, psychologists, journalists, and writers, just to name a few. Writing code can be scary, something many mistakenly think is reserved for computer scientists and engineers. Processing has helped eliminate that fear, making programming accessible to a wider audience, particularly artists.”

Fonte: Wikipedia

Ou seja, ele encontrou em processing uma forma de levar programação a mais pessoas. Com JavaFX não é diferente, é possível programar e criar aplicações sem ser um mestre Java - mas, a linguagem ainda aparece as vezes como um empecilho. Eu escrevo esse blog há 4 anos e estou "mexendo" com JavaFX desde a primeira versão, uns 8 anos já e vejo isso acontecendo.
Mas por que o blog então não é sobre Processing? O motivo é que Java é super importante para o mercado e "brincando" com JavaFX você exercita Java também, mas é necessário o equilibrio para que a linguagem Java não seja um empecilho.

Resumindo, criei uma classe que estou usando em aplicações visuais que "imita" o processing - mas é claro que o Processing é um universo a parte, a ideia é tirar partes repetitivas para que se tenha o foco na aplicação visual. O nome da classe é "DrawingApp", como já visto no post sobre as flores e no post sobre o algoritmo Metaballs.
Veja abaixo o exemplo de uma aplicação simples (bolas coloridas) que usa a DrawingApp e o código da classe DrawingApp.

6 de jan. de 2017

Flores com JavaFX

Todo mundo sabe que a natureza pode ser representada matematicamente e muitas das fórmulas da natureza são conhecidas. O maior exemplo é a sequência de Fibonacci e como pode ser encontrada na natureza:




Pois bem, hoje vamos usar mais uma fórmula muito interessante que tomei conhecimento de mais um vídeo do mestre Shiffman, veja:



Filotaxia é o nome em português dessa área de estudo e você pode ler mais sobre ela na wikipédia. No Phyllotaxis você pode ter acesso a um documento e ao algoritmo que o Shiffman e eu usamos.
Mais uma vez usamos o canvas em uma aplicação que vai criar "plantas" aleatóriamente na tela. Para isso, ao contrário do que fez o Shiffman, vamos criar uma classe que vai desenhar a nossa plantinha.

Mas como funciona o algoritmo? A ideia é muito simples, temos um ângulo mágico e aplicamos uma fórmula sobre ele usando um número que é incrementado a cada frame de uma animação, por fim, aplicamos trigonometria para conseguir os pontos X e Y que iremos desenhar na tela. Em seguida, desenhamos os pontos gerados.
A ideia geral é essa! Usamos uma classe genérica com os elementos que mostramos no post anterior e o código ficou bastante limpo. Em breve falo sobre o DrawingFX...
Veja em seguida um screenshot da aplicação, o código, e um vídeo onde eu mostro partes do código e executo a aplicação.






Por fim vejam esse vídeo rápido que fiz para demonstar a APP e falar um pouco do código.

5 de jan. de 2017

Efeito Metaballs com JavaFX

Falamos sobre como escrever pixel por pixel de um Canvas e o objetivo na verdade era essa postagem aqui.

Nessa postagem vamos criar o efeito Metaballs e iremos seguir o mesmo código explicado pelo MESTRE Shiffman no vídeo abaixo, mas iremos aplicar em JavaFX. Sugiro você ver o vídeo, ler o artigo sobre escrita de pixels com JavaFX e tentar fazer por você mesmo. Se não conseguir, em seguida você pode ver o código que criamos como exemplo.



Nosso simples projeto





Como vocês viram, o Shiffman usa Processing,a linguagem de programação mais bacana para criarmos efeitos visuais. A boa notícia é que tudo que fazemos com Processing podemos fazer com JavaFX. A versão original de Processing, na verdade, é baseada em Java (com versões para JavaScript e Python). Logo, tudo que você vê ele fazendo você consegue fazer também e em Java, ou seja, você se diverte e ainda exercita o uso de uma linguagem de mercado.
O nosso programa vai ter duas pequenas classes, veja o código e a seguir um vídeo que fiz explicando. Se tiver dúvidas você pode perguntar no nosso grupo ou nos comentários





Conclusão


E está aberta a temporada de efeitos especiais no JavaFX! Vamos criar coisas baseadas nos vídeos do Shiffman. Em breve voltamos com mais novidades.

4 de jan. de 2017

Escrevendo pixel por pixel de um Canvas

Já falamos aqui sobre o Canvas e um uso básico do mesmo. Hoje vamos mostrar um pouco mais desse poderoso node, mostrando como manipular os pontos de imagem ou o pixel.O pixel representa cada ponto da sua tela e cada ponto tem uma cor RGB (vermelho, verde e azul), adicionalmente também a opacidade do ponto, mas hoje só falaremos do RGB.

Escrevendo pixel a pixel usando o Canvas


Ao criar o canvas, temos que acessar o Graphics2d se quisermos trabalhar nele. O mesmo Graphics2d permite acesso a uma classe do tipo PixelWriter e com ela podemos configurar a cor de cada pixel de um canvas! Veja o exemplo mais básico possível que gera um canvas com pixels aleatórios:



O código é simples:

- Inicialmente criamos um canvas e pegamos o pixel writer dele;
- Há um for de for que passará por cada posição do canvas - indo até a largura e a altura da aplicação;
- Nesse for de for criamos valores aleatórios para R (vermelho), G (verde) e B (azul);
- Então escrevemos o pixel usando o PixelWriter com uma cor que criamos a partir dos valores aleatórios;
- Por fim temos toda a já conhecida parte do JavaFX, que é de criar uma scene, uma raiz.

O resultado é algo similar ao seguinte sempre com valores aleatórios ao executar a aplicação:


Temos bastante pontos cinza, pois o ponto cinza equivale a valores iguais de RGB! 

Olhem mais um exemplo bacana:


Veja o código


Bem, essa foi uma postagem rápida. Pretendo criar algo bacana com isso, então precisava introduzir essa classe. Até mais, pessoal!