Trabalhei como comunicador visual na comissão de comunicação do programa de aprendizagem cooperativa em células estudantis PACCE na propria UFC. Hoje sou editor de vídeos do Laboratório de Mídias Eletrônicas (LME), também vinculado a UFC.
Tecnologia do Blogger.

Quem sou eu

Quem sou eu

Pesquise por marcações

Matemática aplicada a multimidia
Bem o jogo da vida muita gente conhece, agora fazer ele no processing não é nada tão simples assim quanto parece, para facilitar um pouco vamos fazer umas alterações para que facilite a nossas vidas.
Essas hipoteses apenas estarão valendo para cada geração e cada trio de posições adjascentes:

  • Se houver somente duas células, ocorrerá nascimento;
  • Caso contrario, morte de célula.

E o código para que funcione com esse gráfico de linhas como mostrado acima, temos que fazer os seguintes códigos no processing:


Para tanto agora vamos brincar um pouco com imagens, e para isso tenha resultado satisfatório vamos pegar uma imagem aleatória para tratar o brilho no processing.

 Para isso pegamos a imagem do mario e do luigi para utilizarmos no processing.
E faremos o seguinte código: 







Tendo como resultado imagens como essas:






Hoje vamos recriar um relógio digital utilizando algumas imagens que vamos recortar no photoshop e padronizar o tamanho para evitar possíveis transtornos.
Os numerais usados foram esses:


 E para que funcione usamos esse seguinte codigo utilizando as funções minute(), second(), hour().
Ficando assim:


Bem hoje iremos criar um desenho de um olho, mas esse olho irá seguir o cursor do mouse, sem sair do globo ocular é claro.

 E para isso usaremos algumas regrinhas de trigonometria, tais como coordenadas polares e tangentes.


Pois vamos para a codificação.



Utilizando-se da trigonometria, podemos criar um relogio em tempo real. Usaremos para tal fim a lei dos cossenos, já usamos os senos, agora é a vez dos cossenos.

Vejamos agora como ficou o codigo
















Falemos de trigonometria, e ainda por cima falaremos hoje de senos. Então vamos explicar como funciona os senos. A relação é valida para triângulos retângulos (como o nome sugere, ela veio a partir de um retângulo e possui um angulo reto 90º)

Mostremos aqui um exemplo:

 Esse triângulo: 
SEN B = b/a;
SEN C = c/a;
SEN A = 1;

E a lei dos senos representada na figura abaixo:








E os resultados de um seno, sempre quando se coloca em gráfico, ele segue uma onda, devido ao arco trigonométrico. Como mostra a figura a seguir:














Agora você se pergunta aonde eu vou chegar com isso, e é aí que vou mostrar um codigo que você pode criar a partir dessas funções do seno.


A brincadeira simples de desenhar polígonos nas épocas de escola agora tem um nível a mais. Agora tem que refazer aqueles desenhos no caderno no computador vide programação.
Pois vamos ao processing e desenhar um polígono qualquer mediante a uma função simples que retorne vértices para criar um polígono qualquer.





Vamos ao código:



Bem voltamos aqui a falar sobre a logo do FourSquare, mas desta vez será um pouco diferente, trataremos do mesmo assunto passado, porem agora em um vídeo.

O vídeo encontra-se logo abaixo, então vocês poderão compreender melhor como foi feito o processo.











Nota: o áudio não me ajudou muito devido ao microfone usado não ser muito bom.

Bem hoje vamos dar uma estudada a respeito da nova logo do Foursquare (manual de identidade visual da marca), um serviço muito famoso que faz algo muito “importante” para nossas vidas, dizer para o mundo onde estamos e o que estamos fazendo, mas isso não vem ao caso.


