Project-09-Portrait

Project 9 Portrait

My process for this project was to choose a picture of myself and figure out how to go about the assignment. I was able to combine the letters “nyc” and circles to make the completed picture. This picture was taken in NYC.

sketch Download

//Anthony Prestigiacomo Section C
function preload() {
    var citypic="https://i.imgur.com/q3X1p2I.png";
    photo=loadImage(citypic);    //image variable
}

function setup() {
  createCanvas(456,273);
  background(0);
  photo.resize(456,273);    //resizing the image to fit the canvas
  photo.loadPixels();
  frameRate(400);
}

function draw() {
  var x=random(width);
  var y=random(height);
  var pixelx=constrain(floor(x),0,width);
  var pixely=constrain(floor(y),0,height);
  var pixelcolor=photo.get(pixelx,pixely);    //calling each pixel color
  noStroke();
  fill(pixelcolor);    //fill the circles and words with image pixel colors
  textFont('Veranda',random(0,5));
  text("nyc",x,y);    //nyc text to appear to form the image
  circle(x,y,random(0,5));    //circles that will appear to form the image
}

Project 09: Computational Portrait

For my computation project, I took a photo my friend took of me throwing an apple in the air. I eventually settled on using points to display my photo, but I used randomGaussian() to make the points condense at the apple and spread out from there. That way, there’s more points around the apple and less around the edges.

Project 9 – Computational Portrait

For this project, I wanted to create Van Gogh’s self portrait with the text “Van Gogh.” By using custom pixels, I was able to make words appear on the canvas in relation to the pixel color of the original image. Wait a little bit to view the full portrait!

sketch

let img;

function preload() {
  //preloading the van gogh image
  img = loadImage("https://i.imgur.com/wUgkJwF.jpg");
}


function setup() {
  createCanvas(300, 400);
  imageMode(CENTER);
  background(0);
  img.loadPixels();

}

function draw() {
  //coverage of the words on the canvas
  let randomWords = random(0, 400);
  let randomWordstwo = random(0, 300);
  //placement of words in relation to the image width and height
  let x = floor(random(img.width));
  let y = floor(random(img.height));
  //pixel and text relationship
  let pixel = img.get(x, y);
  fill(pixel, 800);
  textSize(5);
  text('van gogh', x, y, randomWords, randomWordstwo);
 
}

Image Source: https://i.imgur.com/wUgkJwF.jpg

I used lines that are randomly horizontal and vertical, and stroke width and lengths that progressively get smaller as the frames approach 10000, increasing the resolution of the portrait. At the end, the text ‘fin’ is displayed to conclude the drawing of the portrait.

sketch

Start

let picture;
function preload() {
  picture = loadImage('https://i.imgur.com/3hKjmTL.jpg');
}

function setup() {
  createCanvas(480, 480);
  imageMode(CENTER);
  textAlign(CENTER);
  noStroke();
  background(0);
  picture.loadPixels();
  frameRate(60);
}

function draw() {
  //chooses random pixel coordinates
  let x = floor(random(picture.width));
  let y = floor(random(picture.height));
  //gets the pixel color
  let pixelcolor = picture.get(x,y);
  //sets whether the line is randomly vertical or horizontal
  let verticality=[true,false];
  let horiz=random(verticality);
  stroke(pixelcolor);
  //sets the stroke weight in relation to the frame count
  strokeWeight(map(10000-frameCount,10000,0,20,0));
  //horizontal lines
  if(horiz){
      line(random(x-((10000-frameCount)/200),x),y,random(x,x+((10000-frameCount)/200)),y);
  }
  //vertical lines
  else{
      line(x,random(y-((10000-frameCount)/200),y),x,random(y,y+((10000-frameCount)/200)));
  }
  //ends the program at 10000 frames with a 'fin' message
  if(frameCount>10000){
     fill(255);
      background(0);
      textSize(100);
      textFont('Georgia');
      textStyle(ITALIC);
      text('fin', 240, 240);
      noLoop();
  }
}

Project-09

