Blog destinado ao curso Sistemas e Mídias Digitais - SMD

  • DOUGLAS SILVA ART

    Curta a minha página no Facebook

  • THE CHIBIMAKERS

    Curta também a página do grupo The chibimakers, no qual postamos sempre desenhos no estilo Chibi.

sexta-feira, 22 de setembro de 2017

Atividade 07 - MAMI

Para essa tarefa, nós iremos discutir os aspectos envolvidos na criação e no uso de um adaptive logo, à minha escolha.



Eu escolhi a logo do Brooklyn Museum. Essa logo foi desenvolvida pensando nesses pontos:

“Trabalhando em conjunto com uma grande renovação e adição arquitetônica pela Polshek Partnership, nós redesenhamos o rosto do público do Brooklyn Museum. Nossa solução imagina o Museu do Brooklyn como um museu alternativo: a família, em vez de orientada para o turismo, voltando-se para sua comunidade imediata. O novo logotipo é uma visão contemporânea do clássico selo do museu. O novo selo muda e muda, dependendo do seu uso, para indicar a ampla gama da coleção do Museu, e seus programas dinâmicos e dinâmicos. O conceito leva à sua campanha publicitária, materiais impressos e embalagens de varejo e, externamente, ao sistema de sinalização abrangente no lobby, admissão e áreas exteriores do museu.”

Visto isso, nós ainda podemos comparar algumas características que uma marca deve ter: 

  • Elementos: possui um símbolo no formato da letra “B” envolto por uma forma que varia de acordo com a aplicação dela, mas que não varia a forma central, sem ultrapassar uma forma circular de segurança para gerar o contraste com a forma da letra “B”. Também possui um logotipo que possui uma certa formalidade e seriedade, causada pelo uso de uma tipografia sem serifa meio “quadrada”, mas que serve para balancear com o símbolo, que possui formas mais fluidas e expressivas. A logo tem cor azul, acredito eu para trazer a ideia de intelectualidade, tranquilidade e confiança (entre outras coisas). Também possui a versão preta e branca.




  • Rigidez e padronização: por mais que tenha várias formas, a logo possui uma parte que não muda, que é exatamente a parte circular que envolve a forma da letra “B”. A partir dessa área é que ela muda. Com relação a padronização, algumas formas da logo parece possuir um padrão geométrico e matemático, voltado para a repetição de um segmento da forma, mas em outras já parece não ter, sendo algo parecido com um desenho à mão livre.



  • Miniaturizável e reprodutível: a logo pode claramente ser reproduzida em vários tamanhos, tanto pequenos quanto grandes, bem como em várias superfícies, como mostram as figuras abaixo:



Share:

quinta-feira, 21 de setembro de 2017

Atividade 06 - MAMI

Para criar esse procedimento, considerando a Lei Federal N° 5.700, primeiramente devemos identificar que o modulo da bandeira se dá de acordo com sua altura, ou seja, o modulo tem tamanho igual ao da altura dividido por 14 e a largura é do tamanho de 20 módulos. Temos então que a distância das pontas do losango para os limites do retângulo é de 1.7 módulos, e que o circulo centralizado no losango terá um raio de 3.5 módulos, dada as informações, precisamos apenas escreve-las dentro da função, seguindo esses 3 passos:

  • Criação do retângulo que constitui a área verde da bandeira
  • Criação do losango que constitui a área amarela da bandeira que se posiciona no meio do retângulo e que tem distancia de 1.7 módulos dos limites do retângulo.
  • Criação do circulo que tem tamanho de 3.5 módulos e que se localiza no meio do retângulo.


Agora se fosse empregado o uso do rectMode(RADIUS) para criar o retângulo da bandeira, ficaria muito mais simples de manter a proporção dos módulos, o raciocínio para achar os valores de posição nos eixos x e y seria similar ao de um circulo criado com a função ellipse normal, pois os parâmetros x e y dele passaria a ser no centro do retângulo, e não no canto superior esquerdo como antes. 


O mesmo efeito seria se os círculos fossem feitos usando o ellipseMode(CORNER), no qual os parâmetros correspondentes ao x e y formariam um círculo a partir do canto superior esquerdo dele, sendo assim bem similar a função rect( ) normal.



Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.

Share:

segunda-feira, 18 de setembro de 2017

Atividade 05 - MAMI

Bem, para essa atividade foi proposto criar uma função chamada lacamento, e explicar o desenvolvimento de uma aplicacão que simulasse o quicar de uma bola lançada para cima e para frente, e cujas velocidades horizontal e vertical diminuísse sempre que o chão é tocado.

Sendo assim eu criei algumas funções:

Função MRU: criada pra calcular  a distancia que a bola irá percorrer no eixo horizontal. Possui os parâmetros de tempo(t) e velocidade no eixo horizontal(vH).

Função MRUV: criada pra calcular a distancia que a bola irá percorrer no eixo vertical. Possui os parâmetros de tempo(t), aceleração(a), e velocidade no eixo vertical(vV).

Função lancamento: criada para gerar as distâncias na vertical e horizontal, chamando assim as funções MRU e MRUV, e salvando respectivamente os seus valores nas posições 0 e 1 do vetor aux.

Função mostraMundo: cria um grid.




