domingo, 31 de janeiro de 2016

Tarefa 05 - Movimento Balístico

Tarefa:
alterar a aplicação de lançamento balístico para recálculo a cada 0,1 segundo (= 10 fps), porém mantendo o tempo real.

// Criei duas variáveis diferentes para o movimento vertical e para o movimento horizontal, bem como, duas variáveis diferentes para a distância. Como a atividade acrescentava um tempo float, tive que mudar algumas variáveis para float também.

int vAtualH = 10;
int vAtualV = 10;
int aAtual = -1;
float tAtual = 0;
float dAtualH;
float dAtualV;

void setup(){
  frameRate(10);
  size(600,600);
   

  }
  

void draw(){
  background(25,25,112);
  dAtualV = MRUV(vAtualV,aAtual,tAtual);
  dAtualH = MRU(vAtualH,tAtual);
    println(tAtual,dAtualH);
    ellipse(dAtualH, 600 - dAtualV,10,10);
    tAtual = tAtual + 0.1;
mostraGrade();
}

float MRUV(int v, int a, float t){
  float d = v*t + a*t*t/2;
  return(d);
}

float MRU(int v, float t){
  float d = v*t;
  return(d);
}

void mostraGrade(){
  for(int i=0; i<12; i++){
    line(i*50,0,i*50,600);
    line(0,i*50,600,i*50);
  }
}


Tarefa 04 - MRU

Olá Pessoas...

Eis a tarefa de MAMI...

Alterar o mundo de acordo com uma harmonia cromática a sua escolha e, informar na própria tela (comando text) em tempo real, os valores de todas as variáveis envolvidas na simulação.

Vamos lá...

Essa atividade na verdade. fazia parte de um conjunto de atividades que deveriam ser desenvolvidas, culminando com o código abaixo.
Assim, você deveria simular o Movimento Retilíneo Uniforme (MRU) através de uma ellipse. Para tanto, teríamos que criar algumas funções e procedimentos extras para facilitar o processo.

Eis o código abaixo:

int tAtual = 0;
int vAtual = 10;
int dAtual;
int x;
int y = 300;
int r = 20;

void setup(){
  frameRate(1);
  size(600,600);
  
  }
  

void draw(){
  background(25,25,112); 
  dAtual = MRU(vAtual,tAtual);
  println(tAtual,dAtual);
  tAtual++;
  fill(138,43,226);
  ellipse(dAtual,y,r,r);
  mostraGrade();
  textSize(20);
  text("A velocidade média é de " + vAtual + " m/s", 10, 540); 
  fill(255);
  
  textSize(20);
  text("A distância percorrida é de " + dAtual + " metros", 10, 565);
  fill(255);

  textSize(20);
  text("O tempo gasto é de " + tAtual + " segundos", 10, 590); 
  fill(255);
}

int MRU(int v, int t){
  int d;
  d = v*t;
  return(d);
}

void mostraGrade(){
  for (int i = 0; i < 12; i++){
    fill(255);
    line(i*50,0,i*50,600);    
  }
}

Eis o resultado final:


Tarefa 03 - Flores Randomicas

Tarefa: Criar  função  flor3(x,  y,  r)  que  cria  uma flor  como  a figura  abaixo.  Depois  chamála  100  vezes  com  posições  e  raios randômicos.  Mostrar  o  código  e  discutir  a regra  de  criação.

1º Passo:

Criar a tela inicial onde as flores aparecerão:


void setup(){
  size(800,800);

}

2º Passo:

Criar a função Círculo que será utilizada na função flor. Assim, teremos a função flor chamando a função círculo.

void circulo(float x,float y,float r){
  ellipse(x,y,2*r,2*r);
}

3º Passo:

Criar a função "flor".


void flor(float x, float y){
  float r = random(100);
  float pos = r * 1.4;
  
  circulo(x,y,r);  
  circulo(x-pos,y+pos,r);
  circulo(x+pos,y-pos,r);
  circulo(x+pos,y+pos,r);
  circulo(x-pos,y-pos,r);
}

