Project-09-Portrait – Page 3 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 9 – Computational Portrait

This portrait is based on the idea of the probabilistic road map as described in ‘Probabilistic Roadmap Path Planning’ by H. Choset et al. where the figure in the portrait is graph G and the red background are obstacles/collisions.

Controls

RIGHT ARROW = advance drawing one step
ENTER = start & stop drawing
‘r’ = refresh

sketch

//Name: Tsz Wing Clover Chau
//andrewid: ctchau
//Section E
//Project 9


var chosenPixels;
var step;

var bgPx = [];
var rStep;

var range = 30;
var baseImage;


function preload(){
    baseImage = loadImage("https://i.imgur.com/PaF0PFq.png");
}

function setup(){
    createCanvas(480, 480);
    background(255);
    frameRate(30);
    baseImage.loadPixels();

    //init array
    chosenPixels = [];
    bgPx = [];
    step = false;
    rStep =  random(0, 30);

    for (var i = 0; i < rStep; i++){
        pt = makePoint(int(random(0, 480)), int(random(0, 480)));
        if (isRed(pt)) {
            bgPx.push(pt);
        } else {
            chosenPixels.push(pt);
        }
    }
}


function draw() {
    drawBg();
    if (keyIsDown(RIGHT_ARROW) || step){   // press right arrow to invidually step
        addPx();
    }
    drawFace();
}


//HELPER FUNCTIONS
function makePoint(px, py){
    var pt = {x: px, y: py};
    pt.c = baseImage.get(px, py);
    pt.neighbors;
    return pt;
}

function addPx(){
    rStep =  random(0, 100);
    var newPx = 0;
    while (newPx < rStep){
        pt = makePoint(int(random(0, 480)), int(random(0, 480)));

        //add to bg array + pick new if red
        while (isRed(pt)){
            if (int(random(0, 8)) == 1){
                bgPx.push(pt);
            }
            pt = makePoint(int(random(0, 480)), int(random(0, 480)));
        }

        var min_dist = range;
        for (var j = 0; j < chosenPixels.length; j++){
            var checkPx = chosenPixels[j];
            var d = dist(checkPx.x, checkPx.y, pt.x, pt.y);
            
            if ((dist(checkPx.x, checkPx.y, pt.x, pt.y) < range) & (d < min_dist)){
                min_dist = d;
                stroke(pt.c);
                strokeWeight(0.5);
                line(checkPx.x, checkPx.y, pt.x, pt.y);
                chosenPixels.push(pt);
                newPx ++;
                break;
            }
        }
    }
}


function isRed(pt){
    if (pt.c[0] > 50 & pt.c[1] < 30){
        return true;
    }
    return false;
}

function keyPressed(){
    if (keyCode == ENTER){  //ENTER to autocomplete
        step = !step;
    } else if (key == 'r'){  //press 'r' to reset!
        setup();
    }
}



function drawBg(){
    for (var i = 0; i < bgPx.length; i++){
        px = bgPx[i];
        px.c[3]= 80;
        stroke(px.c);
        strokeWeight(0.3);
        if (int(random(0,2)) == 1){
            line(px.x, 0, px.x, height);
        } else {
            line(0, px.y, width, px.y);
        }
    }
}

function drawFace(){
    for (var i = 0; i < chosenPixels.length; i++){
        var curPx = chosenPixels[i];
        stroke(curPx.c);
        strokeWeight(5);
        point(curPx.x, curPx.y);
    }
}

Logic/Pseudocode:

Configuration q = series of randomly generated non-background pixels (ie. not red).
Q = new randomly generated non-background pixels
- if distance from q -> Q < acceptable range, append to q
N = rStep (ie. no. of new non-background pixels added to q)

Probabilistic Roadmap Path Planning by H. Choset et Al

References:
http://www.cs.columbia.edu/~allen/F15/NOTES/Probabilisticpath.pdf

Lvanveen Project 9: Portrait

My project 9! I decided to reuse and modify some code from our wallpaper project to make the design more fun, and overall, I’m pretty pleased!

sketch

var img; //the code takes a sec to load, but it does load don't worry!

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