Vamos ver observar se o retângulo áureo (ou retângulo de ouro) está presente no logo, ou não. E caso ele não esteja, vamos fazer algumas alterações para ver como ficaria se ele respeitasse essa ideia de perfeição adotada por muitos designers. Para quem não sabe o que é o retângulo áureo, vale a pena ver esse vídeo aqui:

 Agora que já viu o vídeo voltamos ao assunto em questão.
Será que o Foursquare tem algum retângulo áureo?

Veremos aqui pela divisão de largura/altura, caso essa divisão alcançar o resultado 1,618 ou próximo desse teremos o retângulo.


Comecemos pelo conjunto da obra, olhando o ‘F’ desenhado da logo vamos ver se ele é um retângulo áureo.




Bem pelo que vimos na imagem o retângulo formado não é o áureo e ainda está longe dele, basta ver que a divisão feita obteve o resultado de 1,390 que é diferente de 1,618.



E nos outros testes ele também não alcança.














Então vamos tentar fazer a representação de como seria ela nos moldes mais próximo da proporção áurea, lembrando que, não é porque a logo não está seguindo essa proporção que está errada, ela apenas utiliza de outra visão de apresentar a marca.
Nos deteremos apenas na proporção áurea do corpo do 'F' róseo. 

 

Primeiro criamos a logo com tamanhos aleatórios (dica desenhe antes no illustrator usando retângulos, elipses e triângulos, para facilitar o processo de desenho no illustrator).
O esboço do illustrator. Do lado direito a versão original, e do lado esquerdo a alteração sutil da logo.


 E o código do logo sairá mais ou menos assim:


 
fill(229,74,120);
noStroke();
rect(100,100,242,319.455,30,0,0,0);
rect(342,100,48,33,0,30,0,0);
rect(314,386,48,33,0,0,30,0);
quad(342,100+33,314,386,314+48,386,342+48,100+33);
quad(100,319,100,540,142,559,262,319);
ellipse(125,540,50,50);
fill(255);
rect(144,144,196,72,0,15,15,0);
rect(144,144,81,189);
rect(144,261,175,72,0,15,15,0);
triangle(144,261+72,144+90,261+72,144,261+72+113);
fill(229,74,120);
rect(144+81-10,144+72,14,45,10,0,0,10);
Mas você precisa parametrizar os valores, então a brincadeira começa aí. Utilizando o seu desenho do illustrator, basei-se nos dados das informações dele para usar como os dados e crie um valor para o x e o y de onde a logo será gerado ao seu gosto. Desta forma ficando assim: 


void fourSquare(float x,float y){
fill(229,74,120);
noStroke();
rect(x,y,41.724,55.172,15,0,0,0);
rect(x+40,y,9.5,6,0,15,0,0);
rect(x+41.724-10,y+55.172-5.69,8.276,5.69,0,0,15,0);
quad(x+41.724,y+5.69,x+41.724-10,y+55.172-5.69,x+41.724-10+8.276,y+55.172-5.69,x+41.724+8.276,y+5.69);
quad(x,y+55,x,y+55.172+20,x+7.5,y+55.172+24,x+27.7,y+55);
ellipse(x+4,y+55.172+20,8.621,8.621);
fill(255);
rect(x+7.6,y+7.6,33.8,12.5,0,10,10,0);
rect(x+7.6,y+7.6,14,32.6);
rect(x+7.6,y+7.6+7.6+12.5,30.17,12.4,0,10,10,0);
triangle(x+7.6,y+7.6+7.6+12.5,x+7.6+18,y+7.6+7.6+12.5,x+7.6,y+62.52);
fill(229,74,120);
rect(x+7.6+14,y+20,2.414,7.76,10,0,0,10);
}


Depois de criado a função vamos usa-la como um ponteiro, apontando a sua localização em um mapa, eu usei um mapa online de Fortaleza, você pode usar qualquer outro. Basta testar. 


PImage webImg;
void setup(){
size(800,600);
String url = "http://www.packtours.com.br/dest/ceara/for/mapa-grande.jpg";
webImg = loadImage (url, "jpg");
image(webImg,0,0);
}