4º Passo:

Chamar a flor e determinar que ela seja randômica, ou seja, ela vai aparecer durante 100 vezes e parar. Para tanto, no início criei um variável global v, que pode ter valor inicial zero e com valor inteiro.

void draw(){
 if (v < 101){
   
   float r1 = random(1000);
   float r2 = random(1000);
   
   flor(r1,r2);
   
   v = v + 1;
 }
}

Se v (qtde de vezes chegar a 100) ele para e ao mesmo tempo, torna randômico as posições x, y e r da ellipse, fazendo com que elas apareceram em vários lugares da tela.

Tärefa 02 - Apropriação de exemplo

Olá


  • A tarefa referente a aula 02, consistia em apresentar, alterar e comentar em seu Blog um dos exemplos disponíveis em: http://processing.org/examples

Explicando a tarefa: devemos escolher um código localizado na página de exemplos do processing e a partir do exemplo manipular o código, criando uma nova aplicação.

Esse foi o código a ser modificado:


Pointillism by Daniel Shiffman.

Mouse horizontal location controls size of dots. Creates a simple pointillist effect using ellipses colored according to pixels in an image.
PImage img;
int smallPoint, largePoint;

void setup() {
  size(640, 360);
  img = loadImage("moonwalk.jpg");
  smallPoint = 4;
  largePoint = 40;
  imageMode(CENTER);
  noStroke();
  background(255);
}

void draw() { 
  float pointillize = map(mouseX, 0, width, smallPoint, largePoint);
  int x = int(random(img.width));
  int y = int(random(img.height));
  color pix = img.get(x, y);
  fill(pix, 128);
  ellipse(x, y, pointillize, pointillize);
}
Arquivo modificado:
PImage img;
int smallPoint, largePoint;

void setup() {
  size(400, 300); //Tamanho da imagem alterada
  img = loadImage("morrobranco.jpg");//Arquivo de imagem alterada
  smallPoint = 4;
  largePoint = 20;//largura do quadrado
  imageMode(CENTER);
  noStroke();
  background(255);
}

void draw() { 
  float pointillize = map(mouseX, 0, width, smallPoint, largePoint);
  int x = int(random(img.width));
  int y = int(random(img.height));
  color pix = img.get(x, y);
  fill(pix, 128);
  rect(x, y, pointillize, pointillize);//com a mesma tecnica do pontilismo, modifiquei para um quadradismo.
}
Essa é a imagem original que vai ser pontilhada.



quarta-feira, 9 de dezembro de 2015

Trabalho 01 - Apropriação de Design

Olá Car@s Coleg@s,

Nessa postagem, iremos explicar como foi feita a apropriação relativa a um design existente, modificando-o. Tal atividade foi realizada como requisito da disciplina de Matemática Aplicada à Multimídia - MAMI, do curso de Sistemas e Mídias Digitais da Universidade Federal do Ceará, profº Clemilson Santos.

Como o objetivo era se apropriar e modificar um design existente, busquei várias imagens que retratassem formas geométricas e que desse modo, facilitasse o meu "trabalho". Assim, as primeiras imagens que vieram a minha mente foram as de Mondrian.


Apresentando a imagem ao professor, o mesmo disse: "Vocês tem capacidade de fazer algo melhor!" Assim, abandonei Mondrian e fui pesquisar novos designs.

Nessa pesquisa idealizei o símbolo do anarquismo, um design que poderia ser transformado em diversas formas geométricas, porém, achei muito simples. Eis a imagem:


Então, andando na rua, me deparei com um fusca! Observando-o pude perceber várias formas geométricas, bem como, uma eficiência das formas. Assim, a partir do design busquei fazer a minha apropriação, que teve como objetivo principal inserir novos elementos, colorizar o design, convertê-lo em formas geométricas e torna-lo o máximo possível bem visto, principalmente para as crianças.


