Month: October 2016

sketch-129.js

var myImage;
// Variables needed for lerp
var orig = color(theColorAtLocationXY);
var next = color(135, 206, 250);

function preload() {
    var goldenGateBridge = "https://i.imgur.com/jeVkTI5.png";
    myImage = loadImage(goldenGateBridge);
}

function setup() {
    createCanvas(414, 750);
    background(0);
    myImage.loadPixels();
    frameRate(1500);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 10, width-1);
    var iy = constrain(floor(py), 10, height-1);
    var theColorAtLocationXY = myImage.get(ix, iy);

    // Creates a diagonal "line" that pulls colors
    // used in the rest of my portrait
    if(py > px) {
    noStroke();
    fill(theColorAtLocationXY);
    rect(px, py, 10, 5); 
    }
    else {
    theColorAtLocationXY = lerp(orig, next, 0.5);
    fill(theColorAtLocationXY);
    rect(px, py, 5, 10);
    }
}

For this week’s process, I was heavily reliant on the template for creating my final product. Unless most weeks, I did not really have a drawing that I made prior to starting my final project. I decided to use a picture from a couple of summers ago when I went biking across the Golden Gate Bridge. I decided to create a diagonal “background” of sorts that depends on other colors that were used in my image.

On a final note, I am not sure why the computational portrait is not showing up on this page, even though the code is embedded. I tried re-uploading my file numerous times and embedding it, but nothing seems to work…When I open the html file associated with my code, it works though..!

sketch

//Lydia Jin
//Section D
//jialuj@andrew.cmu.edu
//Project 9

var brother;

function preload() {
	//load picture of my brother
    var myImageURL = "http://i.imgur.com/NrbfIdb.jpg";
    brother = loadImage(myImageURL);
}

function setup() {
	//set up canvas
    createCanvas(500, 500);
    background(0);
    brother.loadPixels();
    //load 100 times in 60 seconds
    frameRate(100);
}

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

    //draw quads
    noStroke();
    fill(theColorAtLocationXY);
	quad(px-random(10), py-random(10), px-random(10), py-random(10), px+random(10), py, px, py+random(10));

}

I decided to use a photo of my brother taken in hockey uniform. I used quads to present the image to make it more cool since quads are more random than ellipses. A finished portrait looks like the one below:

sketch

//Yugyeong Lee
//Section A
//yugyeonl@andrew.cmu.edu
//Project 09

var imgYugy;

function preload() {
	var imgURL = "http://i.imgur.com/XYdrw0f.jpg";
	imgYugy = loadImage(imgURL);

}
function setup() {
    createCanvas(540, 700);
    background(0);

    imgYugy.loadPixels();
    frameRate(500);
}

function draw() {
	drawYugyC();
	drawYugyL();
}

//circular pixels controlled by mouseX and mouseY
function drawYugyC () {
	var pX = mouseX;
	var pY = mouseY;
	var iX = constrain(floor(pX), 0, width - 1);
	var iY = constrain(floor(pY), 0, height - 1);
	var color = imgYugy.get(iX, iY);
	var diam = random(5, 15);

	fill(color);
	noStroke();
	ellipse(pX, pY, diam, diam);
}

//diagonal lines at random
function drawYugyL () {
	var pX = random(0, width);
	var pY = random(0, height);
	var iX = constrain(floor(pX), 0, width - 1);
	var iY = constrain(floor(pY), 0, height - 1);
	var color = imgYugy.get(iX, iY);
	var offset = random(5, 20);
	var strokeweight = random(1, 5)

	stroke(color);
	strokeWeight(strokeweight);
	line(pX, pY, pX + offset, pY + offset);
}

I was exploring on combination of diagonal lines and circles to create a pixelated portrait of myself. The diagonal lines appear at random while circular pixels can be controlled by the location of the mouse.

sketch

//Mercedes Reys

//Section C 

//mreyes@andrew.cmu.edu

//Project-09

//global variables 
var underlyingImage;
var px = [];
var py = [];

//pre-load images 
function preload() {
    var myImageURL = "http://i.imgur.com/FODHYaP.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(0);
    underlyingImage.loadPixels();
    frameRate(1);
}

function draw() {  

    //for loop to fill arrays
    for (i = 0; i < frameCount; i++) { 
    
    px[i] = random(width);
    py[i] = random(height);

    //get color
    var ix = constrain(floor(px[i]), 0, width-1);
    var iy = constrain(floor(py[i]), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    //draw lines at random length and direction 
    stroke(theColorAtLocationXY)
    line(px[i]+random(20),py[i]+random(20),px[i]+random(80),py[i]+random(80));
    }

}

I was initially trying to go for something more complex where there would be lines and circles only drawn in the white area to create a constellation effect. That proved to be to difficult and I couldn’t get it to run, so instead I simplified it to just lines that appear in a semi chaotic matter to make a spooky face appear.

.

I had a lot of fun with this project once I got the preliminaries set up.  I started out thinking that I wanted to have an image recreated by pixilation when the mouse scrolled over the image.  But then I realized that that wouldn’t work because of the constant mouse movement.  So I decided to create a more fun portrait.  The subject’s last name is displayed mainly opaque and then the picture is displayed with a spotlight on top of it.  I spent a lot of time on this image but I still want to continue working on it.

 beginning after one movement with the mouseafter scrolling over the image multiple times

sketch

//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Assignment-09-B

var img;
var inloc = "http://i.imgur.com/XTKXPpa.png";
var distThreshold = 20;
var underlyingImage;


function preload() {
   img = loadImage(inloc);
   underlyingImage = loadImage(inloc);

   underlyingImage.loadPixels();
}

function setup() {
    createCanvas(400,300);     //sets up on the background image
    image(img,0,0); 
   filter(POSTERIZE,2);
}

function draw(){
    for (var y = 0; y < height; y +=40){
        for (var x = 0; x < width; x +=40) {
            if (nearMouse(x, y, distThreshold)) {
           var c = underlyingImage.get(mouseX,mouseY);
              stroke(c);           //the stroke color is determined on the pixel underneath
              strokeWeight(1);          //creates the last name of the subject, Khalouf
              textSize(45);   
              fill(255,255,255,20);
              text("Khalouf", x,y);
              push();
                 image(underlyingImage, 0, 0, underlyingImage.width / 8, underlyingImage.height / 8);

    var x = constrain(mouseX, 0, img.width - 1);     //redraws the image based on mouse X and Y
    var y = constrain(mouseY, 0, img.height - 1);
    // get a subrectangle from image. x and y (upper left corner)
    // should be within the image.
    var smaller = img.get(x, y, 100, 100);
    image(smaller,x, y, 120, 120);
    fill(255,255,255,40);
    ellipseMode(CORNERS);        //puts a "spotlight" on the center of the image
    noStroke();
    strokeWeight(0);
    ellipse(x,y,x+120,y+120);
    pop();
            }
        }
    }
}

function nearMouse(x, y, d) {
    return dist(x, y, mouseX, mouseY) < d;
}