Então no draw( ), é feito uma checagem usando duas estruturas de condição if( ). Se a distância do MRU(distância horizontal) salva no vetor distance é menor que 0, ela se torna 0, e se a distância do MRUV(distância vertical) for menor que 0, também se tornará 0. Daí é feito outra checagem, na qual se a distância vertical for igual a 0 e o tempo for diferente de 0. Se for, o tempo(t) zera, e o espaço(s) acrescenta a distância horizontal a sí.

Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.
Share:

domingo, 10 de setembro de 2017

Atividade 04 - MAMI

A atividade proposta é para basicamente explicar a criação de uma aplicação, que inicialmente armazena, num vetor, as velocidades aleatórias de 20 carros (retângulos coloridos) e, empregando a função MRU, mostra na tela uma corrida disputada entre os mesmos e identifica o carro vencedor.

Primeiro eu criei 3 funções. A primeira foi a do movimento MRU, que foi exatamente igual a apresentada pelo professor na aula, no qual a gente passa os parâmetros de velocidade (v) e tempo (t), e ela retorna a distância (d) que os carros vão percorrer. Em seguida criei uma função chamada car, que cria o carro usando funções rect, e inicia a posição x dos carros com a distância, que é gerada a partir da função MRU. Nessa função também é atribuído o número de cada carro. E por último criei a função speedWay, que cria a pista de corrida e a linha de chagada.

Depois disso, eu criei no setup() um vetor de velocidades, com valores variando de 50 a 100, equivalentes nesse caso às velocidades de 50m/s a 100m/s, pois essa foi a unidade proposta, e usei um laço for para atribuir as 20 velocidades em cada posição do vetor. 

Depois eu criei um if no draw(), para saber se os carros chegaram ou não à linha de chegada. Para isso, foi criado um laço for com a variável endRace que é inicializada com true. Se a distancia dos carros for maior ou igual a distancia da linha de chegada, então ela se torna false, o contador winner recebe a posição do vetor (que nesse caso será o número do carro) referente ao carro que chegou primeiro, e então o laço acaba com um break. Se não, quando a variável endRace for false, é por que o carro já venceu. Então é mostrado um texto na tela com o número do carro vencedor.


Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.
Share:

domingo, 3 de setembro de 2017

Atividade 03 - MAMI

Hoje vou apresentar o desenvolvimento de uma aplicação que gere quadros com a função bloco utilizando dois sliders na tela, para definir as quantidades de blocos na horizontal e na vertical. Vou usar como base um código que já fazia isso, mas de forma fixa, como mostrado na imagem abaixo.


Com a ajudo dos sliders agora é possível gerar os blocos em tempo de execução, bastando apenas arrastar os sliders e trocar os valores deles. Para isso, eu precisei criar uma função chamada de bloco( ). Nela são criados três círculos e um retângulo. Os círculos são criados chamando uma outra função que eu criei chamada circulo( ), que nada mais é do que uma função que chama a função ellipse( )  só que de uma forma modificada, pois a função ellipse( ) normal tem 4 parâmetros: coordenada x, coordenada y, largura e altura. A que eu criei, ao invés de passar números, eu passei nos dois o mesmo valor, que é 2*r (o raio). Além disso, na função do bloco, os círculos são criados de modo que eles mantenham uma proporção que o círculo menos não ultrapasse o tamanho do círculo do meio, e o do meio não ultrapasse o círculo grande. 



Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.


Share:

sábado, 2 de setembro de 2017

Atividade 02 - MAMI

A ferramenta debug é utilizada para tirar os bugs do código, ou seja, depurar o código em tempo real de execução. No Processing, essa opção não existia até a versão 3 do programa e os usuários tinham que usar o comando println( ) para tentar achar os problemas de forma manual.



Para usar essa ferramenta, basta clicar no menu debug e abilitar a opção Enable Debugger, ou clicar no botão redondo de inseto no canto superior direito. Na tela vai passar a ter mais 4 botões: run/debug, step, continue, e parar, respectivamente da esquerda para direita. O run/debug faz rodar o programa todo sem fazer pausas. O step vai rodar o código linha por linha, mostrando assim o que está acontecendo em cada linha de código. O continue vai rodar o código avançando de breakpoint breakpoint, mostrando assim o que acontece entre essa parte do código. 



Pra explicar melhor, vou usar como exemplo um código no qual deverá posicionar contiguamente da direita pra esquerda n quadrados de 50 pixels de lado, sendo n uma variável global definida no início do código. Usando n = 4, na janela de variáveis, é possível ver o contador x sendo incrementado dentro do laço for, indo de 0 até 3. Quando o laço acaba ele deixa de existir, provando que está tudo certo com o código. Contudo, no exemplo original, o código para se calcular a posição x dos quadrados era x*50, o que seria incorreto para a questão, então foi modificado para with-(x*50)-50, pois a questão era para mostrar os quadrados da direita pra esquerda, e com o código antigo, seriam mostrados da esquerda pra direita.


Se você quiser ver como foi feito, basta clicar aqui para baixar o código do projeto.
Share:

Trabalho Final MAMI - Pt 2

Nessa segunda e última parte do Trabalho Final da cadeira de MAMI, eu apenas coloquei uma interface gráfica com a ajuda da biblioteca Cont...