// configurações simples // pode alterar sem medo e clicar em Result var tempo_intervalo = 200; var qtd_vezes = 1000; var tamanho_quadrado = 320; // função que começa a animação, // rodando a cada 0,2 segundos a próxima função function comecaLogo() { intervalo = window.setInterval(desenhaLogo, tempo_intervalo); } // função que desenha o mosaico // calculando a posição de cada pixel // e colocando as cores da paleta Gamecult function desenhaLogo() { var canvas = $("#gamecult"); var context = canvas.get(0).getContext("2d"); // Cria o mosaico var imageData = context.createImageData(tamanho_quadrado, tamanho_quadrado); var pixels = imageData.data; // Qtd de quadrados var numTileRows = 16; var numTileCols = 16; // Calcula dimensões dos quadrados var tileWidth = imageData.width/numTileCols; var tileHeight = imageData.height/numTileRows; // Loop de cada quadrado for (var r = 0; r < numTileRows; r++) { for (var c = 0; c < numTileCols; c++) { var rnd_cor = Math.round(Math.random() * 8); if (rnd_cor == 1) { var red = 236; var green = 20; var blue = 90; } else if (rnd_cor == 2) { var red = 173; var green = 216; var blue = 65; } else if (rnd_cor == 3) { var red = 80; var green = 60; var blue = 50; } else if (rnd_cor == 4) { var red = 254; var green = 253; var blue = 66; } else if (rnd_cor == 5) { var red = 10; var green = 87; var blue = 163; } else if (rnd_cor == 6) { var red = 144; var green = 252; var blue = 253; } else if (rnd_cor == 7) { var red = 252; var green = 84; var blue = 47; } else if (rnd_cor == 8) { var red = 99; var green = 195; var blue = 157; } // Dentro do quadrado, loopa entre cada pixel for (var tr = 0; tr < tileHeight; tr++) { for (var tc = 0; tc < tileWidth; tc++) { // Calcula posição do pixel var trueRow = (r*tileHeight)+tr; var trueCol = (c*tileWidth)+tc; var pos = (trueRow*(imageData.width*4))+(trueCol*4); // Coloca a cor no pixel pixels[pos+0] = red; pixels[pos+1] = green; pixels[pos+2] = blue; pixels[pos+3] = 255; }; }; }; }; // Draw image data to the canvas context.putImageData(imageData, 0, 0); } comecaLogo();
<canvas id="gamecult" width="320" height="320" > <!-- Insert fallback content here --> </canvas>