Trabalho 1 - Modos Natural, Matemático e Computacional - O Hexágono

O hexágono pode ser encontrado em vários lugares na natureza, nas colméias das abelhas, em pedras que vão se formando com as pancadas do mar. Mas porque? Os hexágonos são uma forma muito interessante de 6 lados iguais que podem se encaixar e aproveitar o máximo possível o espaço.

Considere a seguinte imagem:
                               

Alguns matemáticos afirmam que os hexágonos são umas das poucas formas que podem ser justapostos de modo a que não exista qualquer espaço não ocupado entre eles. Se você comparar o uso de hexágonos com quadrados para formar uma forma maior, o hexágono terá o menor perímetro relacionado com a área. Ou seja, as abelhas usam menos cera para formar essas grades, ou seres humanos usariam menos cimento, além de terem menos trabalho. Podemos imaginar que de acordo com a evolução, somente as abelhas que faziam as colméias em forma de hexágono que sobreviveram, pois elas otimizavam melhor suas casas usando essas magníficas formas.

Hexágonos na Natureza:

Formação de pedras na Irlanda do Norte

Flocos de neve

Colmeias

Casco de Tartaruga

Os hexágonos também são bastante usados como tabuleiros de boardgames, é fácil de encaixar hexágonos entre si e ter uma grande área com várias "casas" para serem usadas, além do que, cada uma dessas casas possui outras 6 ligadas a si, abrindo mais opções estratégicas, como podemos ver nos seguintes exemplos:

Catan

Battletech

Na geometria, o hexágono é um polígono com seis lados e 9 diagonais.

A área de um hexágono regular de lado a pode ser calculada com a seguinte fórmula:

O interessante do hexágono é que ele também pode ser feito por 6 triângulos equiláteros, sendo assim, pode-se conseguir a área de um hexágono conseguindo calcular os seus triângulos internos.No Processing, os hexágonos podem ser desenhados usando a função vertex, pois todas as formas podem ser formadas juntando suas vértices. Juntando seis vértices você pode formar um hexágono, para que as formas sejam iguais, só precisa-se definir uma distância para que seja repetida entre os vértices que se seguem.

Para que o "vertex" funcione, tem que ser usado dentro da função beginShape, terminando com endShape, pois o processing pegará as posições informadas e vai formar a peça.

E foi isso que o programador fez no código apresentado a seguir, ele informou variáveis que dependem da posição do mouse e , usando os vertex que pega a posição x e y do mouse, desenha hexágonos com lados iguais enquanto se move o mouse.

Código usado:

http://www.openprocessing.org/sketch/26607

Alguns vídeos para ilustrar o assunto

Porque as abelhas adoram hexágonos:

Hexágonos nos flocos de neve:

Um vídeo (um pouco estranho) mostrando a formação do hexágono e suas aplicações na natureza: 

                                

Aula 14 - Movendo quadrado

Essa função pega dois cliques e faz o quadrado se mover da posição do primeiro clique para a posição do segundo calculando a distância entre os dois cliques e criando quadrado até a posição do clique final.

Código:

float i = 0;
int a;
int b;
int c;
int d;
int e = 0;
void setup(){
  size(600,600);
 background(0);
}

void mouseClicked(){
    if( e==0){
      a = mouseX;
      b = mouseY;
      e++;
    }
    else{
      c = mouseX;
      d = mouseY;
     
      e++;
  }
}

void draw (){
  if(e==2){
  background(0);
  MoveCaixa2(a,b,c,d, 100);
 
}}

void MoveCaixa2(int xinicial, int yinicial,int xfinal, int yfinal, float passos){
 
  if (i <= 1){
    rect (xinicial+(i*(xfinal-xinicial)),yinicial+(i*(yfinal-yinicial)),10,10);
    i = i+(1/passos);
  }
  else {
    rect (xinicial+(i*(xfinal-xinicial)),yinicial+(i*(yfinal-yinicial)),10,10);
  }
}

Círculos que mudam de cor

Tive alguns problemas para fazer esse código, mas a lógica é pegar a posição do mouse e fazer com que os retângulos mudem de cor, o programa pega a posição do mouse exatamente onde ele estaria em cima dos círculos. Ou seja, a posição x e y tem que estar depois do início dos círculos e antes que eles acabem. Para mudar a cor foi colocado um valor random na cor dos elipses.

Código:

int x = int (random(10,800));
int y = int (random(10,800));
int h = int (random(100,200));

