Perlin noise caracters loop

01/04/2019




Bom dia galera, um dia estava surfando pela internet quando vi que um canal que eu estava inscrito The Coding train postou um vídeo perlin noise loops, depois de alguns dias me surgiu a ideia de fazer algo parecido só que com uma estética diferente ai tive a genial ideia de fazer um perlin noise caracteres loop!

Ideia principal

Minha ideia de começo era fazer um círculo mais não um circulo comum um circulo que seria formado por zeros algo assim:

círculo em caracteres[CÍRCULO EM CARACTERES]

Fazendo o cartesiano de caracteres

A primeira coisa que precisamos fazer é adicionar uma grade com caracteres não só isso mais cada linha precisa de estar com uma tag

e um id com o número representado a linha. Para isso usei um loop com um DOM.
Ex:

for (let i = 0; i < 36/*número de linhas*/; i++) {
document.write(`<p id=”${i}”>0000000000000000000000000000000000000000</p>`)
}

assim oque mostrarar na tela sera:

0000000000000000000000000
0000000000000000000000000
0000000000000000000000000
[...]

Escrevendo dentro do cartesiano

Depois de ter feito o cartesiano agora e só escrever dentro dele, fiz uma função chamada writer que pega o X e o Y do cartesiano e no lugar adicionava outro caractere no lugar. Ex:

function writer(y, x) {
// pegar a linha com id
let doc = document.getElementById(`”${y}”`);
// transferir valor para uma Array (não é possível editar o valor do innerHTML como se fosse uma Array pois ele é um objeto)
let docw = doc.innerHTML.split(“”);
// reescrever a coluna da linha
docw[x] = “1”;
// transformar Array em string
let result = “”; /* isso para o valor não ser Undefined */
for (let i = 0; i < docw.lenght; i++) {
result += docw[i];
}
// inserir valor na linha
doc.innerHTML = result;
}

Se você testar terá esse resultado:

writer gif[WRITER GIF]

Assim poderá criar formas etc dentro do cartesiano.

Desenhando o círculo

Para desenhar o círculo precisarei de calcular o Seno e o Coseno do ângulo ate o valor ser igual a 2 PIpara isso vou usar um for loop novamente. Ex:

for (let a = 0/* valor incial do ângulo */; a < TWO_PI; a += 0.1) {
let x = truncate(10 * cos(a));
let y = truncate(10 * sin(a));
write((36/2/* colocar círculo no meio */) + y, (25/2/* colocar círculo no meio */) + x);
}
// transformar os valores em inteiros
function truncate(value) {
if (value < 0) {
return Math.ceil(value);
}
return Math.floor(value);
}

Assim você tera um círculo quase perfeito.

Problema de achatamento

Se por caso você fizer oque eu estou fazendo vai perceber que o círculo ficara um pouco achatado por causa da fonte e disposição das letras, para resolver esse problema aumente o valor da multiplicação na variável X.

Ex:

// anterior
let x = 10 * cos(a);
// atual
let x = 18 * cos(a);

Mude da forma que achar melhor.

Transformando isso em um Perlin noise loop

Como esse post ficou um pouco grande e eu não sei como explicar muito bem como fazer isso vou deixar o meu código embaixo e o vÍdeo de The Coding Train.

Video do The Coding Train

Meu codigo

perlin noise caracter gif[PERLIN NOISE CARACTERES GIF]

See the Pen perlin noise caracters loop by Pedro Henrique Mendes (@alt-art) on CodePen.

© 2019 Dimension.

www.000webhost.com