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