void setup (){
  frameRate (20);
  size (800, 600);
 ellipse (x, x, h, h);
  ellipse (y, y, h, h);
 
}
void draw (){

if (mouseX > x/2 && mouseX < (x/2)+h && mouseY > x/2 && mouseY < (x/2)+h)
  ellipse (x, x, h,h);
fill  (random(800),random(800),random(800),random(800)) ;
 
  if (mouseX > y/2 && mouseX < (y/2)+h && mouseY > y/2 && mouseY < (y/2)+h)
 ellipse (y,y, h,h);
   fill(random(800),random(800),random(800),random(800));
 
 
 
}

Aula 11 -0 Bandeira do Brasil

LF 5700, S. II, A. 5 - 01/09/1971

I - Para cálculo das dimensões, tomar-se-á por base a altura desejada, 

dividindo-se esta em 14 partes iguais. Cada uma das partes será 

considerada uma medida ou módulo.

II - O largura total será de 20 módulos.

III - A distância dos vértices do losango ao quadro externo será de um 

módulo e sete décimos.

IV - O círculo no meio do losango terá o raio de três módulos e meio.

Fazer essa função foi bem mais fácil usando o papel para desenhar e ver como ia ficar, a variável X representa os módulos que fala na lei, usei esses módulos como as medidas para tudo, para desenhar o background, o losango e o círculo. Para conseguir o tamanho do círculo multipliquei o raio pedido por 2.

Código:

