Estudo para Prova - Chroma Key

Fiz esse código para estudar para a prova, já que tinha perdido essa aula.

Para fazer o Chroma Key, criei a máscara baseada na imagem e no cenário. Então percorri os pixels da máscara usando 2 for e para substituir, eu criei um IF onde ele perguntava se a cor era braco(255,255,255) ou não. Se fosse branco, substituia pela imagem do personagem, se não,
substituía pelo cenário.

Exemplo de Prova - Histograma

Para criar a aplicação, fiz um for que percorria toda a imagem e usei o comando "brightness" para receber a claridade da imagem. Depois outro for para desenhar linhas recebendo esse valor de claridade, formando um gráfico.

Trabalho 2 - Espirógrafo Átomo

Parte 1 - O que é um Espirógrafo

Para iniciar o trabalho, primeiro tive que entender o que era um espirógrafo, eu já tive uma dessas ferramentas quando era criança, mas não fazia ideia do seu nome.

O espirógrafo é uma ferramenta de desenho que produz curvas matemáticas conhecidas como hipotroclóides e epitroclóides.

Como funciona um Espirógrafo

Um espirógrafo consiste em um conjunto de engrenagens de plástico e outras formas como anéis, triângulos, ou barras retas. Existem vários tamanhos e formas de engrenagens, e todas as extremidades possuem dentes para se encaixar em outras peças. Uma caneta é usada tanto para desenhar quanto para promover a força locomotiva; é requerida alguma prática sobre Espirógrafo para poder operá-lo através das peças fixas e móveis.

Espirógrafo

Exemplos de Desenhos feitos com Espirógrafos

Parte 2 - Inspiração

Para realizar meu próprio espirógrafo, busquei inspiração em alguma forma, para fazer algo que não fosse somente um desenho aleatório, decidi então que faria um espirógrafo que se inspirasse, pelo menos no início, no formato de um átomo.

O Átomo é uma unidade básica de matéria que consiste num núcleo central de carga elétrica positiva envolto por uma nuvem de eletrões de carga negativa. Ele é representado geralmente por esse símbolo:

Parte 3 - O Código

Para realizar os desenhos do espirógrafo, utilizei obviamente dos calculos de seno e coseno de variáveis de raio já informadas previamente. Usando o comando BeginShape, o código utiliza de um for que vai se incrementando patra desenhar a forma baseada nos calculos trigonometricos. O comando vertex então desenha as formas conectando uma série de vértices recebendo os valores do raio.

Para interação, adicionei comandos para os três botões do mouse, o esquerdo incrementa com um valor aleatório o valor do raio inicial, o esquerdo diminui e o do meio muda a cor do desenho. Interessante notar que, mesmo com valores alatórios, o código ainda consegue formar imagens interessantes e bonitas de certa forma, pois esses valores aleatórios passam por um calculo trigonométrico e já terminam em um certo padrão matemático.

Para deixar o código mais interessante e que não ficasse tão estático, adicionei também um movimento ao desenho formado.

Código:

int x = 0;

float raio1 = 7;

float raio2 = 4;

float raio = raio1/raio2;

float R = 450;

float r = R/raio;

float angulo = 0;

float inc = PI/60;

color espi = color(random(10, 245), random(10, 245), random(10, 245));

void setup() {

  size(800, 500);

  smooth();

  noFill();

  strokeWeight(2);

  frameRate(60);

  if (raio < 1) { 

    R = 225*raio/(1-raio/2); 

    r = R/raio;

  }

}

void draw() {

  background(0);

  fill(255);

  text ("Use o Mouse", 10, 140);

  text ("Esquerdo - Modifica o Desenho(aumenta o raio)", 10, 160);

  text ("Direito - Modifica o Desenho(diminui o raio)", 10, 170);

  text ("Meio - muda a cor", 10, 180);

  noFill();

  ellipse (50, 80, 50, 80);

  ellipse (50, 60, 5, 10);

  line (30, 60, 70, 60);

  line (50, 60, 50, 40);

  translate(width/2, height/2);

  translate(abs(R-r)/2*cos(angulo), abs(R-r)/2*sin(angulo));

  stroke(espi);

  strokeWeight(3);

  espi();

  angulo += inc;

}

void espi() {

  beginShape();

  for (float i=0; i<angulo; i+= PI/100) {

    vertex(abs(R-r)/2*cos(i) + r/2*cos(-i*raio), abs(R-r)/2*sin(i) + r/2*sin(-i*raio));

  }

  endShape();

}

