Hexagonal Video Pixel grid question

scottreinhard

I'm working to produce a honeycomb grid of hexagons in which . Very similar to Dan Shiffman's pixel grid. I'm running into an issue with the code in which the furthest left column of of hexagons seems to capture the color data for the particular pixel, but all of the other hexagons turn out to be the same color. Where am I going wrong with this? I've included a screenshot of the problem.

    var w = 10;
        var cols, rows, value;


        function setup() {
            createCanvas(500, 500);
            devicePixelScaling(false);
            video = createCapture(VIDEO);
            video.size(width, height);
            video.hide();
        }

        function draw() {
            video.loadPixels();

            //background(102);

            for (var x = 0; x < width + w; x += (w * cos(PI / 6) * 2)) { 
                index = 0;
                for (var y = 0; y < height + w; y += w * (1 + cos(PI / 3))) { 

                    var loc = (y + x * width) * 4;

        // The functions red(), green(), and blue() pull out the three color components from a pixel.
                    var r = video.pixels[loc];
                    var g = video.pixels[loc + 1];
                    var b = video.pixels[loc + 2];

                    fill(r, g, b);

                    push(); {
                        translate(x - ((w * cos(PI / 6)) * (index % 2)), y);
                        rotate(radians(30));
                        polygon(0, 0, 10, 6);
                    }
                    pop();

                    index++;
                    console.log(loc);

                }
            }

        }

        function polygon(x, y, radius, npoints) {
            var angle = TWO_PI / npoints;
            beginShape();
            for (var a = 0; a < TWO_PI; a += angle) {
                var sx = x + cos(a) * radius;
                var sy = y + sin(a) * radius;
                vertex(sx, sy);
            }
            endShape(CLOSE);
        }!

Screen Shot 2015-09-04 at 1.01.46 PM

Floritude

I see one error off the bat. You're using push() and pop(). These are JavaScript methods for modifying arrays. You want pushMatrix() and popMatrix().

scottreinhard

Thanks for the reply, but I'm working in p5.js, so push() and pop() would apply.