sketch

//Jasmin Kim
//Section D

var img;
var emo= ["•ᴥ•", "☉_☉", "◕‿‿◕", "｡◕‿◕｡", "✿◠‿◠"];

function preload() {
    var myURL = "https://i.imgur.com/gS9jRCI.jpg";
    img = loadImage(myURL);

}
function setup() {
    createCanvas(480, 480);
    background(0);
    img.loadPixels();
    img.resize(480,480);
    frameRate(200);
}

function draw() {
    // pixels appear
    var px = random(width);
    var py = random(height);
    var xx = constrain(floor(px), 0, width);
    var yy = constrain(floor(py), 0, height);
    var base = img.get(xx, yy);
    //emoji drawn
    fill(base);
    var ee = int(random(0,9));
    var rrandom = emo[ee]; 
    textSize(5)
    text(rrandom, px,py);
    //shape drawn
    noStroke();
    ellipse(px, py, random(0, 8), random(0, 8));
    rect(px, py, random(0, 10), random(0, 10));

}

For this project, I wanted to make something where emojis and shapes can be created at the same time. Rectangles and circles are random sized and emojis are selected from the emo arrays.

Project 09 Computational Landscape

sketch Download="">

let img;
let smallPoint, largePoint;

function preload() {
  img = loadImage('https://pbs.twimg.com/profile_images/640666088271839233/OTKlt5pC_400x400.jpg');
}

function setup() {
  createCanvas(300, 300);
  smallPoint = 4;
  largePoint = 40;
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
  //frameRate(20);
}

function draw() {
  let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
  let x = floor(random(img.width));
  let y = floor(random(img.height));
 
  let xx = x;
  let yy = y;
  let count = 0;
  while (xx <img.width & yy 0 && yy>0) {
        let pix = img.get(xx, yy);
        fill(pix);
        ellipse(xx, yy, pointillize, pointillize);

        count = count +1;
        xx = xx+1;
        yy=yy+1;
    }
}

If you move the mouse around, you can alter how the landscape is being drawn.

My Portrait

I wanted to create a portrait that used random points from the canvas to generate the image, while being modified by the cursor position.

sketch

let img;
let thin, thick;

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

function setup() {
  createCanvas(536, 600);
  thin = 5;
  thick = 45;
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
}

function draw() {
  //Maps mouseX and mouseY to 5 and 45 to scale both dimensions of the rectangle
  let sizeX = map(mouseX, 0, width, thin, thick);
  let sizeY = map(mouseY, 0, height, thin, thick)
  //Picks random points from the image and stores them in x and y
  let x = floor(random(img.width));
  let y = floor(random(img.height));
  //Gets the exact pixel
  let pixel = img.get(x, y);
  //Draws rectangle according to randomly chosen position
  //and cursor position
  fill(pixel, 128);
  rect(x, y, sizeX, sizeY);
}

PROJECT-09(portrait)

sketch

// SEAN CHEN
// 15-104 A

var img;
var widthSml = 4; // width parameters
var widthBig = 10;
var lengthSml = 2; // length parameters
var lengthBig = 10;
var mode = 1; // modes keeper

function preload() { // preload image
  img = loadImage('https://i.imgur.com/HNOE05S.png?1');
}

function setup() {
  frameRate(300);
  createCanvas(480, 788);
  imageMode(CENTER);
  background(255);
  img.loadPixels();
  mode = int(random(1, 4)); 
}

function rotAng(x, y) { // calculating rotation angle
    var distX, distY, ang;
    distX = mouseX - x;
    distY = mouseY - y;
    ang = atan(distX/distY);
    if (mode == 1) { // changing line mapping rotation
        return PI - ang; 
    } else if (mode == 2) {
        return PI / 2 - ang;
    } else if (mode == 3) {
        return ang;
    }
}

function border() { // instructions text
    push();
    stroke(0);
    fill(255);
    rectMode(CENTER);
    textAlign(CENTER);
    rect(width/2, 20, 200, 35, 10);
    noStroke();
    fill(0);
    text('double click to change modes!\n*hold for text rendering*', width/2, 17.5);
    rect()
    pop();
}

