Imagens reproduzidas em codigos

[Mnny 0]

Olá, vi algo num site e fiquei curioso em saber como faz . Toda site, ao fazer alguma busca que não existe, leva ao " 404 ". O Site da Rockstar Games tem uma pag 404 muito interessante no meu ponto de vista, por isso queria saber como faz.

Ela reproduziu a logo da rockstar em codigos e em cores.

Exemplo : http://www.rockstargames.com/asas ( "asas" é qualquer palavra após o endereço para chegar ao 404). Percebam que voc~e consegue selecionar com o mouse qualquer parte da img reproduzida e que são apenas codigos com cores diferentes.

Como faço uma igual ou semelhante com uma img qlqr ou até uma logomarca de meu desejo ?

[L. Henrique 179]

Mnny,

Esse é só um conjunto de números binários gerados aleatoriamente. Você pode fazer isso de algumas formas, veja:

• Criar um campo HTML e fazer com que o JS o preencha com todos os binários.
• Criar um campo em PHP e fazer um loop de binários.
• Criar um campo HTML, preencher a mão todos os números e sortear as cores.
• Criar um campo HTML, preencher os dados da forma mais fácil e utilizar os blend modes do CSS.

Veja um exemplo no Codepen do que é um blend mode: http://codepen.io/chriscoyier/pen/aBIAc

 

Você só precisa inserir todas as informações de texto (um loop pra não ficar essa bagaça gigante dentro do HTML) e adicionar uma imagem por cima com o blend (ou por baixo, ou como achar melhor).

Para o JS, por exemplo, você pode usar uma função com um for().

function criarBinario() {
   var texto = "";
   var binario = "01";
   
   for (var i = 0; i < 255; i++) {
      texto += binario.charAt(Math.floor(Math.random() * possible.length));
   }
   return texto;
}

Bom, eu espero que você saiba o básico de JS, mas aqui é bem simples. Ele vai buscar 0 e 1 dentro da variável binario e sortear eles de diferentes formas até completarem 255 caracteres.

Abraços!

 

[Mnny 0]

Mnny,

 

Esse é só um conjunto de números binários gerados aleatoriamente. Você pode fazer isso de algumas formas, veja:

• Criar um campo HTML e fazer com que o JS o preencha com todos os binários.
• Criar um campo em PHP e fazer um loop de binários.
• Criar um campo HTML, preencher a mão todos os números e sortear as cores.
• Criar um campo HTML, preencher os dados da forma mais fácil e utilizar os blend modes do CSS.

Veja um exemplo no Codepen do que é um blend mode: http://codepen.io/chriscoyier/pen/aBIAc

 

Você só precisa inserir todas as informações de texto (um loop pra não ficar essa bagaça gigante dentro do HTML) e adicionar uma imagem por cima com o blend (ou por baixo, ou como achar melhor).

 

Para o JS, por exemplo, você pode usar uma função com um for().

function criarBinario() {
   var texto = "";
   var binario = "01";
   
   for (var i = 0; i < 255; i++) {
      texto += binario.charAt(Math.floor(Math.random() * possible.length));
   }
   return texto;
}

Bom, eu espero que você saiba o básico de JS, mas aqui é bem simples. Ele vai buscar 0 e 1 dentro da variável binario e sortear eles de diferentes formas até completarem 255 caracteres.

 

Abraços!

 

Estou um pouco confuso. Poderia mostrar algum exemplo real ?

[L. Henrique 179]

Mnny,

Então com essa sua resposta vem minhas dúvidas:

• No que você está confuso?
• Qual a sua dúvida agora?
• Qual foi o problema encontrado?
• Qual solução tentou?
• O que você já tentou?
• Só copiou e colou?
• Quer que alguém faça todo o trabalho por você?

[codercss 14]

Mnny,

 

Esse é só um conjunto de números binários gerados aleatoriamente. Você pode fazer isso de algumas formas, veja:

• Criar um campo HTML e fazer com que o JS o preencha com todos os binários.
• Criar um campo em PHP e fazer um loop de binários.
• Criar um campo HTML, preencher a mão todos os números e sortear as cores.
• Criar um campo HTML, preencher os dados da forma mais fácil e utilizar os blend modes do CSS.

Veja um exemplo no Codepen do que é um blend mode: http://codepen.io/chriscoyier/pen/aBIAc

 

Você só precisa inserir todas as informações de texto (um loop pra não ficar essa bagaça gigante dentro do HTML) e adicionar uma imagem por cima com o blend (ou por baixo, ou como achar melhor).

 

Para o JS, por exemplo, você pode usar uma função com um for().

function criarBinario() {
   var texto = "";
   var binario = "01";
   
   for (var i = 0; i < 255; i++) {
      texto += binario.charAt(Math.floor(Math.random() * possible.length));
   }
   return texto;
}

Bom, eu espero que você saiba o básico de JS, mas aqui é bem simples. Ele vai buscar 0 e 1 dentro da variável binario e sortear eles de diferentes formas até completarem 255 caracteres.

 

Abraços!

 

 

Obrigado pela explicação,

O efeito das cores é feito pelo CSS?

Por momentos pensei que tivessem adicionado uma marca de água, que seria a imagem! Imagine, o loop em js para fazer o efeito binário e a imagem em marca de água por cima, e assim daria a sensação de que o binário está pintado. Mas estive a ver no console do mozila, na aba network, e não nenhuma imagem que se pareça com a do efeito.