Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
/* ☜(⌒▽⌒)☞ */ var sideLength = 97, tileSize = 8, borderTiles = 5; var dataStr = '000000000000000000000000000000000000100000010000011000000000000000000000000000000000000000000000000000000000000000000110001101111111111111111000011100000011111111111111000000000000000000000000000000000000000000000111100111100000000000000000000100000001110000011111000000000000000000000000000000000000111000010111000000111100111111001000000000000000110011111111111111111111111111111111111100000010111111111110000011111111011111111000000001111110100111011111111111111111110010000000000000000001111111111111111111111011101111000111000111111111011111111111111111111111111111111111000000000011111111111111111111100000000111000011000011110011111111111111111111111111111111111100000000000001111111111111111110000110100011000000001100111000111111111111111111111111111111100111100000000000110001111111111111100111110000000000001110000001111111111111111111111111111110000010000000000111100000111111111111110011111110000000000111011111111111111111111111111111111111111001110000000000000000011111111111111011111111000000000001101111111111111111111111111111111111111000011000000000000000000011111111111111111101000000000000001111111111101001111111111111111111111110000100000000000000000011111111111101111110100000000000011111111110100100011111111111111111111111011000000000000000000011111111111111111000000000000000011100101010111111001111111111111111111110001000000000000000000011111111111111100100000000000000000110000101011111100111111111111111110001100110000000000000000000111111111111100000000000000000000001111000000001111111111111111111111110010110000000000000000000001111111111110000000000000000000011111110110000111111111111111111111111100011000000000000000000000111111111110000000000000000000001111111111111111111111111111111111111111001000000000000000000000011111000001000000000000000000001111111111111111110011011111111111111111100000000000000000000000000011100000000000000000000000001111111111111111011111100011111111111111100000000000000000000000000011110010111000000000000000001111111111111111100111110001111110111101000000000000000000000000000000011001001110000000000000000011111111111111110011111000011110011111000100000000000000000000000000001111000101110000000000000011111111111111111111111000001110000011100011100000000000000000000000000100111000000000000000000001111111111111111111000000000011000001111000110000000000000000000000000000001100010000000000000000011111111111111111111100000001100000101100000110000000000000000000000000000011110101000000000000000111111111111111111110000000111000101000010111000000000000000000000000000000111111111000000000000001110111111111111110000000000100010100101000000000000000000000000000000000000111111110000000000000000000111111111110000000000000000100011100000000000000000000000000000000000111111111010000000000000000011111111110000000000000000001101101110101000000000000000000000000000111111111111100000000000000000111111111000000000000000000010010100111110011000000000000000000000011111111111111100000000000000011111110000000000000000000001110000000101111100000000000000000000001111111111111110000000000000001111111000000000000000000000011011110011111011000000000000000000000111111111111111000000000000000011111100000000000000000000000000110000000000100000000000000000000000111111111111000000000000000111111111000110000000000000000000000011110000000000000000000000000000011111111111100000000000000011111111100110000000000000000000011111101100000000000000000000000000000011111111110000000000000001111111100111100000000000000000111111111110000000000000000000000000000001111111111000000000000000011111110011100000000000000000001111111111000000000000000000000000000000111111110000000000000000000111110001110000000000000000001111111111111000000000000000000000000000011111110000000000000000000011111000000000000000000000011111111111111100000000000000000000000000001111111000000000000000000000111000000000000000000000000111111111111100000000000000000000000000000111110100000000000000000000011000000000000000000000000000000011111100000100000000000000000000000011111000000000000000000000000000000000000000000000000000000000111100000011000000000000000000000000110000000000000000000000000000000000000000000000000000000000000000000001100000000000000000000000010000000000000000000000000000000000000000000000000000000000000111000101000000000000000000000000011100000000000000000000000000000000000000000000000000000000000001000110000000000000000000000000000110000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000011000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000011000000000000000000000000000000000000000000000000000000000000000000000'; var mapArray = dataStr.split(""); var mapColor = function (min, max) { return Math.random() * (max - min) + min; } function setup() { var s = (sideLength + borderTiles * 2) * tileSize; createCanvas(s, s); stroke(100); background(25,25,112); } function draw() { var pixel; var offset = borderTiles * tileSize; translate(offset, offset); for (var y = 0; y < sideLength; y++) { for (var x = 0; x < sideLength; x++) { pixel = parseInt(mapArray[x + y * sideLength]); if (pixel === 1) { // monochromatic range fill(mapColor(150,250)); //uncomment below for color //fill(random(250),random(250),random(250)); rect(x * tileSize, y * tileSize, tileSize, tileSize); } } } frameRate(5); }
CSS
body { background: midnightblue; } canvas { display: block; margin: auto; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email