void fourSquare(float x,float y){
fill(229,74,120);
noStroke();
rect(x,y,41.724,55.172,15,0,0,0);
rect(x+40,y,9.5,6,0,15,0,0);
rect(x+31.724,y+55.172-5.69,8.276,5.69,0,0,15,0);
quad(x+41.724,y+5.69,x+41.724-10,y+55.172-5.69,x+41.724-10+8.276,y+55.172-5.69,x+41.724+8.276,y+5.69);
quad(x,y+55,x,y+55.172+20,x+7.5,y+55.172+24,x+27.7,y+55);
ellipse(x+4,y+55.172+20,8.621,8.621);
fill(255);
rect(x+7.6,y+7.6,33.8,12.5,0,10,10,0);
rect(x+7.6,y+7.6,14,32.6);
rect(x+7.6,y+7.6+7.6+12.5,30.17,12.4,0,10,10,0);
triangle(x+7.6,y+7.6+7.6+12.5,x+7.6+18,y+7.6+7.6+12.5,x+7.6,y+62.52);
fill(229,74,120);
rect(x+7.6+14,y+20,2.414,7.76,10,0,0,10);
}

void mouseClicked(){
fourSquare(mouseX,mouseY);
}
void draw(){
}


O resultado é da imagem ao lado:
Bem vamos falar da relação do Breakout do Pong e da Apple.

Mas vocês devem estar se perguntando o que raios a Apple tem haver com esses dois clássicos da atari? Simples fato é, o Apple I foi desenvolvido usando a mesma arquitetura do Breakout, que por sua vez usou a mesma arquitetura do Pong, isso nos termos de hardware da epoca.

Vamos destrinchar um pouco melhor essa história.

Quando foram desenvolver o Breakout, o Allan Alcorn (Engenheiro da Atari, que trabalhou no desenvolvimento do Pong) contratou o Steve Jobs para desenvolver o projeto do jogo com uma arquitetura mais bem elaborada que o Pong, com menos chips, então ele confirma que conseguiria em menos tempo do que eles precisavam, mas o Jobs lembrou de um amigo dele o Steve Wozniak que foi quem fez toda a arquitetura por trás desse aparelho.

Tanto o Jobs quanto o Wozniak eles trabalharam na Atari e na HP, e foram eles que fundaram a Apple.

E apos criar o Breakout, Wozniak continuou seus experimentos ate que criou o Apple I com a mesma arquitetura das maquinas do Breakout.

E com essa criação foi algo bastante grandioso e ao mesmo tempo inovador, já que dessa vez ele melhorou o projeto, já que dessa vez ele criou um terminal no Apple I e assim o aparelho teve não só questão de hardware, mas software também.
Olá pessoal, hoje iremos brincar de criar clássicos do atari, e o escolhido da vez foi ele, o Breakout. Com uma arquitetura simples e bem similar ao Pong, o breakout consiste em você acerta a bolinha em varios blocos que estão acima de você.

Mas vamos para a parte de programar o jogo. E nela você precisará criar vários boleanos para identificar a colisão da bola em sua barrinha, e nos "inimigos". Serão cerca de 16 inimigos para o tamanho da tela que será usada, caso queiram fazer em uma tela maior, basta aumentar a quantidade também. Para as cores dos bloquinhos criasse alguns floats, e neles atribuísse a função random(0, 255) para que varie de 0 a 255 da escala de cor. 

Depois fazemos as funções de colisões possivel, e logo em seguida faremos a leitura das funções e criando todos os nossos objetos do jogo, nos seus devidos lugares.

O código encontra-se logo abaixo:


