Category: Project-09-Portrait

/*
 * Eric Zhao
 * ezhao2
 *
 * Computational portrait that "draws" an image using
 * an existing image. Clicking the mouse changes the 
 * orientation of the randomly drawn rectangles in 
 * relation to the center.
 */

let img;
let smallPoint, largePoint;
let rotated = false;

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

function setup() {
    createCanvas(400, 600);
    axisShort = 10;
    axisLong = 30;
    imageMode(CENTER);
    rectMode(CENTER);
    noStroke();
    background(255);
    img.loadPixels();
}

function draw() {
    push();
    cursorX = constrain(mouseX, 0, width);
    cursorY = constrain(mouseY, 0, height);
    let pointillizeX = map(mouseX, 0, width, axisLong/2, axisLong);
    let pointillizeY = map(mouseX, 0, width, axisShort/2, axisShort);
    //changes width and length of rectangles drawn based on mouse position
    let x = floor(random(img.width));
    let y = floor(random(img.height));
    let pix = img.get(x, y);
    fill(pix, 128);

    //orients rectangles around center of canvas
    translate(width/2, height/2);
    x = x-width/2;
    y = y-height/2;
    rotate(atan2(y, x));
    if(rotated == true){
        rect(dist(x, y, 0, 0), 0,
            pointillizeY, pointillizeX, pointillizeY/2);
    } else {
        rect(dist(x, y, 0, 0), 0, 50,
                pointillizeY, pointillizeY/2);
    }
    pop();
}

function mousePressed(){
    //slightly greys out existing composition 
    push();
    fill(255, 192);
    rect(width/2, height/2, width, height);
    pop();
    //changes rectangle orientation b/t parallel and perpendicular
    switch(rotated){
        case true:
            rotated = false;
            print(rotated);
            break;
        case false:
            rotated = true;
            print(rotated);
            break;
    }
}

I wanted to see if there was a way to unify the pointillism example code to make the developing composition feel more cohesive. My portrait draws random strokes (rounded rectangles) of varying width and height based on the mouse position, all oriented towards the center of the canvas. Clicking on the canvas causes the underlying content to be slightly greyed out and the orientation of the rectangles will change (from the short side facing the center to the long side facing the center and vice versa).

Picture is of my friend trying to be fancy while drinking bagged Earl Grey tea, a very unfancy beverage.

var myImg;

function preload() {
    var ImgURL = "https://i.imgur.com/6nqYPHi.jpg";
    myImg = loadImage(ImgURL);
}

function setup() {
    createCanvas(400, 400);
    background(0);
    myImg.resize(400, 400);
    myImg.loadPixels();
}

function draw() {
    //randomize positions of pixels and get color from image
    var x = floor(random(myImg.width));
    var y = floor(random(myImg.height));
    fill(myImg.get(x, y));
    pixel(x, y);

    //also draw pixels following mouse movement
    fill(myImg.get(mouseX, mouseY));
    pixel(mouseX, mouseY);
}

function pixel(x, y) {
    //custom star pixel
    push();
    noStroke();
    translate(x, y);
    //add random scale and rotation to each pixel drawn
    scale(random(.15, 1.85));
    rotate(random(radians(-90, 90)));
    beginShape();
    vertex(0, -5.39);
    vertex(1.55, -2.26);
    vertex(5, -1.75);
    vertex(2.5, 0.68);
    vertex(3.09, 4.12);
    vertex(0, 2.5);
    vertex(-3.09, 4.12);
    vertex(-2.5, 0.68);
    vertex(-5, -1.75);
    vertex(-1.55, -2.26);
    endShape(CLOSE);
    pop();
}

function mousePressed() {
    //reset the canvas to random color
    background(color(random(255), random(255), random(255)));
}

For my project, I chose a photo that my friend took of me at an art gallery installation called “Paraiso” in New York City. The installation consisted of a room with mirrors and many strings of stars hanging from the ceiling. I enjoyed seeing this artwork and wanted to reflect the stars and range of colors in the photo in my portrait, so I practiced using custom shapes to create a star-shaped pixel. To make the portrait more dynamic, I made the pixels to be randomly scaled and rotated. I also coded it so that the star pixels are drawn following the user’s mouse position. When the user clicks on the canvas, it resets to a random color.

https://editor.p5js.org/ssahasra/sketches/iaWwhg-Q2

“The painting has a life of its own. I try to let it come through.It doesn’t make much difference how the paint is put on as long as something has been said. Technique is just a means of arriving at a statement.Every good painter paints what he is.”

– Jackson Pollock

While this quote from Jackson Pollock’s celebrates a dynamic and ad-hoc approach to painting, this week’s Project was about understanding the technique even though the motion of particles and elements seems random. However, it is enjoyable to see how the code breathes life into the composition.portrait.

The project this week was an opportunity to merge different techniques from the p5.js toolkit. Mainly the two topics that I combined was “Particles” and “Images”.

I started off by experimenting with different parts of the Particles code from the in-class examples, to see how the behavior of particles changes and affects the composition. For reference, I set the image in the backdrop so that I could see the relative positions of the image in the canvas.

I used Daniel Shiffman’s tutorials to guide my process and used the steps he proposes to create code that gradually reveals the image through the scattering and random motion of particles. I used 200 particles, to create a play of “hide” and “reveal in the image.

One important thing I learnt is scaling the image correctly so that its scale aligns with the canvas created in the setup function.

Also, constraining the size of the particles and choosing the right variations contributes to a good computational portrait. For example, I ensured that the size of my particles lies between 1, 20 – if they were too big it would be harder to see what image is being rendered, but at the same time, they also do create a dramatic effect.

function Particle(x, y) {
  this.x = x;
  this.y = y;
  this.r = random(1, 20);

As you see in the images above, I played with color value, particle size and mouse Interactions to show different textures of grain, contrast and color value in the portrait. I also used mouse Interactions to change the background so a viewer can notice the particles and how the interact.

//code citation reference
//Daniel Shiffman's Painting with Pixels:
//https://www.youtube.com/watch?v=0V3uYA1hafk&ab_channel=TheCodingTrain

var p = 2000;

var particles = [];




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

function setup() {
  createCanvas(400, 400);
  pixelDensity(1);
  //image = createCapture(img); //??
  //image.size(width / vScale, height / vScale); //??
  for (var i = 0; i 



This portrait project taught me a lot, and I was able to strategize my process much better than before. With more time, I would like to experiment with this same image using Brownian motion and a random walk of a particle.