Project 09

var img;
var hexagon = []
function preload(){
   img = loadImage("https://i.imgur.com/VGvokSI.png");
}
//making a hexagon
function makeHexagon(cx, cy, cdx, cdy) { 
    var h = {x: cx, y: cy, dx: cdx, dy: cdy,
            drawFunction: drawHexagon
        }
    return h;
}
function drawHexagon(){
    push()
    translate(this.x,this.y)
//hexagon color is the color of the pixel it is at
    this.c = img.get(10*this.x,10*this.y)
    fill(this.c)
//draws the hexagon from 6 triangles
    noStroke()
    triangle(0,0,-s,0,-s/2,-s*sqrt(3)/2)
    triangle(0,0,-s/2,-s*sqrt(3)/2,s/2,-s*sqrt(3)/2)
    triangle(0,0,s,0,s/2,-s*sqrt(3)/2)
    triangle(0,0,-s,0,-s/2,s*sqrt(3)/2)
    triangle(0,0,-s/2,s*sqrt(3)/2,s/2,s*sqrt(3)/2)
    triangle(0,0,s,0,s/2,s*sqrt(3)/2)
//hexagons would bounce backs if touches the edges
    if (this.x >= width || this.x <= 0){
        this.dx = -this.dx
    }
    if (this.y >= height || this.y <= 0){
        this.dy = -this.dy;
    }
    this.x += this.dx;
    this.y += this.dy;
    pop()
}
function setup() {
    createCanvas(480,480);
    img.resize(4800,4800)
//make 1500 hexagons explode outwards from my left eye, pushed into array
    for (var i = 0; i < 1500; i++) { 
        hexagon[i] = makeHexagon(random(255,260),random(230,250),random(-4,4),random(-4,4))
    }
    text("p5.js vers 0.9.0 test.", 10, 15);
}
var s = 14
function draw() {
    background(200)
    image(img,0,0,480,480)
//pixelated because having a clear image of my huge face on wordpress is horrifying
    for(var x = 0; x < width; x += 10){ 
        for(var y = 0; y < height; y += 10){
            var c = img.get(10*x,10*y);
            fill(color(c));
            noStroke();
            rect(x,y,10,10);
        }
    }
//draw 1500 hexagons
    for (var i = 0; i < 1500; i++) { 
        hexagon[i].drawFunction() 
    }
}