float bolaY=250 ;// onde a bola nasce, posição da bola
float bolaX=250 ;// onde a bola nasce, posição da bola
float dX=1; // velocidade da bola
float dY=1; // velocidade da bola
float tamBola=10;
float xP = 110; //posição da barra
float yP = 210; // posição da barra
float x1,x2,y1,y2;// variaveis para a função colisão
float xB=80; // tamanho da barra
float yB=10; // altura da barra
boolean x,z1,mz1,z2,mz2,z3,mz3,z4,mz4,mz5,z5,mz6,z6,mz7,z7,mz8,z8,mz9,z9,mz10,z10,mz11,z11,mz12,z12,mz13,z13,mz14,z14,mz15,z15,mz16,z16;
float xB1=20;// tamanho do inimigo
float yB1=10;//altura do inimigo
float xP1=0;//posição do inimigo
float yP1=20;//posição do inimigo
float xP2=20;
float xP3=40;//posição do inimigo
float xP4=60;
float xP5=80;
float xP6=100;//posição do inimigo
float xP7=120;
float xP8=140;
float xP9=160;
float xP10=180;//posição do inimigo
float xP11=200;
float xP12=220;
float xP13=240;//posição do inimigo
float xP14=260;
float xP15=280;
float xP16=300;
float corz11,corz12,corz13;
float corz21,corz22,corz23;
float corz31,corz32,corz33;
float corz41,corz42,corz43;

void setup (){
size(320,240);
mz1=false;
mz2=false;
mz3=false;
mz4=false;
mz5=false;
mz6=false;
mz7=false;
mz8=false;
corz11=random(0, 255);
corz12=random(0, 255);
corz13=random(0, 255);
corz21=random(0, 255);
corz22=random(0, 255);
corz23=random(0, 255);
corz31=random(0, 255);
corz32=random(0, 255);
corz33=random(0, 255);
bolaX=100;
bolaY=100;
}

Boolean colisao (float x1,float y1,float x2, float y2){
if(x1>x2 && x1<(x2+80) && y1>y2 && y1<(y2+10)){
  return true;
  } else {
    return false;  
         }
  }
  
Boolean colisaoInimigo (float x1,float y1,float x2, float y2){
if(x1>x2 && x1<(x2+20) && y1>y2 && y1<(y2+10)){
  return true;
  } else {
    return false;  
         }
  }

  
void bloco (float x1, float x2,float y1,float y2){
if (x==true){
  
    dY= -dY-(dY*0.01);
  }

}

