Arte com Retângulos

Descubra como fazer figuras agradáveis com retângulos dispostos aleatoriamente e algumas linhas de código.

Confira versão interativa em:

https://asgunzi.github.io/Arte-Retangulos—D3-JS/ArteRetangulos.html

Neste caso, estou utilizando a biblioteca D3 do Javascript. É necessário um pouco de domínio desta linguagem, onde recomendo o tutorial da W3Schools.

Para traçar um único retângulo, o comando a seguir funciona:

        svg.append("rect")
          .attr("x", 130)
          .attr("y", 80)
          .attr("width", 140)
          .attr("height", 90)
          .attr("stroke", "black")
          .attr("fill", "darkblue")

Este vai traçar um retângulo nas coordenadas (x,y) = (130,80), com largura 140 e altura 90. Cor azul escuro e contorno preto.

Mais uma linha, para dizer a opacidade de 0,7 – isso para destacar a intersecção com cores diferentes.
.attr(“opacity”, 0.7)

Se colocarmos tudo dentro de um loop for, sem aleatoriedade alguma, teremos um grid de retângulos.

for (i=0; i<10;i++)
{
for (j=0; j<10;j++)
{
svg.append("rect")
.attr("x", 130i) .attr("y", 80j)
.attr("width", 140)
.attr("height", 90)
.attr("stroke", "black")
.attr("fill", "darkblue")
.attr("opacity", 0.7)
}
}

Já o resultado fica um pouco mais interessante se acrescentarmos alguma aleatoriedade na disposição e tamanho dos retângulos.


for (i=0; i<10;i++)
{
    for (j=0; j<10;j++)
    {
        svg.append("rect")
          .attr("x", 130*i + Math.random()*20)
          .attr("y", 80*j + Math.random()*20)
          .attr("width", 140+ Math.random()*20)
          .attr("height", 90+ Math.random()*20)
          .attr("stroke", "black")
          .attr("fill", "darkblue")
          .attr("opacity", 0.7)
    }
}

Algo curioso é que uma disposição totalmente aleatória ou totalmente ordeira fica menos bonita do que uma figura parcialmente ordenada, porém, com um grau de incerteza.

Podemos acrescentar uns blocos de cor amarela, sobrepostos aleatoriamente.

    for (j=0; j<12;j++)
    {
        svg.append("rect")
          .attr("x", Math.random()*1300)
          .attr("y",  Math.random()*800)
          .attr("width", 150+ Math.random()*150)
          .attr("height", 90+ Math.random()*90)
          .attr("stroke", "black")
          .attr("fill", "gold")
          .attr("opacity", 0.7)
    }

Finalmente, acrestamos mais alguns blocos azuis.

O mesmo pode ser feito com outras cores e outras doses de caos / ordem.

