Emma NM-Project-09(Custom Pixels)

customPixels

/* 
Emma Nicklas-Morris
Section B
enicklas
Project-09
Custom Pixels
*/

var portraitImg;

function preload() {
    var myImageURL = "https://i.imgur.com/Zfspsky.jpg";
    portraitImg = loadImage(myImageURL);
}

function setup() {
    // canvas proportional to image size
    createCanvas(portraitImg.width / 6, portraitImg.height / 6);
    background(255);
    portraitImg.loadPixels();
    frameRate(150);

}

function draw() {
    // get pixel color at that random location in image
    var ix = floor(random(portraitImg.width));
    var iy = floor(random(portraitImg.height));
    var colorLoc = portraitImg.get(ix, iy);

    noStroke();
    fill(colorLoc);

    // scale it to canvas size
    x = map(ix, 0, portraitImg.width, 0, width);
    y = map(iy, 0, portraitImg.height, 0, height);
    
    // creates a spiral like look
    var d = dist(width / 2, height / 2, x, y);
    d = d % 10;

    // draws the hexagons
    polygon(x, y, d, 6);


}

// https://p5js.org/examples/form-regular-polygon.html 
function polygon(x, y, radius, npoints) {
  let angle = TWO_PI / npoints;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius;
    let sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

I really enjoyed this project. It was fun to see it come about. I wanted to make my generative pixel image to be a bit more interesting by adding a circular/spiral like look and use hexagons instead of circles or rectangles.