Category: Project-09-Portrait

For this project, I wanted to create an interactive portrait. I was inspired by Ryan Alexander’s work and wanted to have the portrait show up based on where you clicked your mouse. I wasn’t able to get that working fully, but I still think the final product is pretty cool as the way the portrait shows up changes based on where you click the mouse. I also added randomness to each pixel width and height to make the portrait more animated.

sketchDownload

//Catherine Liu
//jianingl_andrew.cmu.edu
//Section D
//project_09

//image shows up in pixels and spreads out on canvas

var img;
var xStart; //stores mouseX
var yStart; //stores mouseY
var click = true; //checks for mousePressed and removes text
var radianSize = 0; //increases area of expansion
var clickCol = false; //checks color of background

function preload() {
    img = loadImage("https://i.imgur.com/mzVFTDQ.jpg");
}
function setup() {
    img.resize(img.width/2, img.height/2);
    createCanvas(img.width, img.height);
    frameRate(50);
    print (img.width/2);
    print(img.height/2)
}

function draw() {

    //redraws background every mousePressed
    if (clickCol) {
        fill(203, 195, 227);
        rect(0,0,width,height);
        clickCol == false;
    }
    //sets up text that only shows up at beginning
    if(click) {
        background(203, 195, 227)
        push();
        fill(255);
        textAlign(CENTER);
        textSize(20)
        text("Click anywhere to draw image",width/2, height/2)
        pop();
    }
    pixelExpand();
}


function pixelExpand() {
    for (var vert = yStart; vert < radianSize; vert += 3) {
         for (var hor = xStart; hor < radianSize; hor += 3) {
            noStroke();

            //expands right downwards
            var c = img.get(hor, vert); 
            fill(c);
            ellipse(hor, vert, random(5), random(5));

            //expands right upwards
            var c2 = img.get(hor, height-vert); 
            fill(c2);
            ellipse(hor, height-vert, random(5), random(5));

            //expands left upwards
            var c3 = img.get(width-hor, height-vert);
            fill(c3);
            ellipse(width-hor, height-vert, random(5), random(5));

            //expands left downwards
            var c4 = img.get(width-hor, vert);
            fill(c4);
            ellipse(width-hor, vert, random(5), random(5));
        }
    }
    radianSize += 5; //increase expansion size
}

//returns starting point for pixels to show
function mousePressed() {
    radianSize = 0;
    clickCol = true;
    click = false; //text disappears
    xStart = constrain(mouseX, 0, width/4);
    yStart = constrain(mouseY, 0, height/4);
}

For my portrait, I knew I wanted to do something where the user of my program could participate in while creating the portrait. I really enjoy active interactions in my pieces within design, so I’ve been trying to bring that into my coding work as well. So, I decided that the way to do that was to create a click and drag style generator, where the user drags around their mouse to “paint” my portrait. From there, I created randomly generated “pixels” within a certain radius of the mouse, to add an element of randomization to the “painting”. Finally, because it was taking me a long time to actually paint the portrait and I found that annoying, I added in a larger “brush” size through the use of larger random pixels. I think the final outcome is pretty cool, I like how it came out.

• 

• 

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

var erSelfie; //image storage

//loads the image to be used
function preload() {
    erSelfie = loadImage('https://i.imgur.com/GbuQVul.jpg?1');
}

function setup() {
    createCanvas(340,480);
    imageMode(CENTER);
    noStroke();
    background(200);
}

function draw() {
    // gives radius to the area in which random pixels can appear
    var xPos=random(-10,10);
    var yPos=random(-10,10);
    // gives the mouse access to the entire image's pixels
    var x = map(mouseX, 0, width, 0, 2117);
    var y = map(mouseY, 0, height, 0, 3000);
    var pixSize;
    var pix = erSelfie.get(x, y); //color of pixel
    if (mouseIsPressed) {
        push();
        translate(mouseX,mouseY);
        fill(pix);
        // option for large or small pixel generation
        if (keyIsPressed) {
            pixSize=random(10,20);
        } else {
            pixSize=random(1,10);
        }
        ellipse(xPos, yPos, pixSize);
        pop();
    }
}

sketch

// gnmarino
// Gia Marino
// section D

var img;

function preload() {
    img = loadImage("https://i.imgur.com/0H1pS9T.jpg"); 
}

function setup() {
    createCanvas(480, 350);
    background(220);
    noStroke();
    background(255);
    frameRate(20);
}

function draw() {

    // captures the color of every 3 pixels and fills the circles
    for(var x = 0; x < width; x+= 3){
        for(var y = 0; y <= height + 100; y+= 3){

            var color = img.get(x, y);
            fill(color);

            // when mouse pressed the image is less blurred 
            if(mouseIsPressed) { 
                size = random(5);
                ellipse(x, y, size);
            } else {
                size = random(50);
                ellipse(x, y, size);
            }

        push();
        stroke(0);
        text("Press Mouse", 15, 15);
        pop();

        }
    }
}

For this project I had a hard time figuring out how to be creativity without overloading my code. This is because I loop my code so many times to create my picture out of dots that when I went in to change things or print things in the loop my computer would just be having to run way too much. Thus, I decided it be cool to make a project where you uncover my face by clicking on the screen rather than adding anymore to the final image.

I had a lot of fun with this project, but I definitely think i could’ve gone a little farther with it. If I had more time, I would add some more interactive elements with mouseX/mouseY

sketch

//Michelle Dang
//mtdang@andrew.cmu.edu
//Project 9
//Section D

var portrait;
var smallPoint, largePoint;

var barY=0;

function preload() {
  portrait = loadImage("https://i.imgur.com/8eYjWUj.jpg");
}

function setup() {
  portrait.resize(portrait.width/2.5, portrait.height/2.5)
  createCanvas(portrait.width, portrait.height);
  print(portrait.width)

  smallPoint = 20;
  largePoint = 40;
  imageMode(CENTER);
  noStroke();
  background(255);
  portrait.loadPixels();
}

function draw() {

  for (var x=0; x<portrait.width; x+=10) {
    for (var y=0; y<portrait.height; y+=10) {
      var c = portrait.get(x, y);
      push();
      fill(color(c))
      noStroke();
      circle(x, y, random(20,50),random(20,50));
      circle(x, y, random(20,50),random(10,15));

    }
  }

  var pointillize = map(400, 0, width, smallPoint, largePoint);
  var x = floor(random(portrait.width));
  var y = floor(random(portrait.height));
  var pix = portrait.get(x, y);
  fill(pix, 128, 128);
  stroke(10)
  rect(x, y, pointillize, pointillize);


  rect(0, barY, width, 40); //horizontal bar
  barY+=12;

  if (barY > portrait.height) {
  barY = 0;
  }


}