function setup() {
    createCanvas(480, 400);
    background(200);
    strokeWeight(0)
}

function draw() {
	fill(255);
	background(200)
	image(img, 0, 0, width, height);
	fill(255, 35, 10); //red
	rect(0, 0, width, height);

	for(var y = 0; y < 500; y += 100){ //initally the background was just bright red, but I wanted more of a pattern...
		for(var x = 0; x < 600; x += 200){ //... so I decided to reuse some code that made flowers that I used in week 5 w/ a change in color etc
            
			drawFlower(x, y);
		}
	}

	for(var y = -50; y < 500; y += 100){
		for(var x = 100; x < 600; x += 200){
			drawFlower(x, y);
		}
	}

    for(var col = 500; col < 600; col += 40){
        strokeWeight(2)
        stroke(110, 94, 66);
        fill(186, 156, 95);
        rect(col, 350, 40, 50);
    }
	for(var i = 0; i <= width/5; i++){ //use of 5 basically made the scale of the pixels 5x bigger
		for(var j = 0; j <= height/5; j++){
			c = img.get(i*5, j*5);
			if(c[0] > 110 & c[1] > 110 && c[2] > 110){
				strokeWeight(0);
				fill(140, 255, 251); //cyan blue of face
				rect(i*5, j*5, 5, 5);
			}
		}
	}
}

function drawFlower(x, y) { //code to make flowers
	push();
	translate(x, y); 
	strokeWeight(8);
	stroke(184, 176, 79); //green stem color
	line(-25, 35, -40, 50);
	line(-40, 50, -45, 60);
	line(-45, 60, -55, 20);
	line(-55, 20, -55, 0);
	line(-45, 60, -55, 90);

	strokeWeight(0);
	fill(184, 176, 79); //same green
	ellipse(-55, 0, 20, 30);

	push();
	rotate(radians(30));
	fill(209, 187, 96); //underside of stem color
    rect(-10, 0, 15, 45);
    pop();

    fill(255, 209, 25); //main flower yellow color
    rect(-15, -35, 30, 50); //base of the flowers
    rect(-35, -5, 40, 20);
    rect(5, -5, 30, 30); 
    rect(-15, 15, 20, 20);

    push();
    rotate(radians(45));
    rect(-14, 6, 15, 30);
    rect(-32, -4, 30, 15);
    rect(-5, -35, 15, 30);
    pop();

    strokeWeight(1);
    stroke(245, 183, 15); //darker yellow thin line flower color
    line(0, 0, -3, -25);
    line(0, 0, 7, -25);
    line(0, 0, -8, -25);
    line(0, 0, 12, -25);
    line(0, 0, -30, 1);
    line(0, 0, -30, -2);
    line(0, 0, -25, 15);
    line(0, 0, -20, 20);
    line(0, 0, 27, 15);
    line(0, 0, 25, 20);
    line(0, 0, 30, 5);
    line(0, 0, 30, 0);

    stroke(250, 231, 180); //flower light cream color
    strokeWeight(2);
    line(0, 0, 3, -25);
    line(0, 0, -30, 5);
    line(0, 0, 30, 10);

    strokeWeight(1);
    stroke(242, 223, 145); //lines connecting seeds color
    line(0, 0, 10, -10);
    line(0, 0, 9, -5);
    line(0, 0, 13, -13);
    line(0, 0, 15, -18);
    line(0, 0, 10, -15);

    strokeWeight(0);
    fill(69, 43, 31); //seed color
    ellipse(10, -10, 3, 3);
    ellipse(9, -5, 3, 3);
    ellipse(13, -13, 3, 3);
    ellipse(15, -18, 3, 3);
    ellipse(10, -15, 3, 3);
    pop();
}

Project-09: ASCii Portrait

had a lot of fun w dis one

sketch

// Zoe Lin (ID: youlin)
// Section B

//please give it a couple seconds to load!
//press the mouse to invert the colors!
var density = '@Ñ#W$0985321!?=+-;:,._ ';
var r, g, b;
var img;

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

function setup() {
  createCanvas(350, 450);
  //frameRate(10);
  textAlign(CENTER, CENTER); //ensures ascii text aligns with pixels
  noStroke();
}

