Category: Section E

sketch 66

var image;
var circleDiam = 15; //diameter of dots


function preload() {
    var URL = "https://i.imgur.com/tOU8IHH.jpg"; //locating image on web
    image = loadImage(URL);
}

function setup() {
    createCanvas(480, 480);
    background(255);
    image.loadPixels();
    frameRate(60); // 60 circles a second
}

function draw() {
	var x = random(width);
	var y = random(height);
	var pixelColor = image.get(x, y); //retrieve color value of pixel;
	noStroke();
	fill(pixelColor); //fill circle with color of pixel at x,y
	ellipse(x, y, circleDiam, circleDiam); //draw circles at random locations
	
	//buttons to make the circles smaller or larger
	fill(180, 244, 180); //green fill
	rect(10, 220, 50, 30); //"smaller" button
	rect(415, 220, 50, 30); //"larger" button
	fill(0); //text fill
	text("smaller", 15, 238);	
	text("larger", 425, 238);

}

function mousePressed() {
	if (mouseX < 60 & mouseX > 10 && mouseY > 220 && mouseY < 250 && circleDiam > 4) {
		circleDiam += -3; //if the mouse is over the smaller button, and the current diameter is greater than 4, make the circles smaller by 3 px
	}

	if (mouseX < 465 & mouseX > 415 && mouseY > 220 && mouseY < 250 && circleDiam < 100) {
		circleDiam += 3; //if the mouse is over the "larger" button, and the current diameter is less than 100, make the circles alrger by 3 px
	}
}

I had trouble at first, because my diameter values were going negative and doing weird things so I tried using constrain() to no avail. Then, I just added a few more conditions to my if() statements, and that worked.

Some possible outcomes:

A portrait rendered with a combination of large and fine dots.

A portrait rendered with finer dots.

This is a portrait of my friend, Amber. Mine uses a very basic element, just circles so I wanted to make it more interactive. Using my highly-advanced HCI skills, I devised a very intuitive interface, consisting of two buttons that say “smaller” and “larger.”
When you click on each corresponding button, the dots get larger or smaller.

I had trouble at first, because my diameter values were going negative and doing weird things so I tried using constrain() to no avail. Then, I just added a few more conditions to my if() statements, and that worked.

Some possible outcomes:

I decided to focus on my friend Sharon’s LookingOutward-03, which focused on the work of David Wicks, who works with data visualization. He quotes, “Making Information Beautiful.” The work she decided to focus on was a map of the US with representation of rainfall and water flow.

I thought it was interesting that this beautiful visual representation could translate into data information. Although it does not present any numbers, it still provides a general idea of how the water flows. I also thought it was unique that the artist was able to figure out an algorithm that would draw and create such as piece.

sketch

//Elizabeth Wang
//elizabew@andrew.cmu.edu
//Section E
//Project-09

var underlyingImage;

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

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

function draw() {

    var x = random(width); //finds random x value on canvas
    var y = random(height); //finds random y value on canvas
    var ix = constrain(floor(x), 0, width - 1);
    var iy = constrain(floor(y), 0, height - 1);
    var color = underlyingImage.get(ix, iy); //gets color

    push();
    fill(color); //calls for color from image
    noStroke();
    var rw = random(1, 15); //random width of rectangles
    var rh = random(1, 15); //random height of rectangles
    rect(x, y, rw, rh); //rectangles
    pop();


}
function mouseDragged() { //when user presses and drags mouse over image, makes a bunch of random cirlces
    var colorAtMouse = underlyingImage.get(mouseX, mouseY);
    fill(colorAtMouse);
    var ew = random(5, 25); //random width of ellipses
    var eh = random(5, 25); //random height of ellipses
    noStroke();
    ellipse(mouseX, mouseY, ew, eh);
}

For this project, I was initially inspired by the style that one of my favorite painters, Jeremy Mann, uses. To me his paintings visually express an almost pixelated and futuristic-esque view of cities, and I wanted to add that sharpness and softness into this project as well.