void mousePressed() {

  if (mouseButton == LEFT) {

    raio=-random(1, 10);

  } else if (mouseButton == RIGHT) {

    raio=+random(1, 10);

  } else { 

    espi = color(random(10, 245), random(10, 245), random(10, 245));

  }

}

Screenshot:

Gráficos de lançamento de moedas

Para fazer essa aplicação, usei o código para sorteio de lançamento de moeda mostrado em sala. Para gerar os gráficos em barra, somente diminui o valor do resultado pela altura da aplicação para fazer com que ele ficasse no fundo da tela e fiz com que a altura dos retangulos fosse igual ao valor de Caras ou Coroas.

Para o gráfico de pizza, só precisei fazer um arco de pizza com um doa valores em cima de uma ellipse completa, o que sobrou do círculo fica demostrado com a elipse atrás da mesma cor dos gráficos de barra.Para transformar o valor de porcentagem em radianos, fiz uma regra de três.

Código:

void setup () {
  size (400, 200);
  int Sorteado;
  int Caras = 0, Coroas = 0;
  for (int i = 0; i < 100; i++) {
    Sorteado = (int(random(2)));
    if (Sorteado == 0)
      Caras++;
    else
      Coroas++;
  }
  noStroke();
  fill(#F51E1E);
  rect (200, height-Caras, 30, Caras);
  fill(#1CCAEA);
  rect (260, height-Coroas, 30, Coroas);
  fill(0);
  text("Caras "+Caras, 140, height);
  text("Coroas "+Coroas, 300, height);
  text("Caras "+Caras+"%", 80, 150, height);
  text("Coroas "+Coroas+"%", 80, 60, height);
  println(Caras);
  println(Coroas);
  float radCaras = (6.28*Caras)/100;
  float radCoroas = (6.28*Coroas)/100;
  fill(#1CCAEA);
  ellipse (50, 100, 80, 80);
  fill(#F51E1E);
  arc(50, 100, 80, 80, 0, radCaras, PIE);
  println("Caras: " + Caras);
  println("Coroas: " + Coroas);
}

CrossFade

Tentei fazer esse código da forma mais simples, então usei o comando tint(), que mexe no alpha da imagem. Coloquei o valor do alpha para pegar a posição Y do mouse e então consegui um crossfade de uma forma bem concisa.

Envelhecimento de Imagem

Para fazer esse código usei alguns comandos do anterior (fazer o upload de imagem e deixá-la com tons de cinza).

Para deixar em tons de sépia, usei o comando tint() que pinta uma imagem da cor escolhida, e para gerar o ruído, usei 2 "for", um com tons de laranja e o outro preto, eles geravam centenas de círculos minúsculos aleatórios em toda imagem, gerando assim, um noise.

Imagem Original:

Resultado:

Código:

PImage imgOriginal;

PImage imgCopia = createImage(800, 800, RGB);

float r;

int pos;

void setup() {

 size(800, 800);

 imgOriginal = loadImage("original.jpg");

 for (int x = 0; x < 800; x++) {

 for (int y = 0; y < 800; y++) {

 pos = y * 800 + x;

 r = red(imgOriginal.pixels[pos]);

 imgCopia.pixels[pos] = color(r, r, r);

 }

 }

 tint (#C69220);

 image(imgCopia, 0, 0);

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

   stroke(random(0,200),random(0,100),0);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

    

 }

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

   stroke(0);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

   ellipse (random(0,800),random(0,800),0.2,0.2);

                  

 }

saveFrame();

}

Matriz/Edição de Imagem

O programa a seguir, isola cada cor RGB de uma imagem, além disso, ele isola os valores CMYK somando os RGB, deixa a imagem com tons de cinza(informando o mesmo valor para cada cor RGB), inverte (subtraindo-255 de cada cor), cria uma imagem em tons de cinza usando uma média ponderada e finalmente, adiciona uma variável que mexe no brilho da imagem.

O Código:

PImage imgOriginal;
PImage imgCopia = createImage(320, 240, RGB);
PImage imgCopia2 = createImage(320, 240, RGB);
PImage imgCopia3 = createImage(320, 240, RGB);
PImage imgCopia4 = createImage(320, 240, RGB);
PImage imgCopia5 = createImage(320, 240, RGB);
PImage imgCopia6 = createImage(320, 240, RGB);
PImage imgCopia7 = createImage(320, 240, RGB);
PImage imgCopia8 = createImage(320, 240, RGB);
PImage imgCopia9 = createImage(320, 240, RGB);
PImage imgCopia10 = createImage(320, 240, RGB);
float b2 = 100;
float bri = b2*2;
float g = 0;
float b = 0;


float r;
int pos;
void setup() {
 size(1280, 2000);
 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = blue(imgOriginal.pixels[pos]);
 imgCopia4.pixels[pos] = color(0, r, r);
 }
 }
 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = red(imgOriginal.pixels[pos]);
 imgCopia.pixels[pos] = color(r, 0, 0);
 }
 }

 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = blue(imgOriginal.pixels[pos]);
 imgCopia3.pixels[pos] = color(0, 0, r);
 }
 }
 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = green(imgOriginal.pixels[pos]);
 imgCopia2.pixels[pos] = color(0, r, 0);
}
 }
 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = green(imgOriginal.pixels[pos]);
 imgCopia5.pixels[pos] = color(r, r, 0);
}
 }
 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = green(imgOriginal.pixels[pos]);
 imgCopia6.pixels[pos] = color(r, 0, r);
}
 }
  imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = green(imgOriginal.pixels[pos]);
 imgCopia7.pixels[pos] = color(r, r, r);
}
 }

 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = green(imgOriginal.pixels[pos]);
 g = green(imgOriginal.pixels[pos]);
 b = blue(imgOriginal.pixels[pos]);
 imgCopia8.pixels[pos] = color(255-r,255-g,255-b);
}
 }
 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = green(imgOriginal.pixels[pos]);
 imgCopia9.pixels[pos] = color(r+0.3,r+0.59,r+0.11);
}
 }
 imgOriginal = loadImage("original.jpg");
 for (int x = 0; x < 320; x++) {
 for (int y = 0; y < 240; y++) {
 pos = y * 320 + x;
 r = red(imgOriginal.pixels[pos]);
 g = green(imgOriginal.pixels[pos]);
 b = blue(imgOriginal.pixels[pos]);
 imgCopia10.pixels[pos] = color(r+bri,g+bri,b+bri);
}
 }

}
void draw() {
  noTint();
 image(imgOriginal, 0, 0);
 image(imgCopia, 320, 0);
 image(imgCopia2, 640, 0);
 image(imgCopia3, 960, 0);
 image(imgCopia4, 0, 240);
 image(imgCopia5, 320, 240);
 image(imgCopia6,640, 240);
 image(imgCopia7,960, 240);
 image(imgCopia8,0, 480);
 image(imgCopia9,320, 480);
 image(imgCopia10,640, 480);
}

