Category: Project-09-Portrait

sketch

let img;
//my name is an array of letters
let name = ['a', 'l', 'i', 'c', 'e'];

//load image
function preload() {
  image = loadImage('http://i.imgur.com/S0F2kRi.jpg');
}

function setup() {
  createCanvas(720, 400);
  imageMode(CENTER);
  noStroke();
  background(255);
  image.loadPixels();
}

function draw() {
  let px = floor(random(image.width));
  let py = floor(random(image.height));
  let pix = image.get(px, py);
  fill(pix, 128);
  textSize(20);
  textFont("Impact");
  //call random letter from name array
  text(random(name), py, px);
}

Here is my “pointillism” self-portrait. I wanted to change the points to the letters of my name, so I created an array and called random letters from that array. The letters are called at random coordinates.

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Project-09-Computational-Portrait*/

var myImage;

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

function setup() {
    createCanvas(500, 500);
    background(0);
    myImage.loadPixels();
    frameRate(2000);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    // Color at the current pixel
    var theColorAtLocationXY = myImage.get(ix, iy);
    // Random sizes of ellipses
    var w = random(2, 8);
    var h = random(.5, 3);
    // Draw ellipses
    fill(theColorAtLocationXY);
    ellipse(px, py, w, h);

    // Use color at the mouse
    var theColorAtTheMouse = myImage.get(mouseX, mouseY);
    // Draw the dog bone only every 30 frames
    if (frameCount % 30 == 0) {
    noStroke();
    fill(theColorAtTheMouse);
    dogBone();
    }
}

// Draw dog bone pattern according to mouse movement
function dogBone() {
    rectMode(CENTER);
    rect(mouseX, mouseY, 20, 8);
    ellipse(mouseX - 10, mouseY - 3, 8, 8);
    ellipse(mouseX - 10, mouseY + 3, 8, 8);
    ellipse(mouseX + 10, mouseY - 3, 8, 8);
    ellipse(mouseX + 10, mouseY + 3, 8, 8);
}

This project was fun to make and watch. Figuring out how to differentiate the drawing rate of the particles and my dog bone pattern was interesting, and it would be fun to make use of this in my future projects as well.

sketch

//Jina Lee
//jinal2@andrew.cmu.edu
//Section E
//Project-09-Portrait

var myImage;

// preloads photo of my dogs and I
function preload() {
    var myImgURL = "https://i.imgur.com/Ux0KKiz.jpg";
    myImage = loadImage(myImgURL);
}


function setup() {
    createCanvas(640, 480);
    background('black');
    // the image is too big so have to shrink it to fit canvas
    myImage.resize(640, 480);
    myImage.loadPixels();
}

function draw() {
    // chooses a random x value located near the cursor
    var randomX = floor(random(mouseX - 15, mouseX + 15));
    // chooses a random y value located near the cursor
    var randomY = floor(random(mouseY - 15, mouseY + 15));
    // selects the color from a pixel at a random point near the cursor
    fill(myImage.get(randomX, randomY));
    // draws a circle
    dot(randomX, randomY);
}

// creates dot shape
function dot(x, y) {
    push();
    noStroke();
    translate(x, y);
    ellipse(0, 2, 5, 5);
    pop();
}

For this weeks assignment, I had a lot of fun playing with the image. I used dots to create the photo of my dogs and I when I was younger. It was interesting when I was able to change the circle sizes. I stuck with size 5 because it made the design seem easy to comprehend while also not being extremely clear. I tried size 10 and it seemed too blurry.

sketch

//Zee Salman
//SECTION E
//project 09

var picture;

function preload(){    
    var url = "https://i.imgur.com/J5xj43q.jpg"; 
    picture = loadImage(url); 
}

function setup() {
	background(255);
    createCanvas(360, 340);
    picture.loadPixels(); 
//rate of the pixels
    frameRate(8000); 
}

function mouseDragged(){
//size of the brush
    var Bmouse = random(11, 30);
//selecting the color
    var Dmouse = picture.get(mouseX, mouseY); 

//drawing with the mouse dragged    
    fill(Dmouse);
    ellipse(mouseX, mouseY, Bmouse, Bmouse);
}
    
function draw() {
//random  
    var x = random(width); 
    var y = random(height); 

//color for pixel 
    var cx = constrain(floor(x), 0, width - 1); 
    var cy = constrain(floor(y), 0, height - 1); 

    var selColor = picture.get(cx, cy); 

//color of the circles    
    noStroke(); 
    fill(selColor); 

//more focus on the person
    if (x > 60 & x < 200 && y > 0 && y < height){
        ellipse(x, y, 5, 5); 
    }

//closer to the person
    else if (x > 20 & x < 300 && y > 0 && y < height){
        ellipse(x, y, 7.5, 7.5); 
    }
    
//out of focus background
    else {
        ellipse(x, y, 9, 9); 
    }
 }

I really had fun with this project because I had the opportunity to test out and create different outcomes for different interactions. I also wanted it to still be a picture that has some sort of focus as well, so I created smaller dots/ellipses towards the figure and facial features. But, I still left room for abstraction with the interaction piece making it so that random sized dots create the pictures.