I ended up choosing a more artsy portrait of one of my good friends. I felt that the green and white of the flower would make the final piece more visually interesting since most likely they won’t be 100% discernible.

Overall I am pretty satisfied with the results. I achieved the sharpness I wanted from the small rectangles, and the softness that the user is able to put in themselves using mousePressed.

sketch

//Sharon Lee
//dayoungl@andrew.cmu.edu
//Section E
//Project-09 Portraits
var img;
var smallPoint = 3;
var largePoint = 6;

function preload() {
  img = loadImage("https://i.imgur.com/S4TSChe.jpg");
}

function setup() {
  createCanvas(640,360);
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
}

function draw() {
  var pointilize = map(mouseX, 0, width, smallPoint, largePoint);
  var x = floor(random(img.width));
  var y = floor(random(img.height));
  var pix = img.get(x, y);
  //fill using pixel colours from the iamge
  fill(pix, 50);
  //create random size hearts
  ellipse(x, y, pointilize, pointilize);
  ellipse(x + pointilize,y, pointilize, pointilize);
  triangle(x - pointilize/2 - 1, y, x + pointilize *1.5, y, x + pointilize/2 + 1, y + pointilize);
}

sketch

//Isabelle Vincent
//ifv@andrew.cmu.edu
//Section E
//Project-09
var underlyingImage;
var dpx = 0;
var dpy = 0;

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

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

function draw() {
  //expand region where drawing outwards in all directions starting frm center
  var xxc = (width/2) - dpx;
  var xyc = (width/2) + dpx;

  var yxc = (height/2) - dpy;
  var yyc = (height/2) + dpy;


    dpx += 1;
    dpy += 1;
//wait til dpx is greater than width to reset in center so program has time to draw in entire canvas
    if (dpx >= width){
      dpx = 0;
      dpy = 0;
    }
    var px = random(xxc,xyc);
    var py = random(yxc,yyc);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
//vary 'pixel' size
    var rd = random(6,14);

    noStroke();
    fill(theColorAtLocationXY);
    rect(px, py, rd, rd);
    if(mouseIsPressed){
//draw accurate pixels by moving mouse over canvas while clicking & dragging
      var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
      fill(theColorAtTheMouse);
      rect(pmouseX, pmouseY, rd, rd);
    }

}

My portrait randomly displays pixels within a constrained region, this region expands originating from the center of the canvas and once it has reached a certain point outside of the canvas (to provide more draw-time) starts again at the center. You can also click and drag to draw pixels to speed up the image making process. Theres a slight randomized difference in pixel size, I liked the effect this had on the image, making it blocking but more precise.

sketch

//Yoon Young Kim
//Section E
//yoonyouk@andrew.cmu.edu
//Project09


var portraitImage;

