Pixelation effect with divs?

Question

I'm trying to create a pixelation effect but with divs. The divs are small, 25px by 25px. I do not want to hard-code hundreds of these into the markup.

I want the entire body of the page to made up of these div "pixels" so that I can do something interesting with color randomization.

I imagine this has something to do with cloning divs, but assuming I do that, how will I clone them in such a way that they generate the full size of the body? So that it appears as though the full screen is full of pixels?

Note: I am a novice developer.

Use a canvas or generate a css background. – Etheryte Aug 09 '14 at 02:52 — Etheryte, Aug 09 '14 at 02:52

Matt Bucci · Accepted Answer · 2014-08-09T08:16:23.297

1

Your question is sort of vague, but here's what I was able to throw together, hopefully this answers your question. Basically I just generate a long string containing all the div elements and inject them into the page

http://codepen.io/anon/pen/pbnth

//helper function see
//http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

var num_of_pixels = 5000;

var output = "";

for(var i = 0; i < 5000; i++) {
  output+= '<div style="'
  output+= "background-color:"+getRandomColor()+";"
  output+='"" class="pixel"></div>'
}

var container = document.getElementById('container');
container.innerHTML = output

In order to get the full screen effect you're talking about, just calculate the innerwidth*innerheight and divide by the area of each pixel, these are 25px with a 2px margin so 27^2

EDIT:

Here's an example using a fixed color set

http://codepen.io/mattbucci/pen/ueBfx

And here's a bonus animated version, although think there's probably a more efficient way to do this with canvas

http://codepen.io/mattbucci/pen/avrjd

edited Aug 09 '14 at 08:16

answered Aug 09 '14 at 03:00

Matt Bucci

2,100
2
16
22

Wow, both of your answers spark a lot of questions for me. What would you suggest if I had a SET of colors that I wanted as background colors? I have approximately 10-14 colors that I want to use. How would I draw from only a select group of colors randomly? – David Aug 09 '14 at 04:33
This is a complete different question :-) I suggest make a new one concerning color palettes, which is a wide subject, and mark one of those two nice answers as correct. – peter_the_oak Aug 09 '14 at 04:48
@David if I wanted to use a set of colors I would modify the get color function to fetch the color from an array like so: var colors = [ red, blue, green, other-color ] function getColor() { return colors[Math.floor(Math.random()*colors.length)] } You could for instance create a monocromatic to do this. I'll post an update – Matt Bucci Aug 09 '14 at 06:50
`getRandomColor` could alternatively be written as: `return '#'+('00000'+Math.floor(Math.random()*0x1000000).toString(16)).slice(-6);` – Niet the Dark Absol Aug 09 '14 at 08:05

score 1 · Answer 2 · answered Aug 09 '14 at 03:38

Here's a rudimentary FIDDLE that will get you started.

There is a container (you could change it to body) that is filled with little divs (you adjust the size of the divs and container as you wish).

JavaScript fills the container, and assigns a random color to each div with inline styling.

JS

for(var n=1; n < 100; n++)
   {
    for(var r = 1; r < 50; r++)
       {
        mycolor = '#' + Math.random().toString(16).substring(2, 8);
        var mydiv = "<div style='background-color:" + mycolor + " ;'></div>";
        $( '.container' ).append( mydiv );
        }
        $( '.container' ).append( "<div class='clearboth'></div>");
    }

Pixelation effect with divs?

2 Answers2