Category: Project-09-Portrait

//Anthony Pan
//Section C



//empty variable to hold/load portrait
var img;

//load portrait
function preload() {
   img = loadImage("https://i.imgur.com/OZnUWbW.jpg");

}

//set up canvas
function setup() {
    createCanvas(420, 280);

}

//create pixelation effect using mouseX position
function draw() {
    background(220);

    //diplay image
    image(img, 0, 0, width, height);

    //constrain mouseX position to canvas and change diamter of circles according to mouseX position
    var mousePosition = map(constrain(mouseX, 0, 280), 0, width, 0, 20);
    //create circles
    for(var row = 0; row < 32; row++) {
        for(var col = 0; col <= 48; col++){
            var x = col * 10;
            var y = row * 10;
            //sample pixel color
            var sampleColor = img.get(x*15, y*15);
            noStroke();
            fill(sampleColor);
            //draw circle
            circle(x + 10, y + 10, mousePosition); 
        }
    }
}

I wanted to create a portrait that would get pixelated as you moved the mouse from left to right. It was cool to see it become stylized, almost like I was applying a filter to the image.

project 09 sketch copy

var compportraitImg;

function preload() {
    ImageURL = "https://i.imgur.com/ZTxOcmt.jpg";
    compportraitImg = loadImage(ImageURL);
}

function setup() {
    // canvas proportional to image size
    createCanvas(400, 480);
    compportraitImg.loadPixels();
    background(220);
    frameRate(300);

}

function draw() {
    //have the correct color show at right location 
    var kx = floor(random(compportraitImg.width));
    var ky = floor(random(compportraitImg.height));
    var colorLoc = compportraitImg.get(kx, ky);
    noStroke();
    fill(colorLoc);

    //scale to size of canvas
    x = map(kx, 0, compportraitImg.width, 0, width);
    y = map(ky, 0, compportraitImg.height, 0, height);
    var j = dist(width/2, height/2, x, y);
    j = j % 20;
    bubble(x, y, j, 4);

}

function bubble(x, y, radius, npoints) {
  angle = PI / npoints;
  
  beginShape();
  for (let a = 0; a < PI; a += angle) {
      sx = x + cos(a) * radius;
      sy = y + sin(a) * radius;
      vertex(x + cos(a) * radius, y + sin(a) * radius);
  }
  endShape();
  
}

I made my “custom pixel” in the shape of half of a hexagon and made it such that they populate the canvas in a circle pattern and leave some of the background peeking through.

/*Name:Camellia(Siyun) Wang; 
Section: C; 
Email Address: siyunw@andrew.cmu.edu;*/

https://imgur.com/qOtkTrJ
var img;
var i = 0;
var a = 0;

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

function setup(){
    createCanvas(380, 480);
    background(0);
    img.resize(380, 480);//resize the image to fit into canvas
    img.loadPixels();
}
//based on the example code
/*function draw(){
    var sw = map(mouseX, 0, width, 1, 5);//
    var x = random(img.width); //randomly select pixels of the image
    var y = random(img.height);
    var pointColor = img.get(x, y); //select the color of the chosen pixel
    stroke(pointColor); 
    strokeWeight(sw);
    line(x,y,x+5,y);
}*/

//based on the simple nested loop logic
/*function draw(){
    var i = random ()
    pointColor = img.get(i, a);
    noStroke();
    fill(pointColor);
    ellipse(i,a,random(1,5),random(3,7));
    i += 5;
    if(i >= 380){
        a += 5;
        i = 0;
    }
}*/

//based on spiral motion
var angle = 0;
var radius = 0;
var r = 6.2; 

function draw() {
    var center_x = width / 2;
    var center_y = height / 2;
    var x = radius *cos(radians(angle));
    var y = radius *sin(radians(angle));
    pointColor = img.get(width/ 2+x, height/2+y);
    //pick color of the chosen pixel from the center of the image 
    //picking in spiral motion which corresponds to the sipral motion of the drawn ellipses
    push();
    //translate the canvas to draw the spiral from the center outwards
    translate(center_x, center_y);
    noStroke();
    fill(pointColor);
    circle(x, y, r);
    radius += 0.1;
    angle += 5;
    r += 0.01;
    pop();
}
   

I started this project with duplicating the example code, then I used the nested loop logic to do the second trial. However, the way this portrait was drawn did not seem interesting enough, since there’s no change in motion and each drawn square. Therefore, I changed the drawing logic to the spiral motion. In this way, the portrait is drawn from the center in gradually amplifying ellipses, so that the final piece has a clearer shape of face in the center and blurry periphery.

var babyImg;
var adj;

function preload() {
  babyImg = loadImage("https://i.imgur.com/9bQND1O.jpg"); 
  adj = ["cute", "baby", "adorable", "sweet", "lovely", "endearing", "tiny", "cutesy", "kawaii"];
  print(adj); //adjectives that describe the baby
}

function setup() {
  createCanvas(480, 480);
  babyImg.resize(480, 480); //resize the scale of the image to fit the canvas
  background(0);
  imageMode(CENTER); //positioning the image as center
  babyImg.loadPixels(); //loading the adjectives of the baby image
}

