Category: Project-09-Portrait

aboyle portrait

var underlyingImage;

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

function setup() {
    createCanvas(470, 410);
    background(255);
    underlyingImage.loadPixels();
//framerate is low, so random dots appear slowly
    frameRate(3);
}

function draw() {
//creates random dots
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
//makes dots match the color of the photo
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
//varies size of random dots
    var ellipseSize=random(3,7)
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, ellipseSize);

}


function mouseDragged() {
//if you drag mouse, you get line of randomly sized dots
    var ellipseSize=random(3,7)
    var theColorAtMouse=underlyingImage.get(mouseX,mouseY)
    fill(theColorAtMouse)
    ellipse(mouseX, mouseY, ellipseSize);
}


function mousePressed(){
//if you press mouse, you get randomly sized dot
    var ellipseSize=random(3,7)
    var theColorAtMouse=underlyingImage.get(mouseX,mouseY)
    fill(theColorAtMouse)
    ellipse(pmouseX, pmouseY, ellipseSize);
}

//My name is Anna N Boyle, so I made my picture appear faster
//if you type in the letters A N B O Y L E
//each section is the width of the canvas and 60 pixels down
//and each ellipse is 10 pixels and spaced evenly
//the color variables make the ellipses match the photo color

function keyTyped(){
    if (key==='a'){
      for(i=0; i<width; i+=10){
        for(w=0; w<60; w+=10){
        var theColorAtTheA=underlyingImage.get(i,w)
        fill(theColorAtTheA)
        ellipse(i,w,10)
    }
  }
}
    if (key==='n'){
        for(i=0; i<width; i+=10){
          for(w=60; w<120; w+=10){
            var theColorAtTheN=underlyingImage.get(i,w)
            fill(theColorAtTheN)
            ellipse(i,w,10)}
          }
          firstNCheck=1
        }
    if (key==='b'){
      for (i=0; i<width; i+=10){
        for(w=120; w<180; w+=10){
          var theColorAtTheB=underlyingImage.get(i,w)
          fill(theColorAtTheB)
          ellipse(i,w,10)}
    }
  }
    if (key==='o'){
      for (i=0; i<width; i+=10){
        for(w=180; w<240; w+=10){
          var theColorAtTheO=underlyingImage.get(i,w)
          fill(theColorAtTheO)
          ellipse(i,w,10)}
      }
}
    if (key==='y'){
      for (i=0; i<width; i+=10){
        for(w=240; w<300; w+=10){
          var theColorAtTheY=underlyingImage.get(i,w)
          fill(theColorAtTheY)
          ellipse(i,w,10)}
        }
      }
      if (key==='l'){
        for (i=0; i<width; i+=10){
          for(w=300; w<360; w+=10){
            var theColorAtTheL=underlyingImage.get(i,w)
            fill(theColorAtTheL)
            ellipse(i,w,10)}
          }
        }
        if (key==='e'){
          for (i=0; i<width; i+=10){
            for(w=360; w<height; w+=10){
              var theColorAtTheE=underlyingImage.get(i,w)
              fill(theColorAtTheE)
              ellipse(i,w,10)}
            }
          }
}

//If you press the enter key, the portrait resets to white screen
function keyPressed(){
    if (keyCode===ENTER){
      background(255);
    }
}

This was a fun project! I went ahead with the “randomly appearing dots” idea, but I made the frame rate very low so they would appear slowly–I wanted to the majority of my portrait to appear as a result of the viewer interacting with it. I made it so if you clicked the mouse a randomly sized dot appears at that point, and if you drag the mouse a line of dots appears. Since this was a portrait of me, I made it so typing my first two initials and my last name would make sections of the portrait appear. Finally, if you press Enter, the portrait resets to a white canvas and lets you start over!

The portrait when you drag and click the mouse 

The portrait when you type in ANBOYLE

The portrait when you use a mix of typing and dragging 

dance

var dancers;

