Este é o terceiro artigo da série de artigos que visa mostrar como desenvolver uma simulação de um cubo com texturas em rotação. No artigo anterior vimos como representar as faces de um cubo, e com isso desenvolvemos uma simulação de um cubo representado pelas suas arestas. Neste artigo veremos como desenhar um cubo sólido como o que pode ser visto na simulação abaixo.
Cubo 3D usando HTML5 e Canvas: Parte 2
Posted by lefam on July 8, 2011
None comments | 1,070 views
No artigo anterior vimos como representar os pontos de um cubo em três dimensões, vimos também como aplicar as transformações de translação, ampliação e rotação, e desenvolvemos uma simulação que mostrava os pontos do cubo em rotação. Nesta segunda parte da série, veremos como representamos as faces de um cubo. Com este novo conhecimento vamos melhorar a simulação feita no artigo anterior, desenhando o cubo com as suas arestas como é mostrado na simulação baixo.
Cubo 3D usando HTML5 e Canvas: Parte 1
Posted by lefam on July 6, 2011
None comments | 1,078 views
Este é o primeiro artigo de uma série de artigos que pretendem mostrar como criar um cubo 3D animado usando o novo elemento Canvas do HTML5 e JavaScript. O cubo será desenhado usando o contexto 2D do canvas. A série estará dividida em 5 partes:
- Parte 1 – Cubo em pontos
- Parte 2 – Cubo em linhas (wireframe)
- Parte 3 – Cubo sólido
- Parte 4 – Cubo sólido com efeito de Luz
- Parte 5 – Cubo com texturas
Nesta parte veremos a teoria de base, e a aplicaremos para criar a simulação do cubo em pontos que pode ver abaixo.
HTML5 e Canvas: Simulação de um Campo de Estrelas 3D
Posted by lefam on July 3, 2011
4 comments | 984 views
O novo elemento Canvas introduzido no HTML5 abre a possibilidade para a criação de aplicações interessantes. Podemos agora fazer coisas que antes seriam possíveis apenas através do uso de plugins, como por exemplo o Flash. Neste artigo, vou mostrá-lo como criar uma simulação de um campo de estrelas 3D usando o elemento Canvas introduzido no HTML5.
Se o seu browser suporta o elemento Canvas poderá ver abaixo a simulação de estrelas.
As estrelas partem do fundo da tela (ou espaço) e aproximam-se para perto do utilizador. Um aspecto interessante desta simulação é o facto das estrelas distantes serem mais escuras e pequenas em relação às estrelas mais próximas.