function draw() {
  img.loadPixels(); //loads each individual pixel of img
  background(0);

  //var denShuffle = shuffle(density);
  var newWidth = width/img.width;
  var newHeight = height/img.height;
  for (var i = 0; i < img.width; i++) {
    for (var j = 0; j < img.height; j++) {
      var index = (i+j*img.width) * 4; //sets index to match image pixel
      r = img.pixels[index]; g = img.pixels[index+1]; b = img.pixels[index+2];
      var average = (r+g+b) / 3; //finds average rgb index
      textSize(newWidth);
      fill(255);

      //maps index of letter to image pixels
      var letterdex = floor(map(average,0,255,density.length,0));
      //draws ascii letters
      text(density.charAt(letterdex), i*newWidth, j*newHeight);
      
    }
  }  
}

//note: mousePressed also takes a few seconds to load!
function mousePressed() { //inverts colors when mouse is pressed
  density = density.split('').reverse().join(''); //reverses density string
}

Project 09: Computational Portrait

For my image, I noticed that the background lights were blurry, and I wanted to implement that in the code with mousPressesed. So each time you use you press the mouse, a filter is applied to the whole canvas and the whole canvas gets a bit blurry. Additionally, I wanted there to be a difference in shapes for the background and the person.

Small Blur

No Blur

Medium Blur

Lots of Blur

Image

asuSketch

// Your name: Ashley Su
// Your andrew ID: ashleysu
// Your section (C):  


var img;
var stars = [" ★ ", " ☆ "," ✪ "," ✦ ", " ✧ "]
var faces = ['( ͡• ͜ʖ ͡•)', '( ͡ᵔ ͜ʖ ͡ᵔ)', '( ͡~ ͜ʖ ͡°)', '( ͡◡_⦣ ͡◡)']

function preload() {
    img = loadImage("https://i.imgur.com/spqIDsb.jpeg")
}

function setup() {
    createCanvas(480, 480);
    imageMode(CENTER);
    img.loadPixels();
    img.resize(480, 480);                              //resize image to canvas
    frameRate(50000);
    background(0);
}

function draw() {
    //pick random x and y
    var x = floor(random(img.width));
    var y = floor(random(img.height));
    
    //pull pixel color from that x and y
    var pixelColor = img.get(x, y);
    
    //fill using the pixel color
    fill(pixelColor);
    

    if (x>((width/2)-50) & x<((width/2)+50) && y>height/2 && y < height) {        //setting the faces smilies to be next where the actaul face is 
        strokeWeight(5);
        textSize(random(5, 20));                    // smaller near face
        text(random(faces), x, y);                  
      } else {
        textSize(random(5, 20)); 
        text(random(stars), x, y);                  //draws stars everywhere else 
    }

}


function mousePressed() {

        filter(BLUR,3);                   // when mouse is pressed, it blurs the layer 
}

Project 09 – srauch – portrait

Here is my “glass door” portrait. You can change the fidelity of it by moving the mouse up and down. By moving your mouse all the way to the bottom of it, the full portrait is revealed.

sketch

//Sam Rauch, section B, srauch@andrew.cmu.edu, project 09 
//this code makes a "glass door" picture of me with colored ellipses, like you're looking
//at me through one of those textured glass doors. It samples the image
//color at each pixel location (though it skips every other y row to help it run a bit faster)
//and draws a circle there. The circle size is tied to mouseY, so when the mouse is higher up, 
//the circles are larger and the image is lower-fidelity, but it gets higher fidelity as the
//user moves the mouse down the image. 

var samImg;
var uploadImg;

var dotArray = [];

var first = 0;

function preload(){
    uploadImage = "https://i.imgur.com/nTNXyHg.jpg";
}

function setup() {
    createCanvas(400, 533);
    background(220);
    samImg = loadImage(uploadImage);
    frameRate(1);
}

