Month: October 2017

sketch

//Anna Gusman
//agusman@andrew.cmu.edu
//Section E
//
//Assignment 06 B
var underlyingImage;
var vals = [0.001, 0.001, 0.001, 0.001, 0.001, 0.001, 0.001]; //declare array of pie slice percentages
var nVals = vals.length; //length of array values

var start = 0; //first set the starting point of the first arc = to 0
var end = start + vals[0] * 360;
//Set the ending point of arc relative to its starting point
//the arc + the percentage value (decimal * 360)

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

function setup() {
    createCanvas(400, 400);
    background(0);
    angleMode(DEGREES);
    underlyingImage.loadPixels();
    frameRate(5000);
}

function draw() {
    for (var i = 0; i < nVals; i++) {
      start = end;
      end = start + vals[i] * 360; //draw a new arc from the "end" of the preceding
      //arc for every i
      noStroke();
      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 theColorAtLocationXY = underlyingImage.get(ix, iy);
      fill(theColorAtLocationXY);
      arc(px, py, 30, 100, start, end);
    }
}

I had a ton of fun with this project, even though the outcome was not as expected. I was inspired by a few pieces I’d seen by Sergio Albiac with sample pixel colors across the circumference of randomly distributed circles.

I decided to play with the rotational theme myself. Here are some examples of my process.

Photograph of my twin sister, taken by me:

Experimenting with texture parameters: Dreary Downpour

Slightly more defined

Furry Golan

More furry Golan

Most furry Golan

sketch

//Robert Managad
//Section-E
//rmanagad@andrew.cmu.edu
//

var underlyingImage;

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

function setup() {
    createCanvas(480, 320);
    background(0);
    underlyingImage.loadPixels();
    frameRate(60);
}

function draw() {
	var randomSize = random(5, 10);
	var randomDetailSize = random(1, 3);
	var pxDetailX = constrain(200, 280);
	var pxDetailY = constrain(40, 100)
    var px = random(width);
    var py = random(height);
    var dx = 5;
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var ixM = constrain(floor(mouseX), 0, width-1);
    var iyM =  constrain(floor(mouseY), 0, width-1);
    // creating variations in opacity
    var theColorAtLocationXY =  [red(underlyingImage.get(ix, iy)) + 5,
                                green(underlyingImage.get(ix, iy)) + 10,
                                blue(underlyingImage.get(ix, iy)),
                                + 90]
    var theColorAtLocationXYM =  [red(underlyingImage.get(ixM, iyM)) + 20,
                                green(underlyingImage.get(ixM, iyM)) + 10,
                                blue(underlyingImage.get(ixM, iyM)),
                                + 50]
    rectMode(CENTER);

    //creates stroke, no-fill rectangles for interactivity
    if (mouseIsPressed) {
   	strokeWeight(random(2, 6));
    stroke(theColorAtLocationXYM);
    rect(mouseX, mouseY, randomSize * 2, randomSize * 3);
	}
	noStroke();
	fill(theColorAtLocationXY);
	//larger pixels outside the face area
	if (px < 200 || px > 280 || py < 40 || py > 140) {
	ellipse(px, py, randomSize*3, randomSize*3.5);
	rect(px, py, randomSize*1.5, randomSize*1.5);
	}
	//smaller pixels within the face area
	else if (px > 200 || px < 280 || py > 40 || py < 140) {
	rect(px, py, randomSize*1.5, randomSize*1.5);
	}



}

    

I developed my pixel portrait program with a foggy window idea in mind, hence the changes in opacities and layering of randomly-generated pixels. To somewhat speed up the process of visualizing the background image, I incorporated an if statement involving mousePressed, where as long as the mouse is pressed strokes of rectangles will be drawn.

Below is a full canvas illustrating the background image, a self portrait.