function draw() {
    let thickness = map(mouseX, 0, width, widthSml, widthBig);
    let len = map(mouseY, 0, height, lengthSml, lengthBig);
    let x = floor(random(img.width));
    let y = floor(random(img.height));
    let pix = img.get(x, y);
    push(); 
    var rot = rotAng(x, y);
    translate(x, y);
    rotate(rot);
    if (mouseIsPressed) { // render in rotated text
        fill(pix, 128);
        textSize(thickness); // size based on mouse
        textAlign(CENTER);
        text('face', 0, 0)    
    } else { // rotate in rotated lines
        rotate(radians(90));
        stroke(pix, 128);
        strokeWeight(thickness); // thickness based on mouse
        line(0, -len, 0, len); // length of line based on mouse
    }
    pop();
    border();
}

function doubleClicked() { // changing mode
    if (mode == 3) {
        mode = 1;
    } else {
        mode++;
    }
}

Project-09: Portrait

For this week’s project, I chose to draw a picture of me when I was a baby holding up a peace sign. I tried to draw the portrait by mimicking short paint strokes. To do so, instead of making random dots, I drew random short lines whose directions can be changed by pressing the mouse (there is a total of 4 directions). I also thought it would be interesting to see how the different directions of the same shape can alter the way the portrait was drawn so ran the code several times with the direction being different each time.

sketch

let img;
var lineType = 1;

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

function setup() {
  createCanvas(480, 480);
  background(255);
  img.resize(width, height);
  img.loadPixels();
  frameRate(50);
}

function draw() {
  	var x = floor(random(img.width)); // random x position
  	var y = floor(random(img.height)); // random y position
  	var pixel = img.get(x, y); // single pixel from image (color)
  	stroke(pixel);
  	strokeWeight(3);
	if(lineType == 1) { // slanted lines starting from left
  		line(x, y, x + 7, y + 7);
  	}
 	else if(lineType == 2){ // horizontal lines
  		line(x, y, x + 7, y);	
  	}
  	else if(lineType == 3){ // slanted lines starting from right
  		line(x + 7, y, x, y + 7);
  	}
  	else { // vertical lines
  		line(x, y, x, y + 7);
  	}
}

function mousePressed() {
	if(lineType == 1) {
		lineType = 2;
	}
	else if(lineType == 2) {
		lineType = 3;
	}
	else if(lineType == 3) {
		lineType = 4;
	}
	else {
		lineType = 1;
	}
}

final with one type of stroke (slanted from left)

Project 09 – Portrait of my Brother

For my portrait I chose to draw my little brother. I had him choose his favorite images from a set of keyboard symbols. The random symbols increase in size as the mouse moves to the right. Symbols also draw along with mouse movement. If you click the mouse, the canvas wipes white and resets.

Maggie – Portrait

//Maggie Ma
//Section D
//Self-Portrait

let img;
let symbols=["☻","☺","♬","☾","⍣","㋡","☀","♟"]; //array of symbols

function preload() {
  img = loadImage('https://i.imgur.com/M8aUttC.jpg'); 

}

function setup() {
  createCanvas(400, 533);
  background(255);
  img.loadPixels();
  noStroke();
}

function draw() {
  let x = floor(random(img.width)); //x position of symbols
  let y = floor(random(img.height)); //y position of symbols
  let pixels = img.get(x, y); //grab pixels from image

  //randomly select symbols from array
  var r = int(random(0,9));
  var randompicker = symbols[r]; 


  fill(pixels); //fill symbol with proper pixel color
  //prevent symbols from getting too large
  //symbols increase in size as mouse moves to right
  textSize(mouseX/20); 
  text(randompicker, x,y);

  //draw symbols as mouse moves
  textSize(10);
  text(randompicker, mouseX, mouseY);

  //refresh to white canvas when mouse is pressed
  if (mouseIsPressed) {
  	background(255);
  }
}