function draw() {
  var px = floor(random(babyImg.width)); //randomly select pixels of the image
  var py = floor(random(babyImg.height));
  var pc = babyImg.get(px, py); //bring the color of the chosen pixel
  fill(pc, 255); 
  textSize(12);
  textFont('Georgia');
  text(adj[Math.floor((Math.random()*adj.length))], px, py);
}

While exploring through Imgur in search of images, I found an adorable photo of a smiling baby and I was able to come up with many different adjectives (e.g. cute, adorable, sweet, lovely, etc.) when I first saw this baby. I decided to apply this thought to the project by using the words to render and display this image. It was absolutely delightful watching the rendering process of this cute baby image.

I started off by playing with different shapes and ways to depict the image. Here are some of the variations I tried.

The variation I chose drew the image with randomly bouncing particles. When pressing a key, the color of the particles would be rainbow. When pressing the mouse, larger, black particles moved around the page to act as “erasers”.

sketch

//Alana Wu
//ID: alanawu
//Project 09

var img;
var balls = [];
var ballNum = 15;
function preload()
{
    img = loadImage ("https://i.imgur.com/2U02mf4.jpg");
}

function makeBall (ax, ay, adx, ady)
{
    var a = {
        x: ax,
        y: ay,
        dx: adx,
        dy: ady,
        dirX: 1,
        dirY: -1,
        stepFunction: moveBall,
        drawFunction: drawBall
    }
    return a;
}

function moveBall ()
{
    //bounce off of walls
    if (this.x >= 338 || this.x <= 0)
    {
        this.dirX *= -1;
    }
    if (this.y >= 400 || this.y <=0)
    {
        this.dirY *= -1;
    }
    this.x += this.dx*this.dirX + random(-3, 3);
    this.y += this.dy*this.dirY + random(-3, 3);
}

function drawBall ()
{
//color of ball = pixel from image in that location
    var col = img.get(this.x, this.y);
    fill (col);
//when key is pressed, taste the rainbow :) 
    if (keyIsPressed) 
    {
        fill (random(255), random(255), random(255));
    }
//draws balls
    circle (this.x, this.y, 5, 5);

//when mouse is pressed, black jittery particles that act as erasers
    if (mouseIsPressed)
    {
        fill (0);
        circle (this.x + random(40), this.y + random(40), 20);
    }
}

function setup()
{
    createCanvas(338, 400);
    background(0);
    noStroke();
//fits image to canvas size
    img.resize(width, height);
//makes objects for each ball
    for (var i = 0; i < ballNum; i++)
    {
        a = makeBall (0,0, random(5), random(5));
        balls.push(a);
    }
}

function draw()
{
    for (var i = 0; i < balls.length; i++)
    {
        balls[i].drawFunction();
        balls[i].stepFunction();    
    }
}










//other shapes and ideas I played with, but didn't use


function ripple2 (size)
{
    for (var x = 0; x < size; x+=5)
    {
        for (var y = 0; y < size; y+=5)
        {
            fill (0);
            circle (mouseX + x + 8, mouseY + y + 8, 5);
            circle(mouseX - x + 8, mouseY - y + 8, 5);
        }
    }

    for (var x = 0; x < size; x+=5)
    {
        for (var y = 0; y < size; y+=5)
        {
            var col = img.get(mouseX + x,mouseY +y);
            fill(col);
            circle (mouseX + x, mouseY + y, 5);
            var col2 = img.get(mouseX - x, mouseY - y);
            fill (col2);
            circle(mouseX - x, mouseY - y, 5);
        }
    }
}


function shape1 (x, y, dx, dy) //diagonal lines
{
    for (var y = 0; y < height; y += dy)
    {
        for (var x = 0; x < width; x += dx)
        {
            var col = img.get(x, y);
            strokeWeight (mouseX/100);
            stroke (col);
            line (x, y, x + dx, y + dy);
        }        
    }
}

function shape2 (x, y, size) //circles, animated if w/ random
{
    for (var y = 0; y < height; y += size)
    {
        for (var x = 0; x < width; x += size)
        {
            var col = img.get(x, y);
            fill(col);
            circle (x, y, size);
        }        
    }
}

function shape3 (x, y, w, h) //moving ellipse in a ripple effect
{
    for (var y = 0; y < height; y += h)
    {
        for (var x = 0; x < width; x += 15)
        {
            var col = img.get(x, y);
            fill(col);
            ellipse (x, y, random(35), h);
        }        
    }

}

function shape4 (x, y, size) //triangles that slowly get bigger along the diagonal
{
    for (var y = 0; y < height; y += size/3)
    {
        for (var x = 0; x < width; x += size)
        {
            var col = img.get(x, y);
            fill(col);
            triangle (x, y, x + size, y + size, x - size, y + size);
        } 
        size += size/10;              
    }

}

function ripple ()
{
    var x = 0;
    var y = 0;
    var r = 5;
    push();
    for (var j = 0; j < count; j++)
    {
        for (var i = 0; i < count; i++)
        {
            x = r*cos(radians(i*200));
            y = r*sin(radians(i*200));
            var col = img.get(mouseX + x, mouseY + y);
            fill (col); 
            circle (mouseX + x, mouseY + y, 5, 5);
        } 
        r += 5; 
    }
    pop();

}

function drawIt () //uncovers image w/ mouse location
{
    var col = img.get(mouseX, mouseY);
    fill (col);
    circle (mouseX, mouseY, 15, 15);
}