Category: SectionC

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 09: Computational Portrait

var myPic; //variable to reference my photo

function preload() {
	var origPic = "https://i.imgur.com/B5emP43.jpg"
	myPic = loadImage(origPic); //loading the image to the variable
}

function setup() {
	createCanvas(360, 480);
	myPic.loadPixels();
	frameRate(150); //how quickly the arc will be added
}

function draw() {
	//these variables link the pixels with the image
	var px = random(width);
	var py = random(height);
	var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
	//pixel color from the picture
	var pcolor = myPic.get(ix, iy);
	
	noStroke();
	fill(pcolor);
	//the two separate arcs used added together would be a complete circle
	arc(px, py, random(-15, 15), random(-15, 15), HALF_PI, PI); 
	arc(px, py, random(-15, 15), random(-15, 15), PI, HALF_PI);

	//the mouse can be used for more detailed filling in of the image
	var mouseColor = myPic.get(mouseX, mouseY);
	fill(mouseColor);
	ellipse(mouseX, mouseY, 8, 8);
}
	

After I chose this photo I thought to match the texture of the greenery in the background it would be fun to fill in the image with slightly jagged, but also rounded pieces. I used arc to do this and had two so that added together it would be a complete circle, but since they’re not there was more variation. I did, however make the mouse fill in with circles to get a more accurate filling in for details for the photo.

sketch

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Assignment or Project
*/

var originalImage;

function preload() {
    var myImageURL = "https://i.imgur.com/UdorMH0.jpg";
    originalImage = loadImage(myImageURL); //load image
}

function setup() {
    createCanvas(500, 500);
    background(0);
    originalImage.loadPixels();
    frameRate(1000);
}

function draw() {
    var px = random(width); //x coordinate
    var py = random(height); //y coordinate
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var locationColor = originalImage.get(ix, iy); //get pixel color


    var rectSizeX = random(10, 50)
    var rectSizeY = 2

    noStroke();
    fill(locationColor);
    rect(px, py, rectSizeX, rectSizeY);

    var theColorAtTheMouse = originalImage.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    ellipse(pmouseX, pmouseY, 1, 2*height + mouseY);
}

I wanted to explore vertical and horizontal lines converging to create this image my girlfriend took of me over the summer. I had the code generate short horizontal bars while having the mouse draw long vertical bars.

ycho2-09

/*Kimberlyn Cho
ycho2@andrew.cmu.edu
Section C
Project 09 */

var underlyingImage;
//array of emoticons to choose from
var words = [";)", ":P", ">_<", "^.^", "<3"];
var expression = ["damnnn", "wow", "omg", "beautiful"]

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

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

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);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    //randomize emoticon choice
	var textchoice = floor(random(0, 5));
	//randomize emoticon size
	var sizechoice = floor(random(10, 20));
	textSize(sizechoice);
	//choosing from array of emoticons 
	text(words[textchoice], px, py);
};

function mousePressed() {
	//generating "damnnn" with mousePressed
	var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse);
    var textchoice = floor(random(0, 4));
	var sizechoice = floor(random(10, 20));
	textSize(sizechoice);
    text(expression[textchoice], mouseX, mouseY);
};

I chose my best friend from home for this assignment because I miss her very much. I used cute emoticons to represent her lovable and adorable character. I randomized the size and emoticon choice to vary the process. Lastly, I generated my first reactions to seeing this photo with the mouse pressed function.