function draw() {
    
    background(50);
    image(samImg, 0, 0);
    
    if (first == 0){ // define all the dot objects; run once at start of draw

        for (var y = 0; y < 533; y+=2){ //fill array with dots all over canvas
            for (var x = 0; x < 400; x++){
                var clr = samImg.get(x, y);
                dotArray.push(makeDot(x, y, 20, clr))
            }
        }
        first ++;
    }

    var sizeTicker = map(mouseY, 0, height, 45, 3); //set dot size to move with mouseY

    shuffle(dotArray, true);
    for(var i = 0; i < dotArray.length; i++){ //draw dots in array
        dotArray[i].size = sizeTicker;
        dotArray[i].drawDot();
    }
}

//dot object and draw function
function makeDot(xpos,ypos,siz,clr){
    var dot = {x: xpos, y:ypos, size:siz,
            color:clr,
            drawDot: drawDotFunction}
    return dot;
}

function drawDotFunction(){
    stroke(this.color);
    //print(this.color)
    strokeWeight(this.size);
    point(this.x, this.y);
}

Project 09 – Project

The photo is a baby photo of myself, so I wanted to use really “primitive” shapes of squares, rhombuses, and circles (all regular shapes).

One of the most satisfying aspects of pointilist pieces is the process of it being made. I wanted this project to be interactive for the user, and really engage with the idea of “pointilism,” so the shapes are made where your mouse is on the canvas.

Additionally, if you press the mouse, you will invert the colors of the original photo, allowing for a “duality” of images being made on the same canvas.

sketch

//Aarnav Patel
//Section D
//Project

var shapeNum = 1;
var c = [];	//getPixel returns an array
var inverseColor = false;

function preload() {
	portrait = loadImage("https://i.imgur.com/aUtMs8f.png");
}

function setup() {
	createCanvas(480, 480);
	background(0);
	imageMode(CENTER);
	portrait.loadPixels();
}

function draw() {
  noStroke();

  var mX = constrain(mouseX, 0, portrait.width);	
  var mY = constrain(mouseY, 0, portrait.height);	//Constrain shapes to happen within canvas

  var x = floor(Math.floor(random(mX - 50, mX + 50)));
  var y = floor(Math.floor(random(mY - 50, mY + 50)));	//Creates "brush" radius of 50 
  c = portrait.get(x, y);

  if (inverseColor) {		//Inverses color by changing array valleus from portrait.get()
  	c[0] = 255 - c[0];
	c[1] = 255 - c[1];
	c[2] = 255 - c[2];
  }
  shapeNum = Math.floor(random(0, 2));	//Creates random indicator for whetehr its square or circle
  fill(c, 128);
  if (shapeNum == 0) {
  	ellipse(x, y, 20, 20);
  } else if (shapeNum == 1) {
  	push();					//Translate + rotate square about its center
  	translate(x, y);
  	rotate(radians(random(0, 360)));
  	rectMode(CENTER);
  	rect(0, 0, 20, 20);
  	pop();
  } 
}

function mousePressed() {
	inverseColor = !inverseColor;
}

Computational self-portrait

This is my self-portrait. I try to use parabola lines instead of points to draw my image. The shape of lines is varied by adding an acceleration variable to change dx and dy. The portrait is looped and redrawn every 500 lines.

//Jason Jiang
//Section E
//Setting up variables
var np = 0;
var particleSetup = [];
var myProtrait
function preload(){
    myProtrait = loadImage("https://i.imgur.com/huB83xd.jpg");
}

//Updating properties of particles each step
function particleStep(){
    //Getting pixel color of the location of each particle on the image
    this.c = myProtrait.get(this.x, this.y);
    
    //Adding acceleration to create parabola curve
    this.dx += this.ax;
    this.dy += this.ay;
    
    //Updating x,y locations of particles
    this.x += this.dx;
    this.y += this.dy;
    
    //Updating x,y locations of particles in next step
    this.x1 = this.x + this.dx;
    this.y1 = this.y + this.dy;
    
}

//Drawing lines between two particles
function particleDraw(){
    stroke(this.c);
    strokeWeight(this.s);
    line(this.x, this.y, this.x1, this.y1);
    
}

//Creating particles
function particle(px, py, pdx, pdy, pax, pay, pc, px1, py1, ps){
    var p = {
        x: px, 
        y: py, 
        dx: pdx, 
        dy: pdy, 
        ax: pax, 
        ay: pay, 
        c: pc, 
        x1: px1, 
        y1: py1, 
        s: ps,
        stepfunction: particleStep, 
        drawfunction: particleDraw
        }
    return p; 
}

