Category: Section B

Image gets clearer over time!

/*
Min Jun Kim
minjunki@andrew.cmu.edu
15104-B
Project 9
*/

var img; //sets the variable for the image to go into

//loads the image into the program
function preload() {
    img = loadImage("https://i.imgur.com/kt8Qs81.jpg");
    
}

function setup() {
    createCanvas(365, 480);
    background(250);
    //loads the pixels and sets the frame rate
    img.loadPixels();
    frameRate(10000000)
    
}

var dec = 0 //variable in which the decrease the size
var increment = 0.01 // the rate of decreasing
var scaley = 0.2 //scales the image

function draw() {
	//variable that moves the pixels
	var randaddx= random(200)
	var randaddy= random(200)
	//variable that determiens the size of pixels
	var randsize = random(30-dec)
	
	//scales the image down
    scale(scaley,scaley)
    noStroke()
    //draws starting points on canvas
    for (i = 0; i < height*1/scaley; i += 100) {
    	for (x = 0; x < width*1/scaley; x += 100) {
    		//finds the color
    		var c = img.get(x+randaddx, i+randaddy);
    		//sets pixel = to color
    		fill(c);	
    		//draws the pixels
    		rect(x+randaddx,i+randaddy,randsize,randsize)
    	}
    } 
    //makes it so that image gets more clear over time
    dec += increment
    if (dec > 25) {
    	increment =0 
    }
    
}

I wanted my pixel portrait to load fast and be rather accurate, so I used for loops to draws initial starting points of the canvas then used random values to move the points in order to draw the canvas. Initially, I increased the for loop variables by a low number of 20, which resulted in the picture loading too fast and too accurately, which defeated the point of the pixel art. So I set up a parameter where the size of the pixels decreased over time. This way there are less gap points (because the starting size is big) and adds an interesting layer to the whole piece.

Process:

sketch

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-09

var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
var underlyingImage;

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

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    //translate the origin a little to make the canvas filled
    translate(-20, -20);
    background(187, 230, 235);
    underlyingImage.loadPixels();
}

function drawStar(sx,sy){
    push()
    translate(sx - 20, sy - 20)
    var nPoints = x.length;

    //draw stars based on the two arrays stated at the beginning
    //also use random function to let the stars have slightly different shapes
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var ssx = x[i] + random(-3, 3);
        var ssy = y[i] + random(-3, 3);
        scale(0.85)
        vertex(ssx,ssy);
    }
    endShape(CLOSE);
    pop()
}


function draw() {
    //create random points width the size of (500, 500) 
    //to make sure the stars can reach the edge
    var px = random(width + 20);
    var py = random(height + 20);
    var ix = constrain(floor(px), 0, width + 20);
    var iy = constrain(floor(py), 0, height + 20);
    //get color from the underlying image
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    //draw stars based on px, py
    drawStar(px, py);
}

This is a very interesting project which reminds me of the first portrait project we did for the course. It is amazing how much I learned along the way.

For this project specifically, I decided to use the star shape we learned how to do earlier as my pixel. The result turns out very good in the end.

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-09-Portrait
*/

var img;

// preoloads photo of my friend Shirley!
function preload() {
    var myImgURL = "https://i.imgur.com/n0vEZ2z.png?2";
    img = loadImage(myImgURL);
}


function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
    background(89, 10, 201);
    imageMode(CENTER);
    img.loadPixels();
}

function draw() {
    // chooses a random x value located near the cursor
    var randomX = floor(random(mouseX - 15, mouseX + 15));
    // chooses a random y value located near the cursor
    var randomY = floor(random(mouseY - 15, mouseY + 15));
    // selects the color from a pixel at a random point near the cursor
    fill(img.get(randomX, randomY));
    // draws a flower at that point
    flower(randomX, randomY);
}

// creates flower shape
function flower(x, y) {
    push();
    noStroke();
    translate(x, y);
    ellipse(0, 2, 2, 6);
    rotate(45);
    ellipse(5, 0, 2, 6);
    rotate(90);
    ellipse(5, 0, 2, 6);
    rotate(135);
    ellipse(-8, 5, 2, 6);
    rotate(180);
    ellipse(8, 4, 2, 6);
    rotate(225);
    ellipse(-6, 11, 2, 6);
    rotate(270);
    ellipse(-6, -11, 2, 6);
    rotate(-45);
    ellipse(0, -13, 2, 6);
    pop();
}

这个周末我决定了创造我的朋友Shirley的画像。因为她很艺术的，所以我觉得可能是最好的题材。她很优雅的，所以我决定了创造花来代表这个她的性格的方面。她是我在上海留学的时候的语伴，现在在墨尔本，澳大利亚上大学。你好Shirley！！

This week I decided to make a portrait of my friend Shirley. She is very artistic, so I thought she would be the perfect subject for the project. She is very pretty and elegant, so I decided to create flowers to represent this aspect of her personality. She was my language partner when I studied abroad in Shanghai, and now she attends school in Melbourne, Australia. Hi Shirley!!

I added an aspect where you use the mouse to “paint” the flowers on the screen, and thus be able to control how the portrait is revealed. I think this is interesting, because it allows you to decide how you explore the portrait, and makes the process feel a little more intimate. You can also draw with the mouse in the earlier frames and create swirls and shapes on the screen by revealing the colors of the portrait below.

sketch

/*
Romi Jin
Section B
rsjin@andrew.cmu.edu
Project-09
*/

var img;

function preload() {

    var imgur = "https://i.imgur.com/tbSmZ90.jpg";
    img = loadImage(imgur);
}

function setup() {

    createCanvas(360, 479); //resize image in photoshop
    background(255, 225, 225);
    imageMode(CENTER);
    frameRate(500); //speed that pixels are drawn 
    img.loadPixels();
    noStroke();

}

function draw() {

    var x = constrain(floor(random(width)), 0, width); //constrains random x values of pixels
    var y = constrain(floor(random(height)), 0, height); //constrains random y values of pixels

    var rgb = img.get(x, y); //extracts colors from image pixels

    fill(rgb);
    ellipse(x, y, 7); //circles drawing the image

}

For this project, I used an image of my best friend from home, Mina! It was a lot easier than I expected! From just a few lines of code, you can produce such a cool animated image! I am excited to try this out with different images and shapes in the future.