Animações personalizadas - Parte 1
Neste tutorial você irá explorar e aprender como usar funções avançadas para a criação de imagens e animações personalizadas, além de vários outros efeitos visuais
Objetivos:
- Entenda que a matriz 5 x 5 de LEDs no micro:bit representa uma grade de coordenadas com a inicio (0,0) no canto superior esquerdo;
- Entenda que os valores das coordenadas x variam de 0 a 4 e aumentam da esquerda para a direita;
- Entenda que os valores das coordenadas y variam de 0 a 4 e aumentam de cima para baixo;
- Aprenda a se referir a um LED individual por suas coordenadas X e Y;
- Aprenda a plotar (ativar) e apagar (desativar) LEDs individuais e como alternar entre esses dois estados;
- Aprenda a verificar o status atual de ativado ou desativado de um LED individual, além de verificar e definir o nível de brilho;
- Aplique o conhecimento e as habilidades acima para criar um programa exclusivo que use coordenadas como parte integrante do programa.
Vamos lá, neste tutorial, iremos explorar e ampliar o uso de recursos que já utilizamos em outros conteúdos. Vamos iniciar explorando um pouco o uso das coordenadas da matriz de LED´s do micro:bit.
Nas aulas de matemática, aprendemos sobre as coordenadas x e y. Relembrando que o deslocamento no eixo x é horizontal e no eixo y, vertical. Estes dois eixos se encontram em um ponto, onde os valores x e y são zero. O par de coordenadas é descrito como (x,y). Uma maneira simples de lembrar qual valor vem primeiro, basta lembrar a ordem das letras no alfabeto. A letra x vem antes da letra y, assim como a coordenada x vem antes da coordenada y em um par de coordenadas. 😉
Dado o tamanho do micro:bit, há algumas particularidades e limitações.
Em uma grade básica de coordenadas:
- o valor de x aumenta da esquerda para a direita, é uma medida de quantas unidades um terminado ponto está distante horizontalmente da origem;
- o valor de y aumenta de baixo para cima e é uma medida de quantas unidades um ponto está distante verticalmente da origem.
E como é no micro:bit?
A matriz 5 x 5 de LEDs no micro:bit representa uma grade de coordenadas com um eixo x (horizontal) e y (vertical), até neste ponto está tudo igual. A diferença é que a origem (0,0) está no canto superior esquerdo e os valores das coordenadas y variam de 0 a 4 e aumentam para baixo.
Usando coordenadas na BBC micro:bit
O plano cartesiano recebeu esse nome por ter sido idealizado por René Descartes e é usado fundamentalmente para sistematizar técnicas de localização no plano. René Descartes, durante a Idade Moderna, também era conhecido por seu nome latino Renatus Cartesius. Descartes, por vezes chamado de “o fundador da filosofia moderna” e o “pai da matemática moderna”, é considerado um dos pensadores mais importantes e influentes da História do Pensamento Ocidental.
Seu sistema de coordenadas provou ser útil de várias maneiras, incluindo a criação de um elo importante entre os estudos de álgebra e geometria. As formas geométricas agora podem ser descritas por pontos em um plano de coordenadas.
Batalha Naval
O que tem a ver Batalha Naval com plano cartesiano e nossa matriz de LED´s?
Se você observar o tabuleiro onde os navios são posicionados é basicamente um sistema de coordenadas x e y. Aproveite para montar uma pequena matriz para jogar Batalha Naval usando o sistema de coordenadas encontrada no micro:bit, isto vai ajudar a reforçar o entendimento e uso do layout da matriz do micro:bit.
Posicione estrategicamente os seus navios no começo do jogo e conte com a sorte para afundar as embarcações adversária. Tente afundar todos os navios inimigos.
Clique no botão, faça download do conjunto de cards e divirta-se!!!
Explorando a matriz de LED´s
Categoria: LED
nova versão
Categoria: Imagens (Avançado)
Você já deve ter percebido que em aulas anteriores já utilizamos alguns destes blocos, iremos reforçar e ampliar o conceito de uso dos blocos da categoria LED e Imagens (Avançado) por meio de uma sequencia de pequenos exercícios. Nosso objetivo é demonstrar como usar coordenadas para controlar os LEDs. Esses programas podem ser modificados e utilizados em seus projetos mais complexos.
Observe a imagem ao lado, ela representa um simples exercício para criar um animação de um rostinho feliz e triste. Embora possamos utilizar os blocos mostrar leds, há outras maneiras de produzir animações por meio do micro:bit. Note que existe um padrão de LED´s nas duas imagens que sempre se repetem, e apenas quatro LED´s possuem mudança de estado.
Dentro do bloco no iniciar, arraste 5 blocos plotar x … y … (dica: você pode clicar com o botão direito do mouse em qualquer bloco e escolher a opção duplicar para copiar um bloco do projeto)
Após adicionar ou duplicar os blocos plotar, modifique os valores de x e y, conforme a imagem ao lado, conforme você vai modificando, no simulador você pode observar o desenho se formar.
Agora que já temos a base, podemos codificar os 4 LED´s que irão modificar a expressão do rostinho para triste e feliz.
Dentro do bloco sempre, adicione quatro blocos alternar x … y … e modifique os valores.
Ao modificar os valor você pode perceber no simulador que a alteração de status ligado e desligado é muito rápida. Para controlar este tempo adicione um bloco pausa como observado na figura ao lado. Ajuste o tempo de pausa para atender sua expectativa. Como resultado você terá uma animação como a da figura abaixo.
Modifique, teste, simule… que tal fazer algumas modificações ao projeto, adicionando uma terceira careta 🙂 🙁 😉 😐
Utilizando estes recursos, que tal você criar sua própria animação personalizada. Analise sempre quais LED´s poderiam ser alternados e quais poderiam permanecer ligados.
Padrões Aleatórios
Em nosso tutorial anterior, mostramos alguns exemplos para você se inspirar, o Firefly Funk, foi criado baseado em padrões aleatórios, iremos realizar um pequeno exercício usando laços para gerar padrões aleatórios no display de LED´s, em seguida iremos validações para verificar o status dos LED´s para ligá-los caso estejam desligados.
Pseudocódigo:
- no botão A pressionado, usaremos um loop para ligar um conjunto aleatório de luzes LED no nosso micro:bit;
- será ligado um LED aleatório em cada coluna ou valor da coordenada x (0 a 4).
- adicione o bloco da categoria Entrada, no botão A pressionado;
- dentro dele, adicione o bloco limpar tela, categoria Básico;
- abaixo do bloco limpar tela, adicione o bloco para índice de 0 a 4 (categoria Loops);
- na categoria LED, arraste um bloco plotar x … y …
- utilize a variável indice, arrastando-a para o valor x;
- na categoria Matemática, selecione o bloco escolher aleatório 0 até 4 e solte no valor y.
Identificando o estado ligado | desligado de um LED
Nesta etapa, nosso objetivo será verificar se o LED central (x=2 e y=2) está ligado após ter sido criado o padrão aleatório pelo pressionamento do Botão A, esta verificação ocorrerá ao pressionar o Botão B.
- adicione o bloco da categoria Entrada, no botão B pressionado;
- dentro dele, adicione o bloco se … então … senão, categoria Lógica;
- substitua o bloco losango verdadeiro pelo bloco ponto x … y … localizado na categoria LED;
- modifique os valores de x e y por 2 e 2. Este bloco retorna verdadeiro caso o LED identificado nas coordenadas esteja com status ligado e falso caso esteja desligado;
- adicione os blocos mostrar ícone, dentro do SE e do SENÃO, para mostrar ícones diferentes caso o LED (2,2) esteja ligado ou desligado.
Manipulando o brilho dos LED´s
Vamos criar um novo projeto para exercitar o uso das configurações de brilho para a matriz de LED´s do micro:bit, é importante salientar que os resultados de brilho no simulador e diretamente no micro:bit muitas vezes são diferentes, recomendamos sempre testar e ver os resultados no micro:bit real.
Etapa #1
- dentro no bloco sempre, arraste o bloco definir brilho …, você encontrará este bloco na categoria LED … more;
- na mesma categoria LED, arraste o bloco plotar x … y … logo abaixo do bloco anterior;
- adicione um bloco pausa…;
- e logo abaixo um bloco limpar tela;
neste ponto veremos o LED (0,0) piscando…
Etapa #2
… iremos estabelecer aleatoriedade nos LED´s x e y;
- arraste dois blocos da categoria Matemática, escolher aleatório … até … para x e y do bloco plotar x y;
neste ponto temos aleatoriedade dos LED´s porém sempre com o brilho máximo (255).
Etapa #3
- arraste um novo bloco escolher aleatório … até … para dentro do bloco definir brilho, ajuste os valores para 0 e 255.
Dancing Pixels
No exemplo a seguir repetimos alguns blocos para caracterizar o acendimento de quatro LED´s antes de pausar, isto causa uma efeito de estar ligando simultaneamente, quando na verdade, acende um de cada vez, porém com velocidade mais elevada. Observe que temos um padrão de repetição, então poderíamos utilizar um laço..
Exemplo sem repetição...
Exemplo com repetição...
Visualização do nível do brilho
Que tal controlar o brilho através dos botões A e B, assim como fazemos com muitos aparelhos eletro-eletrônicos. Em seguida iremos adicionar ao programa alguns blocos que permitirão exibir numericamente o nível de brilho dos LED´s.
Pseudocódigo:
definiremos o nível de brilho dos LEDs para o nível mais alto ao iniciar o programa;
ao pressionar o Botão A irá diminuir o nível de brilho ;
ao pressionar o botão B irá aumentar o nível de brilho;
ao final iremos exibir o nível de brilho, numericamente, atual ao pressionar o botão A+B.
Apresentando o nível de brilho, numericamente, atual ao pressionar o botão A+B.
Experimente alterar os valores ao subtrair e ao adicionar o nível de brilho atual.
Seja curioso e divirta-se!!!
novidade da nova versão
A pouco estudamos o bloco ponto x … y … que permite verificar o status (ligado|desligado) do LED. A nova versão do makecode traz um novo bloco na categoria LED, conforme pode ser observado na figura a seguir, este bloco permite ler nível do brilho de um LED baseado na coordenada x e y.
Um exemplo de uso seria desligar um determinado LED caso seu brilho esteja acima de um determinado valor.
O nível de brilho varia de 0 a 255, então para desligar um determinado LED (x=2,y=2) caso o nível de brilho seja superior a 100 teríamos o seguinte código.
Preparando sua construção...
Chegou a hora de você aplicar tudo que você já sabe sobre LEDs, coordenadas, laços, controle de brilho para criar seu próprio projeto: uma animação baseada em padrões ou um jogo que use os recursos aprendidos até agora. Vá pensando em como será o seu projeto. Em nosso próximo tutorial iremos construir uma animação e aproveitaremos para aprender a construir nossos próprios blocos…