Olá pessoal. Tudo certo?! Nesse post, mostro como desenhar curvas, usando Lagrange Interpolation, usando Javascript. Há um live demo disponível. Também está disponível o código-fonte completo. UPDATE: Também há um live demo mais interativo, que permite ao usuário definir os pontos que pertencem a curva em http://users.cjb.net/livedemoelemarjr/lagrange2.html. Observe: Mais adiante, vou usar esse método… [Leia mais…]
novembro 26, 2011
Olá pessoal. Tudo certo?! Outro dia, escrevi um post mostrando como gerar fractais a partir do Mandelbrot Set. Hoje, faço o mesmo trabalho apresentando Julia set. Novamente, foco apenas na implementação em Javascript. Uma boa explicação teórica sobre Julia set pode ser encontrada na Wikipedia ou no MathWorld. Importante: Reaproveitei boa parte do código que… [Leia mais…]
outubro 28, 2011
Olá pessoal, tudo certo?! No post de hoje, mostro uma variação do fractal “tree” que apresentei há alguns dias. Basicamente, adicionei alguma “aleatoriedade” e cor. Veja alguns resultados: Bacana, não?! Outro exemplo: Mais um … Último: Agora, vamos ver como é o código. Aliás, o código-fonte está em https://gist.github.com/1323773 e há um live demo… [Leia mais…]
outubro 25, 2011
Olá pessoal, tudo certo?! Finalmente, chego ao mais famoso dos fractais. Trata-se do conjunto de Mandelbrot. Código-fonte: https://gist.github.com/1314575 Live demo: http://users.cjb.net/livedemoelemarjr/mandelbrot.htm Importante: A performance do demo é assustadoramente ruim no Internet Explorer 9. Confesso que isso me pega de surpresa e ainda acho que escrevi alguma coisa “muito errado”. Recomendo que você rode o demo… [Leia mais…]
outubro 24, 2011
Olá pessoal, tudo certo?! No post de hoje apresento os fundamentos para geração de um fractal muito famoso. Trata-se do “Barney’s Fern”. Um dos mais belos, IMHO. Nossa demonstração permite que o usuário mude o tamanho da “viewport” alterando a posição dos marcadores. Basta selecionar o marcador que desejamos mover (com um clique), depois clicar… [Leia mais…]
outubro 23, 2011
Olá pessoal, tudo certo?! No último post, mostrei uma técnica para geração do triângulo de Sierpinski através de uma curva. Agora, mostro como fazer isso com uma técnica chamada “chaos game”. Código-fonte completo: https://gist.github.com/1306848 Live demo: http://users.cjb.net/livedemoelemarjr/sierpinski_chaos.htm Como falei no início dessa série, explicar a fundamentação matemática para fractais está fora de meus objetivos. No… [Leia mais…]
outubro 22, 2011
Olá pessoal, tudo certo?! Nesse post, mostro uma técnica para geração do triângulo de Sierpinski através de uma curva. Trata-se de um método pouco usual (a prática comum é desenhar um triângulo e apagar partes sucessivamente). O código que utilizo aqui é derivado daquele que mostrei no post anterior. Por isso, nesse post, explico apenas… [Leia mais…]
outubro 22, 2011
Olá pessoal, tudo certo? Depois de um “passeio nas estrelas”, volto a tratar de fractais com HTML5. Na parte 2, mostrei uma implementação simples para snowflakes. Na parte 1, mostrei como desenhar trees. Hoje, mostro como desenhar Hilbert curves. Live demo: http://users.cjb.net/livedemoelemarjr/hilbert.htm Código-fonte completo: https://gist.github.com/1306034 Um pouco mais sobre Hilbert “Space-filling” curve Space-filling fractals, como… [Leia mais…]
outubro 21, 2011
Olá pessoal, tudo certo?! O que acham de um “passeio” no espaço. Esta é a proposta do post de hoje : – ) Live demo: http://users.cjb.net/livedemoelemarjr/starfield.htm Código-fonte completo: https://gist.github.com/1305213 Preparando o Canvas… Nada novo no HTML. Observe: Ainda utilizo o velho artifício de “monitorar” o tamanho do browser para forçar com que o canvas… [Leia mais…]
outubro 20, 2011
Olá pessoal, tudo certo?! No post anterior, apresentei uma definição, não rigorosa, para fractal. Além disso, mostrei um exemplo simples de Tree (um exemplo simples de fractal). Hoje, mostro a implementação para Snowflakes. Código-fonte completo: https://gist.github.com/1302765 Live demo: http://users.cjb.net/livedemoelemarjr/snowflake.htm O que é snowflake? Um snowflake é uma curva geométrica e um dos primeiros “fractais” a… [Leia mais…]
outubro 19, 2011
Olá pessoal, tudo certo?! Nessa série que estamos começando, vou demonstrar como gerar imagens incríveis através de fractais e tiles. Nos posts que seguem, explicarei um pouco da matemática necessária para trabalhar com fractais e tiles. Entretanto, vou me concentrar mais na “mecânica” do desenho do que na matemática envolvida. Live demo: http://users.cjb.net/livedemoelemarjr/tree.htm (funciona no… [Leia mais…]
outubro 18, 2011
0
Olá pessoal, tudo certo?! No último post, mostrei como implementar o clássico “Rotating cube” usando apenas Javascript e html5. Esse post é uma continuação simples. Ou seja, para entender o que estamos fazendo aqui, comece lendo o post anterior. Implementando Backface culling O primeiro efeito que gostaria de mostrar é o backface culling. Observe: Como… [Leia mais…]
outubro 18, 2011
Olá pessoal, tudo certo?! No post de hoje, exercito um pouco mais “meus limites” com html5. Minha proposta? Reproduzir um “clássico” exemplo de computação gráfica (rotating cube), usando apenas Javascript e html5. O código-fonte com completo está em https://gist.github.com/1297152 e há um “live demo” em http://users.cjb.net/livedemoelemarjr/wireframe.html Para não ficar “repetindo”, informo que utilizo o canvas,… [Leia mais…]
outubro 15, 2011
Olá pessoal, tudo certo? Há algum tempo, escrevi um post sobre animações com HTML5. O post de hoje é uma “revisão”. Aproveito para adicionar alguns conceitos mais sólidos que “puxei” do XNA. O código completo pode ser obtido nesse endereço: https://gist.github.com/1290398. Se preferir, pode ver o código no jsFiddle, em http://jsfiddle.net/ElemarJR/G7h6T/. Live demo: http://users.cjb.net/livedemoelemarjr/spheres.htm. Primeiro,… [Leia mais…]
outubro 13, 2011
Olá pessoal, tudo certo?! No post de hoje, continuo mostrando algumas possibilidades para manipulação de imagens usando Canvas do HTML5. De certa forma, esse post é uma continuação para Image Pixelation com Canvas do HTML5. Há outros posts sobre HTML5. Tons de cinza Vamos começar nossos trabalhos através dos mais básicos dos efeitos. Apresentação de… [Leia mais…]
outubro 12, 2011
4
Olá pessoal, tudo certo?! Você já viu aquelas reportagens onde o rosto de uma pessoa aparece “quadriculado”? Este é um grande efeito, chamado pixelation, que torna uma imagem “irreconhecível” sem necessidade de manter um “fundo preto”. No post de hoje, mostro como aplicar esse efeito usando o elemento canvas do html5. Começando – desenhando uma… [Leia mais…]
outubro 10, 2011
Olá pessoal, como estmamos?! HTML5 é uma tecnologia nova. Como ocorre em qualquer nova tecnologia, há uma certa confusão e alguns mal-entendidos sobre o que ela é e o que ela faz. Muitas tecnologias que não fazem parte da especificação estão sendo atribuídas a HTML5. Eu mesmo, escrevendo sobre o assunto, acabei incentivando essa confusão… [Leia mais…]
fevereiro 26, 2011
Olá pessoal, tudo certo? Geolocation é uma das muitas tecnologias que não integra HTML5, mas que geralmente é associada com ela. Por isso, estou abordando nessa série. Vamos aos fatos… O que já vimos? Para você que está chegando agora, veja o que já foi abordado: HTML5 – Parte 11 – Detectando suporte (browsers) HTML5… [Leia mais…]
fevereiro 14, 2011
Olá pessoal, tudo certo? Depois de algum tempo, volto a escrever sobre HTML5. Hoje vou mostrar algumas técnicas para testar que recursos estão implementados em cada browser. Nem todas as características previstas para a HTML5 são suportadas por todos os browsers. Logo, não há forma segura de testar compatibilidade com a especificação como um todo.… [Leia mais…]
dezembro 3, 2010
Olá pessoal, tudo certin? Meu último post, sobre REST, ficou bastante “denso”. Por isso, resolvi pegar leve hoje. Hoje faremos alguma animação usando HTML5. Dica: fica muito mais fácil acompanhar pegando o código-fonte; A idéia é diversão … O que já vimos? Para você que está chegando agora, veja o que já foi abordado: HTML5… [Leia mais…]
dezembro 20, 2011
2