Olho

Para fazer essa aplicação, uso um if para pegar as posições X e Y do mouse e transpor isso para a posição de um círculo dentro de outro que fica estático. O desafio aqui foi fazer com que o círculo não saia do outro maior. Para isso, fiz com que ele parasse de se mover quando chegasse até a borda, usando outro IF.

Clique na imagem para ampliar:

Cronômetro

Esse programa é uma evolução daquele que recebe um ângulo e um raio e traça uma linha dele até o ponto inicial. Para isso, tive que traduzir o ângulo informado em radianos e usar a fóruma informada x = r *cos(angulo) e y = r* sen(angulo) para conseguir as coordenadas polares. Para transformar em um cronômetro, somente adicionei a função millis(), incrementando-a no angulo e diminuindo o Frame Rate para que ficasse o mais fiel possível a um relógio.

Clique na Imagem para Ampliar

Desenhar Polígono informando o número de lados

Para criar essa aplicação, criei uma função polígono, que é desenhado apartir de algumas variáveis. A variável "a" vai se incrementando com o a "angle" até que seu valor seja de 2 PI.

Para que a forma seja desenhada, utilizei o comando BeginShape, que serve justamente para desenhar formas mais complexas a partir de vértices. Vértices esses conseguidos através de cãlculos trigonométricos de seno e cosseno.

Quando a função "pol" é chamada, me certifiquei que ela ficasse centralizada e existe um espaço para se colocar a quantidade de lados que deseja.

Clique na Imagem para Ampliar

Barco navegando

Para fazer esse código, usei o método de seno apresentado na aula para fazer as ondas e o barco. Estava tendo problemas para apagar o rastro do barco e a resolução foi colocar o Background dentro do "draw", mas fazendo isso, eu também apagava a "água". Para isso, fiz a água dentro de um "for" para que ele não fosse influenciado pela mudança da cor de fundo.

Código:

float x = 0;
void setup () {

  size (800, 600);
}


void draw () {
  background (0);
  for (float x = 0; x < 800; x+=0.1) {
    float y = sin(x);
    noStroke ();
    fill (#37BCE3);
    ellipse (40*x, 50*y+300, 10, 10);
  }

  float y = sin(x);
  x+=0.1;
  fill (#B2B2B2);
  noStroke();
  rect (40*x-40, 50*y+260, 60, 40);
  rect (40*x-25, 50*y+245, 30, 20);
}

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