domingo, 31 de janeiro de 2016

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