Seja mais umnesse mundo tecnológico. O mundo é high-tech.



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:
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