Vide código-fonte no Github (https://github.com/asgunzi/Arte-Retangulos—D3-JS).

Veja também.

Aprenda a usar o método de Monte Carlo para estimar o valor de Pi

O método de Monte Carlo foi criado por Stanislaw Ulam e John Von Neumann, no esforço de criar a bomba de Hidrogênio, na época da Segunda Guerra.

Consiste em fazer amostras aleatórias do que queremos simular, segundo propriedades e restrições desejadas, e mensurar os resultados. Surgiu numa época em que os computadores também estavam sendo inventados, o que foi uma boa combinação: computadores são excelentes em tarefas simples e repetitivas, como esse tipo de simulação.

Vamos fazer um pequeno exercício, no Excel.

Imagine um círculo de raio 1, que tem área pi*r^2. Este círculo, inscrito num quadrado de lado 2 (área 4).

A razão entre a área do círculo e a área do quadrado é de pi/4 = 0,78539…

Se eu “disparar” um número de tiros aleatórios neste alvo, e contar quantos pontos ficaram dentro do círculo versus o total de pontos, a proporção tem que ir convergindo para a fórmula calculada. Assim, com um número infinito de tiros, consigo estimar o valor de Pi.

Computacionalmente é fácil fazer a conta. Basta um gerador de número aleatórios.

No Excel, a função “=ALEATÓRIO()” dá um valor entre 0 e 1. Quero um valor entre -1 e 1, então faço apenas uma continha para reparametrizar o resultado: “=2*(ALEATÓRIO ()-0,5)”.

Sorteio os valores x e y, utilizando a fórmula acima.

A seguir, calcular se x e y são menores do que 1 ou não.

A fórmula do círculo é x^2 + y^2 = 1; se x^2 + y^2 for menor que 1, está dentro do círculo, senão, está fora.

=SE(RAIZ(B4^2+C4^2<=1);”Sim”;”Não”)

Conto quantos pontos ficaram dentro e quantos ficaram fora, e vejo a proporção.

Quanto maior o número de amostras, mais próximo de pi/4  = 0,78539 devo chegar.

Para o exemplo abaixo, a estimativa é de 3,153.. (valor real Pi = 3,14159…)

Teclando F9, o Excel sorteia novamente os números aleatórios, dando outro cenário de resultados.

Vide arquivo no drive MonteCarlo_pi.xlsx.

O Método de Monte Carlo e derivados tem aplicações práticas extremamente valiosas para a indústria, nos dias de hoje. Simulação de eventos discretos, em geral, ajudam a dimensionar o número ótimo de atendentes de um help desk, o tamanho de pátios de armazenagem, número de empilhadeiras de um armazém, e assim sucessivamente.

Lição de casa.

Ao invés de um círculo, aplicar o mesmo método para um losango.

Siga o template em anexo.

Dica: para um losango como o mostrado, abs(x) + abs(y) <=1.

Veja também:

Um pequeno puzzle mental

O puzzle abaixo, tirado de um livrinho de problemas que tenho, tem uma solução bastante criativa e simples.

Pare por aqui para resolver, se não quiser ver a solução.

Solução:

Uma solução simples é fazer as somas de cada número, porém, existe uma solução melhor.

Visualize dobrar o papel ao longo da diagonal principal (a que está preenchida com 10). O 1 vai somar com o 19, dando 20; as casas com 2 vão somar com as casas com 18, somando 20; e assim sucessivamente.

Como as casas que somam 20 contam duas casas, na média, é como se TODAS as casas do tabuleiro fossem iguais a 10.

Assim, a solução consiste na multiplicação 10 x 10 x 10 = 1000.

Veja também:

Como traçar a Lemniscata no Excel

“Lemniscata” é o nome do símbolo do infinito, o “8 deitado”.

É uma curva bonita e simbólica. Eu imagino uma formiga percorrendo a trilha da curva, indo e vindo infinitamente, sem nunca chegar ao final.

Pois bem, a curva tem uma equação elegante, dada a seguir.

Fica mais fácil de jogar na fórmula se considerarmos a forma paramétrica a seguir.

No Excel, primeiro vamos dividir um ângulo de 360 graus (ou 2*pi) em 100 pedacos.

A primeira coluna vai de 0 a 100, e a segunda coluna calcula o ângulo theta.

A seguir, calcular as coordenada X e Y conforme a fórmula paramétrica dada acima.

Destaquei a fórmula utilizada para X.

Note também que há alguns #Núm!, que ocorrem quando há problemas (no caso, raiz de número negativo).

Selecionar as colunas calculadas X e Y e plotar o gráfico.

Inserir -> Gráficos -> Dispersão -> Dispersão com linhas suaves.

Em Design, podemos escolher alguns estilos alternativos.

Com um pouco de formatação, chegamos à curva Lemniscata, com fórmulas e gráficos de Excel.

Vide arquivo, para quem quiser estudar a fórmula.

Link para download. https://1drv.ms/x/s!Aumr1P3FaK7joDIVFc6dGCU285vX

Vide também:

Lemniscata de Bernoulli – Wikipédia, a enciclopédia livre (wikipedia.org)

Espiral Interativa de Círculos

Segue, no link a seguir, uma página interativa para criar espirais de círculos.

https://asgunzi.github.io/Espiral-Interativa-Circulos/EspiralCirculos.html

Alguns prints.

É possível mudar o ângulo de cada ramo.

E também é possível mudar o número de círculos por camada.

A biblioteca D3 do Javascript é muito boa para este tipo de visualização. No final das contas, são apenas alguns plots de círculos bem posicionados, matemática simples e bela.

Também fiz alguns gifs animados, para ilustrar o movimento.

Mexa interativamente em:
https://asgunzi.github.io/Espiral-Interativa-Circulos/EspiralCirculos.html

Veja também:

Crie imagens arficiais no Mini DALL·E

O DALL·E é uma inteligência artificial que cria imagens realísticas a partir de textos. Você digita um texto qualquer, ele interpreta e cruza imagens de forma a montar uma versão baseada no seu texto.

Esta IA tem 12 bilhões de parâmetros, e foi desenvolvida pela empresa Open AI.

Mortais comuns não têm acesso ao DALL·E, porém, uma alternativa mais simples é o “Mini DALL·E”, disponível neste link (https://huggingface.co/spaces/dalle-mini/dalle-mini). Não é tão poderosa assim, mas dá para criar fotos divertidas.

Exemplos:

“The thing fantastic four inside toothpaste”

“Einstein correndo contra uma tartaruga” gerou imagens como:

“Homem de Ferro dançando com cachorro”

“Wolverine eating pizza”: ele entendeu o wolverine animal (carcaju)

Com “Wolverine X-Men”, fica um pouco melhor, mas nem tanto.

Experimente o Mini DALL-E, é bem divertido.

Links:

https://huggingface.co/spaces/dalle-mini/dalle-mini

https://openai.com/dall-e-2/

A Dança dos Polígonos

Baseado em post anterior, resolvi escrever uma rotinazinha para traçar padrões em malhas de diversos polígonos.

Brinque iterativamente em:
https://asgunzi.github.io/PadroesPoligonos/PadroesPoligonos.html

Padrões em quadrados

Vídeo no youtube:

Quando o polígono tem um número impar de lados, até forma um padrão, mas não fica muito bonito. Vou manter somente os de lado par.

Padrões em hexágonos.
Foto:


Vídeo no Youtube:

Padrões em octágonos
Foto.

Padrões em decágonos
Foto.


Vídeo no youtube:

Padrões em dodecágonos
Foto.


Vídeo no youtube:

Código fonte no Github, para quem quiser fazer modificações.

https://github.com/asgunzi/PadroesPoligonos

Veja também:

Padrõs em círculos: https://ideiasesquecidas.com/2022/05/26/padroes-em-circulos/

Laboratório de mateMágica
https://ideiasesquecidas.com/laboratorio-de-matematica/

Padrões em círculos

É possível criar padrões extremamente intrincados, a partir de construções simples.

(Versão interativa: https://asgunzi.github.io/Padr-es-em-C-rculos/PadroesCirculos.html)

Seja uma malha formada de pontos.

Se o raio de cada ponto for aumentado, e com o raio vermelho levemente maior que o azul.

Começa a ficar interessante quando os raios aumentam a ponto de se tangenciar.

Aumentando mais ainda.

E assim sucessivamente:

Padrões diversos formados por diferentes raios:

Brinque com os padrões em:

https://asgunzi.github.io/Padr-es-em-C-rculos/PadroesCirculos.html

Código fonte, para criar suas próprias variações.

https://github.com/asgunzi/Padr-es-em-C-rculos

Veja também:

Árvores Fractais

Escrevi uma rotinazinha para desenhar fractais em formato de árvore.

Vide em: https://asgunzi.github.io/ArvoreFractal/arvores.html

A cada vez que rodar, uma árvore com parâmetros diferentes será gerada.

Um fractal é uma estrutura matemática com padrões repetidos em escala menor no desenho todo.

Como é uma estrutura autossimilar, é só fazer um código recursivo, relativamente simples. Portanto, é possível criar uma forma de enorme complexidade a partir de regras simples.

No caso da árvore, o padrão é: inicie com um aresta qualquer. Ao final dela, acrescente três arestas com metade do raio, separadas entre elas em 30 graus.

Ao final de cada uma dessas três arestas (ou galhos) novos, acrescente mais três galhos.

E assim sucessivamente:

Há uma quantidade infindável de fractais possíveis de serem feitos dessa forma – só me falta criatividade para fazer algo mais bonito.

Há inúmeros padrões fractais na natureza. Como uma planta “sabe” a programação para virar uma forma de enorme complexidade, como um brócolis? A resposta é que ela não sabe, apenas vai seguindo padrões simples e autossimilares, até chegar ao formato final.

Veja também:

https://ideiasesquecidas.com/2018/09/11/cardioides-circulares

A Espiral de Ulam

A Espiral de Ulam é uma outra de representação dos números primos, estudada pelo brilhante matemático Stanislaw Ulam.

Eu não conhecia essa espiral, foi o amigo Sinésio Barberini que me indicou, após o artigo anterior, a “Colmeia dos Primos”.

A espiral começa com o número 1, e depois vai preenchendo os demais números, seguindo um padrão espiral.

Da mesma forma que a colmeia, pintamos de cinza os números compostos, e de dourado os números primos, imaginando uma peneira passando a luz do sol.

Vide implementação interativa em:

https://asgunzi.github.io/Espiral-de-Ulam/EspiralUlam.html

Alguns prints:

Espiral de Ulam com 5,7 mil números.

Espiral de Ulam com 10 mil números.

É possível notar algumas diagonais no desenho – mas não explicar. Este é um dos mistérios levantados por Ulam, na época, e popularizados pelo grande colunista de puzzles Martin Gardner.


Nota aleatória: Stanislaw Ulam foi um dos criadores do método conhecido como Simulação de Monte Carlo, juntamente com John Von Neumann, na época da Segunda Grande Guerra.







Veja artigos semelhantes e me siga no LinkedIn:
https://www.linkedin.com/in/arnaldogunzi/

https://clube.spm.pt/news/vida-obra-de-stanislaw-ulam

https://en.wikipedia.org/wiki/Ulam_spiral

https://ideiasesquecidas.com/2022/04/22/a-colmeia-dos-numeros-primos

A Colmeia dos Números Primos

Que tal representar números primos numa grid hexagonal, como se fosse uma colmeia?

A ideia é começar de um ponto central, seguindo uma numeração a partir de camadas. Para números compostos, deixar a célula cinza; para números primos, deixar dourado (como se fosse a luz do sol passando por uma peneira, e só há buraco onde o número da casa é primo.

Para 2 camadas, fica assim:

Para 3 camadas:

Fiz uma rotina em Javascript D3, para ficar interativo. Você pode conferir aqui.

https://asgunzi.github.io/Colmeia-Primos/ColmeiaPrimos.html

Para 4 camadas:

Para 7 camadas:

Conforme comentado em post anterior, não parece haver um padrão muito claro – e essa falta de padrão dos primos vem atormentando os matemáticos há milênios!

Para 25 camadas:

Para 50 camadas:

Veja artigos semelhantes e me siga no LinkedIn:

https://www.linkedin.com/in/arnaldogunzi/

Como resolver o cubo spinner

O “cubo spinner” é a mais nova aquisição para minha coleção de cubos mágicos (vide https://ideiasesquecidas.com/cubos-magicos/).

É um hand spinner, daqueles que ficam girando e foram moda anos atrás, e um cubo 3 x 3 com uma camada só.

Não sei quem teve essa ideia, mas eu gostei.

A resolução do cubo spinner é muito simples.

Tem apenas 4 movimentos possíveis: R (right), L (left), U (upper) e D (down).

Vou ilustrar apenas o R, porque os outros são semelhantes.

É importante notar que as peças do lado apenas ficam viradas para cima ou para baixo, não trocam de posição com outras peças.
Neste tipo de puzzle, é sempre bom identificar quais as peças mais invariantes possíveis, e começar por elas.

Já as peças de canto trocam de posição entre si, a cada movimento.

O movimento (RU)^2 (direita e depois a posição superior, repetido duas vezes), tem o efeito de: não alterar as peças de lado, e trocas as peças de canto segundo a configuração abaixo.

Portanto, a partir de um arranjo qualquer do cubo:
– Vire as peças de lado para a posição correta (todas de branco ou amarelo)

– Use movimentos (RU)^2 (ou similar, LU, RD), para acertar um dos cantos

– Coloque a peça acertada no canto inferior esquerdo, que não é afetado pelo movimento RU

– Aplique o movimento (RU)^2 até resolver o cubo.

O cubo spinner é divertido, porque junta dois brinquedos lúdicos e simples de resolver.

Link da Amazon:
https://amzn.to/3JMIjyy

Vide também: