Trabalho parte 2

Trabalho parte 1

A primeira parte do trabalho se resumia em escolher uma obra de arte ou design, fazer sua análise geométrica, reproduzir e criar uma aplicação baseada nisso.

1. Escolha uma obra de arte ou produto de design:

Eu escolhi essa imagem de Rubem Ludolf, Espiral I.

2. Realize a análise geométrica do item selecionado

Para a análise da matemática, parti do principio de um quadrado. Usei as dimensões 400x400px, mas depois percebi que seria necessário readequar. Aqui o esquema matemático utilizado foi o de proporção: 50px entre linhas e colunas e 10px entre linhas ou colunas semiparalelas.

A ultima linha precisava de 50px de distancia da anterior, mas a tela so comportava mais 30px, o que causaria quebra da proporção. Por isso aumentei a altura da tela, resultando em uma resolução de 400x420px, como mostrado acima.

3. Desenvolva uma aplicação que se aproprie das características do referido item analisado

Link no final do post.

4. Exponha todo o processo de desenvolvimento

Minha ideia inicial era um labirinto com a mesma forma da obra escolhida com as paredes sendo colididas com o mouse, para formar uma espécie de joguinho.

O professor sugeriu que não utilizasse o mesmo formato, mas tentasse se apropriar das características para desenvolver algo novo. Fiz diversos testes: Uma estante de livros, uma prateleira, letras, escada, calçados.. mas acredito que não ficaram ergonômicos ou funcionais, além de fugir um pouco do "multimídia" e entrar mais em design de produto. Então voltei para minha ideia inicial modificando esse labirinto com a proporção da forma original.

Utilizei linhas "line(x,y,x,y)", pois achei mais simples para fazer a aplicação depois. Porém ficou trabalhoso.

Foram 3 procedimentos: Colunas (12 no total), linhas superiores (que são todas aquelas de y= 0 até y=200px, resultando em 6)
e linhas inferiores (aquelas de y=200px até y=420px, ao final foram 6)

Nas colunas, comecei com x = 30px, o esquema é de x + 50px de distancia entre elas, e x + 10 px na sua parte inferior, "semi paralela".

Para as linhas centrais, em forma de S, há uma diferença. Das colunas 3 a 4 há uma diferença de 150px. e as 3 linhas se distanciam por 70 px.

As linhas da base superior, seguem o mesmo esquema, elas se distanciam da sua "semi paralela" por 10 px e da linha inferior a ela, por 50px.

Da base inferior, cada linha se distancia da sua "semi paralela" por 10 px
e da linha superior a ela, por 50px.

    Esse foi o resultado:

- Adicionando colisão

Como o movimento era feito pelo mouse, decidi não ter gameover quando encostar nas linhas, pois não encontrei um meio de iniciar o mouse no começo do labirinto. Com o mouse iniciando em qualquer lugar, a pessoa poderia perder logo de inicio. Então, ao acionar essa condição, é mostrado na tela uma mensagem: "Retorne para o caminho".

Para isso, utilizei um if para cada line, com variação de x - 10 e x +10, ou y-10 e y+10 pois o mouse estava pegando exatamente a linha, ignorando o stroke.

Condições.

////////////////////////

  //inicio condições

  // Colunas 1

  if (mouseX <= 30  && mouseY >= 24 && mouseY <= 200) {

   background(0);

   text("Retorne para o caminho", 140, 200);

    }

  if (mouseX <= 45 && mouseY >= 200 && mouseY <= 370) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna1debaixo");

    }

  

  // Colunas 2

  if (mouseX >= 70 && mouseX <= 90 && mouseY >= 74 && mouseY <= 200) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna2");

    }

  if (mouseX >= 80 && mouseX <= 100 && mouseY >= 200 && mouseY <= 320) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna2debaixo");

    }

  

   // Colunas 3

    if (mouseX >= 120 && mouseX <= 140 && mouseY >= 124 && mouseY <= 200) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna3");

    }

  

   // coluna 4

    if (mouseX >= 170 && mouseX <= 190 && mouseY >= 174 && mouseY <= 200) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna4");

    }

  if (mouseX >= 180 && mouseX <= 200 && mouseY >= 200 && mouseY <= 215) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna4debaixo");

    }

  

  //coluna 5

  if (mouseX >= 233 && mouseX <= 253 && mouseY >= 200 && mouseY <= 260) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna5debaixo");

    }

  

  //coluna 6

   if (mouseX >= 270 && mouseX <= 290 && mouseY >= 114 && mouseY <= 200) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna6");

    }

  

   if (mouseX >= 280 && mouseX <= 300 && mouseY >= 200 && mouseY <= 310) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna6debaixo");

    }

    

  //coluna 7

   if (mouseX >= 320 && mouseX <= 340 && mouseY >= 64 && mouseY <= 200) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna7");

    }

   if (mouseX >= 330 && mouseX <= 350 && mouseY >= 200 && mouseY <= 360) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna7debaixo");

    }

  

  //coluna 8

   if (mouseX >= 370 && mouseX <= 390 && mouseY >= 15 && mouseY <= 200) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna8");

    }

   if (mouseX >= 380 && mouseX <= 400 && mouseY >= 200 && mouseY <= 416) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuColuna8debaixo");

    }

   /// estrutura central (S)

   //1 debaixo p cima

  if (mouseX >= 130 && mouseX <= 200 && mouseY >= 260 && mouseY <= 280) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateucentral1");

    }

  

  if (mouseX >= 200 && mouseX <= 240 && mouseY >= 250 && mouseY <= 270) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateucentral2");

    }

    

  //2 debaixo p cima

    if (mouseX >= 130 && mouseX <= 200 && mouseY >= 190 && mouseY <= 210) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateucentral3");

    }

  

  if (mouseX >= 200 && mouseX <= 240 && mouseY >= 180 && mouseY <= 200) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateucentral3");

    }

    

  //3 debaixo p cima

   if (mouseX >= 130 && mouseX <= 200 && mouseY >= 120 && mouseY <= 140) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuccentrak4");

    }

  

  if (mouseX >= 200 && mouseX <= 280 && mouseY >= 110 && mouseY <= 130) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuLiha2debaixo");

    }

  

