Category: Project-09-Portrait

self-portraits

//Yingyang Zhou
//yingyanz@andrew.cmu.edu
//Project-09
//section A

var img;
var randomPos = 0;

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

function setup() {
    createCanvas(360, 480);
    background(200);
    // imageMode(CORNER);
    img.loadPixels();
    frameRate(500);
}
function draw(){

  //image(img, 0, 0, width, height);
  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 col = img.get(ix, iy);

  noStroke();
  fill(col);
  var randomSize = random(10);
  ellipse(px, py, randomSize, randomSize);
  stroke(col);
  strokeWeight(2);
  line(px+random(10), py+random(10), px+random(10), py+random(10));
  strokeWeight(1);
  line(px+random(10), py+random(10), px+random(10), py+random(10));
}

I like this project for a chance to envolve with something we are familiar in our daily life and it provide an interesting to way to look at the common thing in a different way.

I am using 1 of my grace days for this late submission.

This project was centered around the idea of portraying brightness by the size of the object and letting background shine through as opposed to just coloring them. This was achieved by taking the brightness value of each pixel visited (this version visits only every 15 pixels), multiplying them by a coefficient, and using as the size of the small triangles that make up the picture. The ultimate effect is surprisingly good, with just two colors and shades able to portray nuanced lighting and shadows.

sketch

var portrait;
var spacing =15; // distance between columns
var sizingcoefficient = 12; //ratio that greyscale value is converted into triangle dimension

function preload() {
    //var myImageURL = "./selfportrait.jpg";
    var myImageURL = "https://imgur.com/a/MHAIBeE"
    portrait = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background('grey');
    portrait.loadPixels();
    frameRate(120);

   	/*
	for(var i = 0; i <width*height; i+=15){
    	var pixelx = i%width; //x position of pixel
    	var pixely = floor(i/width); //y position of pixel
    	var greyscalevalue = brightness(portrait.get(pixelx, pixely))/12;

    	
    	noStroke();
    	//fill(greyscalevalue);
   		//ellipse(pixelx, pixely, 3, 3);
   		fill('orange');
   		//ellipse(pixelx, pixely, greyscalevalue, greyscalevalue);
   		triangle(pixelx, pixely, 
   			pixelx + greyscalevalue, pixely - greyscalevalue, 
   			pixelx + greyscalevalue, pixely + greyscalevalue);

  	}
	*/
	}

var i = 0;

function draw() {
		
	var pixelx = i%width; //x position of pixel
   	var pixely = floor(i/width); //y position of pixel
   	var greyscalevalue = brightness(portrait.get(pixelx, pixely))/sizingcoefficient; //retrieving brightness of pixel and converting into "greyscale value"

   	noStroke();
   	//fill(greyscalevalue);
   	//ellipse(pixelx, pixely, 3, 3);
	fill('orange');
   	//ellipse(pixelx, pixely, greyscalevalue, greyscalevalue); 
	triangle(pixelx, pixely, 
   	pixelx + greyscalevalue, pixely - greyscalevalue, 
   	pixelx + greyscalevalue, pixely + greyscalevalue); //drawing triangle; size of triangle is determined by brightness of pixel

	i+= spacing; //incrementing pixel; draw loop is essentially a giant for-loop

	if (i == width*height){
		i = 0;
	}
}

sketch

//Audrey Zheng
//Section A
//audreyz@andrew.cmu.edu
//Project 9

var img;

function preload() {
	var me = "https://i.imgur.com/iiz3eb4.jpg";
	img = loadImage(me);
}
function setup() {
    createCanvas(480, 480);
    background(0);
    img.loadPixels();
    frameRate(100);
}

function draw() {
	var px = random(width);
	var py = random(height);
	var ix = constrain(floor(px), 0, width);
	var iy = constrain(floor(py), 0, height);
	var color = img.get(ix,iy);

	noStroke();
	fill(color);
	shape(px,py,random(4,9),random(9,15));

}


function shape(x, y, r, n) {
  var angle = TWO_PI / n;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * r;
    var sy = y + sin(a) * r;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}