int x= 10;
void setup ()
{
 int x= 10;
  size (20*x, 14*x);
  background (#00A201);
  mostraBandeiraHue();
}

void mostraBandeiraHue(){
   noStroke();
   fill (#F7F714);
   quad (1.7*x,7*x, 10*x, 1.7*x, 18.3*x, 7*x, 10*x, 12.3*x);
   fill (#0039C6);
   ellipse ( 10*x, 7*x, 7*x,7*x);

}

AULA 10 - YIN YANG

Essa atividade foi a mais fácil, talvez eu esteja pegando o jeito da coisa, talvez...

Para fazer esse símbolo usei o esquema de grid em quadrados, pois parecia o mais simples para mim.  Adicionei os círculos dentro dos quadrantes corretos de acordo com o grid e um arco para deixar a metade do círculo de uma cor, tirar as linhas foi esencial para gerar o efeito de "blend".

Código:

size (200, 200);

noStroke();

ellipse (100, 100, 200, 200);

fill(0);

arc (100, 100, 200, 200, PI, PI*2, PIE);

ellipse (150, 100, 100, 100);

fill (255);

ellipse (50, 100, 100, 100);

ellipse (150, 100, 25, 25);

fill (0);

ellipse (50, 100, 25, 25);

save ("yy.jpg");

AULA 09 - BREAKOUT

Para gerar o efeito na bola eu criei uma variável random com uma pequena variação, quando a bola recebe o valor aceleração depois que acerta o padle, eu também estou adicionando a variável efeito(random), então, toda vez que a bola acertar o padle, ela aumenta a velocidade e também recebe uma pequena variação aleatória no seu valor x.

Código:

float bolaX = 10;

float bolaY = 290;

float dX = 5;

float dY = 5;

float aceX = dX*0.01;

float aceY = dY*0.01;

int a = 100;

int b = 100;

boolean vida = true;

float efeito = random(0.01,0.05);

void setup() {

  size(800, 600);

  frameRate(120);

}

void draw () {

  background(0);

 

 

 

  rect(mouseX, 580, 60, 10);

  println(mouseX);

 

  if (vida = true)

  ellipse(bolaX, bolaY, 20, 20);

  bolaX = bolaX + dX;

  bolaY = bolaY + dY;

 

  if (bolaX >= 790 || bolaX <= 0  ) {

    dX = -dX;

    aceX = -aceX-efeito;

    dX += aceX;

  }

 

  if (bolaY >= 580 && bolaX >= mouseX && bolaX <= mouseX+60 || bolaY <= 0) {

    dY = -dY;

    aceY = -aceY;

    dY += aceY;

   

  }

 

  if (dY >= 550)

  vida = false;

 

}

AULA 8 - PONG

Para inserir o padle foi criado um retângulo que pega as informações do mouse, mas somente a posição vertical, para isso, o valor Y da posição é a posição do mouse no momento.

float bolaX = 10;

float bolaY = 290;

float dX = 5;

float dY = 5;

float aceX = dX*0.1;

float aceY = dY*0.1;

int a = 100;

int b = 100;

void setup() {

  size(800, 600);

  frameRate(120);

}

void draw () {

  background(0);

 

  for(int i = 0; i < 30; i++){

    rect(395, i*20, 10, 10);

  }

 

  rect(0, mouseY, 10, 60);

  println(mouseY);

 

  ellipse(bolaX, bolaY, 20, 20);

 

  bolaX = bolaX + dX;

  bolaY = bolaY + dY;

 

  if (bolaX >= 790 || bolaX <= 0) {

    dX = -dX;

    aceX = -aceX;

    dX += aceX;

  }

 

  if (bolaY >= 590 || bolaY <= 0) {

    dY = -dY;

    aceY = -aceY;

    dY += aceY;

  }

}

AULA 7 - Relógio

Para criar o relógio, eu pesquisei e achei um código para pegar a hora e minutos do computador e criei variáveis que pegam esses valores, usando as ferramentas de divisão e resto, consegui gerar as dezenas e unidades.

O resto foi o trabalho braçal de substituir os números por imagens.

Código:

int minuto = minute();

int unidadeM = minuto%10;

int dezenaM = minuto/10;

int hora = hour();

int unidade = hora%10;

int dezena = hora/10;

void setup() {

  background(#C18758);

size(260, 70);

 frameRate(1);

}

//////////////////////////// DEZENA HORA

void draw (){

if (dezena==1) { PImage imgTeste;

imgTeste = loadImage("1.jpg");

image(imgTeste, 0, 0);

}

else if (dezena==2) { PImage imgTeste;

imgTeste = loadImage("2.jpg");

image(imgTeste, 0, 0);

}

else if (dezena==3) { PImage imgTeste;

imgTeste = loadImage("3.jpg");

image(imgTeste, 0, 0);

}

else if (dezena==4) { PImage imgTeste;

imgTeste = loadImage("4.jpg");

image(imgTeste, 0, 0);

}

else if (dezena==5) { PImage imgTeste;

imgTeste = loadImage("5.jpg");

image(imgTeste, 0, 0);

}

else if (dezena==6) { PImage imgTeste;

imgTeste = loadImage("6.jpg");

image(imgTeste, 0, 0);

}

else if (dezena==7) { PImage imgTeste;

imgTeste = loadImage("7.jpg");

image(imgTeste, 0, 0);

}

else if (dezena==8) { PImage imgTeste;

imgTeste = loadImage("8.jpg");

image(imgTeste, 0, 0);

}

else if (dezena==9) { PImage imgTeste;

imgTeste = loadImage("9.jpg");

image(imgTeste, 0, 0);

}

else if (dezena==0) { PImage imgTeste;

imgTeste = loadImage("0.jpg");

image(imgTeste, 0, 0);

}

////////////////////////////// UNIDADE HORA

if (unidade==1) { PImage img2;

img2 = loadImage("1.jpg");

image(img2, 65, 0);

}

if (unidade==2) { PImage img2;

img2 = loadImage("2.jpg");

image(img2, 65, 0);

}

if (unidade==3) { PImage img2;

img2 = loadImage("3.jpg");

image(img2, 65, 0);

}

else if (unidade==4) { PImage img2;

img2 = loadImage("4.jpg");

image(img2, 65, 0);

}

else if (unidade==5) { PImage img2;

img2 = loadImage("5.jpg");

image(img2, 65, 0);

}

else if (unidade==6) { PImage img2;

img2 = loadImage("6.jpg");

image(img2, 65, 0);

}

else if (unidade==7) { PImage img2;

img2 = loadImage("7.jpg");

image(img2, 65, 0);

}

else if (unidade==8) { PImage img2;

img2 = loadImage("8.jpg");

image(img2, 65, 0);

}

else if (unidade==9) { PImage img2;

img2 = loadImage("9.jpg");

image(img2, 65, 0);

}

else if (unidade==0) { PImage img2;

img2 = loadImage("0.jpg");

image(img2, 65, 0);

}

////////////////////////// DEZENA MINUTO

if (dezenaM==1) { PImage imgTeste;

imgTeste = loadImage("1.jpg");

image(imgTeste, 130, 0);

}

else if (dezenaM==2) { PImage imgTeste;

imgTeste = loadImage("2.jpg");

image(imgTeste, 130, 0);

}

else if (dezenaM==3) { PImage imgTeste;

imgTeste = loadImage("3.jpg");

image(imgTeste, 130, 0);

}

else if (dezenaM==4) { PImage imgTeste;

imgTeste = loadImage("4.jpg");

image(imgTeste, 130, 0);

}

else if (dezenaM==5) { PImage imgTeste;

imgTeste = loadImage("5.jpg");

image(imgTeste, 130, 0);

}

else if (dezenaM==6) { PImage imgTeste;

imgTeste = loadImage("6.jpg");

image(imgTeste, 130, 0);

}

else if (dezenaM==7) { PImage imgTeste;

imgTeste = loadImage("7.jpg");

image(imgTeste, 130, 0);

}

else if (dezenaM==8) { PImage imgTeste;

imgTeste = loadImage("8.jpg");

image(imgTeste, 130, 0);

}

else if (dezenaM==9) { PImage imgTeste;

imgTeste = loadImage("9.jpg");

image(imgTeste, 130, 0);

}

else if (dezenaM==0) { PImage imgTeste;

imgTeste = loadImage("0.jpg");

image(imgTeste, 130, 0);

}

///////////////////////////////////MINUTO UNIDADE

if (unidadeM==1) { PImage img2;

img2 = loadImage("1.jpg");

image(img2, 195, 0);

}

if (unidadeM==2) { PImage img2;

img2 = loadImage("2.jpg");

image(img2, 195, 0);

}

if (unidadeM==3) { PImage img2;

img2 = loadImage("3.jpg");

image(img2, 195, 0);

}

else if (unidadeM==4) { PImage img2;

img2 = loadImage("4.jpg");

image(img2, 195, 0);

}

else if (unidadeM==5) { PImage img2;

img2 = loadImage("5.jpg");

image(img2, 195, 0);

}

else if (unidadeM==6) { PImage img2;

img2 = loadImage("6.jpg");

image(img2, 195, 0);

}

else if (unidadeM==7) { PImage img2;

img2 = loadImage("7.jpg");

image(img2, 195, 0);

}

else if (unidadeM==8) { PImage img2;

img2 = loadImage("8.jpg");

image(img2, 195, 0);

}

else if (unidadeM==9) { PImage img2;

img2 = loadImage("9.jpg");

image(img2, 195, 0);

}

else if (unidadeM==0) { PImage img2;

img2 = loadImage("0.jpg");

image(img2, 195, 0);

}

}

AULA 6 - MRUV

As mudanças feitas foram a adição de textos que puxam as informações de tragetória horizontal e vertical da bola lançada que são desenhadas de acordo com a equação do MRUV.

Tive que desenhar um retângulo pois estava acontecendo um bug onde o texto ficava ilegível quando apresentado no fundo do programa.

float dv;

int v0v = 30;

float t = 0.05;

int av = -10;

float dh;

int vh = 30;

void setup() {

  size(600, 300);

  frameRate(20);

  background(150);

}

void draw() {

  Retangulo();

  textos();

  Bola();

}

void Bola() {

  dh = vh * t;

  dv = v0v * t + av * t * t / 2;

  ellipse(dh+1, 300- dv, 10, 10);

  t += 0.05;

 

  if(dv<0){

    dv = 0;

    vh = 0;

  }

}

void textos() {

  fill(255);

  textSize (20);

  text("Dist Horizontal: "+dh, 20, 20);

  text("Dist Vertical: "+dv, 20, 40);

    save ("bola.jpg");

}

void Retangulo() {

  noStroke();

  fill(150);

  rect(0, 0, 600, 100);

}

Aula 5 - MRU

As mudanças realizadas foram uma linha para informar a distância percorrida e o tempo gasto ( eles pegam os valores constantes d e t e os "printam" na tela), o framerate mudado para 24 fps (para ter um valor mais preciso) e uma linha com uma equação para o tempo ( onde ele é incrementado por seu proprio valor mais 0.05. Tambem mudei a cor da bola e o tamanho da tela por questões visuais.

float d = 0;

float v = 30;

float t = 0;

void moveBolaMRU(){

d= v*t;

println("Distancia Percorrida (m)= ",d," Tempo Gasto (s) = ",t);

fill (0);

ellipse(1+d,300,10,10);

}

void setup(){

  size(800,600);

  frameRate(24);

}

void draw(){

  if(d>=800){

    

     stop();

  }

  moveBolaMRU();

  t= t + 0.05;

}

Aula 4 - Bolinhas

Atividade 1

Para essa atividade criei um "for" que vai desenhando as bolas até chegar no fim do código, a ellipse sempre tem valores de posição e tamanho variados, que vão mudando a medida que ela vai "descendo", quanto maior a posição y, maior o tamanho.

void setup () {

  size (400, 400);

  background (255);

  fill (100);

}

void draw () {

  float w=0;

  float h=0;

  for (int j=0; j <=400; j+=40) {

    for (int i=0; i <=400; i+=40){

   fill (0);  

      ellipse (i, j, w, h);

      if (w < 500){

        w = w+0.5;

      }

      if (h < 500){

        h = h+0.5;

      }

    }

  }

}

Atividade 2

Essa foi bem mais complicada, o desafio era fazer que as bolas ficassem menores a medida que se aproximavam do centro. As diferenças são que a posição x da ellipse não muda mas os outros valores de posição e tamanho vão se basear na "distância percorrida"

void setup() {

  size(400, 300);

  noStroke();

}

void draw() {

  background(0);

  for(int l = 0; l <= 400; l += 20) {

    for(int a = 0; a <= 300; a += 20) {

   

      float tam = dist(200, 150, l, a);

      tam = tam/ 500 * 66;

      ellipse(l, a, tam, tam);

    }

  }

}

Aula 3 - Imagem gerada por Função

Função para criação de uma onda

Código:

int xespaco = 1;  

int o;             

float t = 0.0;

float abertura = 100; 

float periodo = 200; 

float dx; 

float[] valory; 

void setup() {

  size(800, 500);

  o = width+10;

  dx = (TWO_PI / periodo) * xespaco;

  valory = new float[o/xespaco];

}

void draw() {

  background(0);

  calcWave();

  renderWave();

}

void calcWave() {

 

  t += 0.02;

 

  float x = t;

  for (int i = 0; i < valory.length; i++) {

    valory[i] = sin(x)*abertura;

    x+=dx;

  }

}

void renderWave() {

  noStroke();

  fill(255);

 

  for (int x = 0; x < valory.length; x++) {

    ellipse(x*xespaco, height/2+valory[x], 10, 10);

  }

}

Resultado ( na verdade o código gera uma animação, essa é uma screenshot):

Aula 2 - Observações acerca de um exemplo de código

O exemplo que peguei ensina e demonstra como fazer uma curva bezier onde um dos pontos é controlado pelo mouse. A curva bezier tem o objetivo de ligar os dois pontos, o que torna interessante visualmente quando um dos pontos é estático e o outro é movido pelo mouse. Para modificar o código eu fiz algumas alterações como diminuir o número de linhas e manter a linha estática, essas mudanças me fizeram entender melhor o que era o que dentro do código e aprender onde devo mexer para alterar um parâmetro específico. Ao olhar pela primeira vez parece bastante complicado porque são muitos valores ( na curva bezier, por exemplo, os dois primeiros números são a posição inicial e os dois finais representam a posição final), mas depois de analisar bem e modificar alguns valores, fica mais fácil entender o código.

Aqui o código:

void setup() {
  size(640, 360); 
  stroke(255);
  noFill();
}

void draw() {
  background(0);
  for (int i = 0; i < 200; i += 20) {
    bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0));
  }
}

Link para a página do Processing:

http://processing.org/examples/bezier.html

Aula 1 - Impressões sobre o filme Hello World! Processing

O documentário "HelloWorld! Processing" nos traz uma abordagem interessante sobre o processo de códigos e introduz a ferramenta de programação processing. Utilizando de vários trechos de outros filmes e com entrevistas com a equipe por traz do software, o vídeo tenta explicar os princípios primordiais do código, mostrando como podemos encontrá-lo na natureza e como podemos entendê-lo melhor.

O outro objetivo do filme é falar sobre a ferramenta Processing, para isto, temos depoimentos de alguns profissionais da área para destrinchar e explicar melhor o que é esse programa. O que eu entendi pelo menos é que o processing é uma ferramenta de programação simples voltada para estudo e experimentação, ela foi feita de forma que até leigos em programação possam usá-la para criar. O interessante do Processing é que ele trabalha com uma forma de programação para gerar gráficos, dessa forma, ele pode ser usado tanto na área da matemática, design ou até mesmo para criar arte.

O filme pode ser visto nesse link:

http://vimeo.com/album/2281901/video/60735314

Olá Mundo!

Me chamo Raphael Carmo (PH) e esse blog tem fins educacionais, ele foi criado para a cadeira de Matemática aplicada à Multimídia do curso Sistemas e Mídias Digitais da Faculdade Federal do Ceará.

As postagens podem parece muito próximas às outras porque eu perdi as primeiras aulas da cadeira e tive que correr atrás :s