Project: Computational Portrait (Custom Pixel)

project pixel sketch luca

var img;//image
var imgang = 90;//image angle

function preload(){
  img = loadImage('https://i.imgur.com/XCeFp0s.png');//load image from imgur.com
}

function setup() {

  createCanvas(391, 480);
  //background for contrast
  noStroke();
  imageMode(CENTER);
}

function draw() {

  background(0,0,0);

  for (var col = 0; col < img.height; col+=10){//I did column for height because my image was incorrectly loaded.
    for (var row = 0; row < img.width; row+=10){//row for height.

      var c = img.get(row,col);//extract pixel from image and set as color

      //set image to correct and central position
      push();
      translate(391,0);
      rotate(radians(imgang));
      fill(color(c));//fill with picture colors
      ellipse(col,row,7,7);//ellipses as pixels
      pop();

    }
  }

  push();//needs to be separate because of background setting

  //draw head
  stroke(230,230,0);
  strokeWeight(5);
  line(50,150,320,150);
  line(50,150,50,400);
  line(50,400,320,400);
  line(320,400,320,150);
  line(125,360,255,360);

  //moving eyes
  var wall1 = constrain(mouseX,120,150)
  var c = constrain(mouseY,225,255);
  var wall2 = constrain(mouseX,240,280)

  //eyes
  fill(230,230,0);
  ellipse(wall1,c,30,30);
  ellipse(wall2,c,30,30);

  pop();

}

I enjoyed making this project. I faced challenges when I tried to load my images and match pixels according to the image. I changed the image link to a direct link on Imgur and solved the problem. For the pixels, I used a for loop to match the pixels to the image, and by changing the number of increments for each run, I was able to change the size and density of my pixels. For my composition, I did not want to create a photorealistic representation, instead, I wanted some sort of interaction with the image, so I created the yellow face. Overall, this project was a challenge, but I learned more about images in p5.js.