segunda-feira, 1 de fevereiro de 2016
sexta-feira, 15 de janeiro de 2016
[Matemática Aplicada] - Mapa Isométrico
Olá Bob Marleys de minha Babilônia em chamas, estive um pouco sumido do
mundo matemático por motivos pessoais (preguiça), mas agora retornei com
uma maratona insana de postagens atrasadas da disciplina. Tirei um dia
para tentar compensar algumas atividades, das que eu acho que consigo
fazer. Enfim, sem mais
enrolações. Vamos lá!!!
Nesta atividade irei criar um mapa isométrico utilizando o Processing. Mas antes de mais nada vamos mostrar alguns exemplos do que seria um mapa isométrico:
Alguns jogos tradicionais, como o Dragon Quest utilizavam tilesets para a a formação de seus mapas. São como peças de quebra-cabeça que podem ser utilizadas várias vezes para formar um mapa.
O chão de pedra, o gramado, as folhagens mais densas, paredes, água e etc. São todas peças unitárias que são postas juntas uma do lado da outra para termos todo um cenário criado. Mas dentro do jogo tudo isto é realizado através de códigos. Este cenário não vem formado desta forma, é tudo instrução. Por isto esta imagem que postei tem mais peso em KBs do que o jogo inteiro de Dragon Quest, o sistema de tilesets economiza muito espaço.
O isométrico tem como objetivo criar a ilusão de fazer um mapa 2D virar 3D. Fazendo uma rotação na câmera de uma jeito de vemos as coisas meio de lado, assim como no exemplo o jogo Final Fantasy Tatics Advance:
Para transformar um mapa em isométrico é necessário atender alguns requisitos: Novos tiles precisam ser feitos para ter um efeito mais adequado. Na visão isométrica a largura tem o dobro do tamanho da altura, para termos um efeito adequado. Dois tiles foram criados, um para a grama e outro para a água:
Ao contrário da visão comum, em que os tiles são postos da esquerda para a direita, de cima para baixo, na visão isométrica a montagem dos tiles é feita da direita para a esquerda, de cima para baixo.
Pensando assim, a posição X sempre vai diminuindo pela metade da largura do tile, enquanto a posição Y aumenta na metade da altura do tile. Já sabendo que este valor de altura é metade do valor da largura, colocando no código, fica assim:
Com isto consegui fazer meu mapinha simples com visão isométrica:
Bem, por enquanto é isto. Cuidado ao atravessar a rua!
Nesta atividade irei criar um mapa isométrico utilizando o Processing. Mas antes de mais nada vamos mostrar alguns exemplos do que seria um mapa isométrico:
Alguns jogos tradicionais, como o Dragon Quest utilizavam tilesets para a a formação de seus mapas. São como peças de quebra-cabeça que podem ser utilizadas várias vezes para formar um mapa.
O chão de pedra, o gramado, as folhagens mais densas, paredes, água e etc. São todas peças unitárias que são postas juntas uma do lado da outra para termos todo um cenário criado. Mas dentro do jogo tudo isto é realizado através de códigos. Este cenário não vem formado desta forma, é tudo instrução. Por isto esta imagem que postei tem mais peso em KBs do que o jogo inteiro de Dragon Quest, o sistema de tilesets economiza muito espaço.
O isométrico tem como objetivo criar a ilusão de fazer um mapa 2D virar 3D. Fazendo uma rotação na câmera de uma jeito de vemos as coisas meio de lado, assim como no exemplo o jogo Final Fantasy Tatics Advance:
Para transformar um mapa em isométrico é necessário atender alguns requisitos: Novos tiles precisam ser feitos para ter um efeito mais adequado. Na visão isométrica a largura tem o dobro do tamanho da altura, para termos um efeito adequado. Dois tiles foram criados, um para a grama e outro para a água:
Ao contrário da visão comum, em que os tiles são postos da esquerda para a direita, de cima para baixo, na visão isométrica a montagem dos tiles é feita da direita para a esquerda, de cima para baixo.
Pensando assim, a posição X sempre vai diminuindo pela metade da largura do tile, enquanto a posição Y aumenta na metade da altura do tile. Já sabendo que este valor de altura é metade do valor da largura, colocando no código, fica assim:
Com isto consegui fazer meu mapinha simples com visão isométrica:
Bem, por enquanto é isto. Cuidado ao atravessar a rua!
segunda-feira, 11 de janeiro de 2016
[Oficina de Criatividade] - Divulgação Rasgada
Boa tarde confeiteiros deste bolo chamado vida. Voltamos com mais uma atividade da nossa disciplina querida. Como desafio precisávamos criar um pôster de uma banda com elementos encontrados ao nosso redor. Baseado nisso pensei em uma banda com temática social, natureza e por aí vai. A banda é fictícia e seu nome é inspirada nos Pholhas. Então aqui vos mostro, os Folhas!
segunda-feira, 7 de dezembro de 2015
[Oficina de Criatividade] 6. Capa do DVD
Boa tarde lasers que protegem minha base secreta do Amor, voltamos com mais uma atividade da oficina de criatividade. Infelizmente não pude estar em sala de aula e realizar a primeira parte da atividade, porém realizei a segunda parte em casa. E o que seria? Explicarei a seguir.
Deveríamos criar um filme e depois fazer uma capa de DVD desse filme imaginário que tentasse fazer compreender sobre do que a história se trata. O filme que pensei foi: Aves vs Megazords.
É um filme de ação que ocorre na década de 10, onde para assegurar a cobrança de impostos em uma pacata ilha no nordeste brasileiro, foi aprovada uma lei que permite a ocupação da região por robôs gigantes chamados "megazords". Porém os robôs, eram recém criações do governo, tiveram um mal funcionamento e acabaram por começar a agir por conta própria. Oprimindo os humanos e todos os seres terrestres da ilha e cortando todo tipo de comunicação com o continente. Os únicos seres capazes de enfrentar estes robôs eram as aves e elas começaram uma batalha mortal contra os megazords em busca de paz na pequena ilha.
E aqui está a capa do DVD:
Bem, é isto pessoal. Muitos beijos e até uma próxima vez!
Deveríamos criar um filme e depois fazer uma capa de DVD desse filme imaginário que tentasse fazer compreender sobre do que a história se trata. O filme que pensei foi: Aves vs Megazords.
É um filme de ação que ocorre na década de 10, onde para assegurar a cobrança de impostos em uma pacata ilha no nordeste brasileiro, foi aprovada uma lei que permite a ocupação da região por robôs gigantes chamados "megazords". Porém os robôs, eram recém criações do governo, tiveram um mal funcionamento e acabaram por começar a agir por conta própria. Oprimindo os humanos e todos os seres terrestres da ilha e cortando todo tipo de comunicação com o continente. Os únicos seres capazes de enfrentar estes robôs eram as aves e elas começaram uma batalha mortal contra os megazords em busca de paz na pequena ilha.
E aqui está a capa do DVD:
Bem, é isto pessoal. Muitos beijos e até uma próxima vez!
quarta-feira, 25 de novembro de 2015
[Matemática Aplicada] - PRIMEIRO TRABALHO, Simulador de raia.
Bom dia paladinos do saber. O exemplo que utilizei para o primeiro trabalho da disciplina foi um vetor criado por Ramon Gibbs, é este da imagem:
Analisando-a, vemos que é uma forma que se repete várias vezes, utilizando o espaço negativo para completar uma textura, semelhante a de alguma calçada portuguesa.
Dissecando a forma para uma figura mais simples, temos um quadrado:
A partir deste quadrado, desenhamos um triângulo para a direita. Este triângulo tem a característica de ser o mesmo quadrado, porém cortado em sua metade pela diagonal superior esquerda até a inferior direita. Isso quer dizer que ele é isósceles cujos lados iguais são equivalentes ao lado do quadrado. Já sua terceira linha tem seu valor calculado pela diagonal do quadrado, L * √2
Seguindo o mesmo critério, inserimos outro triângulo na parte inferior do quadrado para assim formar a figura:
Aqui está o código desta forma no Processing, tomando como base o centro da tela:
A função que criei tem apenas um parâmetro chamada módulo. Ela corresponde ao lado do quadrado, com isso é desenhada a forma no centro da tela. Não é necessário porém utilizar diagonal do quadrado, no Processing existe a função ()triangle que desenha um triângulo com base em seus três pontos, bastando as posições X e Y.
Certo, formei a figura. Agora precisava pensar em algo para utilizá-la. Fiquei um tempo tentado achar algo e acabei me cansando, fui para a janela fixar o olhar em algo distante, dizem que faz bem para a visão. Estava olhando para o céu e a ideia veio na minha mente. A forma que escolhi lembra a forma de uma raia:
Achava que com os materiais das aulas que estavam salvos em meu pen drive eu conseguiria fazer algo legal que lembrasse soltar raia. Então fui procurar. Pensei em utilizar primeiro o movimento do pingue-pongue:
Certo, mas pra ficar mais parecido com uma raia ao vento eu precisava de uma outra forma de movimento, fazendo uma pesquisa pela internet descobri funções chamas translate() e rotate() para dar um ar semelhante ao que eu queria. E ficou de um jeito que eu gostei, a posição da raia muda de acordo por onde o ponteiro do mouse está, dando ilusão de controle da raia enquanto o vento atua:
Está bem legal, mas falta a linha para soltá-la, lembrei então da aula que tivemos que desenhar uma linha que media a distância entre dois pontos. Apenas peguei a função que criei desta aula e inseri no meu código. Junto disto construi uma função chamada nuvens() para desenhar algumas nuvens e deixar um cenário de céu para tentar ficar mais atraente aos olhos. O resultado final foi este:
Aqui está o código completo:
Variáveis globais.
Aqui eu chamo as funções para desenhar as nuvens, a linha e a raia. Além de ter o movimento que causa o efeito de vento com base na posição do mouse, que é nossa mão.
Aqui temos o movimento do pingue-pongue, que somado aos movimentos anteriores de rotação, causam o efeito esperado.
Por fim, as funções da figura pela qual iniciei, linha e das nuvens respectivamente.
E este é o trabalho, a partir de um vetor relativamente simples apropriei-me de sua forma única e a utilizei em um limitado simulador de raia. É isto por enquanto, logo trarei novas aventuras no trabalho dois, um grande abraço e muita saúde!
Analisando-a, vemos que é uma forma que se repete várias vezes, utilizando o espaço negativo para completar uma textura, semelhante a de alguma calçada portuguesa.
Dissecando a forma para uma figura mais simples, temos um quadrado:
A partir deste quadrado, desenhamos um triângulo para a direita. Este triângulo tem a característica de ser o mesmo quadrado, porém cortado em sua metade pela diagonal superior esquerda até a inferior direita. Isso quer dizer que ele é isósceles cujos lados iguais são equivalentes ao lado do quadrado. Já sua terceira linha tem seu valor calculado pela diagonal do quadrado, L * √2
Seguindo o mesmo critério, inserimos outro triângulo na parte inferior do quadrado para assim formar a figura:
Aqui está o código desta forma no Processing, tomando como base o centro da tela:
A função que criei tem apenas um parâmetro chamada módulo. Ela corresponde ao lado do quadrado, com isso é desenhada a forma no centro da tela. Não é necessário porém utilizar diagonal do quadrado, no Processing existe a função ()triangle que desenha um triângulo com base em seus três pontos, bastando as posições X e Y.
Certo, formei a figura. Agora precisava pensar em algo para utilizá-la. Fiquei um tempo tentado achar algo e acabei me cansando, fui para a janela fixar o olhar em algo distante, dizem que faz bem para a visão. Estava olhando para o céu e a ideia veio na minha mente. A forma que escolhi lembra a forma de uma raia:
Achava que com os materiais das aulas que estavam salvos em meu pen drive eu conseguiria fazer algo legal que lembrasse soltar raia. Então fui procurar. Pensei em utilizar primeiro o movimento do pingue-pongue:
Certo, mas pra ficar mais parecido com uma raia ao vento eu precisava de uma outra forma de movimento, fazendo uma pesquisa pela internet descobri funções chamas translate() e rotate() para dar um ar semelhante ao que eu queria. E ficou de um jeito que eu gostei, a posição da raia muda de acordo por onde o ponteiro do mouse está, dando ilusão de controle da raia enquanto o vento atua:
Está bem legal, mas falta a linha para soltá-la, lembrei então da aula que tivemos que desenhar uma linha que media a distância entre dois pontos. Apenas peguei a função que criei desta aula e inseri no meu código. Junto disto construi uma função chamada nuvens() para desenhar algumas nuvens e deixar um cenário de céu para tentar ficar mais atraente aos olhos. O resultado final foi este:
Aqui está o código completo:
Aqui temos o movimento do pingue-pongue, que somado aos movimentos anteriores de rotação, causam o efeito esperado.
Por fim, as funções da figura pela qual iniciei, linha e das nuvens respectivamente.
E este é o trabalho, a partir de um vetor relativamente simples apropriei-me de sua forma única e a utilizei em um limitado simulador de raia. É isto por enquanto, logo trarei novas aventuras no trabalho dois, um grande abraço e muita saúde!
[Oficina de Criatividade] - 5. Reutilização de Circuitos
Boa tarde cajueiros do meu pomar, voltamos com mais uma atividade para a disciplina de criatividade. Desta vez nossa missão era aproveitar uma placa de circuito para dar uma nova função para a bichinha, Como o pedaço que eu escolhi tinha um grande espaço circular em forma de buraco, pensei em fazer uma plaquinha de porta com aquela função célebre de "Não perturbe".
Depois de serrar em casa o pedaço que eu queria, fui para a aula onde eu pude utilizar uma caneta de marcar DVD/CDs para escrever os avisos que eu queria:
No calor da emoção, acabei errando a palavra perturbar, faltou um errezinho ali. Só pude perceber ao final da tarefa, acontece. :( Mas houve outra tretinha durante o processo, a caneta começou a falhar então fui dar aquela balançada pra tentar fazer aparecer alguma tinta na ponta, hehehehe. Não deu muito certo não...
Voou tinta pra todo canto, pegou no meu braço, no meu rosto, na minha colega que estava próxima,na mesa, no diabo-a-quatro. Fica a dica amiguinhos, não balancem esse tipo de caneta. Mas o que importa é que consegui escrever o que eu queria.
Eram dois lados: Um com a mensagem "vá perturbar outro", e uma com "entre com Amor". Assim você dá a opção 'educada' de permitir ou não a entrada de alguém em seu recinto sagrado.
A próxima parte era entregar a plaquinha para o professor Clemilson e seu ácido lokasso chamado percloreto de ferro pra corroer o cobre da placa.
Depois de serrar em casa o pedaço que eu queria, fui para a aula onde eu pude utilizar uma caneta de marcar DVD/CDs para escrever os avisos que eu queria:
No calor da emoção, acabei errando a palavra perturbar, faltou um errezinho ali. Só pude perceber ao final da tarefa, acontece. :( Mas houve outra tretinha durante o processo, a caneta começou a falhar então fui dar aquela balançada pra tentar fazer aparecer alguma tinta na ponta, hehehehe. Não deu muito certo não...
Voou tinta pra todo canto, pegou no meu braço, no meu rosto, na minha colega que estava próxima,na mesa, no diabo-a-quatro. Fica a dica amiguinhos, não balancem esse tipo de caneta. Mas o que importa é que consegui escrever o que eu queria.
Eram dois lados: Um com a mensagem "vá perturbar outro", e uma com "entre com Amor". Assim você dá a opção 'educada' de permitir ou não a entrada de alguém em seu recinto sagrado.
A próxima parte era entregar a plaquinha para o professor Clemilson e seu ácido lokasso chamado percloreto de ferro pra corroer o cobre da placa.
Nenhum dedo foi perdido durante essa atividade
Este é o resultado final! Aguardem novas atividades, beijos de paz para cavarmos novos momentos bons. Até a próxima.
[Matemática Aplicada] - 7. A importância da função/procedimento
Bom dia paladinos do saber, nesta pequena postagem teremos uma reflexão sobre a importância da utilização de procedimentos/funções para simplificar a programação. Coloco como exemplo a primeira prova da disciplina de Matemática aplicada. Se eu não tivesse as funções/procedimentos feitas, eu teria que escrevê-las do zero e assim perderia muito tempo. A vida dos programadores seria mais tensa do que já é se eles tivessem que sempre reescrever códigos. Funções te fazem ganhar tempo.
Outra coisa importante é repetição de tarefas: Pego como exemplo meu trabalho de Matemática:
Ela é uma simulação de soltar raia, inseri um cenário que lembra o céu e com isto algumas nuvens feitas com elipses. Todas as nuvens são feitas chamando uma função chamada nuvens() uma única vez. Meu código ficar muito poluído se eu tivesse feito cada elipse individualmente, e muito difícil de outra pessoa entender o que diabos eu fiz. Funções ajudam também na perpetuação do seu código, facilitando outras pessoas de fazerem o mesmo que você, sem se preocupar em reescrever tanta coisa.
Por enquanto é só. Um grande abraço e muita saúde. Até breve!
Outra coisa importante é repetição de tarefas: Pego como exemplo meu trabalho de Matemática:
Ela é uma simulação de soltar raia, inseri um cenário que lembra o céu e com isto algumas nuvens feitas com elipses. Todas as nuvens são feitas chamando uma função chamada nuvens() uma única vez. Meu código ficar muito poluído se eu tivesse feito cada elipse individualmente, e muito difícil de outra pessoa entender o que diabos eu fiz. Funções ajudam também na perpetuação do seu código, facilitando outras pessoas de fazerem o mesmo que você, sem se preocupar em reescrever tanta coisa.
Por enquanto é só. Um grande abraço e muita saúde. Até breve!
Assinar:
Postagens (Atom)