0

Let's say I have a <div> rectangle sized 1400x700 pixels. Let's call it a "canvas."

I want to fill it with a number of enlarged "pixels" if you will - squares of random color and opacity. Randomly. Some will fade in, some will fade out. That's easy enough.

The HTML structure should look like:

div#canvas
  div.pixel
  div.pixel
  div.pixel
  div.pixel

How do I take the original dimensions of the rectangle and arrive at a number of square divs that are guaranteed to fill the whole "canvas" to the brim?

Before: enter image description here

After: enter image description here

The size of the squares should be variable somehow. The idea is to "pixelate" the background image but in an undulating fashion, though that's a mental issue and not a programming one.

dsp_099
  • 5,801
  • 17
  • 72
  • 128
  • 1
    How big are the squares? – Paulie_D Apr 17 '16 at 18:16
  • @Paulie_D Good question. Proportional to the size of the canvas. Let's say like 5%ish? I'll update the question – dsp_099 Apr 17 '16 at 18:20
  • Assuming the square needs to have integral side length in pixels, the largest square whose side length divides both the width and height of the rectangle will have side length equal to the [greatest common divisor](https://stackoverflow.com/questions/17445231/js-how-to-find-the-greatest-common-divisor) of the rectangle width and height. – dbc Apr 17 '16 at 18:35
  • @dbc This is the answer I wanted. Care to elaborate a little and I'll set it as accepted – dsp_099 Apr 17 '16 at 20:29

1 Answers1

0

Do you really need a seperate dom element for each "pixel"? I'd consider to just use a single element with a custom background gradient like this:

http://lea.verou.me/css3patterns/#checkerboard

Alex
  • 2,398
  • 1
  • 16
  • 30
  • Yes they do because they'll appear and disappear at random / change opacity / etc. I dont think the CSS3 checkerboard can do that? – dsp_099 Apr 17 '16 at 20:29