////////////////

 //Linhas

 //Primeiras Linhas

   if (mouseX >= 30 && mouseX <= 200 && mouseY <= 40) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuLinha1");

    }

  

  if (mouseX >= 200 && mouseX <= 385 && mouseY <= 30) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuLinha1Debaixo");

    }

  

  //Segundas linhas

  if (mouseX >= 80 && mouseX <= 200 && mouseY >= 70 && mouseY <= 90) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuLinha2");

    }

  

  if (mouseX >= 200 && mouseX <= 330 && mouseY >= 60 && mouseY <= 80) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuLinha2debaixo");

    }

    

  /////////////////////

  //Parte de baixo

  //Primeiras Linhas

   if (mouseX >= 34 && mouseX <= 200 && mouseY >= 360 && mouseY <= 380) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuLinha4111");

  }

  

   if (mouseX >= 200 && mouseX <= 395 && mouseY >= 410 && mouseY <= 430) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuLinha4");

  }

  

  //Segundas linhas

   if (mouseX >= 84 && mouseX <= 200 && mouseY >= 310 && mouseY <= 330) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuLiha4222");

  }

  

   if (mouseX >= 200 && mouseX <= 346 && mouseY >= 350 && mouseY <= 370) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuLiha4");

  }

  

  //Terceiras Linhas 

 if (mouseX >= 200 && mouseX <= 296 && mouseY >= 300 && mouseY <= 320) {

   background(0);

   text("Retorne para o caminho", 140, 200);

   println("bateuLiha4");

  }

 // Vitória e 

   if (mouseX >= 0 && mouseX <= 50 && mouseY >= 370 && mouseY <= 420) {

   background(50,205,50);

   fill(255);

   text("Parabéns, você conseguiu!", 125, 200);

   println("final");

  }

  

 else {

   fill(246,94,1);

   fill(255);

   text("Guie a bolinha para o destino final sem tocar nas linhas", 50, 10);

   

 } 

  ellipse(mouseX, mouseY, 5, 5); // Criando uma ellipse para o ponteiro do Mouse  

} 

Esse foi o resultado final: https://www.dropbox.com/s/re05xxmw7llam9m/trab1_labirinto.pde?dl=0

Hello World! Processing

     A introdução do documentário faz um breve resumo sobre todos os processos que ocorrem na natureza e a ligação de uns com os outros. E o tempo como mediador da ocorrência das coisas em uma sequência correta, pois não há como todos os processos ocorrerem ao mesmo tempo. A partir daí, o locutor começa a falar sobre o Processing. O Processing, além de software que eles descrevem como um sketchbook virtual, é uma comunidade de usuários para compartilharem códigos e ideias. Ele fala sobre alguns tipos de processos que acontecem, como dois grupos de pessoas vindo de posições contrarias e mesmo sem se comunicarem quase não se chocam, as ondas no mar e as informações codificadas que elas carregam, e etc... e tudo isso envolve a matemática.
   O Processing é menos metódico do que as formas usuais de programação e, por estar mais ligada a processos criativos, incentiva o usuário a experimentar, como em um caderno de desenhos, onde se rabisca livremente. Eles afirmam que visualização de dados é uma revolução na programação, pois facilita a interação entre humano e computador. E que artistas no futuro terão que aprender matemática e programação para desenvolver seus trabalhos, o que discordo, pois a arte é bem relativa. Mas as maneiras de programar o computador para realizar trabalhos artisticos tanto no visual, quanto sonoro, a partir de comandos predeterminados é de fato interessante.

Link para o documentário no Youtube... https://www.youtube.com/watch?v=OgupE9snZlQ