Category: Section B

sketch

//Kade Stewart
//Section B
//kades
//Project-09


var pic;
var bar = 0;
var barspeed = 5;


function preload() {
    pic = loadImage("https://i.imgur.com/TQDoVD9.png");
}


function setup() {
    createCanvas(480, 480);
}

function draw() {

	//resets the image every time draw is called
	image(pic, 0, 0);
	loadPixels(pic);


	// loop thru each row
	for (var y = 0; y < height; y++) {

		//every row, shift the pixels over some random amount
		//the limit is dictated by how recently an invisible bar has passed over it
		var limit = floor( ( ( (height + bar) - y) % height ) / 10 );
		var shift = floor(random(0, limit));

		// if (limit > 10) {
		// 	continue;
		// }

		// inner loop that goes thru each pixel in the row
		for (var x = 0; x < width; x++) {

			//this is the way to target each pixel in the pixels array
			var i = ( ( (x + shift) % width ) + y * width ) * 4;

			//setting the color of a pixel to the one a certain number away
			//pixels[i] is the red, [i+1] is the green, [i+2] is the blue
			set(x,y, color(pixels[i], pixels[i + 1], pixels[i + 2]))

		}

	}

	//actually draws the pixels as dictated above
	updatePixels();

	//moves the invisible bar down, wrapping when it hits the bottom
	bar = (bar + barspeed) % height;

}

I wanted to make a portrait that emulated the updating of a radar screen. While I didn’t do it exactly, I ended up using a downward moving bar to update the portrait. At first, it was wiping the screen to black. My final has the invisible bar resolving a horizontal shift in the bars of pixels.

sketch

//Name: Alessandra Fleck 
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-09


var photo; //variable to hold image

function preload(){ //load photo being used off of Imgur
    var myImageURL = "https://i.imgur.com/vCkP5dD.jpg";
    photo = loadImage(myImageURL);
}

function setup(){
    createCanvas(480,480);
    background(0); //sets background to black
    photo.loadPixels();
    frameRate(100000000000000); //load photo pixels quicker
}

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

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, 50, 5); //create flat ellipses
}

For this assignment I wanted to do a portrait of my sister. I chose this image because of the painting like qualities of it, despite it being an unedited photo. To capture a more oil painting-like stroke, I played with the ellipse height and width. As noted from the process, the wider the ellipse was, the more difficult it was to get the colors to lay and create the image so I kept it relatively shorter in the end.

sketch

// Xiaoying Meng
//B
//xiaoyinm@andrew.cmu.edu
//Project 9

var IMG;//store image
var x; //Grid X 
var y; // Grid Y

//load image
function preload(){
    var ImageURL = "https://i.imgur.com/MMbPIxn.png"
    IMG = loadImage(ImageURL);
}

function setup(){
    createCanvas(480,480);
    //Get pixels from image
    IMG.loadPixels();
}

function draw(){
    background(0);
    drawGrid();
}

function drawGrid(){
    //Creating Grid
    for( x=0; x<480; x=x+10){
        for ( y=0; y<480; y=y+10){
            //Colors from image at x,y location
            var theColorAtLocationXY = IMG.get(x,y);
            //Distance between mouse location and circle location
            var d = dist(mouseX, mouseY,x,y);
            //Change circle size according to distance
            var col = map(d,0,480,10,2);
            noStroke();
            fill(theColorAtLocationXY);
            ellipse(x,y,col,col);
        }
    }
}

I used my selfie as the source image. I wanted to create something grid base and also interactive. So I change the sizes of the circles based on the distance between circles and mouse.