TRABALHO / RESOLUÇÃO:
Este trabalho começou pela análise ao enunciado disponibilizado e das respostas às questões colocadas no fórum da UC, desta e porque tinha a vontade de produzir algo que fosse diferente do ponto de vista criativo, comecei por verificar como poderia dar resposta aos tópicos apresentados como referência ao trabalho a desenvolver:
- Para a criação de objetos básicos decidi realizar uma reciclagem ao algoritmo do ponto médio desenvolvido na AF do Tópico 2 (publicado aqui);
- Para a utilização de múltiplos viewport (VP) optei porutilizar uma versão, suportada pela resolução da AF do tópico 4 apresentado pelo docente, adaptando ao projeto escolhido, tendo neste caso optado por colocar 4 VP, um com o cenário global, e os restantes com níveis de zoom diferentes para assim conseguir demonstrar pormenores não visíveis no primeiro VP;
- Para a projeção optei pela ortográfica por ser a mais apropriada para as projeções 2D, conforme documentação da framework Three.js;
- Em relação à cor a opção passou por testar várias variações no RGB sem fugir ao tema escolhido, enquanto que para as transparências optei por jogar com a própria projeção no primeiro VP, tomando assim partido de uma imagem de fundo para o enquadramento da cena, bem como em objetos colocados e/ou animados;
- Foram também utilizadas imagem para o preenchimento de figuras geométricas para assim dar algum realismo à cena criada. Os recortes foram colocados para realçar a imagem de fundo, não interferir com as restantes VP, demonstrar controlo sobre recortes inclinados;
- Na escrita de texto, reciclei o projeto para a AF do Tópico 2, escrevendo a identificação do trabalho, do autor e jogar com dois géneros de “easter egg” que surgem visíveis ao aplicar zoom.
Desta verificação passei à escolha do tema, tendo imaginado “criar vida” a uma pintura, tendo optado pelos moinhos de vento de Carrazeda de Ansiães, mas como tinha de criar objetos básicos com pelo menos um algoritmo de baixo nível simulado no three.js surgiu o conceito final: uma paisagem com um moinho que foi vandalizado por um grafiter entusiasta de algoritmos de Computação Gráfica.
Este trabalho usa JavaScript (JS), Html, CSS e Three.Js com a seguinte estrutura de ficheiros:
Index.html – A base do trabalho que sincroniza as diferentes fontes para apresentação das projeções na canvas, ao invocar a função main() no seu carregamento, e processa o botão de recorte.
Style.css – Para especificar os layouts, neste caso coloca a imagem de fundo, controla resolução de ecrã pois ao ligar a grandes ecrã, estava a perder o efeito desejado com os limites laterais, também trata o estilo do botão.
Stats.js – Monitor de performance em JS (retirado daqui) e modificado para colocar no fundo de ecrã.
Algoritmos.js – Da reciclagem do código anterior, era meu objetivo torná-lo o mais global que conseguisse, tendo começado por utilizar parâmetros predefinidos (Ex: function drawPixel(x, y, cor, z=1 ) ) contudo ao realizar os testes em IE verifiquei que existia uma incompatibilidade. Por essa questão de globalidade, não modifiquei a geometria utilizada para planos, como era um trabalho 2D, poderia fazer sentido numa perspetiva de economia de recursos. Neste processo a maior dificuldade residiu no realinhamento da função PontoMedio, com a necessidade de colocar a desenhar linhas em todos os sentidos, porque a adaptação que tinha produzido durante o estudo não o realizava. Para a construção de polígonos imaginei que uma função que recebesse n pontos poderia desenhar n retas, unindo o ponto n1 ao n2, depois o n2 ao n3, e assim sucessivamente até que quando nf (último ponto) unia ao n1. Como não consegui descobrir como controlar em JS para um n arbitrário de parâmetros, produzi uma função para 4 pontos e outra para 3 pontos, deixando para o tempo que sobrar até à entrega para esse estudo.
Funcoes.js – Segue a estrutura base que adotei e fui adaptando desde o início de semestre nos trabalhos publicados, está extensamente comentado, contudo gostaria de referenciar:
views da resolução apresentada pelo docente retirei todos os campos desnecessários ao meu projeto e acrescentei os que necessitava;
loaderFont() – Adaptação da resolução apresentada na AF do Tópico 2 (publicada aqui);
desenhaObjectosAlg() – Utilização dos algoritmos, começando por grafitar o moinho com uma circunferência, cruz, 2 triângulos e um retângulo. Foi esta a base inicial projetada para o ecrã que permitiu ter controlo, do ponto de vista imaginativo, das posições que os objetos seguintes ocuparam. Inclui também outras construções, destacando o ciclo for que permite criar uma área preenchida utilizando polígonos de 4 pontos;
desenhaMoinho() –Na construção do moinho, para que tivesse uma projeção 2D mais próxima da realidade, na ligação dos componentes, fui mantendo uma projeção 3D (consultável aqui). Nas paredes e telhado utilizei o preenchimento com texturas. Para a vela utilizei o construtor Group() para agrupar os objetos que constituem a vela para simplificar a codificação do movimento, assim como a clonagem das velas rodando de seguida para a posição pretendida;
desenhaPaisagem() – Aqui tomando partida das transparências e carregamento de texturas, coloquei um pequeno avião e uma arvore concedendo um toque mais agradável ao enquadramento. Para simular a existência de terrenos a diferentes distâncias utilizei o construtor geométrico de circunferências, criando primeiramente ¼ de circunferência, clonado de seguida e rodado, terminando com meia circunferência que com a propriedade scale foi distorcida sobre eixo x;
render() – Adaptação da resolução do docente para AF4, onde acrescentei uma condição para que o fundo da primeira VP ficasse transparente;
animar() – A animação trata da rotação sobre eixo z do grupo vela, e chama a função mover para o avião;
recort() – Função para recortar os planos em conformidade com os vetores definidos pela variável planos;
A página Web compila sem erros, tendo sido testada em Firefox, Chrome, Brave, Opera, Edge e IE.