Após a visualização da imagem, passei a desenhá-la no papel a fim de perceber as proporções existentes. Encontrando assim várias formas geométricas: dois triângulos retângulos no capô do carro, como podemos visualizar na imagem abaixo:
Também, podemos perceber a existência de vários arcos, que compõem o teto e a parte onde ficam os faróis. E os faróis, mais fáceis de identificar, formados por elipses.

Na perspectiva de infantilizar a atividade, busquei colocar cores bem vibrantes e integrei junto ao desenho a figura de um boneco sendo movido pelo mouse e que muda de cor de acordo com o click, culminando com o seguinte código:

int x = 150;
int y = 150;
int cor = 0;


void setup(){
size(600,600);
frameRate(30);
}

void draw(){
  background(#e3f2fd);
 
 
fill(255); //desenho da linha 1
line(x,height/4,x-20,height/2);

fill(255); //desenho da linha 2
line(x+300,height/4,x+320,height/2);

fill(#ff1744); //desenho do retangulo
rect(x+150, 400, 320,320, 7);

fill(188,143,143);//desenho do arco
arc(x+150,y, 300, 80, PI, TWO_PI);

fill(0,100,0);//desenho dos dois triangulos
triangle(x+10, 300, x+150, 300, x+150, 480);

fill(102,205,170);
triangle(x+170, 300, x+300, 300, x+170, 480);


fill(250,128,114);//desenho dos dois círculos
ellipse(x+20,y+300, 80,80);

fill(255,0,255);
ellipse(x+290,y+300, 80,80);

//desenho do boneco
ellipseMode(CENTER);

rectMode(CENTER);


stroke(0); 

fill(0,cor,255-cor);

rect(mouseX,mouseY,20,100);

stroke(0);

fill(255);

ellipse(mouseX,mouseY-30,50,50);

fill(mouseX,0,mouseY);

ellipse(mouseX-15,mouseY-30,12,20);

ellipse(mouseX+15,mouseY-30,12,20);

stroke(0);

line(mouseX-10,mouseY,pmouseX-20,pmouseY+40);

line(mouseX+10,mouseY,pmouseX+20,pmouseY+40);

stroke(0);

line(mouseX-10,mouseY+50,pmouseX-10,pmouseY+80);

line(mouseX+10,mouseY+50,pmouseX+10,pmouseY+80);


}

void mousePressed() {

if (cor==250){

cor = 0;

}

cor+=50;

}

Até a próxima...

segunda-feira, 19 de outubro de 2015

Fim da Greve e Mãos a Obra!!!

Olá povo...

Retornando após alguns dias, na verdade, mtos dias por conta da luta dos professores da Universidade Federal do Ceará - UFC e técnicos administrativos.

Voltando, começamos nossa, ou melhor, recomeçamos a nossa disciplina, Matemática Aplicada à Multimídia - MAMI com o professor Clemilson.

E, vms q vms...

segunda-feira, 10 de agosto de 2015

Bem vindos... - Tarefa 01 - Hello World, Processing

Olá...
Este Blog tem por objetivo apresentar as atividades relativas à disciplina>> Matemática Aplicada à Multimídia do Curso de Sistemas e Mídias Digitais pela Universidade Federal do Ceará - UFC.
Quem quiser curtir e acompanhar... Está liberado...


Vídeo para atividade da última aula: Hello World, Processing





A atividade consistia em colocar minhas observações acerca do documentário: "Hello World, Processing" disponibilizado no link acima.
Dessa forma, o documentário nos apresenta inicialmente dois conceitos: o tempo e as coisas. A partir de uma reflexão sobre esses conceitos, chega a seguinte conclusão: "TUDO FAZ PARTE DE UM PROCESSO!"
Para que esse processo funcione, se faz necessário a implementação de acordos, instruções, informações, isto é, comunicação entre os diversos indivíduos a fim de compartilhar algo.
Daí surge o Processin, um "sketch" que vai além, pois permite a construção de coisas novas, e, principalmente, favorece a criatividade, transformando de maneira prática uma ideia em uma realidade.
Quer conhecer e saber mais sobre o Processing?
Basta fazer o download aqui.
Até mais...