function preload() {
    //loading the image;
    var image = "https://i.imgur.com/vEGDVWM.jpg?1";
    dancers = loadImage(image);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    dancers.loadPixels();
    frameRate(70);
}

function draw() {
    //setting random vars to use as location of dots drawn;
    var x = random(width);
    var y = random(height);
    var col = dancers.get(x, y);

    noStroke();
    fill(col);
    var size=random(5,20);
    var diam=random(30,100);
    ellipse(x, y, size,size);//random sized balls;
    stroke(col);

}

I decided to choose one of my favorite photos taken of my friend and I this past weekend at a dance competition. The theme was T-Rex arms so we both looked really awkward but had big smiles! I started off trying to make a myriad of things. I tried to use the dots as the main base and tried adding ripples to the photo to make it more interesting but while experimenting, I also ended up just making a lot of lines of different thicknesses. I wasn’t a big fan of how the lines and ripples(not seen in photo below) sometimes weren’t as accurate in getting the colors like the points did though. I ended up sticking to my points even though it was quite simple because I just loved the way it ended up depicting the image.

creyes1 Project-09 (Portrait)

//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-09 (Custom Pixel)

var underlyingImage;

function preload() {
    underlyingImage = loadImage('https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/10/creyes1_15104pic.jpg');
}

function setup() {

    createCanvas(480, 480);
    background(255);

    underlyingImage.loadPixels(); //Loads pixel data
    frameRate(60);

}

function draw() {
    //Creates randomly spawning rectangles with color according to underlyingImage
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);

    var theColorAtLocationXY = [red(underlyingImage.get(ix, iy)) + 20,
                                green(underlyingImage.get(ix, iy)),
                                blue(underlyingImage.get(ix, iy)),
                                70];

    var rectSize = random(10, 20);

    rectMode(CENTER);
    noStroke();
    fill(theColorAtLocationXY);
    rect(px, py, rectSize, rectSize*3);

    //Draws smaller squares for more detail...
    //At eyes
    drawDetailPixel(width/2, 50, 145, 200, 10);
    //At mouth
    drawDetailPixel(width/2 - 10, 50, 240, 300, 10);

}

//Samples underlying image data for pixel color, then draws a rectangle
//in a random position with a Gaussian distribution
function drawDetailPixel(xmin, xmax, ymin, ymax, pixelSize) {
    var dpx = randomGaussian(xmin, xmax);
    var dpy = random(ymin, ymax);
    var dix = constrain(floor(dpx), 0, width-1);
    var diy = constrain(floor(dpy), 0, height-1);
    var detailColXY = [red(underlyingImage.get(dix, diy)) + 20,
                                      green(underlyingImage.get(dix, diy)),
                                      blue(underlyingImage.get(dix, diy)),
                                      35];
    fill(detailColXY);
    rect(dpx, dpy, pixelSize, pixelSize);
}

//Draws a large transparent ellipse according to underlying image color
function mousePressed() {
    fill(red(underlyingImage.get(mouseX, mouseY)) + 20,
         green(underlyingImage.get(mouseX, mouseY)),
         blue(underlyingImage.get(mouseX, mouseY)),
         35);
    stroke(255, 255, 255, 35);
    strokeWeight(1);
    ellipse(mouseX, mouseY, random(150, 250));
}

While I didn’t run into too many issues with this project in terms of implementation, I did have some issues with finding a balance between keeping it visually interesting while avoiding having too much visual noise that it becomes confusing to look at. I really liked the idea that this was a program that would continue to loop and build upon itself, and so opted for various degrees of transparency so that the image would become more clear as the program ran. I also made it a point to highlight certain areas of the image, such as the eyes and mouth, with smaller transparent squares to build up some more defined shapes so that it would be easier to pick out a face from the constantly layering rectangles. I really like the interaction between the analog brush marks in the portrait with the computational pixels in the program, where it creates something almost painterly, yet not quite glitch art, but a really interesting in-between.

Original Self Portrait

Development of the portrait as the program runs and manual mouse clicks are introduced