function preload(){
    var ImageURL = "https://i.imgur.com/7QWRw4B.jpg";
    portraitImage = loadImage(ImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    portraitImage.loadPixels();
    frameRate(200);
}

function draw() {
    var px = random(width); //x location where the new pixel will draw
    var py = random(height);//y location where the new pixel will draw

    //constraining the pixels within the canvas
    var ix1 = constrain(floor(mouseX), 0, width-1); 
    var iy1 = constrain(floor(mouseY), 0, height-1);
    //
    var colorofthepixel = portraitImage.get(floor(px), floor(py));

    //determining the thickness and length of the stroke
    var linesize = random(3, 10);

    stroke(colorofthepixel);
    strokeWeight(linesize);
    line(px, py, px, py + linesize);


    //accessing the color of the pixel that the mouse is hovering above
    var colorofthepixelmoused = portraitImage.get(floor(mouseX), floor(mouseY));
    //variety of text sizes when drawing the initials
    textSize(random(5, 20));
    noStroke();
    fill(colorofthepixelmoused);
    //writing initials wherever the mouse hovers
    text("yhk", ix1, iy1);


}

For the portrait, I chose to use my older sister as the subject.

I made the unique pixel a stroke of different weights and lakes to imitate Monet’s water lilies paint strokes, one of my sister’s favorite paintings. In addition, because I wanted add a pixel that would draw according to the mouse, I decided to use her initials (yhk) as this new pixel.

I had some help with this project from my 104 tutor who helped my understand that the important components of this project code was the “portraitImage.get” and retrieving the colors of each individual picture. Once I understood this concept, I found it quite easy to create a unique pixel that would develop a portrait image.

The following images display what the portrait looks like throughout the development of frames.

portrait

var portraitImg;
var rotateAngle;

function preload() {
    var portraitLink = "https://i.imgur.com/pn2LErg.jpg";
    portraitImg = loadImage(portraitLink);
}

function setup() {
    createCanvas(480,480);
    portraitImg.loadPixels();
}

function draw() {
    background(0);
    for(var y = 0; y <= height; y+=15) {
      for(var x = 0; x <= width; x+=15) {
        var pixelColor = 10 + brightness(portraitImg.get(x, y));
        var mouseDist = dist(mouseX, mouseY, x, y);
        strokeWeight(map(mouseDist, 0, 679, 0.5, 8));
        stroke(pixelColor);
        push();
        translate(x, y);
        rotate(map(mouseDist, 0, 679, 0, 360));
        line(0-3, 0, 0+3, 0);
        pop();
        line(x, y-3, x, y+3);
      }
    }
}

For my portrait, I knew I wanted to have the entire picture rendered at first, and user interaction to change the portrait somehow. I decided to go with a somewhat abstract grid of crosses to represent the picture at first, using the source image’s brightness values instead of colors to create a more cohesive image. (The source image is an extremely cropped view of a face from the eyes up, in case you couldn’t make it out.) The crosses change thickness (and the horizontal bar rotates) depending on how far away the mouse is, obscuring areas of the image the mouse is closest to. Unfortunately the program runs a little slow for me, so it’s not quite the experience I had planned, but it’s as close as I could get.

sketch

//maddy cha
//section e
//mecha@andrew.cmu.edu
//project-09

var underlyingImage;

function preload() {
    //loads picture of friend in trash can
    var trashCan = "https://i.imgur.com/tAUXO6y.jpg";
    underlyingImage = loadImage(trashCan);
}

function setup() {
    createCanvas(480,480);
    background(0);
    underlyingImage.loadPixels();
    //frameRate(10);
    fill(255);
    
    //tells user what to do
    text("drag mouse to start",180,height/2);
    noLoop();
}

function mouseDragged(){
    //will start drawng pixel rectangles at 0
    var rX = 0;
    //will start drawing pixel rectangles in row at mouseY
    var rY = mouseY;
    var imageX = constrain(floor(rX), 0, width-1);
    var imageY = constrain(floor(rY), 0, height-1);
    
    //take color of image at mouseX, mouseY
    var imageColor = underlyingImage.get(imageX, imageY);
    var incriment = 10;

    if (mouseDragged){
        incriment += 10;
    }
    
    //draws pixels at random width and height from 1-10
    var rWidth = random(1,10);
    var rHeight = random(1,10);
    noStroke();
    
    //for loop allows for pixels to be drawn through entire width
    //rectangles are updated with new color depending on imageX and imageY
    for(var i = imageX; i < width; i++){
        imageColor = underlyingImage.get(imageX, imageY);
        fill(imageColor);
        rect(imageX,imageY,rWidth,rHeight);
        imageX+=10;
    }
    
}

For this project, I decided to use an image of my friend sitting in a trash can.

I started with a similar approach as the sample code, using rectangles at random widths and heights of the color of the background image. I decided that I wanted to display the image using the mouseDragged function, but was concerned with the issue that it would take too long for the image to appear if I had it load rectangle by rectangle. In order to combat this, I decided to load the image in the form of rows. I had issues at first with my rectangle rows all being the same color as the pixel loaded at mouseX, mouseY, but I was able to resolve this by updating the color as mouseX and mouseY updated.