void draw(){
  background(0);
  
 //bola em movimento
  
  ellipse(bolaX,bolaY,tamBola,tamBola);
  bolaY=bolaY+dY;
  bolaX=bolaX+dX;
  
  if(bolaY>=(height-(tamBola/2))){
  bolaX=40;
  bolaY=40;
  ellipse(40,40,tamBola,tamBola);
  bolaY=bolaY+dY;
  bolaX=bolaX+dX;
  
  }
  
  if(bolaY<=(tamBola/2)){
  dY= -dY-(dY*0.01);
  }
  
    if(bolaX>=(width-(tamBola/2))){
  dX= -dX-(dY*0.01);
  }
  
  if(bolaX<=(tamBola/2)){
  dX= -dX-(dY*0.01);
  }
 



  rect(xP, yP, xB, yB);  // barra inferior
  if(keyPressed == true) {   
      if(keyCode == RIGHT) {
         if(xP<=(320-xB)) 
          xP+=8; 
          } else if(keyCode == LEFT) {
               if(xP>=0){ 
                xP-=8; 
               }
          } 
   } 


// colisão
x = colisao(bolaX,bolaY,xP,yP);
if (x==true){
  if(bolaX>xP && bolaX

O resultado do jogo é mais ou menos esse.
Botão no processing? E existe uma função disso? Bem vamos criar uma função só pra animar um botão simples circular. Então ele vai ter na tela de desenho um botão.
Criaremos os 3 principais estados do botão o UP, OVER e DOWN. Com um calculo de distancia em duas dimensões, sabemos se o cursor do mouse esta dentro ou fora do nosso botão. Para o resultado estar dentro de uma unica equação vamos usar o produto notável da diferença.

 Então vamos começar a programar no processing. Para cada estado do nosso botão eu atribui uma cor para ele, assim sabemos em que estado ele se encontra. E finalmente, o código ficará assim como está logo abaixo:
Hoje vamos fazer não apenas um simbolo Yin-Yang, mas vamos a loucura fazendo 100 aparecendo em uma tela, lotando a tela.

 Começando com o processing.
Vamos fazer o seguinte. Criaremos uma função para desenhar ele, utilizando um único parâmetro para todos os raios das circunferências que serão 5 ao todo, e um arco. Fica assim a função:

 


void yinYang(float r,float x,float y){       // r é o raio dos circlos menores, x e y as coordenadas do centro da figura.
  fill(255);
  ellipse(x,y,(r*5)*2,(r*5)*2);                 // circulo branco grande
  fill(0);
  arc(x,y,(r*5)*2,(r*5)*2,PI,2*PI,PIE);         // Meio circulo preto, metade de cima
  ellipse(x+(2.5*r),y,(2.5*r)*2,(2.5*r)*2);    // circulo preto de raio 2,5 x raio do circulo menor
  fill(255);
  noStroke();
  ellipse(x-(2.5*r),y,(2.5*r)*2,(2.5*r)*2);    // circulo branco de raio 2,5 x raio do circulo menor
  ellipse(x+(2.5*r),y,r*2,r*2);                // circulo branco de raio r, é o circulo menor
  fill(0);
  ellipse(x-(2.5*r),y,r*2,r*2);                // circulo preto de raio r, é o circulo menor
}

Depois de fazer essa função, faremos ela aparecer 100 vezes, como ela aparecerá apenas as 100 vezes, iremos por tudo no "setup()". E o codigo se finalizará assim:



O resultado em imagem é algo próximo disso.
Olá pessoal, hoje vamos brincar um pouco de processing, vamos criar um belo jardim na sua tela. Bem é claro que o resultado não será esse da foto, ela é apenas ilustrativa.

 Pois bem vamos por partes:
Da maneira que eu desejo fazer (claro que existem varias maneiras de se desenhar uma flor, e varias maneiras de se desenhar no processing), eu preciso desenhar alguns círculos, representando as pétalas da flor e o seu centro. Para facilitar fazemos dentro de uma função, e para nossa facilidade, fazemos a flor em outra função variando a cor do centro com as petalas.
O código ficará dessa forma a seguir:


 Clique no botão para ver.
Arcade do Pong
Pong, um dos jogos mais nostálgicos de todos os tempos. Mas vocês já pararam para pensar como foi pra fazer essa faceta? Pois bem, vamos contar um pouco da história da criação do game, sendo o primeiro arcade do mundo, o inicio de uma nova industria milionária. 

Com apenas um pequeno aparelho movido a moedas dentro de um bar, a Atari iniciou sua ascensão com um jogo bem simples feito com o gênio chamado Ralph Baer, desenvolveu toda a logica do jogo, que consistia simplesmente de duas barrinhas laterais(como se fossem as raquetes de um ping-pong) que subiam e desciam na tela controladas por um botão no arcade, uma bolinha (era um quadrado na realidade, mas representa uma bola), uns tracejados no meio da tela, e um contador em cima. Ganhava pontos quem fizesse uma especie de gol, o que foi uma febre nos anos 70. 

O jogo Pong de 1972
Ele usou os circuitos da placa para criar a logica. Colocando o sistema de porta aberta e fechada como 0 e 1. Assim foi acionando para a bolinha ganhar velocidade conforme ele vai batendo na barra(apesar que isso foi um defeito que ele criou e virou como forma de dificultar o jogo), também a barra não chegar no máximo da tela(ele não conseguia fazer ela chegar de fato e usou isso ao seu favor como uma forma a mais de desafio) Então depois de muito sacrifício, ele consegue montar o primeiro de que seriam muitos. Assim foi a história do pong de forma resumida.
Olá pessoal, hoje vamos ver como da até para criar joguinhos simples com o Processing. Como ainda não estou muito expert no Processing, ele será bem simples,e seguindo os contextos físicos e matemáticos do movimento retilíneo uniforme e movimento retilíneo uniformemente variável. E com algumas coisinhas simples do Processing como o de clicar com o mouse vamos fazer com que a ideia de uma bolinha seguirá da parte de baixo da tela para cima usando os preceitos físicos descritos acima, e ele tem que atingir um retângulo que aparecerá aleatoriamente na tela.

Então o código fica mais ou menos assim como esta a baixo no botão:



Como ainda estou em estudos da linguagem do Processing, eu não sei como por na sua sintaxe a codificação para colisões, então em uma próximo encontro teremos esse joguinho com as suas correções devidas.
Olá pessoal, hoje vamos fazer um atividade simples que envolve matemática básica, e claro que a física básica. Vamos trabalhar com o Processing novamente, mas criando um simulador de movimento retilíneo uniforme, o famoso MRU. Para isso vamos pensar matematicamente como funciona a equação do MRU:


Onde o 'D' é a distância o 'V' é a velocidade e o 'T' é o tempo. E com essa função vamos criar um arquivo no Processing com uma função com essa ideia matemática, porem escrita de maneira que o software compreenda. O código esta descrito logo abaixo no botão



O resultado obtido é para ser exatamente assim:

  Olá pessoal, hoje vamos brincar um pouco com o Processing utilizando alguns exemplos que o próprio site deles fornece, e mudar um pouco o código pra ver o que acontece. Eu peguei uma que quebra a imagem que você colocar em pedaços quebrando a imagem conforme a posição do mouse. Esse exemplo usa o efeito de 3D. Então siga o código que esta no botão logo abaixo.






Então Como foi usado o código dessa maneira eu modifiquei um pouquinho e fiz algumas alterações simples da posição do desenho, só para ver como se sairia o resultado. Então para ver o resultado ponha o seguinte código, logo abaixo, no seu Processing e mande carregar, e veja o resultado.

   Olá pessoal, hoje vamos falar do querido "Processing", um open source (linguagem aberta) de IDE (Ambiente de Desenvolvimento Integrado, em tradução livre). Mas para começarmos a falar dele, vamos mostrar um pequeno documentário para tentar esclarecer mais as ideias.


   Agora que viram ao vídeo, vamos falar um pouco do "Processing", bem como no vídeo mostra, ele foi criado para servir como uma ferramentas de desenhos para um designer programar a maquina. Então como o computador é meio "burrinho", temos que explicar direitinho passo-a-passo o que queremos que ele faça. Então para pouparmos de decorar a linguagem de maquina feito louco, coisa que os designer não fazem muita questão, não que seja algo importante, criaram esse IDE que é mais próximo da linguagem humana. E com ela podemos fazer muita coisa, mas não é tão fácil como no vídeo mostra. Mas logico que podemos fazer sim.


   Esse IDE foi criado com a finalidade de ser aberto, para que qualquer designer possa criar e/ou desenvolver suas próprias invenções e melhorias também para o sistema. Ele foi pensado e projetado com essa finalidade. Dessa forma um designer poderá também programar sem ser um super programador, basta ele ter noções de lógicas matemática que já será uma grande para ele.
author
Sou - Samuel Lincoln -
Sou um aluno do Curso de Sistemas e Mídias Digitais da Universidade Federal do Ceará (UFC). Já estudei Matemática (bacharelado) e Matemática industrial, na mesma universidade. Trabalho como editor de vídeos do Laboratório de Mídias Eletrônicas, vinculada a Universidade Virtual (vinculada a UFC).
© + 1 no mundo high-tech All Rights Reserved. Created By ThemeXpose Designed By Lincoln00