function setup(){
    createCanvas(400, 400);
    }    


function draw(){
    //Constraining number of particles
    if (np < 500){
        //Creating objects and adding them into array
        c = color(random(255), random(255), random(255))
        var p = particle(random(width), random(height), random(5), random(10), random(0.5, -0.5), random(0.5, -0.5), c, 0, 0, random(1,8));
        particleSetup.push(p);
        np+=1
    }

    //Resetting canvas if num of particles exceeds 500
    if (np == 500){
        background(255);
        np = 0;
        particleSetup = [];
    }

    //Running particles
    for(i = 0; i < np; i++){
        var p = particleSetup[i];
        p.stepfunction();
        p.drawfunction();
    }
   
    }

Srishty’s Project 9 Portrait

For my portrait, I decided to do something similar to pointillism but instead of dots, I used words. I made a list of words that are about my passions/ideal career choices and then loaded a word randomly from the list to take place of each pixel in my image. Each word matches the color of the pixel in its respective x and y location. The words are all a pretty small font so they can pick up the details of the pixels well.

sketch

// SRISHTY BHAVSAR
// PROJECT 9
// SECTION C 15-104
/*
let img;
let smallPoint, largePoint;

function preload() {
  img = loadImage('nameofimage');
}

*/


var srishty;
var passions;

function preload() {
    srishty = loadImage("https://i.imgur.com/kczcnA1.jpg"); // image of me, srishty
    passions = ["designer", "artist", "UI","UX", "researcher", "HCI", "architecture", 
    "color", "painting", 'music', "running", "singing"]; // list of my passions and career interests
    print(passions);

}

function setup() {
    createCanvas(480,480);
    srishty.resize(480,480); // resizes the ima2ge upload to imgur to be 480 by 480
    background('white');
    imageMode(CENTER); // centers image
    srishty.loadPixels();
    //noLoop();

}


function draw() {
    var x = floor(random(srishty.width));
    var y = floor(random(srishty.height));
    var c = srishty.get(x,y); // identifies the color of each pixels
    fill(c,255);
    textSize(8);
    textFont('Helvetica')
    text(passions[Math.floor((Math.random() * passions.length))] , x, y); // takes a random word from the list of passions and places it to be in the position of the image pixel
}

Project 9 Portrait

project7

This was pretty fun to think of different ways to create a portrait. Going off the pointillism idea, I tried to think of different shapes that could be used and experiment. I decided to use mousePressed() to restart with new shapes. I feel they all came out pretty interesting and all the shapes relate to each other differently.

//Rachel Legg / rlegg / Section C

var img;
var option = 1;

//load image
function preload(){
    //photo of me
    img = loadImage("https://i.imgur.com/wtr45Lt.jpg");
}

function setup() {
    createCanvas(450, 400);
    background(0);
    img.resize(width, height);
    img.loadPixels();
    //fast frame rate
    frameRate(500);
}

function draw() {

    //have random x & y for portrait
    var x = floor(random(0, 450));
    var y = floor(random(0, 400));
    //use color from pixel
    var color = img.get(x, y);
    //smaller shapes leads to more detail
    var s = random(3, 10);
    
    // #4 is used for each pixel
    if (option == 1){
        //have shape pop as pixels
        fill(color);
        //outline of light-colored stroke
        stroke("lightyellow");
        strokeWeight(.5);
        stroke(color);
        textSize(s);
        text("4", x, y);

    //switch 4 to circle option w/ mousePressed
    } else if (option == 2){
        //have shape pop as pixels
        fill(color);
        //outline of light-colored stroke
        stroke("lightyellow");
        strokeWeight(.5);
        circle(x, y, s);

    //switch circle to triangle option w/ mousePressed
    } else if (option == 3){
        //have shape pop as pixels
        fill(color);
        noStroke();
        strokeWeight(.5);
        triangle(x, y, x - s, y + s, x + s, y + s);
    }
    
}

function mousePressed(){
    option++;
    if(option > 3){
        option = 1;
    }
    background(0);
}